diff --git a/src/TextAnnotator.jsx b/src/TextAnnotator.jsx index 70d46a5..f08aeba 100644 --- a/src/TextAnnotator.jsx +++ b/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 && { 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({ diff --git a/src/editor/setPosition.js b/src/editor/setPosition.js index e31213e..907baab 100644 --- a/src/editor/setPosition.js +++ b/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`; diff --git a/src/selection/SelectionHandler.js b/src/selection/SelectionHandler.js index 67d3bf3..b3f29d7 100644 --- a/src/selection/SelectionHandler.js +++ b/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 }); } }