Internal API change: keep ref to selected DOM node, not just bounds

src/TextAnnotator.jsx

@@ -15,8 +15,8 @@ addPolyfills(); // For Microsoft Edge
 export default class TextAnnotator extends Component {
 
   state = {
-    selectionBounds: null,
     selectedAnnotation: null,
+    selectedDOMElement: null,
     selectedRelation: null,
 
     applyTemplate: null,
@@ -26,8 +26,8 @@ export default class TextAnnotator extends Component {
   /** Shorthand **/
   clearState = () => {
     this.setState({
-      selectionBounds: null,
-      selectedAnnotation: null
+      selectedAnnotation: null,
+      selectedDOMElement: null
     });
   }
 
@@ -62,14 +62,14 @@ export default class TextAnnotator extends Component {
 
   /** Selection on the text **/
   handleSelect = evt => {
-    const { selection, clientRect } = evt;
+    const { selection, element } = evt;
     if (selection) {
       this.setState({
         selectedAnnotation: null,
-        selectionBounds: null
+        selectedDOMElement: null
       }, () => this.setState({
         selectedAnnotation: selection,
-        selectionBounds: clientRect
+        selectedDOMElement: element
       }))
     } else {
       this.clearState();
@@ -264,8 +264,8 @@ export default class TextAnnotator extends Component {
         { this.state.selectedAnnotation &&
           <Editor
             wrapperEl={this.props.wrapperEl}
-            bounds={this.state.selectionBounds}
             annotation={this.state.selectedAnnotation}
+            selectedElement={this.state.selectedDOMElement}
             readOnly={this.props.readOnly}
             headless={this.state.headless}
             applyTemplate={this.state.applyTemplate}

src/editor/Editor.jsx

@@ -39,8 +39,8 @@ const Editor = props => {
       props.onAnnotationCreated(annotation.toAnnotation());
 
     if (element.current)
-      setPosition(props.wrapperEl, element.current, props.bounds);
-  }, [ props.bounds ]);
+      setPosition(props.wrapperEl, element.current, props.selectedElement);
+  }, [ props.selectedElement ]);
 
   const onAppendBody = body => setCurrentAnnotation(
     currentAnnotation.clone({ 

src/editor/setPosition.js

@@ -1,5 +1,5 @@
 /** Sets the editor position and determines a proper orientation **/
-const setPosition = (wrapperEl, editorEl, annotationBounds) => {
+const setPosition = (wrapperEl, editorEl, selectedEl) => {
   // Container element offset
   const containerBounds = wrapperEl.getBoundingClientRect();
   const { scrollX, scrollY } = window;
@@ -11,7 +11,7 @@ const setPosition = (wrapperEl, editorEl, annotationBounds) => {
   editorEl.style.opacity = 1;
 
   // Default orientation
-  const { left, top, right, height } = annotationBounds;
+  const { left, top, right, height } = selectedEl.getBoundingClientRect();
   editorEl.style.top = `${top + height - containerBounds.top}px`;
   editorEl.style.left = `${left + scrollX - containerBounds.left}px`;
 

src/selection/SelectionHandler.js

@@ -41,7 +41,7 @@ export default class SelectionHandler extends EventEmitter {
         if (annotationSpan) {
           this.emit('select', {
             selection: this.highlighter.getAnnotationsAt(annotationSpan)[0],
-            clientRect: annotationSpan.getBoundingClientRect()
+            element: annotationSpan
           });
         } else {
           // De-select
@@ -51,8 +51,6 @@ export default class SelectionHandler extends EventEmitter {
         const selectedRange = trimRange(selection.getRangeAt(0));
         const stub = rangeToSelection(selectedRange, this.el);
 
-        const clientRect = selectedRange.getBoundingClientRect();
-
         const spans = this.highlighter.wrapRange(selectedRange);
         spans.forEach(span => span.className = 'r6o-selection');
 
@@ -60,7 +58,7 @@ export default class SelectionHandler extends EventEmitter {
 
         this.emit('select', {
           selection: stub,
-          clientRect
+          element: selectedRange
         });
       }
     }