feat(hook): add the restore hook for deserializing

alienzhou · Mar 28, 2020 · e182f0f · e182f0f
1 parent 32e596f
commit e182f0f
Show file tree

Hide file tree

Showing 13 changed files with 61 additions and 31 deletions.
diff --git a/docs/ADVANCE.md b/docs/ADVANCE.md
@@ -34,7 +34,7 @@ highlighter.hooks.Render.UUID.tap(function (start, end, text) {
 
 Hook into the process of generating a unique id.
 
-**arguements:**
+**arguments:**
 
 - start: DOM info of the start node
 - end: DOM info of the end node
@@ -48,7 +48,7 @@ Hook into the process of generating a unique id.
 
 Process all the text nodes in the highlighted area and return a new list by using this hook.
 
-**arguements:**
+**arguments:**
 
 - id: id of the highlighted area
 - selectedNodes: all the text nodes in the highlighted area
@@ -61,7 +61,7 @@ Process all the text nodes in the highlighted area and return a new list by usin
 
 Process the wrapping elements.
 
-**arguements:**
+**arguments:**
 
 - id: id of the highlighted area
 - node: the wrapping elements
@@ -70,11 +70,23 @@ Process the wrapping elements.
 
 - the wrapping elements
 
+### `Serialize.Restore`
+
+Customize your own restoring method. When you tap this hook, the `HighlightSource` instance will use the function you pass to calculate the start and end nodes' info.
+
+**arguments:**
+
+- hs: the current `HighlightSource` instance
+
+**return value needed:**
+
+- an array: the first element is the start info and the second is the end
+
 ### `Serialize.RecordInfo`
 
 Add or modify some extra info when serialize the `HighlightRange` object.
 
-**arguements:**
+**arguments:**
 
 - start: meta info of the start node
 - end: meta info of the end node
@@ -88,7 +100,7 @@ Add or modify some extra info when serialize the `HighlightRange` object.
 
 Process the affected wrapping elements when remove highlighted areas.
 
-**arguements:**
+**arguments:**
 
 - id: id of the highlighted area
 - nodes: the affected wrapping elements

diff --git a/docs/ADVANCE.zh_CN.md b/docs/ADVANCE.zh_CN.md
@@ -70,6 +70,18 @@ highlighter.hooks.Render.UUID.tap(function (start, end, text) {
 
 - 高亮包裹的节点
 
+### `Serialize.Restore`
+
+自定义你的还原（反序列化）方法。当你使用这个钩子时，`HighlightSource` 实例会调用你注册的方法来计算高亮选区的首尾节点信息。
+
+**参数:**
+
+- hs: 当前的 `HighlightSource` 实例
+
+**所需的返回值:**
+
+- 一个数组对象: 数组的第一个元素是选区开始的节点信息，第二个元素是结束的节点信息
+
 ### `Serialize.RecordInfo`
 
 为选区序列化时的持久化数据生成额外信息

diff --git a/docs/img/create-flow.jpg b/docs/img/create-flow.jpg
diff --git a/docs/img/create-flow.zh_CN.jpg b/docs/img/create-flow.zh_CN.jpg
diff --git a/docs/img/remove-flow.jpg b/docs/img/remove-flow.jpg
diff --git a/docs/img/remove-flow.zh_CN.jpg b/docs/img/remove-flow.zh_CN.jpg
diff --git a/example/index.js b/example/index.js
@@ -86,15 +86,25 @@ highlighter
  * attach hooks
  */
 highlighter.hooks.Render.SelectedNodes.tap(
-    (id, selectedNodes)  => selectedNodes.filter(n => n.$node.textContent)
+    (id, selectedNodes) => selectedNodes.filter(n => n.$node.textContent)
 );
 
+highlighter.hooks.Serialize.Restore.tap(
+    source =>  log('Serialize.Restore hook -', source)
+);
+
+highlighter.hooks.Serialize.RecordInfo.tap(() => {
+    const extraInfo = Math.random().toFixed(4);
+    log('Serialize.RecordInfo hook -', extraInfo)
+    return extraInfo;
+});
+
 /**
  * retrieve from local store
  */
 const storeInfos =  store.getAll();
 storeInfos.forEach(
-    ({hs}) => highlighter.fromStore(hs.startMeta, hs.endMeta, hs.text, hs.id)
+    ({hs}) => highlighter.fromStore(hs.startMeta, hs.endMeta, hs.text, hs.id, hs.extra)
 );
 
 let autoStatus;

diff --git a/example/local.store.js b/example/local.store.js
@@ -47,21 +47,6 @@ class LocalStore {
         this.jsonToStore(stores);
     }
 
-    get(id) {
-        const list = this.storeToJson()
-            .filter(store => store.hs.id === id)
-            .map(store => ({
-                hs: new HighlightSource(
-                    store.hs.startMeta,
-                    store.hs.endMeta,
-                    store.hs.text,
-                    store.hs.id
-                ),
-                info: store.info
-            }));
-        return list[0];
-    }
-
     remove(id) {
         const stores = this.storeToJson();
         let index = null;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "web-highlighter",
-  "version": "0.5.0",
+  "version": "0.6.0-beta.0",
   "description": "✨A no-runtime dependency lib for text highlighting & persistence on any website ✨🖍️",
   "main": "dist/web-highlighter.min.js",
   "browser": "dist/web-highlighter.min.js",

diff --git a/src/index.ts b/src/index.ts
@@ -54,6 +54,7 @@ export default class Highlighter extends EventEmitter {
             WrapNode: new Hook('Render.WrapNode')
         },
         Serialize: {
+            Restore: new Hook('Serialize.Restore'),
             RecordInfo: new Hook('Serialize.RecordInfo')
         },
         Remove: {
@@ -170,9 +171,9 @@ export default class Highlighter extends EventEmitter {
         return this._highlighFromHRange(hRange);
     }
 
-    fromStore = (start: DomMeta, end: DomMeta, text, id): HighlightSource => {
+    fromStore = (start: DomMeta, end: DomMeta, text: string, id: string, extra?: unknown): HighlightSource => {
         try {
-            const hs = new HighlightSource(start, end, text, id);
+            const hs = new HighlightSource(start, end, text, id, extra);
             this._highlighFromHSource(hs);
             return hs;
         }

diff --git a/src/model/source/index.ts b/src/model/source/index.ts
@@ -4,7 +4,7 @@
  * Also it has the ability for persistence.
  */
 
-import {DomMeta} from '../../types';
+import {DomMeta, HookMap, DomNode} from '../../types';
 import HighlightRange from '../range/index';
 import {queryElementNode, getTextChildByOffset} from './dom';
 
@@ -33,10 +33,19 @@ class HighlightSource {
         }
     }
 
-    deSerialize($root: HTMLElement | Document): HighlightRange {
-        const {start, end} = queryElementNode(this, $root);
-        const startInfo = getTextChildByOffset(start, this.startMeta.textOffset);
-        const endInfo = getTextChildByOffset(end, this.endMeta.textOffset);
+    deSerialize($root: HTMLElement | Document, hooks: HookMap): HighlightRange {
+        let startInfo: DomNode;
+        let endInfo: DomNode;
+        if (!hooks.Serialize.Restore.isEmpty()) {
+            const res = hooks.Serialize.Restore.call(this) || [];
+            startInfo = res[0];
+            endInfo = res[1];
+        }
+        if (!startInfo || !endInfo) {
+            const {start, end} = queryElementNode(this, $root);
+            startInfo = getTextChildByOffset(start, this.startMeta.textOffset);
+            endInfo = getTextChildByOffset(end, this.endMeta.textOffset);
+        }
 
         const range = new HighlightRange(
             startInfo,

diff --git a/src/painter/index.ts b/src/painter/index.ts
@@ -69,7 +69,7 @@ export default class Painter {
                 console.error(ERROR.SOURCE_TYPE_ERROR);
                 return;
             }
-            const range = s.deSerialize(this.options.$root);
+            const range = s.deSerialize(this.options.$root, this.hooks);
             const $nodes = this.highlightRange(range);
             if ($nodes.length > 0) {
                 renderedSources.push(s);

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -88,6 +88,7 @@ export type HookMap = {
         WrapNode: Hook;
     };
     Serialize: {
+        Restore: Hook;
         RecordInfo: Hook;
     };
     Remove: {