add text strategy

Author: jivey

src/SerializedHighlight.ts

@@ -4,7 +4,7 @@ import { getContentPath } from './contentPath';
 import Highlight, { IHighlightData } from './Highlight';
 import Highlighter from './Highlighter';
 import { getDeserializer, IDeserializer, ISerializationData } from './serializationStrategies';
-import { discriminator as xPathDiscriminator, serialize as defaultSerializer } from './serializationStrategies/XpathRangeSelector';
+import { serialize as defaultSerializer } from './serializationStrategies/XpathRangeSelector';
 
 const mapKeys = (transform: (key: string) => string, obj: {[key: string]: any}) => Object.keys(obj).reduce((result, key) => ({
   ...result, [transform(key)]: obj[key],
@@ -86,9 +86,7 @@ export default class SerializedHighlight {
 
     let contentPath: number[] | undefined;
 
-    if (serializationData.type === xPathDiscriminator) {
-      contentPath = getContentPath({ referenceElementId, ...serializationData }, highlighter);
-    }
+    contentPath = getContentPath({ referenceElementId, ...serializationData }, highlighter);
 
     if (!style) {
       throw new Error('a style is requred to create an api payload');

src/contentPath.test.ts

@@ -1,60 +1,90 @@
 import { getContentPath } from './contentPath';
 import Highlighter from './Highlighter';
 import { adjacentTextSections } from './injectHighlightWrappers.spec.data';
-import { IData } from './serializationStrategies/XpathRangeSelector';
+import { IData as TextPositionData } from './serializationStrategies/TextPositionSelector';
+import { IData as XpathRangeData } from './serializationStrategies/XpathRangeSelector';
 
 describe('getContentPath', () => {
-  it('creates a path of indexes', () => {
-    document.body.innerHTML = `<div id="page">${adjacentTextSections}</div>`;
-
-    const container = document.getElementById('page')!;
-    const highlighter = new Highlighter(container, { formatMessage: jest.fn() });
-
-    const result = getContentPath(
-      {
-        referenceElementId: 'test-container',
-        // tslint:disable-next-line quotemark
-        startContainer: "./*[name()='section'][1]/*[name()='div'][1]/*[name()='p'][1]/text()[1]",
-        startOffset: 4,
-      } as IData,
-      highlighter
-    );
-
-    expect(result).toEqual([3, 1, 1, 0, 4]);
-  });
+  describe('with XpathRangeSelector type', () => {
+    it('creates a path of indexes', () => {
+      document.body.innerHTML = `<div id="page">${adjacentTextSections}</div>`;
+
+      const container = document.getElementById('page')!;
+      const highlighter = new Highlighter(container, { formatMessage: jest.fn() });
+
+      const result = getContentPath(
+        {
+          referenceElementId: 'test-container',
+          // tslint:disable-next-line quotemark
+          startContainer: "./*[name()='section'][1]/*[name()='div'][1]/*[name()='p'][1]/text()[1]",
+          startOffset: 4,
+          type: 'XpathRangeSelector',
+        } as XpathRangeData,
+        highlighter
+      );
+
+      expect(result).toEqual([3, 1, 1, 0, 4]);
+    });
 
-  it('handles adjacent text highlights', () => {
-    document.body.innerHTML = `<div id="page">
+    it('handles adjacent text highlights', () => {
+      document.body.innerHTML = `<div id="page">
       <div id="test-container">
-      <p id="test-p">
-        <span data-highlighted>A shortcut called</span> FOIL is sometimes used to find the product of two binomials.
+        <p id="test-p">
+          <span data-highlighted>A shortcut called</span> FOIL is sometimes used to find the product of two binomials.
         </p>
       </div>
-    </div>`;
-
-    const container = document.getElementById('test-container')!;
-    const highlighter = new Highlighter(container, { formatMessage: jest.fn() });
-
-    const range: any = {
-      collapse: false,
-      commonAncestorContainer: container,
-      endContainer: './text()[1]',
-      endOffset: 31,
-      setEndAfter: jest.fn(),
-      setStartBefore: jest.fn(),
-      startContainer: './text()[1]',
-      startOffset: 27,
-    };
-
-    const result = getContentPath(
-      {
-        referenceElementId: 'test-p',
-        startContainer: range.startContainer,
-        startOffset: range.startOffset,
-      } as IData,
-      highlighter
-    );
-
-    expect(result).toEqual([0, 27]);
+      </div>`;
+
+      const container = document.getElementById('test-container')!;
+      const highlighter = new Highlighter(container, { formatMessage: jest.fn() });
+
+      const range: any = {
+        collapse: false,
+        commonAncestorContainer: container,
+        endContainer: './text()[1]',
+        endOffset: 31,
+        setEndAfter: jest.fn(),
+        setStartBefore: jest.fn(),
+        startContainer: './text()[1]',
+        startOffset: 27,
+      };
+
+      const result = getContentPath(
+        {
+          referenceElementId: 'test-p',
+          startContainer: range.startContainer,
+          startOffset: range.startOffset,
+          type: 'XpathRangeSelector',
+        } as XpathRangeData,
+        highlighter
+      );
+
+      expect(result).toEqual([0, 27]);
+    });
+  });
+
+  describe('with TextPositionSelector type', () => {
+    it('returns a simplified path and offset', () => {
+      document.body.innerHTML = `<div id="page">
+      <div id="test-container">
+        A shortcut called FOIL is sometimes used to find the product of two binomials.
+      </div>
+      </div>`;
+
+      const container = document.getElementById('page')!;
+      const highlighter = new Highlighter(container, { formatMessage: jest.fn() });
+
+      const result = getContentPath(
+        {
+          end: 11,
+          referenceElementId: 'test-container',
+          start: 3,
+          type: 'TextPositionSelector',
+        } as TextPositionData,
+        highlighter
+      );
+
+      expect(result).toEqual([0, 3]);
+    });
   });
 });

src/contentPath.ts

@@ -1,8 +1,14 @@
 import Highlighter from './Highlighter';
-import { IData } from './serializationStrategies/XpathRangeSelector';
+import { IData as TextPositionData } from './serializationStrategies/TextPositionSelector';
+import { IData as XpathData } from './serializationStrategies/XpathRangeSelector';
 import { getFirstByXPath, isText, isTextHighlightOrScreenReaderNode } from './serializationStrategies/XpathRangeSelector/xpath';
 
+type IData = XpathData | TextPositionData;
+
 export function getContentPath(serializationData: IData, highlighter: Highlighter) {
+  if (serializationData.type === 'TextPositionSelector') {
+    return [0, serializationData.start];
+  }
 
   const referenceElement = highlighter.getReferenceElement(serializationData.referenceElementId);
   if (!referenceElement) { return; }