Merge pull request #8 from recogito/PR-5

Fixes/revisions to original PR#5

Author: rsimon

.gitignore

@@ -1,5 +1,6 @@
 .vscode
+.idea
 dist
 node_modules
 **/config.json
-.DS_Store
+.DS_Store

packages/text-annotator/src/SelectionHandler.ts

@@ -24,9 +24,8 @@ export const rangeToSelector = (range: Range, container: HTMLElement, offsetRefe
 }
 
 export const SelectionHandler = (
-  container: HTMLElement, 
+  container: HTMLElement,
   state: TextAnnotatorState,
-  // Experimental
   offsetReferenceSelector?: string
 ) => {
 
@@ -47,7 +46,7 @@ export const SelectionHandler = (
       return;
 
     // Make sure we don't listen to selection changes that
-    // were not started on the container, or which are not supposed to 
+    // were not started on the container, or which are not supposed to
     // be annotatable (like the popup)
     const annotatable = !(evt.target as Node).parentElement.closest('.not-annotatable');
     if (annotatable) {
@@ -72,7 +71,7 @@ export const SelectionHandler = (
     debounceTimer = setTimeout(() => onSelectionChange(), 50);
   });
 
-  const onSelectionChange = () => { 
+  const onSelectionChange = () => {
     const sel = document.getSelection();
 
     if (!sel.isCollapsed && isLeftClick && currentTarget) {
@@ -89,7 +88,7 @@ export const SelectionHandler = (
           ...currentTarget,
           selector: rangeToSelector(ranges[0], container, offsetReferenceSelector)
         };
-    
+
         if (store.getAnnotation(currentTarget.annotation)) {
           store.updateTarget(currentTarget, Origin.LOCAL);
         } else {
@@ -129,13 +128,13 @@ export const SelectionHandler = (
 
         currentTarget = null;
         lastPointerEvent = undefined;
-      } else {            
+      } else {
         const { x, y } = container.getBoundingClientRect();
-        
+
         const hovered = store.getAt(evt.clientX - x, evt.clientY - y);
         if (hovered) {
           const { selected } = selection;
-          
+
           if (selected.length !== 1 || selected[0].id !== hovered.id) {
             selection.clickSelect(hovered.id, evt);
             lastPointerEvent = undefined;
@@ -151,4 +150,4 @@ export const SelectionHandler = (
     setUser
   }
 
-}
+}

packages/text-annotator/src/model/TextAnnotation.ts

@@ -24,4 +24,4 @@ export interface TextSelector {
 
   offsetReference?: HTMLElement
 
-}
+}

packages/text-annotator/src/state/reviveTarget.ts

@@ -11,7 +11,7 @@ export const reviveTarget = (
   target: TextAnnotationTarget, 
   container: HTMLElement
 ): TextAnnotationTarget => {  
-  const { quote, start, end } = target.selector;
+  const { start, end } = target.selector;
 
   const offsetReference = target.selector.offsetReference ? target.selector.offsetReference : container;
   if (!offsetReference)
@@ -65,9 +65,6 @@ export const reviveTarget = (
     ...target,
     selector: { 
       ...target.selector,
-      quote, 
-      start, 
-      end, 
       range
     }
   }

packages/text-annotator/src/utils/getContext.ts

@@ -0,0 +1,31 @@
+export const getContext = (
+  range: Range, 
+  container: HTMLElement, 
+  length = 10,
+  offsetReferenceSelector?: string
+) => {
+  const offsetReference: HTMLElement = offsetReferenceSelector
+    ? (range.startContainer.parentElement as HTMLElement).closest(offsetReferenceSelector)
+    : container;
+
+  const rangeBefore = document.createRange();
+  rangeBefore.setStart(offsetReference, 0);
+  rangeBefore.setEnd(range.startContainer, range.startOffset);
+
+  const before = rangeBefore.toString();
+  
+  const rangeAfter = document.createRange();
+  rangeAfter.setStart(range.endContainer, range.endOffset);
+
+  if (offsetReference === document.body)
+    rangeAfter.setEnd(offsetReference, offsetReference.childNodes.length);
+  else
+    rangeAfter.setEndAfter(offsetReference);
+
+  const after = rangeAfter.toString();
+
+  return {
+    prefix: before.substring(before.length - length),
+    suffix: after.substring(0, length)
+  }
+}