@payloadcms/richtext-lexical 3.0.0-beta.57 → 3.0.0-beta.59

package/dist/features/experimental_table/plugins/TableActionMenuPlugin/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/features/experimental_table/plugins/TableActionMenuPlugin/index.tsx"],"sourcesContent":["'use client'\n\nimport type {\n  HTMLTableElementWithWithTableSelectionState,\n  TableRowNode,\n  TableSelection,\n} from '@lexical/table'\nimport type { ElementNode } from 'lexical'\nimport type { JSX } from 'react'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'\nimport { useLexicalEditable } from '@lexical/react/useLexicalEditable'\nimport {\n  $deleteTableColumn__EXPERIMENTAL,\n  $deleteTableRow__EXPERIMENTAL,\n  $getNodeTriplet,\n  $getTableCellNodeFromLexicalNode,\n  $getTableColumnIndexFromTableCellNode,\n  $getTableNodeFromLexicalNodeOrThrow,\n  $getTableRowIndexFromTableCellNode,\n  $insertTableColumn__EXPERIMENTAL,\n  $insertTableRow__EXPERIMENTAL,\n  $isTableCellNode,\n  $isTableRowNode,\n  $isTableSelection,\n  $unmergeCell,\n  TableCellHeaderStates,\n  TableCellNode,\n  getTableObserverFromTableElement,\n} from '@lexical/table'\nimport { useScrollInfo } from '@payloadcms/ui'\nimport {\n  $createParagraphNode,\n  $getRoot,\n  $getSelection,\n  $isElementNode,\n  $isParagraphNode,\n  $isRangeSelection,\n  $isTextNode,\n} from 'lexical'\nimport * as React from 'react'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\nimport type { PluginComponentWithAnchor } from '../../../typesClient.js'\n\nimport { MeatballsIcon } from '../../../../lexical/ui/icons/Meatballs/index.js'\nimport { invariant } from '../../../../lexical/utils/invariant.js'\nimport './index.scss'\n\nfunction computeSelectionCount(selection: TableSelection): {\n  columns: number\n  rows: number\n} {\n  const selectionShape = selection.getShape()\n  return {\n    columns: selectionShape.toX - selectionShape.fromX + 1,\n    rows: selectionShape.toY - selectionShape.fromY + 1,\n  }\n}\n\n// This is important when merging cells as there is no good way to re-merge weird shapes (a result\n// of selecting merged cells and non-merged)\nfunction isTableSelectionRectangular(selection: TableSelection): boolean {\n  const nodes = selection.getNodes()\n  const currentRows: Array<number> = []\n  let currentRow = null\n  let expectedColumns = null\n  let currentColumns = 0\n  for (let i = 0; i < nodes.length; i++) {\n    const node = nodes[i]\n    if ($isTableCellNode(node)) {\n      const row = node.getParentOrThrow()\n      invariant($isTableRowNode(row), 'Expected CellNode to have a RowNode parent')\n      if (currentRow !== row) {\n        if (expectedColumns !== null && currentColumns !== expectedColumns) {\n          return false\n        }\n        if (currentRow !== null) {\n          expectedColumns = currentColumns\n        }\n        currentRow = row\n        currentColumns = 0\n      }\n      const colSpan = node.__colSpan\n      for (let j = 0; j < colSpan; j++) {\n        if (currentRows[currentColumns + j] === undefined) {\n          currentRows[currentColumns + j] = 0\n        }\n        currentRows[currentColumns + j] += node.__rowSpan\n      }\n      currentColumns += colSpan\n    }\n  }\n  return (\n    (expectedColumns === null || currentColumns === expectedColumns) &&\n    currentRows.every((v) => v === currentRows[0])\n  )\n}\n\nfunction $canUnmerge(): boolean {\n  const selection = $getSelection()\n  if (\n    ($isRangeSelection(selection) && !selection.isCollapsed()) ||\n    ($isTableSelection(selection) && !selection.anchor.is(selection.focus)) ||\n    (!$isRangeSelection(selection) && !$isTableSelection(selection))\n  ) {\n    return false\n  }\n  const [cell] = $getNodeTriplet(selection.anchor)\n  return cell.__colSpan > 1 || cell.__rowSpan > 1\n}\n\nfunction $cellContainsEmptyParagraph(cell: TableCellNode): boolean {\n  if (cell.getChildrenSize() !== 1) {\n    return false\n  }\n  const firstChild = cell.getFirstChildOrThrow()\n  if (!$isParagraphNode(firstChild) || !firstChild.isEmpty()) {\n    return false\n  }\n  return true\n}\n\nfunction $selectLastDescendant(node: ElementNode): void {\n  const lastDescendant = node.getLastDescendant()\n  if ($isTextNode(lastDescendant)) {\n    lastDescendant.select()\n  } else if ($isElementNode(lastDescendant)) {\n    lastDescendant.selectEnd()\n  } else if (lastDescendant !== null) {\n    lastDescendant.selectNext()\n  }\n}\n\ntype TableCellActionMenuProps = Readonly<{\n  cellMerge: boolean\n  contextRef: { current: HTMLElement | null }\n  onClose: () => void\n  setIsMenuOpen: (isOpen: boolean) => void\n  tableCellNode: TableCellNode\n}>\n\nfunction TableActionMenu({\n  cellMerge,\n  contextRef,\n  onClose,\n  setIsMenuOpen,\n  tableCellNode: _tableCellNode,\n}: TableCellActionMenuProps) {\n  const [editor] = useLexicalComposerContext()\n  const dropDownRef = useRef<HTMLDivElement | null>(null)\n  const [tableCellNode, updateTableCellNode] = useState(_tableCellNode)\n  const [selectionCounts, updateSelectionCounts] = useState({\n    columns: 1,\n    rows: 1,\n  })\n  const [canMergeCells, setCanMergeCells] = useState(false)\n  const [canUnmergeCell, setCanUnmergeCell] = useState(false)\n  const { y } = useScrollInfo()\n\n  useEffect(() => {\n    return editor.registerMutationListener(TableCellNode, (nodeMutations) => {\n      const nodeUpdated = nodeMutations.get(tableCellNode.getKey()) === 'updated'\n\n      if (nodeUpdated) {\n        editor.getEditorState().read(() => {\n          updateTableCellNode(tableCellNode.getLatest())\n        })\n      }\n    })\n  }, [editor, tableCellNode])\n\n  useEffect(() => {\n    editor.getEditorState().read(() => {\n      const selection = $getSelection()\n      // Merge cells\n      if ($isTableSelection(selection)) {\n        const currentSelectionCounts = computeSelectionCount(selection)\n        updateSelectionCounts(computeSelectionCount(selection))\n        setCanMergeCells(\n          isTableSelectionRectangular(selection) &&\n            (currentSelectionCounts.columns > 1 || currentSelectionCounts.rows > 1),\n        )\n      }\n      // Unmerge cell\n      setCanUnmergeCell($canUnmerge())\n    })\n  }, [editor])\n\n  useEffect(() => {\n    const menuButtonElement = contextRef.current\n    const dropDownElement = dropDownRef.current\n    const rootElement = editor.getRootElement()\n\n    if (menuButtonElement != null && dropDownElement != null && rootElement != null) {\n      const rootEleRect = rootElement.getBoundingClientRect()\n      const menuButtonRect = menuButtonElement.getBoundingClientRect()\n      dropDownElement.style.opacity = '1'\n      const dropDownElementRect = dropDownElement.getBoundingClientRect()\n      const margin = 5\n      let leftPosition = menuButtonRect.right + margin\n      if (\n        leftPosition + dropDownElementRect.width > window.innerWidth ||\n        leftPosition + dropDownElementRect.width > rootEleRect.right\n      ) {\n        const position = menuButtonRect.left - dropDownElementRect.width - margin\n        leftPosition = (position < 0 ? margin : position) + window.pageXOffset\n      }\n      dropDownElement.style.left = `${leftPosition + window.pageXOffset}px`\n\n      let topPosition = menuButtonRect.top\n      if (topPosition + dropDownElementRect.height > window.innerHeight) {\n        const position = menuButtonRect.bottom - dropDownElementRect.height\n        topPosition = (position < 0 ? margin : position) + window.pageYOffset\n      }\n      dropDownElement.style.top = `${topPosition}px`\n    }\n  }, [contextRef, dropDownRef, editor, y])\n\n  useEffect(() => {\n    function handleClickOutside(event: MouseEvent) {\n      if (\n        dropDownRef.current != null &&\n        contextRef.current != null &&\n        !dropDownRef.current.contains(event.target as Node) &&\n        !contextRef.current.contains(event.target as Node)\n      ) {\n        setIsMenuOpen(false)\n      }\n    }\n\n    window.addEventListener('click', handleClickOutside)\n\n    return () => window.removeEventListener('click', handleClickOutside)\n  }, [setIsMenuOpen, contextRef])\n\n  const clearTableSelection = useCallback(() => {\n    editor.update(() => {\n      if (tableCellNode.isAttached()) {\n        const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode)\n        const tableElement = editor.getElementByKey(\n          tableNode.getKey(),\n        ) as HTMLTableElementWithWithTableSelectionState\n\n        if (!tableElement) {\n          throw new Error('Expected to find tableElement in DOM')\n        }\n\n        const tableSelection = getTableObserverFromTableElement(tableElement)\n        if (tableSelection !== null) {\n          tableSelection.clearHighlight()\n        }\n\n        tableNode.markDirty()\n        updateTableCellNode(tableCellNode.getLatest())\n      }\n\n      const rootNode = $getRoot()\n      rootNode.selectStart()\n    })\n  }, [editor, tableCellNode])\n\n  const mergeTableCellsAtSelection = () => {\n    editor.update(() => {\n      const selection = $getSelection()\n      if ($isTableSelection(selection)) {\n        const { columns, rows } = computeSelectionCount(selection)\n        const nodes = selection.getNodes()\n        let firstCell: TableCellNode | null = null\n        for (let i = 0; i < nodes.length; i++) {\n          const node = nodes[i]\n          if ($isTableCellNode(node)) {\n            if (firstCell === null) {\n              node.setColSpan(columns).setRowSpan(rows)\n              firstCell = node\n              const isEmpty = $cellContainsEmptyParagraph(node)\n              let firstChild\n              if (isEmpty && $isParagraphNode((firstChild = node.getFirstChild()))) {\n                firstChild.remove()\n              }\n            } else if ($isTableCellNode(firstCell)) {\n              const isEmpty = $cellContainsEmptyParagraph(node)\n              if (!isEmpty) {\n                firstCell.append(...node.getChildren())\n              }\n              node.remove()\n            }\n          }\n        }\n        if (firstCell !== null) {\n          if (firstCell.getChildrenSize() === 0) {\n            firstCell.append($createParagraphNode())\n          }\n          $selectLastDescendant(firstCell)\n        }\n        onClose()\n      }\n    })\n  }\n\n  const unmergeTableCellsAtSelection = () => {\n    editor.update(() => {\n      $unmergeCell()\n    })\n  }\n\n  const insertTableRowAtSelection = useCallback(\n    (shouldInsertAfter: boolean) => {\n      editor.update(() => {\n        $insertTableRow__EXPERIMENTAL(shouldInsertAfter)\n        onClose()\n      })\n    },\n    [editor, onClose],\n  )\n\n  const insertTableColumnAtSelection = useCallback(\n    (shouldInsertAfter: boolean) => {\n      editor.update(() => {\n        for (let i = 0; i < selectionCounts.columns; i++) {\n          $insertTableColumn__EXPERIMENTAL(shouldInsertAfter)\n        }\n        onClose()\n      })\n    },\n    [editor, onClose, selectionCounts.columns],\n  )\n\n  const deleteTableRowAtSelection = useCallback(() => {\n    editor.update(() => {\n      $deleteTableRow__EXPERIMENTAL()\n      onClose()\n    })\n  }, [editor, onClose])\n\n  const deleteTableAtSelection = useCallback(() => {\n    editor.update(() => {\n      const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode)\n      tableNode.remove()\n\n      clearTableSelection()\n      onClose()\n    })\n  }, [editor, tableCellNode, clearTableSelection, onClose])\n\n  const deleteTableColumnAtSelection = useCallback(() => {\n    editor.update(() => {\n      $deleteTableColumn__EXPERIMENTAL()\n      onClose()\n    })\n  }, [editor, onClose])\n\n  const toggleTableRowIsHeader = useCallback(() => {\n    editor.update(() => {\n      const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode)\n\n      const tableRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode)\n\n      const tableRows = tableNode.getChildren()\n\n      if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {\n        throw new Error('Expected table cell to be inside of table row.')\n      }\n\n      const tableRow = tableRows[tableRowIndex]\n\n      if (!$isTableRowNode(tableRow)) {\n        throw new Error('Expected table row')\n      }\n\n      tableRow.getChildren().forEach((tableCell) => {\n        if (!$isTableCellNode(tableCell)) {\n          throw new Error('Expected table cell')\n        }\n\n        tableCell.toggleHeaderStyle(TableCellHeaderStates.ROW)\n      })\n\n      clearTableSelection()\n      onClose()\n    })\n  }, [editor, tableCellNode, clearTableSelection, onClose])\n\n  const toggleTableColumnIsHeader = useCallback(() => {\n    editor.update(() => {\n      const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode)\n\n      const tableColumnIndex = $getTableColumnIndexFromTableCellNode(tableCellNode)\n\n      const tableRows = tableNode.getChildren<TableRowNode>()\n      const maxRowsLength = Math.max(...tableRows.map((row) => row.getChildren().length))\n\n      if (tableColumnIndex >= maxRowsLength || tableColumnIndex < 0) {\n        throw new Error('Expected table cell to be inside of table row.')\n      }\n\n      for (let r = 0; r < tableRows.length; r++) {\n        const tableRow = tableRows[r]\n\n        if (!$isTableRowNode(tableRow)) {\n          throw new Error('Expected table row')\n        }\n\n        const tableCells = tableRow.getChildren()\n        if (tableColumnIndex >= tableCells.length) {\n          // if cell is outside of bounds for the current row (for example various merge cell cases) we shouldn't highlight it\n          continue\n        }\n\n        const tableCell = tableCells[tableColumnIndex]\n\n        if (!$isTableCellNode(tableCell)) {\n          throw new Error('Expected table cell')\n        }\n\n        tableCell.toggleHeaderStyle(TableCellHeaderStates.COLUMN)\n      }\n\n      clearTableSelection()\n      onClose()\n    })\n  }, [editor, tableCellNode, clearTableSelection, onClose])\n\n  let mergeCellButton: JSX.Element | null = null\n  if (cellMerge) {\n    if (canMergeCells) {\n      mergeCellButton = (\n        <button\n          className=\"item\"\n          data-test-id=\"table-merge-cells\"\n          onClick={() => mergeTableCellsAtSelection()}\n          type=\"button\"\n        >\n          Merge cells\n        </button>\n      )\n    } else if (canUnmergeCell) {\n      mergeCellButton = (\n        <button\n          className=\"item\"\n          data-test-id=\"table-unmerge-cells\"\n          onClick={() => unmergeTableCellsAtSelection()}\n          type=\"button\"\n        >\n          Unmerge cells\n        </button>\n      )\n    }\n  }\n\n  return createPortal(\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events\n    <div\n      className=\"table-action-menu-dropdown\"\n      onClick={(e) => {\n        e.stopPropagation()\n      }}\n      ref={dropDownRef}\n    >\n      {mergeCellButton ? (\n        <React.Fragment>\n          {mergeCellButton}\n          <hr />\n        </React.Fragment>\n      ) : null}\n\n      <button\n        className=\"item\"\n        data-test-id=\"table-insert-row-above\"\n        onClick={() => insertTableRowAtSelection(false)}\n        type=\"button\"\n      >\n        <span className=\"text\">\n          Insert {selectionCounts.rows === 1 ? 'row' : `${selectionCounts.rows} rows`} above\n        </span>\n      </button>\n      <button\n        className=\"item\"\n        data-test-id=\"table-insert-row-below\"\n        onClick={() => insertTableRowAtSelection(true)}\n        type=\"button\"\n      >\n        <span className=\"text\">\n          Insert {selectionCounts.rows === 1 ? 'row' : `${selectionCounts.rows} rows`} below\n        </span>\n      </button>\n      <hr />\n      <button\n        className=\"item\"\n        data-test-id=\"table-insert-column-before\"\n        onClick={() => insertTableColumnAtSelection(false)}\n        type=\"button\"\n      >\n        <span className=\"text\">\n          Insert {selectionCounts.columns === 1 ? 'column' : `${selectionCounts.columns} columns`}{' '}\n          left\n        </span>\n      </button>\n      <button\n        className=\"item\"\n        data-test-id=\"table-insert-column-after\"\n        onClick={() => insertTableColumnAtSelection(true)}\n        type=\"button\"\n      >\n        <span className=\"text\">\n          Insert {selectionCounts.columns === 1 ? 'column' : `${selectionCounts.columns} columns`}{' '}\n          right\n        </span>\n      </button>\n      <hr />\n      <button\n        className=\"item\"\n        data-test-id=\"table-delete-columns\"\n        onClick={() => deleteTableColumnAtSelection()}\n        type=\"button\"\n      >\n        <span className=\"text\">Delete column</span>\n      </button>\n      <button\n        className=\"item\"\n        data-test-id=\"table-delete-rows\"\n        onClick={() => deleteTableRowAtSelection()}\n        type=\"button\"\n      >\n        <span className=\"text\">Delete row</span>\n      </button>\n      <button\n        className=\"item\"\n        data-test-id=\"table-delete\"\n        onClick={() => deleteTableAtSelection()}\n        type=\"button\"\n      >\n        <span className=\"text\">Delete table</span>\n      </button>\n      <hr />\n      <button className=\"item\" onClick={() => toggleTableRowIsHeader()} type=\"button\">\n        <span className=\"text\">\n          {(tableCellNode.__headerState & TableCellHeaderStates.ROW) === TableCellHeaderStates.ROW\n            ? 'Remove'\n            : 'Add'}{' '}\n          row header\n        </span>\n      </button>\n      <button\n        className=\"item\"\n        data-test-id=\"table-column-header\"\n        onClick={() => toggleTableColumnIsHeader()}\n        type=\"button\"\n      >\n        <span className=\"text\">\n          {(tableCellNode.__headerState & TableCellHeaderStates.COLUMN) ===\n          TableCellHeaderStates.COLUMN\n            ? 'Remove'\n            : 'Add'}{' '}\n          column header\n        </span>\n      </button>\n    </div>,\n    document.body,\n  )\n}\n\nfunction TableCellActionMenuContainer({\n  anchorElem,\n  cellMerge,\n}: {\n  anchorElem: HTMLElement\n  cellMerge: boolean\n}): JSX.Element {\n  const [editor] = useLexicalComposerContext()\n\n  const menuButtonRef = useRef(null)\n  const menuRootRef = useRef(null)\n  const [isMenuOpen, setIsMenuOpen] = useState(false)\n\n  const [tableCellNode, setTableMenuCellNode] = useState<TableCellNode | null>(null)\n\n  const $moveMenu = useCallback(() => {\n    const menu = menuButtonRef.current\n    const selection = $getSelection()\n    const nativeSelection = window.getSelection()\n    const activeElement = document.activeElement\n\n    if (selection == null || menu == null) {\n      setTableMenuCellNode(null)\n      return\n    }\n\n    const rootElement = editor.getRootElement()\n\n    if (\n      $isRangeSelection(selection) &&\n      rootElement !== null &&\n      nativeSelection !== null &&\n      rootElement.contains(nativeSelection.anchorNode)\n    ) {\n      const tableCellNodeFromSelection = $getTableCellNodeFromLexicalNode(\n        selection.anchor.getNode(),\n      )\n\n      if (tableCellNodeFromSelection == null) {\n        setTableMenuCellNode(null)\n        return\n      }\n\n      const tableCellParentNodeDOM = editor.getElementByKey(tableCellNodeFromSelection.getKey())\n\n      if (tableCellParentNodeDOM == null) {\n        setTableMenuCellNode(null)\n        return\n      }\n\n      setTableMenuCellNode(tableCellNodeFromSelection)\n    } else if (!activeElement) {\n      setTableMenuCellNode(null)\n    }\n  }, [editor])\n\n  useEffect(() => {\n    return editor.registerUpdateListener(() => {\n      editor.getEditorState().read(() => {\n        $moveMenu()\n      })\n    })\n  })\n\n  useEffect(() => {\n    const menuButtonDOM = menuButtonRef.current as HTMLButtonElement | null\n\n    if (menuButtonDOM != null && tableCellNode != null) {\n      const tableCellNodeDOM = editor.getElementByKey(tableCellNode.getKey())\n\n      if (tableCellNodeDOM != null) {\n        const tableCellRect = tableCellNodeDOM.getBoundingClientRect()\n        const menuRect = menuButtonDOM.getBoundingClientRect()\n        const anchorRect = anchorElem.getBoundingClientRect()\n\n        const top = tableCellRect.top - anchorRect.top + 4\n        const left = tableCellRect.right - menuRect.width - 10 - anchorRect.left\n\n        menuButtonDOM.style.opacity = '1'\n        menuButtonDOM.style.transform = `translate(${left}px, ${top}px)`\n      } else {\n        menuButtonDOM.style.opacity = '0'\n        menuButtonDOM.style.transform = 'translate(-10000px, -10000px)'\n      }\n    }\n  }, [menuButtonRef, tableCellNode, editor, anchorElem])\n\n  const prevTableCellDOM = useRef(tableCellNode)\n\n  useEffect(() => {\n    if (prevTableCellDOM.current !== tableCellNode) {\n      setIsMenuOpen(false)\n    }\n\n    prevTableCellDOM.current = tableCellNode\n  }, [prevTableCellDOM, tableCellNode])\n\n  return (\n    <div className=\"table-cell-action-button-container\" ref={menuButtonRef}>\n      {tableCellNode != null && (\n        <React.Fragment>\n          <button\n            className=\"table-cell-action-button\"\n            onClick={(e) => {\n              e.stopPropagation()\n              setIsMenuOpen(!isMenuOpen)\n            }}\n            ref={menuRootRef}\n            type=\"button\"\n          >\n            <MeatballsIcon />\n          </button>\n          {isMenuOpen && (\n            <TableActionMenu\n              cellMerge={cellMerge}\n              contextRef={menuRootRef}\n              onClose={() => setIsMenuOpen(false)}\n              setIsMenuOpen={setIsMenuOpen}\n              tableCellNode={tableCellNode}\n            />\n          )}\n        </React.Fragment>\n      )}\n    </div>\n  )\n}\n\nexport const TableActionMenuPlugin: PluginComponentWithAnchor = ({ anchorElem }) => {\n  const isEditable = useLexicalEditable()\n  return createPortal(\n    isEditable ? (\n      <TableCellActionMenuContainer anchorElem={anchorElem ?? document.body} cellMerge />\n    ) : null,\n    anchorElem ?? document.body,\n  )\n}\n"],"names":["useLexicalComposerContext","useLexicalEditable","$deleteTableColumn__EXPERIMENTAL","$deleteTableRow__EXPERIMENTAL","$getNodeTriplet","$getTableCellNodeFromLexicalNode","$getTableColumnIndexFromTableCellNode","$getTableNodeFromLexicalNodeOrThrow","$getTableRowIndexFromTableCellNode","$insertTableColumn__EXPERIMENTAL","$insertTableRow__EXPERIMENTAL","$isTableCellNode","$isTableRowNode","$isTableSelection","$unmergeCell","TableCellHeaderStates","TableCellNode","getTableObserverFromTableElement","useScrollInfo","$createParagraphNode","$getRoot","$getSelection","$isElementNode","$isParagraphNode","$isRangeSelection","$isTextNode","React","useCallback","useEffect","useRef","useState","createPortal","MeatballsIcon","invariant","computeSelectionCount","selection","selectionShape","getShape","columns","toX","fromX","rows","toY","fromY","isTableSelectionRectangular","nodes","getNodes","currentRows","currentRow","expectedColumns","currentColumns","i","length","node","row","getParentOrThrow","colSpan","__colSpan","j","undefined","__rowSpan","every","v","$canUnmerge","isCollapsed","anchor","is","focus","cell","$cellContainsEmptyParagraph","getChildrenSize","firstChild","getFirstChildOrThrow","isEmpty","$selectLastDescendant","lastDescendant","getLastDescendant","select","selectEnd","selectNext","TableActionMenu","cellMerge","contextRef","onClose","setIsMenuOpen","tableCellNode","_tableCellNode","editor","dropDownRef","updateTableCellNode","selectionCounts","updateSelectionCounts","canMergeCells","setCanMergeCells","canUnmergeCell","setCanUnmergeCell","y","registerMutationListener","nodeMutations","nodeUpdated","get","getKey","getEditorState","read","getLatest","currentSelectionCounts","menuButtonElement","current","dropDownElement","rootElement","getRootElement","rootEleRect","getBoundingClientRect","menuButtonRect","style","opacity","dropDownElementRect","margin","leftPosition","right","width","window","innerWidth","position","left","pageXOffset","topPosition","top","height","innerHeight","bottom","pageYOffset","handleClickOutside","event","contains","target","addEventListener","removeEventListener","clearTableSelection","update","isAttached","tableNode","tableElement","getElementByKey","Error","tableSelection","clearHighlight","markDirty","rootNode","selectStart","mergeTableCellsAtSelection","firstCell","setColSpan","setRowSpan","getFirstChild","remove","append","getChildren","unmergeTableCellsAtSelection","insertTableRowAtSelection","shouldInsertAfter","insertTableColumnAtSelection","deleteTableRowAtSelection","deleteTableAtSelection","deleteTableColumnAtSelection","toggleTableRowIsHeader","tableRowIndex","tableRows","tableRow","forEach","tableCell","toggleHeaderStyle","ROW","toggleTableColumnIsHeader","tableColumnIndex","maxRowsLength","Math","max","map","r","tableCells","COLUMN","mergeCellButton","button","className","data-test-id","onClick","type","div","e","stopPropagation","ref","Fragment","hr","span","__headerState","document","body","TableCellActionMenuContainer","anchorElem","menuButtonRef","menuRootRef","isMenuOpen","setTableMenuCellNode","$moveMenu","menu","nativeSelection","getSelection","activeElement","anchorNode","tableCellNodeFromSelection","getNode","tableCellParentNodeDOM","registerUpdateListener","menuButtonDOM","tableCellNodeDOM","tableCellRect","menuRect","anchorRect","transform","prevTableCellDOM","TableActionMenuPlugin","isEditable"],"mappings":"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"}

package/dist/features/experimental_table/plugins/TableCellResizerPlugin/index.d.ts

@@ -0,0 +1,4 @@
+import type { PluginComponent } from '../../../typesClient.js';
+import './index.scss';
+export declare const TableCellResizerPlugin: PluginComponent;
+//# sourceMappingURL=index.d.ts.map

package/dist/features/experimental_table/plugins/TableCellResizerPlugin/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/experimental_table/plugins/TableCellResizerPlugin/index.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,eAAe,EAA6B,MAAM,yBAAyB,CAAA;AAEzF,OAAO,cAAc,CAAA;AAmXrB,eAAO,MAAM,sBAAsB,EAAE,eAQpC,CAAA"}

package/dist/features/experimental_table/plugins/TableCellResizerPlugin/index.js

@@ -0,0 +1,322 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
+import { $computeTableMapSkipCellCheck, $getTableNodeFromLexicalNodeOrThrow, $getTableRowIndexFromTableCellNode, $isTableCellNode, $isTableRowNode, getDOMCellFromTarget } from '@lexical/table';
+import { calculateZoomLevel } from '@lexical/utils';
+import { $getNearestNodeFromDOMNode } from 'lexical';
+import * as React from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+const MIN_ROW_HEIGHT = 33;
+const MIN_COLUMN_WIDTH = 50;
+function TableCellResizer({ editor }) {
+    const targetRef = useRef(null);
+    const resizerRef = useRef(null);
+    const tableRectRef = useRef(null);
+    const mouseStartPosRef = useRef(null);
+    const [mouseCurrentPos, updateMouseCurrentPos] = useState(null);
+    const [activeCell, updateActiveCell] = useState(null);
+    const [isMouseDown, updateIsMouseDown] = useState(false);
+    const [draggingDirection, updateDraggingDirection] = useState(null);
+    const resetState = useCallback(()=>{
+        updateActiveCell(null);
+        targetRef.current = null;
+        updateDraggingDirection(null);
+        mouseStartPosRef.current = null;
+        tableRectRef.current = null;
+    }, []);
+    const isMouseDownOnEvent = (event)=>{
+        return (event.buttons & 1) === 1;
+    };
+    useEffect(()=>{
+        const onMouseMove = (event)=>{
+            setTimeout(()=>{
+                const target = event.target;
+                if (draggingDirection) {
+                    updateMouseCurrentPos({
+                        x: event.clientX,
+                        y: event.clientY
+                    });
+                    return;
+                }
+                updateIsMouseDown(isMouseDownOnEvent(event));
+                if (resizerRef.current && resizerRef.current.contains(target)) {
+                    return;
+                }
+                if (targetRef.current !== target) {
+                    targetRef.current = target;
+                    const cell = getDOMCellFromTarget(target);
+                    if (cell && activeCell !== cell) {
+                        editor.update(()=>{
+                            const tableCellNode = $getNearestNodeFromDOMNode(cell.elem);
+                            if (!tableCellNode) {
+                                throw new Error('TableCellResizer: Table cell node not found.');
+                            }
+                            const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+                            const tableElement = editor.getElementByKey(tableNode.getKey());
+                            if (!tableElement) {
+                                throw new Error('TableCellResizer: Table element not found.');
+                            }
+                            targetRef.current = target;
+                            tableRectRef.current = tableElement.getBoundingClientRect();
+                            updateActiveCell(cell);
+                        });
+                    } else if (cell == null) {
+                        resetState();
+                    }
+                }
+            }, 0);
+        };
+        const onMouseDown = (event)=>{
+            setTimeout(()=>{
+                updateIsMouseDown(true);
+            }, 0);
+        };
+        const onMouseUp = (event)=>{
+            setTimeout(()=>{
+                updateIsMouseDown(false);
+            }, 0);
+        };
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mousedown', onMouseDown);
+        document.addEventListener('mouseup', onMouseUp);
+        return ()=>{
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mousedown', onMouseDown);
+            document.removeEventListener('mouseup', onMouseUp);
+        };
+    }, [
+        activeCell,
+        draggingDirection,
+        editor,
+        resetState
+    ]);
+    const isHeightChanging = (direction)=>{
+        if (direction === 'bottom') {
+            return true;
+        }
+        return false;
+    };
+    const updateRowHeight = useCallback((heightChange)=>{
+        if (!activeCell) {
+            throw new Error('TableCellResizer: Expected active cell.');
+        }
+        editor.update(()=>{
+            const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);
+            if (!$isTableCellNode(tableCellNode)) {
+                throw new Error('TableCellResizer: Table cell node not found.');
+            }
+            const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+            const tableRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode);
+            const tableRows = tableNode.getChildren();
+            if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
+                throw new Error('Expected table cell to be inside of table row.');
+            }
+            const tableRow = tableRows[tableRowIndex];
+            if (!$isTableRowNode(tableRow)) {
+                throw new Error('Expected table row');
+            }
+            let height = tableRow.getHeight();
+            if (height === undefined) {
+                const rowCells = tableRow.getChildren();
+                height = Math.min(...rowCells.map((cell)=>getCellNodeHeight(cell, editor) ?? Infinity));
+            }
+            const newHeight = Math.max(height + heightChange, MIN_ROW_HEIGHT);
+            tableRow.setHeight(newHeight);
+        }, {
+            tag: 'skip-scroll-into-view'
+        });
+    }, [
+        activeCell,
+        editor
+    ]);
+    const getCellNodeWidth = (cell, activeEditor)=>{
+        const width = cell.getWidth();
+        if (width !== undefined) {
+            return width;
+        }
+        const domCellNode = activeEditor.getElementByKey(cell.getKey());
+        if (domCellNode == null) {
+            return undefined;
+        }
+        const computedStyle = getComputedStyle(domCellNode);
+        return domCellNode.clientWidth - parseFloat(computedStyle.paddingLeft) - parseFloat(computedStyle.paddingRight);
+    };
+    const getCellNodeHeight = (cell, activeEditor)=>{
+        const domCellNode = activeEditor.getElementByKey(cell.getKey());
+        return domCellNode?.clientHeight;
+    };
+    const getCellColumnIndex = (tableCellNode, tableMap)=>{
+        for(let row = 0; row < tableMap.length; row++){
+            for(let column = 0; column < tableMap[row].length; column++){
+                if (tableMap[row][column].cell === tableCellNode) {
+                    return column;
+                }
+            }
+        }
+    };
+    const updateColumnWidth = useCallback((widthChange)=>{
+        if (!activeCell) {
+            throw new Error('TableCellResizer: Expected active cell.');
+        }
+        editor.update(()=>{
+            const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);
+            if (!$isTableCellNode(tableCellNode)) {
+                throw new Error('TableCellResizer: Table cell node not found.');
+            }
+            const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+            const [tableMap] = $computeTableMapSkipCellCheck(tableNode, null, null);
+            const columnIndex = getCellColumnIndex(tableCellNode, tableMap);
+            if (columnIndex === undefined) {
+                throw new Error('TableCellResizer: Table column not found.');
+            }
+            for(let row = 0; row < tableMap.length; row++){
+                const cell = tableMap[row][columnIndex];
+                if (cell.startRow === row && (columnIndex === tableMap[row].length - 1 || tableMap[row][columnIndex].cell !== tableMap[row][columnIndex + 1].cell)) {
+                    const width = getCellNodeWidth(cell.cell, editor);
+                    if (width === undefined) {
+                        continue;
+                    }
+                    const newWidth = Math.max(width + widthChange, MIN_COLUMN_WIDTH);
+                    cell.cell.setWidth(newWidth);
+                }
+            }
+        }, {
+            tag: 'skip-scroll-into-view'
+        });
+    }, [
+        activeCell,
+        editor
+    ]);
+    const mouseUpHandler = useCallback((direction)=>{
+        const handler = (event)=>{
+            event.preventDefault();
+            event.stopPropagation();
+            if (!activeCell) {
+                throw new Error('TableCellResizer: Expected active cell.');
+            }
+            if (mouseStartPosRef.current) {
+                const { x, y } = mouseStartPosRef.current;
+                if (activeCell === null) {
+                    return;
+                }
+                const zoom = calculateZoomLevel(event.target);
+                if (isHeightChanging(direction)) {
+                    const heightChange = (event.clientY - y) / zoom;
+                    updateRowHeight(heightChange);
+                } else {
+                    const widthChange = (event.clientX - x) / zoom;
+                    updateColumnWidth(widthChange);
+                }
+                resetState();
+                document.removeEventListener('mouseup', handler);
+            }
+        };
+        return handler;
+    }, [
+        activeCell,
+        resetState,
+        updateColumnWidth,
+        updateRowHeight
+    ]);
+    const toggleResize = useCallback((direction)=>(event)=>{
+            event.preventDefault();
+            event.stopPropagation();
+            if (!activeCell) {
+                throw new Error('TableCellResizer: Expected active cell.');
+            }
+            mouseStartPosRef.current = {
+                x: event.clientX,
+                y: event.clientY
+            };
+            updateMouseCurrentPos(mouseStartPosRef.current);
+            updateDraggingDirection(direction);
+            document.addEventListener('mouseup', mouseUpHandler(direction));
+        }, [
+        activeCell,
+        mouseUpHandler
+    ]);
+    const getResizers = useCallback(()=>{
+        if (activeCell) {
+            const { height, left, top, width } = activeCell.elem.getBoundingClientRect();
+            const zoom = calculateZoomLevel(activeCell.elem);
+            const zoneWidth = 10 // Pixel width of the zone where you can drag the edge
+            ;
+            const styles = {
+                bottom: {
+                    backgroundColor: 'none',
+                    cursor: 'row-resize',
+                    height: `${zoneWidth}px`,
+                    left: `${window.pageXOffset + left}px`,
+                    top: `${window.pageYOffset + top + height - zoneWidth / 2}px`,
+                    width: `${width}px`
+                },
+                right: {
+                    backgroundColor: 'none',
+                    cursor: 'col-resize',
+                    height: `${height}px`,
+                    left: `${window.pageXOffset + left + width - zoneWidth / 2}px`,
+                    top: `${window.pageYOffset + top}px`,
+                    width: `${zoneWidth}px`
+                }
+            };
+            const tableRect = tableRectRef.current;
+            if (draggingDirection && mouseCurrentPos && tableRect) {
+                if (isHeightChanging(draggingDirection)) {
+                    styles[draggingDirection].left = `${window.pageXOffset + tableRect.left}px`;
+                    styles[draggingDirection].top = `${window.pageYOffset + mouseCurrentPos.y / zoom}px`;
+                    styles[draggingDirection].height = '3px';
+                    styles[draggingDirection].width = `${tableRect.width}px`;
+                } else {
+                    styles[draggingDirection].top = `${window.pageYOffset + tableRect.top}px`;
+                    styles[draggingDirection].left = `${window.pageXOffset + mouseCurrentPos.x / zoom}px`;
+                    styles[draggingDirection].width = '3px';
+                    styles[draggingDirection].height = `${tableRect.height}px`;
+                }
+                styles[draggingDirection].backgroundColor = '#adf';
+            }
+            return styles;
+        }
+        return {
+            bottom: null,
+            left: null,
+            right: null,
+            top: null
+        };
+    }, [
+        activeCell,
+        draggingDirection,
+        mouseCurrentPos
+    ]);
+    const resizerStyles = getResizers();
+    return /*#__PURE__*/ _jsx("div", {
+        ref: resizerRef,
+        children: activeCell != null && !isMouseDown && /*#__PURE__*/ _jsxs(React.Fragment, {
+            children: [
+                /*#__PURE__*/ _jsx("div", {
+                    className: "TableCellResizer__resizer TableCellResizer__ui",
+                    onMouseDown: toggleResize('right'),
+                    style: resizerStyles.right || undefined
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: "TableCellResizer__resizer TableCellResizer__ui",
+                    onMouseDown: toggleResize('bottom'),
+                    style: resizerStyles.bottom || undefined
+                })
+            ]
+        })
+    });
+}
+export const TableCellResizerPlugin = ()=>{
+    const [editor] = useLexicalComposerContext();
+    const isEditable = useLexicalEditable();
+    return useMemo(()=>isEditable ? /*#__PURE__*/ createPortal(/*#__PURE__*/ _jsx(TableCellResizer, {
+            editor: editor
+        }), document.body) : null, [
+        editor,
+        isEditable
+    ]);
+};
+
+//# sourceMappingURL=index.js.map

package/dist/features/experimental_table/plugins/TableCellResizerPlugin/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/features/experimental_table/plugins/TableCellResizerPlugin/index.tsx"],"sourcesContent":["'use client'\n\nimport type { TableCellNode, TableDOMCell, TableMapType, TableMapValueType } from '@lexical/table'\nimport type { LexicalEditor } from 'lexical'\nimport type { JSX, MouseEventHandler } from 'react'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'\nimport { useLexicalEditable } from '@lexical/react/useLexicalEditable'\nimport {\n  $computeTableMapSkipCellCheck,\n  $getTableNodeFromLexicalNodeOrThrow,\n  $getTableRowIndexFromTableCellNode,\n  $isTableCellNode,\n  $isTableRowNode,\n  getDOMCellFromTarget,\n} from '@lexical/table'\nimport { calculateZoomLevel } from '@lexical/utils'\nimport { $getNearestNodeFromDOMNode } from 'lexical'\nimport * as React from 'react'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\nimport type { PluginComponent, PluginComponentWithAnchor } from '../../../typesClient.js'\n\nimport './index.scss'\n\ntype MousePosition = {\n  x: number\n  y: number\n}\n\ntype MouseDraggingDirection = 'bottom' | 'right'\n\nconst MIN_ROW_HEIGHT = 33\nconst MIN_COLUMN_WIDTH = 50\n\nfunction TableCellResizer({ editor }: { editor: LexicalEditor }): JSX.Element {\n  const targetRef = useRef<HTMLElement | null>(null)\n  const resizerRef = useRef<HTMLDivElement | null>(null)\n  const tableRectRef = useRef<ClientRect | null>(null)\n\n  const mouseStartPosRef = useRef<MousePosition | null>(null)\n  const [mouseCurrentPos, updateMouseCurrentPos] = useState<MousePosition | null>(null)\n\n  const [activeCell, updateActiveCell] = useState<TableDOMCell | null>(null)\n  const [isMouseDown, updateIsMouseDown] = useState<boolean>(false)\n  const [draggingDirection, updateDraggingDirection] = useState<MouseDraggingDirection | null>(null)\n\n  const resetState = useCallback(() => {\n    updateActiveCell(null)\n    targetRef.current = null\n    updateDraggingDirection(null)\n    mouseStartPosRef.current = null\n    tableRectRef.current = null\n  }, [])\n\n  const isMouseDownOnEvent = (event: MouseEvent) => {\n    return (event.buttons & 1) === 1\n  }\n\n  useEffect(() => {\n    const onMouseMove = (event: MouseEvent) => {\n      setTimeout(() => {\n        const target = event.target\n\n        if (draggingDirection) {\n          updateMouseCurrentPos({\n            x: event.clientX,\n            y: event.clientY,\n          })\n          return\n        }\n        updateIsMouseDown(isMouseDownOnEvent(event))\n        if (resizerRef.current && resizerRef.current.contains(target as Node)) {\n          return\n        }\n\n        if (targetRef.current !== target) {\n          targetRef.current = target as HTMLElement\n          const cell = getDOMCellFromTarget(target as HTMLElement)\n\n          if (cell && activeCell !== cell) {\n            editor.update(() => {\n              const tableCellNode = $getNearestNodeFromDOMNode(cell.elem)\n\n              if (!tableCellNode) {\n                throw new Error('TableCellResizer: Table cell node not found.')\n              }\n\n              const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode)\n              const tableElement = editor.getElementByKey(tableNode.getKey())\n\n              if (!tableElement) {\n                throw new Error('TableCellResizer: Table element not found.')\n              }\n\n              targetRef.current = target as HTMLElement\n              tableRectRef.current = tableElement.getBoundingClientRect()\n              updateActiveCell(cell)\n            })\n          } else if (cell == null) {\n            resetState()\n          }\n        }\n      }, 0)\n    }\n\n    const onMouseDown = (event: MouseEvent) => {\n      setTimeout(() => {\n        updateIsMouseDown(true)\n      }, 0)\n    }\n\n    const onMouseUp = (event: MouseEvent) => {\n      setTimeout(() => {\n        updateIsMouseDown(false)\n      }, 0)\n    }\n\n    document.addEventListener('mousemove', onMouseMove)\n    document.addEventListener('mousedown', onMouseDown)\n    document.addEventListener('mouseup', onMouseUp)\n\n    return () => {\n      document.removeEventListener('mousemove', onMouseMove)\n      document.removeEventListener('mousedown', onMouseDown)\n      document.removeEventListener('mouseup', onMouseUp)\n    }\n  }, [activeCell, draggingDirection, editor, resetState])\n\n  const isHeightChanging = (direction: MouseDraggingDirection) => {\n    if (direction === 'bottom') {\n      return true\n    }\n    return false\n  }\n\n  const updateRowHeight = useCallback(\n    (heightChange: number) => {\n      if (!activeCell) {\n        throw new Error('TableCellResizer: Expected active cell.')\n      }\n\n      editor.update(\n        () => {\n          const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem)\n          if (!$isTableCellNode(tableCellNode)) {\n            throw new Error('TableCellResizer: Table cell node not found.')\n          }\n\n          const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode)\n\n          const tableRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode)\n\n          const tableRows = tableNode.getChildren()\n\n          if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {\n            throw new Error('Expected table cell to be inside of table row.')\n          }\n\n          const tableRow = tableRows[tableRowIndex]\n\n          if (!$isTableRowNode(tableRow)) {\n            throw new Error('Expected table row')\n          }\n\n          let height = tableRow.getHeight()\n          if (height === undefined) {\n            const rowCells = tableRow.getChildren<TableCellNode>()\n            height = Math.min(\n              ...rowCells.map((cell) => getCellNodeHeight(cell, editor) ?? Infinity),\n            )\n          }\n\n          const newHeight = Math.max(height + heightChange, MIN_ROW_HEIGHT)\n          tableRow.setHeight(newHeight)\n        },\n        { tag: 'skip-scroll-into-view' },\n      )\n    },\n    [activeCell, editor],\n  )\n\n  const getCellNodeWidth = (\n    cell: TableCellNode,\n    activeEditor: LexicalEditor,\n  ): number | undefined => {\n    const width = cell.getWidth()\n    if (width !== undefined) {\n      return width\n    }\n\n    const domCellNode = activeEditor.getElementByKey(cell.getKey())\n    if (domCellNode == null) {\n      return undefined\n    }\n    const computedStyle = getComputedStyle(domCellNode)\n    return (\n      domCellNode.clientWidth -\n      parseFloat(computedStyle.paddingLeft) -\n      parseFloat(computedStyle.paddingRight)\n    )\n  }\n\n  const getCellNodeHeight = (\n    cell: TableCellNode,\n    activeEditor: LexicalEditor,\n  ): number | undefined => {\n    const domCellNode = activeEditor.getElementByKey(cell.getKey())\n    return domCellNode?.clientHeight\n  }\n\n  const getCellColumnIndex = (tableCellNode: TableCellNode, tableMap: TableMapType) => {\n    for (let row = 0; row < tableMap.length; row++) {\n      for (let column = 0; column < tableMap[row].length; column++) {\n        if (tableMap[row][column].cell === tableCellNode) {\n          return column\n        }\n      }\n    }\n  }\n\n  const updateColumnWidth = useCallback(\n    (widthChange: number) => {\n      if (!activeCell) {\n        throw new Error('TableCellResizer: Expected active cell.')\n      }\n      editor.update(\n        () => {\n          const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem)\n          if (!$isTableCellNode(tableCellNode)) {\n            throw new Error('TableCellResizer: Table cell node not found.')\n          }\n\n          const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode)\n          const [tableMap] = $computeTableMapSkipCellCheck(tableNode, null, null)\n          const columnIndex = getCellColumnIndex(tableCellNode, tableMap)\n          if (columnIndex === undefined) {\n            throw new Error('TableCellResizer: Table column not found.')\n          }\n\n          for (let row = 0; row < tableMap.length; row++) {\n            const cell: TableMapValueType = tableMap[row][columnIndex]\n            if (\n              cell.startRow === row &&\n              (columnIndex === tableMap[row].length - 1 ||\n                tableMap[row][columnIndex].cell !== tableMap[row][columnIndex + 1].cell)\n            ) {\n              const width = getCellNodeWidth(cell.cell, editor)\n              if (width === undefined) {\n                continue\n              }\n              const newWidth = Math.max(width + widthChange, MIN_COLUMN_WIDTH)\n              cell.cell.setWidth(newWidth)\n            }\n          }\n        },\n        { tag: 'skip-scroll-into-view' },\n      )\n    },\n    [activeCell, editor],\n  )\n\n  const mouseUpHandler = useCallback(\n    (direction: MouseDraggingDirection) => {\n      const handler = (event: MouseEvent) => {\n        event.preventDefault()\n        event.stopPropagation()\n\n        if (!activeCell) {\n          throw new Error('TableCellResizer: Expected active cell.')\n        }\n\n        if (mouseStartPosRef.current) {\n          const { x, y } = mouseStartPosRef.current\n\n          if (activeCell === null) {\n            return\n          }\n          const zoom = calculateZoomLevel(event.target as Element)\n\n          if (isHeightChanging(direction)) {\n            const heightChange = (event.clientY - y) / zoom\n            updateRowHeight(heightChange)\n          } else {\n            const widthChange = (event.clientX - x) / zoom\n            updateColumnWidth(widthChange)\n          }\n\n          resetState()\n          document.removeEventListener('mouseup', handler)\n        }\n      }\n      return handler\n    },\n    [activeCell, resetState, updateColumnWidth, updateRowHeight],\n  )\n\n  const toggleResize = useCallback(\n    (direction: MouseDraggingDirection): MouseEventHandler<HTMLDivElement> =>\n      (event) => {\n        event.preventDefault()\n        event.stopPropagation()\n\n        if (!activeCell) {\n          throw new Error('TableCellResizer: Expected active cell.')\n        }\n\n        mouseStartPosRef.current = {\n          x: event.clientX,\n          y: event.clientY,\n        }\n        updateMouseCurrentPos(mouseStartPosRef.current)\n        updateDraggingDirection(direction)\n\n        document.addEventListener('mouseup', mouseUpHandler(direction))\n      },\n    [activeCell, mouseUpHandler],\n  )\n\n  const getResizers = useCallback(() => {\n    if (activeCell) {\n      const { height, left, top, width } = activeCell.elem.getBoundingClientRect()\n      const zoom = calculateZoomLevel(activeCell.elem)\n      const zoneWidth = 10 // Pixel width of the zone where you can drag the edge\n      const styles = {\n        bottom: {\n          backgroundColor: 'none',\n          cursor: 'row-resize',\n          height: `${zoneWidth}px`,\n          left: `${window.pageXOffset + left}px`,\n          top: `${window.pageYOffset + top + height - zoneWidth / 2}px`,\n          width: `${width}px`,\n        },\n        right: {\n          backgroundColor: 'none',\n          cursor: 'col-resize',\n          height: `${height}px`,\n          left: `${window.pageXOffset + left + width - zoneWidth / 2}px`,\n          top: `${window.pageYOffset + top}px`,\n          width: `${zoneWidth}px`,\n        },\n      }\n\n      const tableRect = tableRectRef.current\n\n      if (draggingDirection && mouseCurrentPos && tableRect) {\n        if (isHeightChanging(draggingDirection)) {\n          styles[draggingDirection].left = `${window.pageXOffset + tableRect.left}px`\n          styles[draggingDirection].top = `${window.pageYOffset + mouseCurrentPos.y / zoom}px`\n          styles[draggingDirection].height = '3px'\n          styles[draggingDirection].width = `${tableRect.width}px`\n        } else {\n          styles[draggingDirection].top = `${window.pageYOffset + tableRect.top}px`\n          styles[draggingDirection].left = `${window.pageXOffset + mouseCurrentPos.x / zoom}px`\n          styles[draggingDirection].width = '3px'\n          styles[draggingDirection].height = `${tableRect.height}px`\n        }\n\n        styles[draggingDirection].backgroundColor = '#adf'\n      }\n\n      return styles\n    }\n\n    return {\n      bottom: null,\n      left: null,\n      right: null,\n      top: null,\n    }\n  }, [activeCell, draggingDirection, mouseCurrentPos])\n\n  const resizerStyles = getResizers()\n\n  return (\n    <div ref={resizerRef}>\n      {activeCell != null && !isMouseDown && (\n        <React.Fragment>\n          <div\n            className=\"TableCellResizer__resizer TableCellResizer__ui\"\n            onMouseDown={toggleResize('right')}\n            style={resizerStyles.right || undefined}\n          />\n          <div\n            className=\"TableCellResizer__resizer TableCellResizer__ui\"\n            onMouseDown={toggleResize('bottom')}\n            style={resizerStyles.bottom || undefined}\n          />\n        </React.Fragment>\n      )}\n    </div>\n  )\n}\n\nexport const TableCellResizerPlugin: PluginComponent = () => {\n  const [editor] = useLexicalComposerContext()\n  const isEditable = useLexicalEditable()\n\n  return useMemo(\n    () => (isEditable ? createPortal(<TableCellResizer editor={editor} />, document.body) : null),\n    [editor, isEditable],\n  )\n}\n"],"names":["useLexicalComposerContext","useLexicalEditable","$computeTableMapSkipCellCheck","$getTableNodeFromLexicalNodeOrThrow","$getTableRowIndexFromTableCellNode","$isTableCellNode","$isTableRowNode","getDOMCellFromTarget","calculateZoomLevel","$getNearestNodeFromDOMNode","React","useCallback","useEffect","useMemo","useRef","useState","createPortal","MIN_ROW_HEIGHT","MIN_COLUMN_WIDTH","TableCellResizer","editor","targetRef","resizerRef","tableRectRef","mouseStartPosRef","mouseCurrentPos","updateMouseCurrentPos","activeCell","updateActiveCell","isMouseDown","updateIsMouseDown","draggingDirection","updateDraggingDirection","resetState","current","isMouseDownOnEvent","event","buttons","onMouseMove","setTimeout","target","x","clientX","y","clientY","contains","cell","update","tableCellNode","elem","Error","tableNode","tableElement","getElementByKey","getKey","getBoundingClientRect","onMouseDown","onMouseUp","document","addEventListener","removeEventListener","isHeightChanging","direction","updateRowHeight","heightChange","tableRowIndex","tableRows","getChildren","length","tableRow","height","getHeight","undefined","rowCells","Math","min","map","getCellNodeHeight","Infinity","newHeight","max","setHeight","tag","getCellNodeWidth","activeEditor","width","getWidth","domCellNode","computedStyle","getComputedStyle","clientWidth","parseFloat","paddingLeft","paddingRight","clientHeight","getCellColumnIndex","tableMap","row","column","updateColumnWidth","widthChange","columnIndex","startRow","newWidth","setWidth","mouseUpHandler","handler","preventDefault","stopPropagation","zoom","toggleResize","getResizers","left","top","zoneWidth","styles","bottom","backgroundColor","cursor","window","pageXOffset","pageYOffset","right","tableRect","resizerStyles","div","ref","Fragment","className","style","TableCellResizerPlugin","isEditable","body"],"mappings":"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"}

package/dist/features/experimental_table/plugins/TablePlugin/index.d.ts

@@ -0,0 +1,24 @@
+import type { EditorThemeClasses, Klass, LexicalCommand, LexicalEditor, LexicalNode } from 'lexical';
+import type { JSX } from 'react';
+import * as React from 'react';
+import type { PluginComponent } from '../../../typesClient.js';
+import './index.scss';
+export type CellContextShape = {
+    cellEditorConfig: CellEditorConfig | null;
+    cellEditorPlugins: Array<JSX.Element> | JSX.Element | null;
+    set: (cellEditorConfig: CellEditorConfig | null, cellEditorPlugins: Array<JSX.Element> | JSX.Element | null) => void;
+};
+export type CellEditorConfig = Readonly<{
+    namespace: string;
+    nodes?: ReadonlyArray<Klass<LexicalNode>>;
+    onError: (error: Error, editor: LexicalEditor) => void;
+    readOnly?: boolean;
+    theme?: EditorThemeClasses;
+}>;
+export declare const OPEN_TABLE_DRAWER_COMMAND: LexicalCommand<{}>;
+export declare const CellContext: React.Context<CellContextShape>;
+export declare function TableContext({ children }: {
+    children: JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const TablePlugin: PluginComponent;
+//# sourceMappingURL=index.d.ts.map

package/dist/features/experimental_table/plugins/TablePlugin/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/experimental_table/plugins/TablePlugin/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,kBAAkB,EAClB,KAAK,EACL,cAAc,EACd,aAAa,EACb,WAAW,EAEZ,MAAM,SAAS,CAAA;AAChB,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAShC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AAI9D,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAA;IACzC,iBAAiB,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAAA;IAC1D,GAAG,EAAE,CACH,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,EACzC,iBAAiB,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,KACvD,IAAI,CAAA;CACV,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC;IACtC,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAA;IACzC,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,KAAK,IAAI,CAAA;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,kBAAkB,CAAA;CAC3B,CAAC,CAAA;AAEF,eAAO,MAAM,yBAAyB,EAAE,cAAc,CAAC,EAAE,CAExD,CAAA;AAED,eAAO,MAAM,WAAW,iCAMtB,CAAA;AAGF,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE,2CAwBnE;AAED,eAAO,MAAM,WAAW,EAAE,eAyDzB,CAAA"}

package/dist/features/experimental_table/plugins/TablePlugin/index.js

@@ -0,0 +1,99 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { TablePlugin as LexicalReactTablePlugin } from '@lexical/react/LexicalTablePlugin';
+import { INSERT_TABLE_COMMAND, TableNode } from '@lexical/table';
+import { mergeRegister } from '@lexical/utils';
+import { useModal } from '@payloadcms/ui';
+import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_EDITOR, createCommand } from 'lexical';
+import { createContext, useContext, useEffect, useMemo, useState } from 'react';
+import * as React from 'react';
+import { invariant } from '../../../../lexical/utils/invariant.js';
+import { FieldsDrawer } from '../../../../utilities/fieldsDrawer/Drawer.js';
+export const OPEN_TABLE_DRAWER_COMMAND = createCommand('OPEN_EMBED_DRAWER_COMMAND');
+export const CellContext = /*#__PURE__*/ createContext({
+    cellEditorConfig: null,
+    cellEditorPlugins: null,
+    set: ()=>{
+    // Empty
+    }
+});
+const drawerSlug = 'lexical-table-create';
+export function TableContext({ children }) {
+    const [contextValue, setContextValue] = useState({
+        cellEditorConfig: null,
+        cellEditorPlugins: null
+    });
+    return /*#__PURE__*/ _jsx(CellContext.Provider, {
+        value: useMemo(()=>({
+                cellEditorConfig: contextValue.cellEditorConfig,
+                cellEditorPlugins: contextValue.cellEditorPlugins,
+                set: (cellEditorConfig, cellEditorPlugins)=>{
+                    setContextValue({
+                        cellEditorConfig,
+                        cellEditorPlugins
+                    });
+                }
+            }), [
+            contextValue.cellEditorConfig,
+            contextValue.cellEditorPlugins
+        ]),
+        children: children
+    });
+}
+export const TablePlugin = ()=>{
+    const [editor] = useLexicalComposerContext();
+    const cellContext = useContext(CellContext);
+    const { closeModal, toggleModal } = useModal();
+    useEffect(()=>{
+        if (!editor.hasNodes([
+            TableNode
+        ])) {
+            invariant(false, 'TablePlugin: TableNode is not registered on editor');
+        }
+        return mergeRegister(editor.registerCommand(OPEN_TABLE_DRAWER_COMMAND, ()=>{
+            let rangeSelection = null;
+            editor.getEditorState().read(()=>{
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    rangeSelection = selection;
+                }
+            });
+            if (rangeSelection) {
+                toggleModal(drawerSlug);
+            }
+            return true;
+        }, COMMAND_PRIORITY_EDITOR));
+    }, [
+        cellContext,
+        editor,
+        toggleModal
+    ]);
+    return /*#__PURE__*/ _jsxs(React.Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(FieldsDrawer, {
+                data: {},
+                drawerSlug: drawerSlug,
+                drawerTitle: "Create Table",
+                featureKey: "experimental_table",
+                handleDrawerSubmit: (_fields, data)=>{
+                    closeModal(drawerSlug);
+                    if (!data.columns || !data.rows) {
+                        return;
+                    }
+                    editor.dispatchCommand(INSERT_TABLE_COMMAND, {
+                        columns: String(data.columns),
+                        rows: String(data.rows)
+                    });
+                },
+                schemaPathSuffix: "fields"
+            }),
+            /*#__PURE__*/ _jsx(LexicalReactTablePlugin, {
+                hasCellBackgroundColor: false,
+                hasCellMerge: true
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=index.js.map

package/dist/features/experimental_table/plugins/TablePlugin/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/features/experimental_table/plugins/TablePlugin/index.tsx"],"sourcesContent":["'use client'\n\nimport type {\n  EditorThemeClasses,\n  Klass,\n  LexicalCommand,\n  LexicalEditor,\n  LexicalNode,\n  RangeSelection,\n} from 'lexical'\nimport type { JSX } from 'react'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'\nimport { TablePlugin as LexicalReactTablePlugin } from '@lexical/react/LexicalTablePlugin'\nimport { INSERT_TABLE_COMMAND, TableNode } from '@lexical/table'\nimport { mergeRegister } from '@lexical/utils'\nimport { useModal } from '@payloadcms/ui'\nimport { $getSelection, $isRangeSelection, COMMAND_PRIORITY_EDITOR, createCommand } from 'lexical'\nimport { createContext, useContext, useEffect, useMemo, useState } from 'react'\nimport * as React from 'react'\n\nimport type { PluginComponent } from '../../../typesClient.js'\n\nimport { invariant } from '../../../../lexical/utils/invariant.js'\nimport { FieldsDrawer } from '../../../../utilities/fieldsDrawer/Drawer.js'\nimport './index.scss'\n\nexport type CellContextShape = {\n  cellEditorConfig: CellEditorConfig | null\n  cellEditorPlugins: Array<JSX.Element> | JSX.Element | null\n  set: (\n    cellEditorConfig: CellEditorConfig | null,\n    cellEditorPlugins: Array<JSX.Element> | JSX.Element | null,\n  ) => void\n}\n\nexport type CellEditorConfig = Readonly<{\n  namespace: string\n  nodes?: ReadonlyArray<Klass<LexicalNode>>\n  onError: (error: Error, editor: LexicalEditor) => void\n  readOnly?: boolean\n  theme?: EditorThemeClasses\n}>\n\nexport const OPEN_TABLE_DRAWER_COMMAND: LexicalCommand<{}> = createCommand(\n  'OPEN_EMBED_DRAWER_COMMAND',\n)\n\nexport const CellContext = createContext<CellContextShape>({\n  cellEditorConfig: null,\n  cellEditorPlugins: null,\n  set: () => {\n    // Empty\n  },\n})\nconst drawerSlug = 'lexical-table-create'\n\nexport function TableContext({ children }: { children: JSX.Element }) {\n  const [contextValue, setContextValue] = useState<{\n    cellEditorConfig: CellEditorConfig | null\n    cellEditorPlugins: Array<JSX.Element> | JSX.Element | null\n  }>({\n    cellEditorConfig: null,\n    cellEditorPlugins: null,\n  })\n  return (\n    <CellContext.Provider\n      value={useMemo(\n        () => ({\n          cellEditorConfig: contextValue.cellEditorConfig,\n          cellEditorPlugins: contextValue.cellEditorPlugins,\n          set: (cellEditorConfig, cellEditorPlugins) => {\n            setContextValue({ cellEditorConfig, cellEditorPlugins })\n          },\n        }),\n        [contextValue.cellEditorConfig, contextValue.cellEditorPlugins],\n      )}\n    >\n      {children}\n    </CellContext.Provider>\n  )\n}\n\nexport const TablePlugin: PluginComponent = () => {\n  const [editor] = useLexicalComposerContext()\n  const cellContext = useContext(CellContext)\n  const { closeModal, toggleModal } = useModal()\n\n  useEffect(() => {\n    if (!editor.hasNodes([TableNode])) {\n      invariant(false, 'TablePlugin: TableNode is not registered on editor')\n    }\n\n    return mergeRegister(\n      editor.registerCommand(\n        OPEN_TABLE_DRAWER_COMMAND,\n        () => {\n          let rangeSelection: RangeSelection | null = null\n\n          editor.getEditorState().read(() => {\n            const selection = $getSelection()\n            if ($isRangeSelection(selection)) {\n              rangeSelection = selection\n            }\n          })\n\n          if (rangeSelection) {\n            toggleModal(drawerSlug)\n          }\n          return true\n        },\n        COMMAND_PRIORITY_EDITOR,\n      ),\n    )\n  }, [cellContext, editor, toggleModal])\n\n  return (\n    <React.Fragment>\n      <FieldsDrawer\n        data={{}}\n        drawerSlug={drawerSlug}\n        drawerTitle=\"Create Table\"\n        featureKey=\"experimental_table\"\n        handleDrawerSubmit={(_fields, data) => {\n          closeModal(drawerSlug)\n\n          if (!data.columns || !data.rows) {\n            return\n          }\n\n          editor.dispatchCommand(INSERT_TABLE_COMMAND, {\n            columns: String(data.columns),\n            rows: String(data.rows),\n          })\n        }}\n        schemaPathSuffix=\"fields\"\n      />\n      <LexicalReactTablePlugin hasCellBackgroundColor={false} hasCellMerge />\n    </React.Fragment>\n  )\n}\n"],"names":["useLexicalComposerContext","TablePlugin","LexicalReactTablePlugin","INSERT_TABLE_COMMAND","TableNode","mergeRegister","useModal","$getSelection","$isRangeSelection","COMMAND_PRIORITY_EDITOR","createCommand","createContext","useContext","useEffect","useMemo","useState","React","invariant","FieldsDrawer","OPEN_TABLE_DRAWER_COMMAND","CellContext","cellEditorConfig","cellEditorPlugins","set","drawerSlug","TableContext","children","contextValue","setContextValue","Provider","value","editor","cellContext","closeModal","toggleModal","hasNodes","registerCommand","rangeSelection","getEditorState","read","selection","Fragment","data","drawerTitle","featureKey","handleDrawerSubmit","_fields","columns","rows","dispatchCommand","String","schemaPathSuffix","hasCellBackgroundColor","hasCellMerge"],"mappings":"AAAA;;AAYA,SAASA,yBAAyB,QAAQ,wCAAuC;AACjF,SAASC,eAAeC,uBAAuB,QAAQ,oCAAmC;AAC1F,SAASC,oBAAoB,EAAEC,SAAS,QAAQ,iBAAgB;AAChE,SAASC,aAAa,QAAQ,iBAAgB;AAC9C,SAASC,QAAQ,QAAQ,iBAAgB;AACzC,SAASC,aAAa,EAAEC,iBAAiB,EAAEC,uBAAuB,EAAEC,aAAa,QAAQ,UAAS;AAClG,SAASC,aAAa,EAAEC,UAAU,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAO;AAC/E,YAAYC,WAAW,QAAO;AAI9B,SAASC,SAAS,QAAQ,yCAAwC;AAClE,SAASC,YAAY,QAAQ,+CAA8C;AAoB3E,OAAO,MAAMC,4BAAgDT,cAC3D,6BACD;AAED,OAAO,MAAMU,4BAAcT,cAAgC;IACzDU,kBAAkB;IAClBC,mBAAmB;IACnBC,KAAK;IACH,QAAQ;IACV;AACF,GAAE;AACF,MAAMC,aAAa;AAEnB,OAAO,SAASC,aAAa,EAAEC,QAAQ,EAA6B;IAClE,MAAM,CAACC,cAAcC,gBAAgB,GAAGb,SAGrC;QACDM,kBAAkB;QAClBC,mBAAmB;IACrB;IACA,qBACE,KAACF,YAAYS,QAAQ;QACnBC,OAAOhB,QACL,IAAO,CAAA;gBACLO,kBAAkBM,aAAaN,gBAAgB;gBAC/CC,mBAAmBK,aAAaL,iBAAiB;gBACjDC,KAAK,CAACF,kBAAkBC;oBACtBM,gBAAgB;wBAAEP;wBAAkBC;oBAAkB;gBACxD;YACF,CAAA,GACA;YAACK,aAAaN,gBAAgB;YAAEM,aAAaL,iBAAiB;SAAC;kBAGhEI;;AAGP;AAEA,OAAO,MAAMzB,cAA+B;IAC1C,MAAM,CAAC8B,OAAO,GAAG/B;IACjB,MAAMgC,cAAcpB,WAAWQ;IAC/B,MAAM,EAAEa,UAAU,EAAEC,WAAW,EAAE,GAAG5B;IAEpCO,UAAU;QACR,IAAI,CAACkB,OAAOI,QAAQ,CAAC;YAAC/B;SAAU,GAAG;YACjCa,UAAU,OAAO;QACnB;QAEA,OAAOZ,cACL0B,OAAOK,eAAe,CACpBjB,2BACA;YACE,IAAIkB,iBAAwC;YAE5CN,OAAOO,cAAc,GAAGC,IAAI,CAAC;gBAC3B,MAAMC,YAAYjC;gBAClB,IAAIC,kBAAkBgC,YAAY;oBAChCH,iBAAiBG;gBACnB;YACF;YAEA,IAAIH,gBAAgB;gBAClBH,YAAYV;YACd;YACA,OAAO;QACT,GACAf;IAGN,GAAG;QAACuB;QAAaD;QAAQG;KAAY;IAErC,qBACE,MAAClB,MAAMyB,QAAQ;;0BACb,KAACvB;gBACCwB,MAAM,CAAC;gBACPlB,YAAYA;gBACZmB,aAAY;gBACZC,YAAW;gBACXC,oBAAoB,CAACC,SAASJ;oBAC5BT,WAAWT;oBAEX,IAAI,CAACkB,KAAKK,OAAO,IAAI,CAACL,KAAKM,IAAI,EAAE;wBAC/B;oBACF;oBAEAjB,OAAOkB,eAAe,CAAC9C,sBAAsB;wBAC3C4C,SAASG,OAAOR,KAAKK,OAAO;wBAC5BC,MAAME,OAAOR,KAAKM,IAAI;oBACxB;gBACF;gBACAG,kBAAiB;;0BAEnB,KAACjD;gBAAwBkD,wBAAwB;gBAAOC,YAAY;;;;AAG1E,EAAC"}