Function getLineRectsByNode

packages/editor/src/utils/selection.ts:263–293

(editor: Editor, node: Node, minWidth = 4)

 * @returns An array of DOMRect objects representing the line rectangles.
 */
export const getLineRectsByNode = (editor: Editor, node: Node, minWidth = 4) => {
  const path = Editable.findPath(editor, node)
  const block: NodeEntry | undefined =
    Editor.isBlock(editor, node) && path.length === 1
      ? [node, path]
      : Editor.above<Element>(editor, {
          at: path,
          match: n => Editor.isBlock(editor, n),
          mode: 'highest',
        })
  if (!block) return []
  const domEl = Editable.toDOMNode(editor, block[0])
  const domRect = domEl.getBoundingClientRect()
  const range = document.createRange()
  range.selectNodeContents(Editable.toDOMNode(editor, node))
  const lines = splitRectsIntoLines(range.getClientRects())
  const lineRects: DOMRect[] = []
  for (const [line, rects] of lines) {
    let width = line.right - line.left
    const lineRect = matchHighest(editor, domEl, line.top, line.bottom)
    line.top = lineRect.top
    line.height = lineRect.height
    line.bottom = lineRect.bottom
    // 空节点的宽度给个最小值
    if (width < 1 && domRect.left === rects[0].left) {
      width = minWidth
    }
    lineRects.push(new DOMRect(rects[0].left, line.top, width, line.height))
  }
  return lineRects
}

/**
 * Get DOMRect objects split by line within range