@payloadcms/richtext-lexical 3.70.0 → 3.71.0-internal-debug.80dab4c

package/dist/features/experimental_table/client/plugins/TableHoverActionsPlugin/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","useLexicalComposerContext","useLexicalEditable","$getTableAndElementByKey","$getTableColumnIndexFromTableCellNode","$getTableRowIndexFromTableCellNode","$insertTableColumnAtSelection","$insertTableRowAtSelection","$isTableCellNode","$isTableNode","getTableElement","TableNode","$findMatchingParent","mergeRegister","$getNearestNodeFromDOMNode","isHTMLElement","useEffect","useMemo","useRef","useState","React","createPortal","useEditorConfigContext","useDebounce","BUTTON_WIDTH_PX","TableHoverActionsContainer","anchorElem","editor","isEditable","editorConfig","isShownRow","setShownRow","isShownColumn","setShownColumn","shouldListenMouseMove","setShouldListenMouseMove","position","setPosition","tableSetRef","Set","tableCellDOMNodeRef","debouncedOnMouseMove","event","isOutside","tableDOMNode","getMouseInfo","lexical","current","hoveredRowNode","hoveredColumnNode","tableDOMElement","getEditorState","read","maybeTableCell","table","node","getElementByKey","getKey","rowCount","getChildrenSize","colCount","getChildAtIndex","rowIndex","colIndex","tableContainerElement","parentElement","bottom","tableElemBottom","height","tableElemHeight","left","tableElemLeft","right","tableElemRight","width","tableElemWidth","y","tableElemY","getBoundingClientRect","tableHasScroll","classList","contains","scrollWidth","clientWidth","editorElemLeft","editorElemY","offsetLeft","top","offsetWidth","tableResizeObserver","ResizeObserver","document","addEventListener","removeEventListener","registerMutationListener","mutations","resetObserver","key","type","add","delete","disconnect","tableKey","tableElement","observe","size","skipInitialization","insertAction","insertRow","update","maybeTableNode","selectEnd","_jsxs","_Fragment","_jsx","className","theme","tableAddRows","onClick","style","tableAddColumns","target","closest","tableCell","tableCellResizer","TableHoverActionsPlugin","t0","$","t1","undefined","body","t2"],"sources":["../../../../../../src/features/experimental_table/client/plugins/TableHoverActionsPlugin/index.tsx"],"sourcesContent":["'use client'\n\nimport type { TableCellNode, TableRowNode } from '@lexical/table'\nimport type { EditorConfig, NodeKey } from 'lexical'\nimport type { JSX } from 'react'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'\nimport { useLexicalEditable } from '@lexical/react/useLexicalEditable'\nimport {\n  $getTableAndElementByKey,\n  $getTableColumnIndexFromTableCellNode,\n  $getTableRowIndexFromTableCellNode,\n  $insertTableColumnAtSelection,\n  $insertTableRowAtSelection,\n  $isTableCellNode,\n  $isTableNode,\n  getTableElement,\n  TableNode,\n} from '@lexical/table'\nimport { $findMatchingParent, mergeRegister } from '@lexical/utils'\nimport { $getNearestNodeFromDOMNode, isHTMLElement } from 'lexical'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport * as React from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { useEditorConfigContext } from '../../../../../lexical/config/client/EditorConfigProvider.js'\nimport { useDebounce } from '../../utils/useDebounce.js'\n\nconst BUTTON_WIDTH_PX = 20\n\nfunction TableHoverActionsContainer({\n  anchorElem,\n}: {\n  anchorElem: HTMLElement\n}): JSX.Element | null {\n  const [editor] = useLexicalComposerContext()\n  const isEditable = useLexicalEditable()\n\n  const editorConfig = useEditorConfigContext()\n  const [isShownRow, setShownRow] = useState<boolean>(false)\n  const [isShownColumn, setShownColumn] = useState<boolean>(false)\n  const [shouldListenMouseMove, setShouldListenMouseMove] = useState<boolean>(false)\n  const [position, setPosition] = useState({})\n  const tableSetRef = useRef<Set<NodeKey>>(new Set())\n  const tableCellDOMNodeRef = useRef<HTMLElement | null>(null)\n\n  const debouncedOnMouseMove = useDebounce(\n    (event: MouseEvent) => {\n      const { isOutside, tableDOMNode } = getMouseInfo(event, editorConfig.editorConfig?.lexical)\n\n      if (isOutside) {\n        setShownRow(false)\n        setShownColumn(false)\n        return\n      }\n\n      if (!tableDOMNode) {\n        return\n      }\n\n      tableCellDOMNodeRef.current = tableDOMNode\n\n      let hoveredRowNode: null | TableCellNode = null\n      let hoveredColumnNode: null | TableCellNode = null\n      let tableDOMElement: HTMLElement | null = null\n\n      editor.getEditorState().read(\n        () => {\n          const maybeTableCell = $getNearestNodeFromDOMNode(tableDOMNode)\n\n          if ($isTableCellNode(maybeTableCell)) {\n            const table = $findMatchingParent(maybeTableCell, (node) => $isTableNode(node))\n            if (!$isTableNode(table)) {\n              return\n            }\n\n            tableDOMElement = getTableElement(table, editor.getElementByKey(table.getKey()))\n\n            if (tableDOMElement) {\n              const rowCount = table.getChildrenSize()\n              const colCount = (table.getChildAtIndex(0) as TableRowNode)?.getChildrenSize()\n\n              const rowIndex = $getTableRowIndexFromTableCellNode(maybeTableCell)\n              const colIndex = $getTableColumnIndexFromTableCellNode(maybeTableCell)\n\n              if (rowIndex === rowCount - 1) {\n                hoveredRowNode = maybeTableCell\n              } else if (colIndex === colCount - 1) {\n                hoveredColumnNode = maybeTableCell\n              }\n            }\n          }\n        },\n        { editor },\n      )\n\n      if (!tableDOMElement) {\n        return\n      }\n\n      // this is the scrollable div container of the table (in case of overflow)\n      const tableContainerElement = (tableDOMElement as HTMLTableElement).parentElement\n\n      if (!tableContainerElement) {\n        return\n      }\n\n      const {\n        bottom: tableElemBottom,\n        height: tableElemHeight,\n        left: tableElemLeft,\n        right: tableElemRight,\n        width: tableElemWidth,\n        y: tableElemY,\n      } = (tableDOMElement as HTMLTableElement).getBoundingClientRect()\n\n      let tableHasScroll = false\n      if (\n        tableContainerElement &&\n        tableContainerElement.classList.contains('LexicalEditorTheme__tableScrollableWrapper')\n      ) {\n        tableHasScroll = tableContainerElement.scrollWidth > tableContainerElement.clientWidth\n      }\n\n      const { left: editorElemLeft, y: editorElemY } = anchorElem.getBoundingClientRect()\n\n      if (hoveredRowNode) {\n        setShownColumn(false)\n        setShownRow(true)\n        setPosition({\n          height: BUTTON_WIDTH_PX,\n          left:\n            tableHasScroll && tableContainerElement\n              ? tableContainerElement.offsetLeft\n              : tableElemLeft - editorElemLeft,\n          top: tableElemBottom - editorElemY + 5,\n          width:\n            tableHasScroll && tableContainerElement\n              ? tableContainerElement.offsetWidth\n              : tableElemWidth,\n        })\n      } else if (hoveredColumnNode) {\n        setShownColumn(true)\n        setShownRow(false)\n        setPosition({\n          height: tableElemHeight,\n          left: tableElemRight - editorElemLeft + 5,\n          top: tableElemY - editorElemY,\n          width: BUTTON_WIDTH_PX,\n        })\n      }\n    },\n    50,\n    250,\n  )\n\n  // Hide the buttons on any table dimensions change to prevent last row cells\n  // overlap behind the 'Add Row' button when text entry changes cell height\n  const tableResizeObserver = useMemo(() => {\n    return new ResizeObserver(() => {\n      setShownRow(false)\n      setShownColumn(false)\n    })\n  }, [])\n\n  useEffect(() => {\n    if (!shouldListenMouseMove) {\n      return\n    }\n\n    document.addEventListener('mousemove', debouncedOnMouseMove)\n\n    return () => {\n      setShownRow(false)\n      setShownColumn(false)\n\n      document.removeEventListener('mousemove', debouncedOnMouseMove)\n    }\n  }, [shouldListenMouseMove, debouncedOnMouseMove])\n\n  useEffect(() => {\n    return mergeRegister(\n      editor.registerMutationListener(\n        TableNode,\n        (mutations) => {\n          editor.getEditorState().read(\n            () => {\n              let resetObserver = false\n              for (const [key, type] of mutations) {\n                switch (type) {\n                  case 'created': {\n                    tableSetRef.current.add(key)\n                    resetObserver = true\n                    break\n                  }\n                  case 'destroyed': {\n                    tableSetRef.current.delete(key)\n                    resetObserver = true\n                    break\n                  }\n                  default:\n                    break\n                }\n              }\n              if (resetObserver) {\n                // Reset resize observers\n                tableResizeObserver.disconnect()\n                for (const tableKey of tableSetRef.current) {\n                  const { tableElement } = $getTableAndElementByKey(tableKey)\n                  tableResizeObserver.observe(tableElement)\n                }\n                setShouldListenMouseMove(tableSetRef.current.size > 0)\n              }\n            },\n            { editor },\n          )\n        },\n        { skipInitialization: false },\n      ),\n    )\n  }, [editor, tableResizeObserver])\n\n  const insertAction = (insertRow: boolean) => {\n    editor.update(() => {\n      if (tableCellDOMNodeRef.current) {\n        const maybeTableNode = $getNearestNodeFromDOMNode(tableCellDOMNodeRef.current)\n        maybeTableNode?.selectEnd()\n        if (insertRow) {\n          $insertTableRowAtSelection()\n          setShownRow(false)\n        } else {\n          $insertTableColumnAtSelection()\n          setShownColumn(false)\n        }\n      }\n    })\n  }\n\n  if (!isEditable) {\n    return null\n  }\n\n  return (\n    <>\n      {isShownRow && (\n        <button\n          aria-label=\"Add Row\"\n          className={editorConfig.editorConfig.lexical.theme.tableAddRows}\n          onClick={() => insertAction(true)}\n          style={{ ...position }}\n          type=\"button\"\n        />\n      )}\n      {isShownColumn && (\n        <button\n          aria-label=\"Add Column\"\n          className={editorConfig.editorConfig.lexical.theme.tableAddColumns}\n          onClick={() => insertAction(false)}\n          style={{ ...position }}\n          type=\"button\"\n        />\n      )}\n    </>\n  )\n}\n\nfunction getMouseInfo(\n  event: MouseEvent,\n  editorConfig: EditorConfig,\n): {\n  isOutside: boolean\n  tableDOMNode: HTMLElement | null\n} {\n  const target = event.target\n\n  if (isHTMLElement(target)) {\n    const tableDOMNode = target.closest<HTMLElement>(\n      `td.${editorConfig.theme.tableCell}, th.${editorConfig.theme.tableCell}`,\n    )\n\n    const isOutside = !(\n      tableDOMNode ||\n      target.closest<HTMLElement>(`button.${editorConfig.theme.tableAddRows}`) ||\n      target.closest<HTMLElement>(`button.${editorConfig.theme.tableAddColumns}`) ||\n      target.closest<HTMLElement>(`div.${editorConfig.theme.tableCellResizer}`)\n    )\n\n    return { isOutside, tableDOMNode }\n  } else {\n    return { isOutside: true, tableDOMNode: null }\n  }\n}\n\nexport function TableHoverActionsPlugin({\n  anchorElem = document.body,\n}: {\n  anchorElem?: HTMLElement\n}): null | React.ReactPortal {\n  const isEditable = useLexicalEditable()\n\n  if (!isEditable) {\n    return null\n  }\n\n  return createPortal(<TableHoverActionsContainer anchorElem={anchorElem} />, anchorElem)\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAMA,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,kBAAkB,QAAQ;AACnC,SACEC,wBAAwB,EACxBC,qCAAqC,EACrCC,kCAAkC,EAClCC,6BAA6B,EAC7BC,0BAA0B,EAC1BC,gBAAgB,EAChBC,YAAY,EACZC,eAAe,EACfC,SAAS,QACJ;AACP,SAASC,mBAAmB,EAAEC,aAAa,QAAQ;AACnD,SAASC,0BAA0B,EAAEC,aAAa,QAAQ;AAC1D,SAASC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ;AACrD,YAAYC,KAAA,MAAW;AACvB,SAASC,YAAY,QAAQ;AAE7B,SAASC,sBAAsB,QAAQ;AACvC,SAASC,WAAW,QAAQ;AAE5B,MAAMC,eAAA,GAAkB;AAExB,SAASC,2BAA2B;EAClCC;AAAU,CAGX;EACC,MAAM,CAACC,MAAA,CAAO,GAAG1B,yBAAA;EACjB,MAAM2B,UAAA,GAAa1B,kBAAA;EAEnB,MAAM2B,YAAA,GAAeP,sBAAA;EACrB,MAAM,CAACQ,UAAA,EAAYC,WAAA,CAAY,GAAGZ,QAAA,CAAkB;EACpD,MAAM,CAACa,aAAA,EAAeC,cAAA,CAAe,GAAGd,QAAA,CAAkB;EAC1D,MAAM,CAACe,qBAAA,EAAuBC,wBAAA,CAAyB,GAAGhB,QAAA,CAAkB;EAC5E,MAAM,CAACiB,QAAA,EAAUC,WAAA,CAAY,GAAGlB,QAAA,CAAS,CAAC;EAC1C,MAAMmB,WAAA,GAAcpB,MAAA,CAAqB,IAAIqB,GAAA;EAC7C,MAAMC,mBAAA,GAAsBtB,MAAA,CAA2B;EAEvD,MAAMuB,oBAAA,GAAuBlB,WAAA,CAC1BmB,KAAA;IACC,MAAM;MAAEC,SAAS;MAAEC;IAAY,CAAE,GAAGC,YAAA,CAAaH,KAAA,EAAOb,YAAA,CAAaA,YAAY,EAAEiB,OAAA;IAEnF,IAAIH,SAAA,EAAW;MACbZ,WAAA,CAAY;MACZE,cAAA,CAAe;MACf;IACF;IAEA,IAAI,CAACW,YAAA,EAAc;MACjB;IACF;IAEAJ,mBAAA,CAAoBO,OAAO,GAAGH,YAAA;IAE9B,IAAII,cAAA,GAAuC;IAC3C,IAAIC,iBAAA,GAA0C;IAC9C,IAAIC,eAAA,GAAsC;IAE1CvB,MAAA,CAAOwB,cAAc,GAAGC,IAAI,CAC1B;MACE,MAAMC,cAAA,GAAiBvC,0BAAA,CAA2B8B,YAAA;MAElD,IAAIpC,gBAAA,CAAiB6C,cAAA,GAAiB;QACpC,MAAMC,KAAA,GAAQ1C,mBAAA,CAAoByC,cAAA,EAAiBE,IAAA,IAAS9C,YAAA,CAAa8C,IAAA;QACzE,IAAI,CAAC9C,YAAA,CAAa6C,KAAA,GAAQ;UACxB;QACF;QAEAJ,eAAA,GAAkBxC,eAAA,CAAgB4C,KAAA,EAAO3B,MAAA,CAAO6B,eAAe,CAACF,KAAA,CAAMG,MAAM;QAE5E,IAAIP,eAAA,EAAiB;UACnB,MAAMQ,QAAA,GAAWJ,KAAA,CAAMK,eAAe;UACtC,MAAMC,QAAA,GAAYN,KAAA,CAAMO,eAAe,CAAC,IAAqBF,eAAA;UAE7D,MAAMG,QAAA,GAAWzD,kCAAA,CAAmCgD,cAAA;UACpD,MAAMU,QAAA,GAAW3D,qCAAA,CAAsCiD,cAAA;UAEvD,IAAIS,QAAA,KAAaJ,QAAA,GAAW,GAAG;YAC7BV,cAAA,GAAiBK,cAAA;UACnB,OAAO,IAAIU,QAAA,KAAaH,QAAA,GAAW,GAAG;YACpCX,iBAAA,GAAoBI,cAAA;UACtB;QACF;MACF;IACF,GACA;MAAE1B;IAAO;IAGX,IAAI,CAACuB,eAAA,EAAiB;MACpB;IACF;IAEA;IACA,MAAMc,qBAAA,GAAwBd,eAAC,CAAqCe,aAAa;IAEjF,IAAI,CAACD,qBAAA,EAAuB;MAC1B;IACF;IAEA,MAAM;MACJE,MAAA,EAAQC,eAAe;MACvBC,MAAA,EAAQC,eAAe;MACvBC,IAAA,EAAMC,aAAa;MACnBC,KAAA,EAAOC,cAAc;MACrBC,KAAA,EAAOC,cAAc;MACrBC,CAAA,EAAGC;IAAU,CACd,GAAG3B,eAAC,CAAqC4B,qBAAqB;IAE/D,IAAIC,cAAA,GAAiB;IACrB,IACEf,qBAAA,IACAA,qBAAA,CAAsBgB,SAAS,CAACC,QAAQ,CAAC,+CACzC;MACAF,cAAA,GAAiBf,qBAAA,CAAsBkB,WAAW,GAAGlB,qBAAA,CAAsBmB,WAAW;IACxF;IAEA,MAAM;MAAEb,IAAA,EAAMc,cAAc;MAAER,CAAA,EAAGS;IAAW,CAAE,GAAG3D,UAAA,CAAWoD,qBAAqB;IAEjF,IAAI9B,cAAA,EAAgB;MAClBf,cAAA,CAAe;MACfF,WAAA,CAAY;MACZM,WAAA,CAAY;QACV+B,MAAA,EAAQ5C,eAAA;QACR8C,IAAA,EACES,cAAA,IAAkBf,qBAAA,GACdA,qBAAA,CAAsBsB,UAAU,GAChCf,aAAA,GAAgBa,cAAA;QACtBG,GAAA,EAAKpB,eAAA,GAAkBkB,WAAA,GAAc;QACrCX,KAAA,EACEK,cAAA,IAAkBf,qBAAA,GACdA,qBAAA,CAAsBwB,WAAW,GACjCb;MACR;IACF,OAAO,IAAI1B,iBAAA,EAAmB;MAC5BhB,cAAA,CAAe;MACfF,WAAA,CAAY;MACZM,WAAA,CAAY;QACV+B,MAAA,EAAQC,eAAA;QACRC,IAAA,EAAMG,cAAA,GAAiBW,cAAA,GAAiB;QACxCG,GAAA,EAAKV,UAAA,GAAaQ,WAAA;QAClBX,KAAA,EAAOlD;MACT;IACF;EACF,GACA,IACA;EAGF;EACA;EACA,MAAMiE,mBAAA,GAAsBxE,OAAA,CAAQ;IAClC,OAAO,IAAIyE,cAAA,CAAe;MACxB3D,WAAA,CAAY;MACZE,cAAA,CAAe;IACjB;EACF,GAAG,EAAE;EAELjB,SAAA,CAAU;IACR,IAAI,CAACkB,qBAAA,EAAuB;MAC1B;IACF;IAEAyD,QAAA,CAASC,gBAAgB,CAAC,aAAanD,oBAAA;IAEvC,OAAO;MACLV,WAAA,CAAY;MACZE,cAAA,CAAe;MAEf0D,QAAA,CAASE,mBAAmB,CAAC,aAAapD,oBAAA;IAC5C;EACF,GAAG,CAACP,qBAAA,EAAuBO,oBAAA,CAAqB;EAEhDzB,SAAA,CAAU;IACR,OAAOH,aAAA,CACLc,MAAA,CAAOmE,wBAAwB,CAC7BnF,SAAA,EACCoF,SAAA;MACCpE,MAAA,CAAOwB,cAAc,GAAGC,IAAI,CAC1B;QACE,IAAI4C,aAAA,GAAgB;QACpB,KAAK,MAAM,CAACC,GAAA,EAAKC,IAAA,CAAK,IAAIH,SAAA,EAAW;UACnC,QAAQG,IAAA;YACN,KAAK;cAAW;gBACd5D,WAAA,CAAYS,OAAO,CAACoD,GAAG,CAACF,GAAA;gBACxBD,aAAA,GAAgB;gBAChB;cACF;YACA,KAAK;cAAa;gBAChB1D,WAAA,CAAYS,OAAO,CAACqD,MAAM,CAACH,GAAA;gBAC3BD,aAAA,GAAgB;gBAChB;cACF;YACA;cACE;UACJ;QACF;QACA,IAAIA,aAAA,EAAe;UACjB;UACAP,mBAAA,CAAoBY,UAAU;UAC9B,KAAK,MAAMC,QAAA,IAAYhE,WAAA,CAAYS,OAAO,EAAE;YAC1C,MAAM;cAAEwD;YAAY,CAAE,GAAGpG,wBAAA,CAAyBmG,QAAA;YAClDb,mBAAA,CAAoBe,OAAO,CAACD,YAAA;UAC9B;UACApE,wBAAA,CAAyBG,WAAA,CAAYS,OAAO,CAAC0D,IAAI,GAAG;QACtD;MACF,GACA;QAAE9E;MAAO;IAEb,GACA;MAAE+E,kBAAA,EAAoB;IAAM;EAGlC,GAAG,CAAC/E,MAAA,EAAQ8D,mBAAA,CAAoB;EAEhC,MAAMkB,YAAA,GAAgBC,SAAA;IACpBjF,MAAA,CAAOkF,MAAM,CAAC;MACZ,IAAIrE,mBAAA,CAAoBO,OAAO,EAAE;QAC/B,MAAM+D,cAAA,GAAiBhG,0BAAA,CAA2B0B,mBAAA,CAAoBO,OAAO;QAC7E+D,cAAA,EAAgBC,SAAA;QAChB,IAAIH,SAAA,EAAW;UACbrG,0BAAA;UACAwB,WAAA,CAAY;QACd,OAAO;UACLzB,6BAAA;UACA2B,cAAA,CAAe;QACjB;MACF;IACF;EACF;EAEA,IAAI,CAACL,UAAA,EAAY;IACf,OAAO;EACT;EAEA,oBACEoF,KAAA,CAAAC,SAAA;eACGnF,UAAA,iBACCoF,IAAA,CAAC;MACC,cAAW;MACXC,SAAA,EAAWtF,YAAA,CAAaA,YAAY,CAACiB,OAAO,CAACsE,KAAK,CAACC,YAAY;MAC/DC,OAAA,EAASA,CAAA,KAAMX,YAAA,CAAa;MAC5BY,KAAA,EAAO;QAAE,GAAGnF;MAAS;MACrB8D,IAAA,EAAK;QAGRlE,aAAA,iBACCkF,IAAA,CAAC;MACC,cAAW;MACXC,SAAA,EAAWtF,YAAA,CAAaA,YAAY,CAACiB,OAAO,CAACsE,KAAK,CAACI,eAAe;MAClEF,OAAA,EAASA,CAAA,KAAMX,YAAA,CAAa;MAC5BY,KAAA,EAAO;QAAE,GAAGnF;MAAS;MACrB8D,IAAA,EAAK;;;AAKf;AAEA,SAASrD,aACPH,KAAiB,EACjBb,YAA0B;EAK1B,MAAM4F,MAAA,GAAS/E,KAAA,CAAM+E,MAAM;EAE3B,IAAI1G,aAAA,CAAc0G,MAAA,GAAS;IACzB,MAAM7E,YAAA,GAAe6E,MAAA,CAAOC,OAAO,CACjC,MAAM7F,YAAA,CAAauF,KAAK,CAACO,SAAS,QAAQ9F,YAAA,CAAauF,KAAK,CAACO,SAAS,EAAE;IAG1E,MAAMhF,SAAA,GAAY,EAChBC,YAAA,IACA6E,MAAA,CAAOC,OAAO,CAAc,UAAU7F,YAAA,CAAauF,KAAK,CAACC,YAAY,EAAE,KACvEI,MAAA,CAAOC,OAAO,CAAc,UAAU7F,YAAA,CAAauF,KAAK,CAACI,eAAe,EAAE,KAC1EC,MAAA,CAAOC,OAAO,CAAc,OAAO7F,YAAA,CAAauF,KAAK,CAACQ,gBAAgB,EAAE;IAG1E,OAAO;MAAEjF,SAAA;MAAWC;IAAa;EACnC,OAAO;IACL,OAAO;MAAED,SAAA,EAAW;MAAMC,YAAA,EAAc;IAAK;EAC/C;AACF;AAEA,OAAO,SAAAiF,wBAAAC,EAAA;EAAA,MAAAC,CAAA,GAAA/H,EAAA;EAAiC;IAAA0B,UAAA,EAAAsG;EAAA,IAAAF,EAIvC;EAHC,MAAApG,UAAA,GAAAsG,EAA0B,KAAAC,SAAA,GAAAtC,QAAA,CAAAuC,IAAA,GAA1BF,EAA0B;EAI1B,MAAApG,UAAA,GAAmB1B,kBAAA;EAAA,KAEd0B,UAAA;IAAA;EAAA;EAAA,IAAAuG,EAAA;EAAA,IAAAJ,CAAA,QAAArG,UAAA;IAIEyG,EAAA,GAAA9G,YAAA,CAAa6F,IAAA,CAAAzF,0BAAA;MAAAC;IAAA,C,GAAwDA,UAAA;IAAAqG,CAAA,MAAArG,UAAA;IAAAqG,CAAA,MAAAI,EAAA;EAAA;IAAAA,EAAA,GAAAJ,CAAA;EAAA;EAAA,OAArEI,EAAqE;AAAA","ignoreList":[]}
+{"version":3,"sources":["../../../../../../src/features/experimental_table/client/plugins/TableHoverActionsPlugin/index.tsx"],"sourcesContent":["'use client'\n\nimport type { TableCellNode, TableRowNode } from '@lexical/table'\nimport type { EditorConfig, NodeKey } from 'lexical'\nimport type { JSX } from 'react'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'\nimport { useLexicalEditable } from '@lexical/react/useLexicalEditable'\nimport {\n  $getTableAndElementByKey,\n  $getTableColumnIndexFromTableCellNode,\n  $getTableRowIndexFromTableCellNode,\n  $insertTableColumnAtSelection,\n  $insertTableRowAtSelection,\n  $isTableCellNode,\n  $isTableNode,\n  getTableElement,\n  TableNode,\n} from '@lexical/table'\nimport { $findMatchingParent, mergeRegister } from '@lexical/utils'\nimport { $getNearestNodeFromDOMNode, isHTMLElement } from 'lexical'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport * as React from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { useEditorConfigContext } from '../../../../../lexical/config/client/EditorConfigProvider.js'\nimport { useDebounce } from '../../utils/useDebounce.js'\n\nconst BUTTON_WIDTH_PX = 20\n\nfunction TableHoverActionsContainer({\n  anchorElem,\n}: {\n  anchorElem: HTMLElement\n}): JSX.Element | null {\n  const [editor] = useLexicalComposerContext()\n  const isEditable = useLexicalEditable()\n\n  const editorConfig = useEditorConfigContext()\n  const [isShownRow, setShownRow] = useState<boolean>(false)\n  const [isShownColumn, setShownColumn] = useState<boolean>(false)\n  const [shouldListenMouseMove, setShouldListenMouseMove] = useState<boolean>(false)\n  const [position, setPosition] = useState({})\n  const tableSetRef = useRef<Set<NodeKey>>(new Set())\n  const tableCellDOMNodeRef = useRef<HTMLElement | null>(null)\n\n  const debouncedOnMouseMove = useDebounce(\n    (event: MouseEvent) => {\n      const { isOutside, tableDOMNode } = getMouseInfo(event, editorConfig.editorConfig?.lexical)\n\n      if (isOutside) {\n        setShownRow(false)\n        setShownColumn(false)\n        return\n      }\n\n      if (!tableDOMNode) {\n        return\n      }\n\n      tableCellDOMNodeRef.current = tableDOMNode\n\n      let hoveredRowNode: null | TableCellNode = null\n      let hoveredColumnNode: null | TableCellNode = null\n      let tableDOMElement: HTMLElement | null = null\n\n      editor.getEditorState().read(\n        () => {\n          const maybeTableCell = $getNearestNodeFromDOMNode(tableDOMNode)\n\n          if ($isTableCellNode(maybeTableCell)) {\n            const table = $findMatchingParent(maybeTableCell, (node) => $isTableNode(node))\n            if (!$isTableNode(table)) {\n              return\n            }\n\n            tableDOMElement = getTableElement(table, editor.getElementByKey(table.getKey()))\n\n            if (tableDOMElement) {\n              const rowCount = table.getChildrenSize()\n              const colCount = (table.getChildAtIndex(0) as TableRowNode)?.getChildrenSize()\n\n              const rowIndex = $getTableRowIndexFromTableCellNode(maybeTableCell)\n              const colIndex = $getTableColumnIndexFromTableCellNode(maybeTableCell)\n\n              if (rowIndex === rowCount - 1) {\n                hoveredRowNode = maybeTableCell\n              } else if (colIndex === colCount - 1) {\n                hoveredColumnNode = maybeTableCell\n              }\n            }\n          }\n        },\n        { editor },\n      )\n\n      if (!tableDOMElement) {\n        return\n      }\n\n      // this is the scrollable div container of the table (in case of overflow)\n      const tableContainerElement = (tableDOMElement as HTMLTableElement).parentElement\n\n      if (!tableContainerElement) {\n        return\n      }\n\n      const {\n        bottom: tableElemBottom,\n        height: tableElemHeight,\n        left: tableElemLeft,\n        right: tableElemRight,\n        width: tableElemWidth,\n        y: tableElemY,\n      } = (tableDOMElement as HTMLTableElement).getBoundingClientRect()\n\n      let tableHasScroll = false\n      if (\n        tableContainerElement &&\n        tableContainerElement.classList.contains('LexicalEditorTheme__tableScrollableWrapper')\n      ) {\n        tableHasScroll = tableContainerElement.scrollWidth > tableContainerElement.clientWidth\n      }\n\n      const { left: editorElemLeft, y: editorElemY } = anchorElem.getBoundingClientRect()\n\n      if (hoveredRowNode) {\n        setShownColumn(false)\n        setShownRow(true)\n        setPosition({\n          height: BUTTON_WIDTH_PX,\n          left:\n            tableHasScroll && tableContainerElement\n              ? tableContainerElement.offsetLeft\n              : tableElemLeft - editorElemLeft,\n          top: tableElemBottom - editorElemY + 5,\n          width:\n            tableHasScroll && tableContainerElement\n              ? tableContainerElement.offsetWidth\n              : tableElemWidth,\n        })\n      } else if (hoveredColumnNode) {\n        setShownColumn(true)\n        setShownRow(false)\n        setPosition({\n          height: tableElemHeight,\n          left: tableElemRight - editorElemLeft + 5,\n          top: tableElemY - editorElemY,\n          width: BUTTON_WIDTH_PX,\n        })\n      }\n    },\n    50,\n    250,\n  )\n\n  // Hide the buttons on any table dimensions change to prevent last row cells\n  // overlap behind the 'Add Row' button when text entry changes cell height\n  const tableResizeObserver = useMemo(() => {\n    return new ResizeObserver(() => {\n      setShownRow(false)\n      setShownColumn(false)\n    })\n  }, [])\n\n  useEffect(() => {\n    if (!shouldListenMouseMove) {\n      return\n    }\n\n    document.addEventListener('mousemove', debouncedOnMouseMove)\n\n    return () => {\n      setShownRow(false)\n      setShownColumn(false)\n\n      document.removeEventListener('mousemove', debouncedOnMouseMove)\n    }\n  }, [shouldListenMouseMove, debouncedOnMouseMove])\n\n  useEffect(() => {\n    return mergeRegister(\n      editor.registerMutationListener(\n        TableNode,\n        (mutations) => {\n          editor.getEditorState().read(\n            () => {\n              let resetObserver = false\n              for (const [key, type] of mutations) {\n                switch (type) {\n                  case 'created': {\n                    tableSetRef.current.add(key)\n                    resetObserver = true\n                    break\n                  }\n                  case 'destroyed': {\n                    tableSetRef.current.delete(key)\n                    resetObserver = true\n                    break\n                  }\n                  default:\n                    break\n                }\n              }\n              if (resetObserver) {\n                // Reset resize observers\n                tableResizeObserver.disconnect()\n                for (const tableKey of tableSetRef.current) {\n                  const { tableElement } = $getTableAndElementByKey(tableKey)\n                  tableResizeObserver.observe(tableElement)\n                }\n                setShouldListenMouseMove(tableSetRef.current.size > 0)\n              }\n            },\n            { editor },\n          )\n        },\n        { skipInitialization: false },\n      ),\n    )\n  }, [editor, tableResizeObserver])\n\n  const insertAction = (insertRow: boolean) => {\n    editor.update(() => {\n      if (tableCellDOMNodeRef.current) {\n        const maybeTableNode = $getNearestNodeFromDOMNode(tableCellDOMNodeRef.current)\n        maybeTableNode?.selectEnd()\n        if (insertRow) {\n          $insertTableRowAtSelection()\n          setShownRow(false)\n        } else {\n          $insertTableColumnAtSelection()\n          setShownColumn(false)\n        }\n      }\n    })\n  }\n\n  if (!isEditable) {\n    return null\n  }\n\n  return (\n    <>\n      {isShownRow && (\n        <button\n          aria-label=\"Add Row\"\n          className={editorConfig.editorConfig.lexical.theme.tableAddRows}\n          onClick={() => insertAction(true)}\n          style={{ ...position }}\n          type=\"button\"\n        />\n      )}\n      {isShownColumn && (\n        <button\n          aria-label=\"Add Column\"\n          className={editorConfig.editorConfig.lexical.theme.tableAddColumns}\n          onClick={() => insertAction(false)}\n          style={{ ...position }}\n          type=\"button\"\n        />\n      )}\n    </>\n  )\n}\n\nfunction getMouseInfo(\n  event: MouseEvent,\n  editorConfig: EditorConfig,\n): {\n  isOutside: boolean\n  tableDOMNode: HTMLElement | null\n} {\n  const target = event.target\n\n  if (isHTMLElement(target)) {\n    const tableDOMNode = target.closest<HTMLElement>(\n      `td.${editorConfig.theme.tableCell}, th.${editorConfig.theme.tableCell}`,\n    )\n\n    const isOutside = !(\n      tableDOMNode ||\n      target.closest<HTMLElement>(`button.${editorConfig.theme.tableAddRows}`) ||\n      target.closest<HTMLElement>(`button.${editorConfig.theme.tableAddColumns}`) ||\n      target.closest<HTMLElement>(`div.${editorConfig.theme.tableCellResizer}`)\n    )\n\n    return { isOutside, tableDOMNode }\n  } else {\n    return { isOutside: true, tableDOMNode: null }\n  }\n}\n\nexport function TableHoverActionsPlugin({\n  anchorElem = document.body,\n}: {\n  anchorElem?: HTMLElement\n}): null | React.ReactPortal {\n  const isEditable = useLexicalEditable()\n\n  if (!isEditable) {\n    return null\n  }\n\n  return createPortal(<TableHoverActionsContainer anchorElem={anchorElem} />, anchorElem)\n}\n"],"names":["useLexicalComposerContext","useLexicalEditable","$getTableAndElementByKey","$getTableColumnIndexFromTableCellNode","$getTableRowIndexFromTableCellNode","$insertTableColumnAtSelection","$insertTableRowAtSelection","$isTableCellNode","$isTableNode","getTableElement","TableNode","$findMatchingParent","mergeRegister","$getNearestNodeFromDOMNode","isHTMLElement","useEffect","useMemo","useRef","useState","React","createPortal","useEditorConfigContext","useDebounce","BUTTON_WIDTH_PX","TableHoverActionsContainer","anchorElem","editor","isEditable","editorConfig","isShownRow","setShownRow","isShownColumn","setShownColumn","shouldListenMouseMove","setShouldListenMouseMove","position","setPosition","tableSetRef","Set","tableCellDOMNodeRef","debouncedOnMouseMove","event","isOutside","tableDOMNode","getMouseInfo","lexical","current","hoveredRowNode","hoveredColumnNode","tableDOMElement","getEditorState","read","maybeTableCell","table","node","getElementByKey","getKey","rowCount","getChildrenSize","colCount","getChildAtIndex","rowIndex","colIndex","tableContainerElement","parentElement","bottom","tableElemBottom","height","tableElemHeight","left","tableElemLeft","right","tableElemRight","width","tableElemWidth","y","tableElemY","getBoundingClientRect","tableHasScroll","classList","contains","scrollWidth","clientWidth","editorElemLeft","editorElemY","offsetLeft","top","offsetWidth","tableResizeObserver","ResizeObserver","document","addEventListener","removeEventListener","registerMutationListener","mutations","resetObserver","key","type","add","delete","disconnect","tableKey","tableElement","observe","size","skipInitialization","insertAction","insertRow","update","maybeTableNode","selectEnd","button","aria-label","className","theme","tableAddRows","onClick","style","tableAddColumns","target","closest","tableCell","tableCellResizer","TableHoverActionsPlugin","body"],"mappings":"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"}

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

@@ -1,7 +1,5 @@
 'use client';
-
-import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { TablePlugin as LexicalReactTablePlugin } from '@lexical/react/LexicalTablePlugin';
 import { INSERT_TABLE_COMMAND, TableCellNode, TableNode, TableRowNode } from '@lexical/table';
@@ -13,140 +11,113 @@ import * as React from 'react';
 import { useEditorConfigContext } from '../../../../../lexical/config/client/EditorConfigProvider.js';
 import { FieldsDrawer } from '../../../../../utilities/fieldsDrawer/Drawer.js';
 import { useLexicalDrawer } from '../../../../../utilities/fieldsDrawer/useLexicalDrawer.js';
+import './index.scss';
 export const OPEN_TABLE_DRAWER_COMMAND = createCommand('OPEN_EMBED_DRAWER_COMMAND');
-export const CellContext = /*#__PURE__*/createContext({
-  cellEditorConfig: null,
-  cellEditorPlugins: null,
-  set: () => {
-    // Empty
-  }
-});
-export function TableContext({
-  children
-}) {
-  const [contextValue, setContextValue] = useState({
+export const CellContext = /*#__PURE__*/ createContext({
     cellEditorConfig: null,
-    cellEditorPlugins: null
-  });
-  return /*#__PURE__*/_jsx(CellContext, {
-    value: useMemo(() => ({
-      cellEditorConfig: contextValue.cellEditorConfig,
-      cellEditorPlugins: contextValue.cellEditorPlugins,
-      set: (cellEditorConfig, cellEditorPlugins) => {
-        setContextValue({
-          cellEditorConfig,
-          cellEditorPlugins
-        });
-      }
-    }), [contextValue.cellEditorConfig, contextValue.cellEditorPlugins]),
-    children: children
-  });
+    cellEditorPlugins: null,
+    set: ()=>{}
+});
+// Empty
+export function TableContext({ children }) {
+    const [contextValue, setContextValue] = useState({
+        cellEditorConfig: null,
+        cellEditorPlugins: null
+    });
+    return /*#__PURE__*/ _jsxDEV(CellContext, {
+        value: useMemo(()=>({
+                cellEditorConfig: contextValue.cellEditorConfig,
+                cellEditorPlugins: contextValue.cellEditorPlugins,
+                set: (cellEditorConfig, cellEditorPlugins)=>{
+                    setContextValue({
+                        cellEditorConfig,
+                        cellEditorPlugins
+                    });
+                }
+            }), [
+            contextValue.cellEditorConfig,
+            contextValue.cellEditorPlugins
+        ]),
+        children: children
+    }, void 0, false, {
+        fileName: "src/features/experimental_table/client/plugins/TablePlugin/index.tsx",
+        lineNumber: 67,
+        columnNumber: 5
+    }, this);
 }
-export const TablePlugin = () => {
-  const $ = _c(16);
-  const [editor] = useLexicalComposerContext();
-  const cellContext = use(CellContext);
-  const editDepth = useEditDepth();
-  const {
-    fieldProps: t0,
-    uuid
-  } = useEditorConfigContext();
-  const {
-    schemaPath
-  } = t0;
-  const t1 = "lexical-table-create-" + uuid;
-  let t2;
-  if ($[0] !== editDepth || $[1] !== t1) {
-    t2 = formatDrawerSlug({
-      slug: t1,
-      depth: editDepth
+export const TablePlugin = ()=>{
+    const [editor] = useLexicalComposerContext();
+    const cellContext = use(CellContext);
+    const editDepth = useEditDepth();
+    const { fieldProps: { schemaPath }, uuid } = useEditorConfigContext();
+    const drawerSlug = formatDrawerSlug({
+        slug: 'lexical-table-create-' + uuid,
+        depth: editDepth
     });
-    $[0] = editDepth;
-    $[1] = t1;
-    $[2] = t2;
-  } else {
-    t2 = $[2];
-  }
-  const drawerSlug = t2;
-  const {
-    toggleDrawer
-  } = useLexicalDrawer(drawerSlug, true);
-  let t3;
-  if ($[3] !== editor || $[4] !== toggleDrawer) {
-    t3 = () => {
-      if (!editor.hasNodes([TableNode, TableRowNode, TableCellNode])) {
-        throw new Error("TablePlugin: TableNode, TableRowNode, or TableCellNode 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) {
-          toggleDrawer();
+    const { toggleDrawer } = useLexicalDrawer(drawerSlug, true);
+    useEffect(()=>{
+        if (!editor.hasNodes([
+            TableNode,
+            TableRowNode,
+            TableCellNode
+        ])) {
+            throw new Error('TablePlugin: TableNode, TableRowNode, or TableCellNode is not registered on editor');
         }
-        return true;
-      }, COMMAND_PRIORITY_EDITOR));
-    };
-    $[3] = editor;
-    $[4] = toggleDrawer;
-    $[5] = t3;
-  } else {
-    t3 = $[5];
-  }
-  let t4;
-  if ($[6] !== cellContext || $[7] !== editor || $[8] !== toggleDrawer) {
-    t4 = [cellContext, editor, toggleDrawer];
-    $[6] = cellContext;
-    $[7] = editor;
-    $[8] = toggleDrawer;
-    $[9] = t4;
-  } else {
-    t4 = $[9];
-  }
-  useEffect(t3, t4);
-  let t5;
-  if ($[10] !== editor) {
-    t5 = (_fields, data) => {
-      if (!data.columns || !data.rows) {
-        return;
-      }
-      editor.dispatchCommand(INSERT_TABLE_COMMAND, {
-        columns: String(data.columns),
-        rows: String(data.rows)
-      });
-    };
-    $[10] = editor;
-    $[11] = t5;
-  } else {
-    t5 = $[11];
-  }
-  let t6;
-  if ($[12] !== drawerSlug || $[13] !== schemaPath || $[14] !== t5) {
-    t6 = _jsxs(React.Fragment, {
-      children: [_jsx(FieldsDrawer, {
-        drawerSlug,
-        drawerTitle: "Create Table",
-        featureKey: "experimental_table",
-        handleDrawerSubmit: t5,
-        schemaPath,
-        schemaPathSuffix: "fields"
-      }), _jsx(LexicalReactTablePlugin, {
-        hasCellBackgroundColor: false,
-        hasCellMerge: true,
-        hasHorizontalScroll: true
-      })]
-    });
-    $[12] = drawerSlug;
-    $[13] = schemaPath;
-    $[14] = t5;
-    $[15] = t6;
-  } else {
-    t6 = $[15];
-  }
-  return t6;
+        return mergeRegister(editor.registerCommand(OPEN_TABLE_DRAWER_COMMAND, ()=>{
+            let rangeSelection = null;
+            editor.getEditorState().read(()=>{
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    rangeSelection = selection;
+                }
+            });
+            if (rangeSelection) {
+                toggleDrawer();
+            }
+            return true;
+        }, COMMAND_PRIORITY_EDITOR));
+    }, [
+        cellContext,
+        editor,
+        toggleDrawer
+    ]);
+    return /*#__PURE__*/ _jsxDEV(React.Fragment, {
+        children: [
+            /*#__PURE__*/ _jsxDEV(FieldsDrawer, {
+                drawerSlug: drawerSlug,
+                drawerTitle: "Create Table",
+                featureKey: "experimental_table",
+                handleDrawerSubmit: (_fields, data)=>{
+                    if (!data.columns || !data.rows) {
+                        return;
+                    }
+                    editor.dispatchCommand(INSERT_TABLE_COMMAND, {
+                        columns: String(data.columns),
+                        rows: String(data.rows)
+                    });
+                },
+                schemaPath: schemaPath,
+                schemaPathSuffix: "fields"
+            }, void 0, false, {
+                fileName: "src/features/experimental_table/client/plugins/TablePlugin/index.tsx",
+                lineNumber: 131,
+                columnNumber: 7
+            }, this),
+            /*#__PURE__*/ _jsxDEV(LexicalReactTablePlugin, {
+                hasCellBackgroundColor: false,
+                hasCellMerge: true,
+                hasHorizontalScroll: true
+            }, void 0, false, {
+                fileName: "src/features/experimental_table/client/plugins/TablePlugin/index.tsx",
+                lineNumber: 148,
+                columnNumber: 7
+            }, this)
+        ]
+    }, void 0, true, {
+        fileName: "src/features/experimental_table/client/plugins/TablePlugin/index.tsx",
+        lineNumber: 130,
+        columnNumber: 5
+    }, this);
 };
+
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","useLexicalComposerContext","TablePlugin","LexicalReactTablePlugin","INSERT_TABLE_COMMAND","TableCellNode","TableNode","TableRowNode","mergeRegister","formatDrawerSlug","useEditDepth","$getSelection","$isRangeSelection","COMMAND_PRIORITY_EDITOR","createCommand","createContext","use","useEffect","useMemo","useState","React","useEditorConfigContext","FieldsDrawer","useLexicalDrawer","OPEN_TABLE_DRAWER_COMMAND","CellContext","cellEditorConfig","cellEditorPlugins","set","TableContext","children","contextValue","setContextValue","_jsx","value","$","editor","cellContext","editDepth","fieldProps","t0","uuid","schemaPath","t1","t2","slug","depth","drawerSlug","toggleDrawer","t3","hasNodes","Error","registerCommand","rangeSelection","getEditorState","read","selection","t4","t5","_fields","data","columns","rows","dispatchCommand","String","t6","_jsxs","Fragment","drawerTitle","featureKey","handleDrawerSubmit","schemaPathSuffix","hasCellBackgroundColor","hasCellMerge","hasHorizontalScroll"],"sources":["../../../../../../src/features/experimental_table/client/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, TableCellNode, TableNode, TableRowNode } from '@lexical/table'\nimport { mergeRegister } from '@lexical/utils'\nimport { formatDrawerSlug, useEditDepth } from '@payloadcms/ui'\nimport { $getSelection, $isRangeSelection, COMMAND_PRIORITY_EDITOR, createCommand } from 'lexical'\nimport { createContext, use, useEffect, useMemo, useState } from 'react'\nimport * as React from 'react'\n\nimport type { PluginComponent } from '../../../../typesClient.js'\n\nimport { useEditorConfigContext } from '../../../../../lexical/config/client/EditorConfigProvider.js'\nimport { FieldsDrawer } from '../../../../../utilities/fieldsDrawer/Drawer.js'\nimport { useLexicalDrawer } from '../../../../../utilities/fieldsDrawer/useLexicalDrawer.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})\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\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>\n  )\n}\n\nexport const TablePlugin: PluginComponent = () => {\n  const [editor] = useLexicalComposerContext()\n  const cellContext = use(CellContext)\n  const editDepth = useEditDepth()\n  const {\n    fieldProps: { schemaPath },\n    uuid,\n  } = useEditorConfigContext()\n\n  const drawerSlug = formatDrawerSlug({\n    slug: 'lexical-table-create-' + uuid,\n    depth: editDepth,\n  })\n  const { toggleDrawer } = useLexicalDrawer(drawerSlug, true)\n\n  useEffect(() => {\n    if (!editor.hasNodes([TableNode, TableRowNode, TableCellNode])) {\n      throw new Error(\n        'TablePlugin: TableNode, TableRowNode, or TableCellNode is not registered on editor',\n      )\n    }\n\n    return mergeRegister(\n      editor.registerCommand(\n        OPEN_TABLE_DRAWER_COMMAND,\n        () => {\n          let rangeSelection: null | RangeSelection = null\n\n          editor.getEditorState().read(() => {\n            const selection = $getSelection()\n            if ($isRangeSelection(selection)) {\n              rangeSelection = selection\n            }\n          })\n\n          if (rangeSelection) {\n            toggleDrawer()\n          }\n          return true\n        },\n        COMMAND_PRIORITY_EDITOR,\n      ),\n    )\n  }, [cellContext, editor, toggleDrawer])\n\n  return (\n    <React.Fragment>\n      <FieldsDrawer\n        drawerSlug={drawerSlug}\n        drawerTitle=\"Create Table\"\n        featureKey=\"experimental_table\"\n        handleDrawerSubmit={(_fields, data) => {\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        schemaPath={schemaPath}\n        schemaPathSuffix=\"fields\"\n      />\n      <LexicalReactTablePlugin\n        hasCellBackgroundColor={false}\n        hasCellMerge\n        hasHorizontalScroll={true}\n      />\n    </React.Fragment>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"sources":["../../../../../../src/features/experimental_table/client/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, TableCellNode, TableNode, TableRowNode } from '@lexical/table'\nimport { mergeRegister } from '@lexical/utils'\nimport { formatDrawerSlug, useEditDepth } from '@payloadcms/ui'\nimport { $getSelection, $isRangeSelection, COMMAND_PRIORITY_EDITOR, createCommand } from 'lexical'\nimport { createContext, use, useEffect, useMemo, useState } from 'react'\nimport * as React from 'react'\n\nimport type { PluginComponent } from '../../../../typesClient.js'\n\nimport { useEditorConfigContext } from '../../../../../lexical/config/client/EditorConfigProvider.js'\nimport { FieldsDrawer } from '../../../../../utilities/fieldsDrawer/Drawer.js'\nimport { useLexicalDrawer } from '../../../../../utilities/fieldsDrawer/useLexicalDrawer.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})\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\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>\n  )\n}\n\nexport const TablePlugin: PluginComponent = () => {\n  const [editor] = useLexicalComposerContext()\n  const cellContext = use(CellContext)\n  const editDepth = useEditDepth()\n  const {\n    fieldProps: { schemaPath },\n    uuid,\n  } = useEditorConfigContext()\n\n  const drawerSlug = formatDrawerSlug({\n    slug: 'lexical-table-create-' + uuid,\n    depth: editDepth,\n  })\n  const { toggleDrawer } = useLexicalDrawer(drawerSlug, true)\n\n  useEffect(() => {\n    if (!editor.hasNodes([TableNode, TableRowNode, TableCellNode])) {\n      throw new Error(\n        'TablePlugin: TableNode, TableRowNode, or TableCellNode is not registered on editor',\n      )\n    }\n\n    return mergeRegister(\n      editor.registerCommand(\n        OPEN_TABLE_DRAWER_COMMAND,\n        () => {\n          let rangeSelection: null | RangeSelection = null\n\n          editor.getEditorState().read(() => {\n            const selection = $getSelection()\n            if ($isRangeSelection(selection)) {\n              rangeSelection = selection\n            }\n          })\n\n          if (rangeSelection) {\n            toggleDrawer()\n          }\n          return true\n        },\n        COMMAND_PRIORITY_EDITOR,\n      ),\n    )\n  }, [cellContext, editor, toggleDrawer])\n\n  return (\n    <React.Fragment>\n      <FieldsDrawer\n        drawerSlug={drawerSlug}\n        drawerTitle=\"Create Table\"\n        featureKey=\"experimental_table\"\n        handleDrawerSubmit={(_fields, data) => {\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        schemaPath={schemaPath}\n        schemaPathSuffix=\"fields\"\n      />\n      <LexicalReactTablePlugin\n        hasCellBackgroundColor={false}\n        hasCellMerge\n        hasHorizontalScroll={true}\n      />\n    </React.Fragment>\n  )\n}\n"],"names":["useLexicalComposerContext","TablePlugin","LexicalReactTablePlugin","INSERT_TABLE_COMMAND","TableCellNode","TableNode","TableRowNode","mergeRegister","formatDrawerSlug","useEditDepth","$getSelection","$isRangeSelection","COMMAND_PRIORITY_EDITOR","createCommand","createContext","use","useEffect","useMemo","useState","React","useEditorConfigContext","FieldsDrawer","useLexicalDrawer","OPEN_TABLE_DRAWER_COMMAND","CellContext","cellEditorConfig","cellEditorPlugins","set","TableContext","children","contextValue","setContextValue","value","editor","cellContext","editDepth","fieldProps","schemaPath","uuid","drawerSlug","slug","depth","toggleDrawer","hasNodes","Error","registerCommand","rangeSelection","getEditorState","read","selection","Fragment","drawerTitle","featureKey","handleDrawerSubmit","_fields","data","columns","rows","dispatchCommand","String","schemaPathSuffix","hasCellBackgroundColor","hasCellMerge","hasHorizontalScroll"],"mappings":"AAAA;;AAYA,SAASA,yBAAyB,QAAQ,wCAAuC;AACjF,SAASC,eAAeC,uBAAuB,QAAQ,oCAAmC;AAC1F,SAASC,oBAAoB,EAAEC,aAAa,EAAEC,SAAS,EAAEC,YAAY,QAAQ,iBAAgB;AAC7F,SAASC,aAAa,QAAQ,iBAAgB;AAC9C,SAASC,gBAAgB,EAAEC,YAAY,QAAQ,iBAAgB;AAC/D,SAASC,aAAa,EAAEC,iBAAiB,EAAEC,uBAAuB,EAAEC,aAAa,QAAQ,UAAS;AAClG,SAASC,aAAa,EAAEC,GAAG,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAO;AACxE,YAAYC,WAAW,QAAO;AAI9B,SAASC,sBAAsB,QAAQ,+DAA8D;AACrG,SAASC,YAAY,QAAQ,kDAAiD;AAC9E,SAASC,gBAAgB,QAAQ,4DAA2D;AAC5F,OAAO,eAAc;AAmBrB,OAAO,MAAMC,4BAAgDV,cAC3D,6BACD;AAED,OAAO,MAAMW,4BAAcV,cAAgC;IACzDW,kBAAkB;IAClBC,mBAAmB;IACnBC,KAAK,KAEL;AACF,GAAE;AAFE,QAAQ;AAIZ,OAAO,SAASC,aAAa,EAAEC,QAAQ,EAA6B;IAClE,MAAM,CAACC,cAAcC,gBAAgB,GAAGb,SAGrC;QACDO,kBAAkB;QAClBC,mBAAmB;IACrB;IACA,qBACE,QAACF;QACCQ,OAAOf,QACL,IAAO,CAAA;gBACLQ,kBAAkBK,aAAaL,gBAAgB;gBAC/CC,mBAAmBI,aAAaJ,iBAAiB;gBACjDC,KAAK,CAACF,kBAAkBC;oBACtBK,gBAAgB;wBAAEN;wBAAkBC;oBAAkB;gBACxD;YACF,CAAA,GACA;YAACI,aAAaL,gBAAgB;YAAEK,aAAaJ,iBAAiB;SAAC;kBAGhEG;;;;;;AAGP;AAEA,OAAO,MAAM5B,cAA+B;IAC1C,MAAM,CAACgC,OAAO,GAAGjC;IACjB,MAAMkC,cAAcnB,IAAIS;IACxB,MAAMW,YAAY1B;IAClB,MAAM,EACJ2B,YAAY,EAAEC,UAAU,EAAE,EAC1BC,IAAI,EACL,GAAGlB;IAEJ,MAAMmB,aAAa/B,iBAAiB;QAClCgC,MAAM,0BAA0BF;QAChCG,OAAON;IACT;IACA,MAAM,EAAEO,YAAY,EAAE,GAAGpB,iBAAiBiB,YAAY;IAEtDvB,UAAU;QACR,IAAI,CAACiB,OAAOU,QAAQ,CAAC;YAACtC;YAAWC;YAAcF;SAAc,GAAG;YAC9D,MAAM,IAAIwC,MACR;QAEJ;QAEA,OAAOrC,cACL0B,OAAOY,eAAe,CACpBtB,2BACA;YACE,IAAIuB,iBAAwC;YAE5Cb,OAAOc,cAAc,GAAGC,IAAI,CAAC;gBAC3B,MAAMC,YAAYvC;gBAClB,IAAIC,kBAAkBsC,YAAY;oBAChCH,iBAAiBG;gBACnB;YACF;YAEA,IAAIH,gBAAgB;gBAClBJ;YACF;YACA,OAAO;QACT,GACA9B;IAGN,GAAG;QAACsB;QAAaD;QAAQS;KAAa;IAEtC,qBACE,QAACvB,MAAM+B,QAAQ;;0BACb,QAAC7B;gBACCkB,YAAYA;gBACZY,aAAY;gBACZC,YAAW;gBACXC,oBAAoB,CAACC,SAASC;oBAC5B,IAAI,CAACA,KAAKC,OAAO,IAAI,CAACD,KAAKE,IAAI,EAAE;wBAC/B;oBACF;oBAEAxB,OAAOyB,eAAe,CAACvD,sBAAsB;wBAC3CqD,SAASG,OAAOJ,KAAKC,OAAO;wBAC5BC,MAAME,OAAOJ,KAAKE,IAAI;oBACxB;gBACF;gBACApB,YAAYA;gBACZuB,kBAAiB;;;;;;0BAEnB,QAAC1D;gBACC2D,wBAAwB;gBACxBC,YAAY;gBACZC,qBAAqB;;;;;;;;;;;;AAI7B,EAAC"}

package/dist/features/experimental_table/client/plugins/TablePlugin/index.scss

@@ -0,0 +1,233 @@
+@import '~@payloadcms/ui/scss';
+
+@layer payload-default {
+  .LexicalEditorTheme {
+    &__tableScrollableWrapper {
+      overflow-x: auto;
+      margin: 0px 25px 30px 0px;
+    }
+    &__tableScrollableWrapper > .LexicalEditorTheme__table {
+      /* Remove the table's vertical margin and put it on the wrapper */
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    &__tableAlignmentCenter {
+      margin-left: auto;
+      margin-right: auto;
+    }
+    &__tableAlignmentRight {
+      margin-left: auto;
+    }
+
+    &__tableSelection *::selection {
+      background-color: transparent;
+    }
+
+    &__table {
+      border-collapse: collapse;
+      max-width: 100%;
+      border-spacing: 0;
+      overflow-y: scroll;
+      overflow-x: scroll;
+      table-layout: fixed;
+      width: fit-content;
+      margin-top: 25px;
+      margin-bottom: 30px;
+
+      ::selection {
+        background: rgba(172, 206, 247);
+      }
+
+      br::selection {
+        background: unset;
+      }
+    }
+
+    &__tableFrozenColumn tr > td:first-child {
+      background-color: var(--theme-bg);
+      position: sticky;
+      z-index: 2;
+      left: 0;
+    }
+    &__tableFrozenColumn tr > th:first-child {
+      background-color: var(--theme-elevation-50);
+      position: sticky;
+      z-index: 2;
+      left: 0;
+    }
+    &__tableFrozenColumn tr > :first-child::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      height: 100%;
+      border-right: 1px solid var(--theme-elevation-400);
+    }
+
+    &__tableRowStriping tr:nth-child(even) {
+      background-color: var(--theme-elevation-100);
+    }
+
+    &__tableSelected {
+      outline: 2px solid rgb(60, 132, 244);
+    }
+
+    &__tableCell {
+      border: 1px solid var(--theme-elevation-200);
+      vertical-align: top;
+      text-align: start;
+      padding: 6px 8px;
+      position: relative;
+      cursor: default;
+      outline: none;
+    }
+
+    /*
+    * A firefox workaround to allow scrolling of overflowing table cell
+    * ref: https://bugzilla.mozilla.org/show_bug.cgi?id=1904159
+    */
+    &__tableCell > * {
+      overflow: inherit;
+    }
+
+    &__tableCellResizer {
+      position: absolute;
+      right: -4px;
+      height: 100%;
+      width: 8px;
+      cursor: ew-resize;
+      z-index: 10;
+      top: 0;
+    }
+
+    &__tableCellHeader {
+      background-color: #f2f3f5;
+      text-align: start;
+    }
+
+    &__tableCellSelected {
+      caret-color: transparent;
+    }
+
+    &__tableCellSelected::after {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      top: 0;
+      background-color: var(--color-success-250);
+      mix-blend-mode: multiply;
+      content: '';
+      pointer-events: none;
+    }
+
+    &__tableAddColumns {
+      height: 100%;
+    }
+
+    &__tableAddColumns,
+    &__tableAddRows {
+      position: absolute;
+      background-color: var(--theme-elevation-100);
+      animation: table-controls 0.2s ease;
+      border: 0;
+      cursor: pointer;
+      min-width: 24px;
+      min-height: 24px;
+    }
+
+    &__tableAddColumns:after,
+    &__tableAddRows:after {
+      display: flex;
+      content: '+';
+      font-size: 1.4rem;
+      border-radius: $style-radius-s;
+      justify-content: center;
+      align-items: center;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      color: var(--theme-elevation-500);
+    }
+
+    &__tableAddColumns:hover,
+    &__tableAddRows:hover {
+      background-color: var(--theme-elevation-150);
+    }
+
+    &__tableAddRows {
+      width: calc(100% - 25px);
+    }
+
+    @keyframes table-controls {
+      0% {
+        opacity: 0;
+      }
+
+      100% {
+        opacity: 1;
+      }
+    }
+
+    &__tableCellResizeRuler {
+      display: block;
+      position: absolute;
+      width: 1px;
+      background-color: rgb(60, 132, 244);
+      height: 100%;
+      top: 0;
+    }
+
+    &__tableCellActionButtonContainer {
+      display: block;
+      right: 5px;
+      top: 6px;
+      position: absolute;
+      z-index: 4;
+      width: 20px;
+      height: 20px;
+    }
+
+    &__tableCellActionButton {
+      background-color: #eee;
+      display: block;
+      border: 0;
+      border-radius: 20px;
+      width: 20px;
+      height: 20px;
+      color: #222;
+      cursor: pointer;
+    }
+
+    &__tableCellActionButton:hover {
+      background-color: #ddd;
+    }
+  }
+
+  html[data-theme='dark'] {
+    .LexicalEditorTheme {
+      &__tableCellHeader {
+        background-color: var(--theme-elevation-50);
+      }
+
+      &__tableCellSelected::after {
+        background-color: var(--color-success-700);
+        mix-blend-mode: screen;
+      }
+
+      &__tableAddColumns,
+      &__tableAddRows {
+        background-color: var(--theme-elevation-50);
+      }
+
+      &__tableAddColumns:hover,
+      &__tableAddRows:hover {
+        background-color: var(--theme-elevation-100);
+      }
+    }
+  }
+}