Function matchHighest

packages/editor/src/utils/selection.ts:184–255

(editor: Editor, element: DOMElement, top: number, bottom: number)

 * @returns - Object containing the line rect information
 */
const matchHighest = (editor: Editor, element: DOMElement, top: number, bottom: number) => {
  const lineRect = {
    top,
    height: bottom - top,
    bottom,
  }

  /**
   * Compare the height of the current rect with the line rect
   * and update the line rect with the highest values
   * @param rect - The current rect
   */
  const compareHeight = (rect: DOMRect) => {
    if (isRectInLine(rect, lineRect)) {
      const newTop = lineRect.top < rect.top ? lineRect.top : rect.top
      const newBottom = lineRect.bottom > rect.bottom ? lineRect.bottom : rect.bottom
      lineRect.height = newBottom - newTop
      lineRect.top = newTop
      lineRect.bottom = newBottom
    }
  }

  /**
   * Recursively find the child nodes of the element and compare their rects
   * @param element - The DOM element
   */
  const match = (element: DOMElement) => {
    for (const child of element.childNodes) {
      if (isDOMElement(child)) {
        const hasNode = child.hasAttribute(DATA_EDITABLE_NODE)
        const node = hasNode ? Editable.toEditorNode(editor, child) : null
        if (node) {
          if (Element.isElement(node)) {
            if (editor.isVoid(node)) {
              const rect = resetElementRect(
                child.getBoundingClientRect(),
                calculateElementHeight(child),
              )
              compareHeight(rect)
            } else if (editor.isInline(node)) {
              const height = calculateElementHeight(child)
              const rects = child.getClientRects()
              for (let r = 0; r < rects.length; r++) {
                const rect = resetElementRect(rects[r], height)
                compareHeight(rect)
              }
            } else {
              match(child)
            }
          } else {
            const nodes = child.querySelectorAll(
              `[${DATA_EDITABLE_STRING}], [${DATA_EDITABLE_COMPOSITION}], [${DATA_EDITABLE_ZERO_WIDTH}]`,
            )
            nodes.forEach(node => {
              const height = calculateElementHeight(node)
              const rects = node.getClientRects()
              for (let r = 0; r < rects.length; r++) {
                const rect = resetElementRect(rects[r], height)