Function toDOMRange

packages/editor/src/plugin/editable.ts:472–494

* Find a native DOM range from a Editor `range`. * * Notice: the returned range will always be ordinal regardless of the direction of Editor `range` due to DOM API limit. * * there is no way to create a reverse DOM Range using Range.setStart/setEnd * according to https://dom.spec.what

(editor: Editor, range: Range)

   * according to https://dom.spec.whatwg.org/#concept-range-bp-set.
   */
  toDOMRange(editor: Editor, range: Range): DOMRange {
    const { anchor, focus } = range
    const isBackward = Range.isBackward(range)
    const domAnchor = Editable.toDOMPoint(editor, anchor)
    const domFocus = Range.isCollapsed(range) ? domAnchor : Editable.toDOMPoint(editor, focus)

    const window = Editable.getWindow(editor)
    const domRange = window.document.createRange()
    const [startNode, startOffset] = isBackward ? domFocus : domAnchor
    const [endNode, endOffset] = isBackward ? domAnchor : domFocus

    // A editor Point at zero-width Leaf always has an offset of 0 but a native DOM selection at
    // zero-width node has an offset of 1 so we have to check if we are in a zero-width node and
    // adjust the offset accordingly.
    const startEl = (isDOMElement(startNode) ? startNode : startNode.parentElement) as HTMLElement
    const isStartAtZeroWidth = !!startEl.getAttribute(DATA_EDITABLE_ZERO_WIDTH)
    const endEl = (isDOMElement(endNode) ? endNode : endNode.parentElement) as HTMLElement
    const isEndAtZeroWidth = !!endEl.getAttribute(DATA_EDITABLE_ZERO_WIDTH)

    domRange.setStart(startNode, isStartAtZeroWidth ? 1 : startOffset)
    domRange.setEnd(endNode, isEndAtZeroWidth ? 1 : endOffset)
    return domRange
  },

  /**
   * Find a Editor node from a native DOM `element`.