Merge pull request #39 from alienzhou/fix_only-root-node

fix(serialize&deSerialize): getting the parent node will occur errors…

Author: alienzhou

package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-highlighter",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "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",

src/model/range/dom.ts

@@ -2,7 +2,7 @@
  * some dom operations about HighlightRange
  */
 
-import {CAMEL_DATASET_IDENTIFIER} from '@src/util/const';
+import {CAMEL_DATASET_IDENTIFIER, ROOT_IDX, UNKNOWN_IDX} from '@src/util/const';
 import {DomMeta} from '@src/types';
 
 const countGlobalNodeIndex = ($node: Node, $root: Document | HTMLElement): number => {
@@ -13,7 +13,7 @@ const countGlobalNodeIndex = ($node: Node, $root: Document | HTMLElement): numbe
             return i;
         }
     }
-    return -1;
+    return UNKNOWN_IDX;
 };
 
 /**
@@ -65,7 +65,9 @@ const getOriginParent = ($node: Text | HTMLElement): HTMLElement => {
 
 export const getDomMeta = ($node: Text | HTMLElement, offset: number, $root: Document | HTMLElement): DomMeta => {
     const $originParent = getOriginParent($node);
-    const index = countGlobalNodeIndex($originParent, $root);
+    const index = $originParent === $root
+        ? ROOT_IDX
+        : countGlobalNodeIndex($originParent, $root);
     const preNodeOffset = getTextPreOffset($originParent, $node);
     const tagName = $originParent.tagName;
 

src/model/source/dom.ts

@@ -1,10 +1,11 @@
 import {DomNode} from '@src//types';
 import HighlightSource from './index';
+import {ROOT_IDX} from '@src/util/const';
 
 /**
- * Because of supporting highligting a same area (range overlapping), 
+ * Because of supporting highlighting a same area (range overlapping), 
  * Highlighter will calculate which text-node and how much offset it actually be,
- * baseed on the origin website dom node and the text offset.
+ * based on the origin website dom node and the text offset.
  * 
  * @param {Node} $parent element node in the origin website dom tree
  * @param {number} offset text offset in the origin website dom tree
@@ -52,8 +53,11 @@ export const queryElementNode = (
     hs: HighlightSource,
     $root: HTMLElement | Document
 ): {start: Node, end: Node} => {
-    return {
-        start: $root.getElementsByTagName(hs.startMeta.parentTagName)[hs.startMeta.parentIndex],
-        end: $root.getElementsByTagName(hs.endMeta.parentTagName)[hs.endMeta.parentIndex],
-    };
+    const start = hs.startMeta.parentIndex === ROOT_IDX
+        ? $root
+        : $root.getElementsByTagName(hs.startMeta.parentTagName)[hs.startMeta.parentIndex];
+    const end = hs.endMeta.parentIndex === ROOT_IDX
+        ? $root
+        : $root.getElementsByTagName(hs.endMeta.parentTagName)[hs.endMeta.parentIndex];
+    return { start, end };
 };

src/util/const.ts

@@ -35,3 +35,6 @@ export const STYLESHEET_TEXT = `
         background: #ffb;
     }
 `;
+
+export const ROOT_IDX = -2;
+export const UNKNOWN_IDX = -1;