Fixed TEI XPath reviving bug

Author: rsimon

packages/extension-tei/src/crosswalk/forward.ts

@@ -1,10 +1,11 @@
 import { rangeToSelector, reviveTarget as reviveTextOffsetTarget } from '@recogito/text-annotator';
+import type { TEIAnnotation, TEIAnnotationTarget, TEIRangeSelector } from '../TEIAnnotation';
+import { reanchor } from './utils';
 import type { 
   TextAnnotation, 
   TextAnnotationTarget, 
   TextSelector
 } from '@recogito/text-annotator';
-import type { TEIAnnotation, TEIAnnotationTarget, TEIRangeSelector } from '../TEIAnnotation';
 
 /**
  * Helper: Returns the given XPath for a DOM node, in the form of 
@@ -145,8 +146,21 @@ export const reviveTarget = (t: TextAnnotationTarget, container: HTMLElement) =>
     const [endNode, endOffset] = evaluateSelector(endExpression);
 
     const range = document.createRange();
-    range.setStart(startNode.firstChild, startOffset);
-    range.setEnd(endNode.firstChild, endOffset);
+
+    // Helper
+    const reanchorIfNeeded = (parent: Node, offset: number) => {
+      if (parent.firstChild.toString().length >= offset) {
+        return { node: parent.firstChild, offset };
+      } else {
+        return reanchor(parent.firstChild, parent, offset);
+      } 
+    }
+
+    const reanchoredStart = reanchorIfNeeded(startNode, startOffset);
+    const reanchoredEnd = reanchorIfNeeded(endNode, endOffset);
+
+    range.setStart(reanchoredStart.node, reanchoredStart.offset);
+    range.setEnd(reanchoredEnd.node, reanchoredEnd.offset);
 
     const textSelector = rangeToSelector(range, container);
 

packages/extension-tei/src/crosswalk/reverse.ts

@@ -1,5 +1,6 @@
 import type { TextAnnotation, TextAnnotationTarget } from '@recogito/text-annotator';
 import type { TEIAnnotation, TEIAnnotationTarget, TEIRangeSelector } from '../TEIAnnotation';
+import { reanchor } from './utils';
 
 /**
  * Helper: converts the given XPath string and DOM container element
@@ -24,35 +25,8 @@ const xpathToDOMPosition = (path: string, container: Element) => {
 
   const offset = parseInt(path.substring(offsetIdx + 2));
 
-  const reanchor = (originalNode: Node, originalOffset: number) => {
-    let node = originalNode;
-
-    let offset = originalOffset;
-
-    const it = document.createNodeIterator(parentNode, NodeFilter.SHOW_TEXT);
-
-    let currentNode = it.nextNode();
-
-    let run = true;
-
-    do {
-      if (currentNode instanceof Text) {
-        if (currentNode.length < offset) {
-          offset -= currentNode.length;
-        } else {
-          node = currentNode;
-          run = false;
-        }
-      }
-
-      currentNode = it.nextNode();
-    } while (currentNode && run);
-
-    return { node, offset };
-  };
-
   if (!(node instanceof Text) || offset > node.length) {
-    return reanchor(node, offset);
+    return reanchor(node, parentNode, offset);
   } else {
     return { node, offset };
   }

packages/extension-tei/src/crosswalk/utils/index.ts

@@ -0,0 +1 @@
+export * from './reanchor';

packages/extension-tei/src/crosswalk/utils/reanchor.ts

@@ -0,0 +1,26 @@
+export const reanchor = (originalNode: Node, parentNode: Node, originalOffset: number) => {
+  let node = originalNode;
+
+  let offset = originalOffset;
+
+  const it = document.createNodeIterator(parentNode, NodeFilter.SHOW_TEXT);
+
+  let currentNode = it.nextNode();
+
+  let run = true;
+
+  do {
+    if (currentNode instanceof Text) {
+      if (currentNode.length < offset) {
+        offset -= currentNode.length;
+      } else {
+        node = currentNode;
+        run = false;
+      }
+    }
+
+    currentNode = it.nextNode();
+  } while (currentNode && run);
+
+  return { node, offset };
+};