How to use the slate-react.findDOMRange function in slate-react

To help you get started, we’ve selected a few slate-react examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github researchspace / researchspace / researchspace / web / src / main / components / text-annotation / components / TextAnnotationEditor.tsx View on Github external
private updateSelectionOffset(editor: Slate.Editor) {
    if (!this.sideline) {
      return;
    }
    const {start, end} = editor.value.selection;
    const range = Slate.Range.create({anchor: start, focus: end});
    // Return type in typings is wrong and should be Range, not Slate.Range:
    // https://docs.slatejs.org/slate-react/utils
    const domRange = findDOMRange(range) as any as Range;
    const rect = domRange.getBoundingClientRect();
    const selectionTop = rect.top + rect.height / 2;
    const sidelineTop = this.sideline.getBoundingClientRect().top;
    const selectionTopOffset = selectionTop - sidelineTop;
    this.setState({selectionTopOffset});
  }