@payloadcms/richtext-lexical 3.0.0-beta.78 → 3.0.0-beta.80

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

@@ -0,0 +1,181 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $getTableColumnIndexFromTableCellNode, $getTableRowIndexFromTableCellNode, $insertTableColumn__EXPERIMENTAL, $insertTableRow__EXPERIMENTAL, $isTableCellNode, $isTableNode, TableNode } from '@lexical/table';
+import { $findMatchingParent, mergeRegister } from '@lexical/utils';
+import { $getNearestNodeFromDOMNode } from 'lexical';
+import { useEffect, useRef, useState } from 'react';
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { useEditorConfigContext } from '../../../../../lexical/config/client/EditorConfigProvider.js';
+import { useDebounce } from '../../utils/useDebounce.js';
+const BUTTON_WIDTH_PX = 20;
+function TableHoverActionsContainer({ anchorElem }) {
+    const [editor] = useLexicalComposerContext();
+    const editorConfig = useEditorConfigContext();
+    const [isShownRow, setShownRow] = useState(false);
+    const [isShownColumn, setShownColumn] = useState(false);
+    const [shouldListenMouseMove, setShouldListenMouseMove] = useState(false);
+    const [position, setPosition] = useState({});
+    const codeSetRef = useRef(new Set());
+    const tableDOMNodeRef = useRef(null);
+    const debouncedOnMouseMove = useDebounce((event)=>{
+        const { isOutside, tableDOMNode } = getMouseInfo(event, editorConfig.editorConfig?.lexical);
+        if (isOutside) {
+            setShownRow(false);
+            setShownColumn(false);
+            return;
+        }
+        if (!tableDOMNode) {
+            return;
+        }
+        tableDOMNodeRef.current = tableDOMNode;
+        let hoveredRowNode = null;
+        let hoveredColumnNode = null;
+        let tableDOMElement = null;
+        editor.update(()=>{
+            const maybeTableCell = $getNearestNodeFromDOMNode(tableDOMNode);
+            if ($isTableCellNode(maybeTableCell)) {
+                const table = $findMatchingParent(maybeTableCell, (node)=>$isTableNode(node));
+                if (!$isTableNode(table)) {
+                    return;
+                }
+                tableDOMElement = editor.getElementByKey(table?.getKey());
+                if (tableDOMElement) {
+                    const rowCount = table.getChildrenSize();
+                    const colCount = // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+                    table.getChildAtIndex(0)?.getChildrenSize();
+                    const rowIndex = $getTableRowIndexFromTableCellNode(maybeTableCell);
+                    const colIndex = $getTableColumnIndexFromTableCellNode(maybeTableCell);
+                    if (rowIndex === rowCount - 1) {
+                        hoveredRowNode = maybeTableCell;
+                    } else if (colIndex === colCount - 1) {
+                        hoveredColumnNode = maybeTableCell;
+                    }
+                }
+            }
+        });
+        if (tableDOMElement) {
+            const { bottom: tableElemBottom, height: tableElemHeight, right: tableElemRight, width: tableElemWidth, x: tableElemX, y: tableElemY } = tableDOMElement.getBoundingClientRect();
+            const { left: editorElemLeft, y: editorElemY } = anchorElem.getBoundingClientRect();
+            if (hoveredRowNode) {
+                setShownColumn(false);
+                setShownRow(true);
+                setPosition({
+                    height: BUTTON_WIDTH_PX,
+                    left: tableElemX - editorElemLeft,
+                    top: tableElemBottom - editorElemY + 5,
+                    width: tableElemWidth
+                });
+            } else if (hoveredColumnNode) {
+                setShownColumn(true);
+                setShownRow(false);
+                setPosition({
+                    height: tableElemHeight,
+                    left: tableElemRight - editorElemLeft + 5,
+                    top: tableElemY - editorElemY,
+                    width: BUTTON_WIDTH_PX
+                });
+            }
+        }
+    }, 50, 250);
+    useEffect(()=>{
+        if (!shouldListenMouseMove) {
+            return;
+        }
+        document.addEventListener('mousemove', debouncedOnMouseMove);
+        return ()=>{
+            setShownRow(false);
+            setShownColumn(false);
+            document.removeEventListener('mousemove', debouncedOnMouseMove);
+        };
+    }, [
+        shouldListenMouseMove,
+        debouncedOnMouseMove
+    ]);
+    useEffect(()=>{
+        return mergeRegister(editor.registerMutationListener(TableNode, (mutations)=>{
+            editor.getEditorState().read(()=>{
+                for (const [key, type] of mutations){
+                    switch(type){
+                        case 'created':
+                            codeSetRef.current.add(key);
+                            setShouldListenMouseMove(codeSetRef.current.size > 0);
+                            break;
+                        case 'destroyed':
+                            codeSetRef.current.delete(key);
+                            setShouldListenMouseMove(codeSetRef.current.size > 0);
+                            break;
+                        default:
+                            break;
+                    }
+                }
+            });
+        }, {
+            skipInitialization: false
+        }));
+    }, [
+        editor
+    ]);
+    const insertAction = (insertRow)=>{
+        editor.update(()=>{
+            if (tableDOMNodeRef.current) {
+                const maybeTableNode = $getNearestNodeFromDOMNode(tableDOMNodeRef.current);
+                maybeTableNode?.selectEnd();
+                if (insertRow) {
+                    $insertTableRow__EXPERIMENTAL();
+                    setShownRow(false);
+                } else {
+                    $insertTableColumn__EXPERIMENTAL();
+                    setShownColumn(false);
+                }
+            }
+        });
+    };
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            isShownRow && /*#__PURE__*/ _jsx("button", {
+                className: editorConfig.editorConfig.lexical.theme.tableAddRows,
+                onClick: ()=>insertAction(true),
+                style: {
+                    ...position
+                }
+            }),
+            isShownColumn && /*#__PURE__*/ _jsx("button", {
+                className: editorConfig.editorConfig.lexical.theme.tableAddColumns,
+                onClick: ()=>insertAction(false),
+                style: {
+                    ...position
+                }
+            })
+        ]
+    });
+}
+function getMouseInfo(event, editorConfig) {
+    const target = event.target;
+    if (target && target instanceof HTMLElement) {
+        const tableDOMNode = target.closest(`td.${editorConfig.theme.tableCell}, th.${editorConfig.theme.tableCell}`);
+        const isOutside = !(tableDOMNode || target.closest(`button.${editorConfig.theme.tableAddRows}`) || target.closest(`button.${editorConfig.theme.tableAddColumns}`) || target.closest(`div.${editorConfig.theme.tableCellResizer}`));
+        return {
+            isOutside,
+            tableDOMNode
+        };
+    } else {
+        return {
+            isOutside: true,
+            tableDOMNode: null
+        };
+    }
+}
+export function TableHoverActionsPlugin({ anchorElem = document.body }) {
+    return /*#__PURE__*/ createPortal(/*#__PURE__*/ _jsx(TableHoverActionsContainer, {
+        anchorElem: anchorElem
+    }), anchorElem);
+}
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/features/experimental_table/client/plugins/TableHoverActionsPlugin/index.tsx"],"sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\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 {\n  $getTableColumnIndexFromTableCellNode,\n  $getTableRowIndexFromTableCellNode,\n  $insertTableColumn__EXPERIMENTAL,\n  $insertTableRow__EXPERIMENTAL,\n  $isTableCellNode,\n  $isTableNode,\n  TableNode,\n} from '@lexical/table'\nimport { $findMatchingParent, mergeRegister } from '@lexical/utils'\nimport { $getNearestNodeFromDOMNode } from 'lexical'\nimport { useEffect, 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({ anchorElem }: { anchorElem: HTMLElement }): JSX.Element {\n  const [editor] = useLexicalComposerContext()\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 codeSetRef = useRef<Set<NodeKey>>(new Set())\n  const tableDOMNodeRef = 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      tableDOMNodeRef.current = tableDOMNode\n\n      let hoveredRowNode: TableCellNode | null = null\n      let hoveredColumnNode: TableCellNode | null = null\n      let tableDOMElement: HTMLElement | null = null\n\n      editor.update(() => {\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 = editor.getElementByKey(table?.getKey())\n\n          if (tableDOMElement) {\n            const rowCount = table.getChildrenSize()\n            const colCount =\n              // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n              ((table as TableNode).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\n      if (tableDOMElement) {\n        const {\n          bottom: tableElemBottom,\n          height: tableElemHeight,\n          right: tableElemRight,\n          width: tableElemWidth,\n          x: tableElemX,\n          y: tableElemY,\n        } = (tableDOMElement as HTMLTableElement).getBoundingClientRect()\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: tableElemX - editorElemLeft,\n            top: tableElemBottom - editorElemY + 5,\n            width: 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    },\n    50,\n    250,\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            for (const [key, type] of mutations) {\n              switch (type) {\n                case 'created':\n                  codeSetRef.current.add(key)\n                  setShouldListenMouseMove(codeSetRef.current.size > 0)\n                  break\n\n                case 'destroyed':\n                  codeSetRef.current.delete(key)\n                  setShouldListenMouseMove(codeSetRef.current.size > 0)\n                  break\n\n                default:\n                  break\n              }\n            }\n          })\n        },\n        { skipInitialization: false },\n      ),\n    )\n  }, [editor])\n\n  const insertAction = (insertRow: boolean) => {\n    editor.update(() => {\n      if (tableDOMNodeRef.current) {\n        const maybeTableNode = $getNearestNodeFromDOMNode(tableDOMNodeRef.current)\n        maybeTableNode?.selectEnd()\n        if (insertRow) {\n          $insertTableRow__EXPERIMENTAL()\n          setShownRow(false)\n        } else {\n          $insertTableColumn__EXPERIMENTAL()\n          setShownColumn(false)\n        }\n      }\n    })\n  }\n\n  return (\n    <>\n      {isShownRow && (\n        <button\n          className={editorConfig.editorConfig.lexical.theme.tableAddRows}\n          onClick={() => insertAction(true)}\n          style={{ ...position }}\n        />\n      )}\n      {isShownColumn && (\n        <button\n          className={editorConfig.editorConfig.lexical.theme.tableAddColumns}\n          onClick={() => insertAction(false)}\n          style={{ ...position }}\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 (target && target instanceof HTMLElement) {\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}): React.ReactPortal | null {\n  return createPortal(<TableHoverActionsContainer anchorElem={anchorElem} />, anchorElem)\n}\n"],"names":["useLexicalComposerContext","$getTableColumnIndexFromTableCellNode","$getTableRowIndexFromTableCellNode","$insertTableColumn__EXPERIMENTAL","$insertTableRow__EXPERIMENTAL","$isTableCellNode","$isTableNode","TableNode","$findMatchingParent","mergeRegister","$getNearestNodeFromDOMNode","useEffect","useRef","useState","React","createPortal","useEditorConfigContext","useDebounce","BUTTON_WIDTH_PX","TableHoverActionsContainer","anchorElem","editor","editorConfig","isShownRow","setShownRow","isShownColumn","setShownColumn","shouldListenMouseMove","setShouldListenMouseMove","position","setPosition","codeSetRef","Set","tableDOMNodeRef","debouncedOnMouseMove","event","isOutside","tableDOMNode","getMouseInfo","lexical","current","hoveredRowNode","hoveredColumnNode","tableDOMElement","update","maybeTableCell","table","node","getElementByKey","getKey","rowCount","getChildrenSize","colCount","getChildAtIndex","rowIndex","colIndex","bottom","tableElemBottom","height","tableElemHeight","right","tableElemRight","width","tableElemWidth","x","tableElemX","y","tableElemY","getBoundingClientRect","left","editorElemLeft","editorElemY","top","document","addEventListener","removeEventListener","registerMutationListener","mutations","getEditorState","read","key","type","add","size","delete","skipInitialization","insertAction","insertRow","maybeTableNode","selectEnd","button","className","theme","tableAddRows","onClick","style","tableAddColumns","target","HTMLElement","closest","tableCell","tableCellResizer","TableHoverActionsPlugin","body"],"mappings":"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"}

package/dist/features/experimental_table/client/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/client/plugins/TablePlugin/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/features/experimental_table/client/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,4BAA4B,CAAA;AAIjE,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;AAEF,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE,2CAwBnE;AAED,eAAO,MAAM,WAAW,EAAE,eA+DzB,CAAA"}

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

@@ -0,0 +1,103 @@
+'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 { formatDrawerSlug, useEditDepth, 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 { useEditorConfigContext } from '../../../../../lexical/config/client/EditorConfigProvider.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
+    }
+});
+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();
+    const editDepth = useEditDepth();
+    const { uuid } = useEditorConfigContext();
+    const drawerSlug = formatDrawerSlug({
+        slug: 'lexical-table-create-' + uuid,
+        depth: editDepth
+    });
+    useEffect(()=>{
+        if (!editor.hasNodes([
+            TableNode
+        ])) {
+            throw new Error('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, {
+                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/client/plugins/TablePlugin/index.js.map

@@ -0,0 +1 @@
+{"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, TableNode } from '@lexical/table'\nimport { mergeRegister } from '@lexical/utils'\nimport { formatDrawerSlug, useEditDepth, 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 { useEditorConfigContext } from '../../../../../lexical/config/client/EditorConfigProvider.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})\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  const editDepth = useEditDepth()\n  const { uuid } = useEditorConfigContext()\n\n  const drawerSlug = formatDrawerSlug({\n    slug: 'lexical-table-create-' + uuid,\n    depth: editDepth,\n  })\n\n  useEffect(() => {\n    if (!editor.hasNodes([TableNode])) {\n      throw new Error('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        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","formatDrawerSlug","useEditDepth","useModal","$getSelection","$isRangeSelection","COMMAND_PRIORITY_EDITOR","createCommand","createContext","useContext","useEffect","useMemo","useState","React","useEditorConfigContext","FieldsDrawer","OPEN_TABLE_DRAWER_COMMAND","CellContext","cellEditorConfig","cellEditorPlugins","set","TableContext","children","contextValue","setContextValue","Provider","value","editor","cellContext","closeModal","toggleModal","editDepth","uuid","drawerSlug","slug","depth","hasNodes","Error","registerCommand","rangeSelection","getEditorState","read","selection","Fragment","drawerTitle","featureKey","handleDrawerSubmit","_fields","data","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,gBAAgB,EAAEC,YAAY,EAAEC,QAAQ,QAAQ,iBAAgB;AACzE,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,sBAAsB,QAAQ,+DAA8D;AACrG,SAASC,YAAY,QAAQ,kDAAiD;AAoB9E,OAAO,MAAMC,4BAAgDT,cAC3D,6BACD;AAED,OAAO,MAAMU,4BAAcT,cAAgC;IACzDU,kBAAkB;IAClBC,mBAAmB;IACnBC,KAAK;IACH,QAAQ;IACV;AACF,GAAE;AAEF,OAAO,SAASC,aAAa,EAAEC,QAAQ,EAA6B;IAClE,MAAM,CAACC,cAAcC,gBAAgB,GAAGZ,SAGrC;QACDM,kBAAkB;QAClBC,mBAAmB;IACrB;IACA,qBACE,KAACF,YAAYQ,QAAQ;QACnBC,OAAOf,QACL,IAAO,CAAA;gBACLO,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,MAAM1B,cAA+B;IAC1C,MAAM,CAAC+B,OAAO,GAAGhC;IACjB,MAAMiC,cAAcnB,WAAWQ;IAC/B,MAAM,EAAEY,UAAU,EAAEC,WAAW,EAAE,GAAG3B;IACpC,MAAM4B,YAAY7B;IAClB,MAAM,EAAE8B,IAAI,EAAE,GAAGlB;IAEjB,MAAMmB,aAAahC,iBAAiB;QAClCiC,MAAM,0BAA0BF;QAChCG,OAAOJ;IACT;IAEArB,UAAU;QACR,IAAI,CAACiB,OAAOS,QAAQ,CAAC;YAACrC;SAAU,GAAG;YACjC,MAAM,IAAIsC,MAAM;QAClB;QAEA,OAAOrC,cACL2B,OAAOW,eAAe,CACpBtB,2BACA;YACE,IAAIuB,iBAAwC;YAE5CZ,OAAOa,cAAc,GAAGC,IAAI,CAAC;gBAC3B,MAAMC,YAAYtC;gBAClB,IAAIC,kBAAkBqC,YAAY;oBAChCH,iBAAiBG;gBACnB;YACF;YAEA,IAAIH,gBAAgB;gBAClBT,YAAYG;YACd;YACA,OAAO;QACT,GACA3B;IAGN,GAAG;QAACsB;QAAaD;QAAQG;KAAY;IAErC,qBACE,MAACjB,MAAM8B,QAAQ;;0BACb,KAAC5B;gBACCkB,YAAYA;gBACZW,aAAY;gBACZC,YAAW;gBACXC,oBAAoB,CAACC,SAASC;oBAC5BnB,WAAWI;oBAEX,IAAI,CAACe,KAAKC,OAAO,IAAI,CAACD,KAAKE,IAAI,EAAE;wBAC/B;oBACF;oBAEAvB,OAAOwB,eAAe,CAACrD,sBAAsB;wBAC3CmD,SAASG,OAAOJ,KAAKC,OAAO;wBAC5BC,MAAME,OAAOJ,KAAKE,IAAI;oBACxB;gBACF;gBACAG,kBAAiB;;0BAEnB,KAACxD;gBAAwByD,wBAAwB;gBAAOC,YAAY;;;;AAG1E,EAAC"}

package/dist/features/experimental_table/client/utils/debounce.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"debounce.d.ts","sourceRoot":"","sources":["../../../../../src/features/experimental_table/client/utils/debounce.ts"],"names":[],"mappings":"AA4DA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,iBAAS,QAAQ,CAAC,IAAI,KAAA,EAAE,IAAI,KAAA,EAAE,OAAO,KAAA;;;;EA+HpC;AAED,eAAe,QAAQ,CAAA"}

package/dist/features/experimental_table/client/utils/debounce.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/features/experimental_table/client/utils/debounce.ts"],"sourcesContent":["// Copied & modified from https://github.com/lodash/lodash/blob/main/src/debounce.ts\n/*\nThe MIT License\n\nCopyright JS Foundation and other contributors <https://js.foundation/>\n\nBased on Underscore.js, copyright Jeremy Ashkenas,\nDocumentCloud and Investigative Reporters & Editors <http://underscorejs.org/>\n\nThis software consists of voluntary contributions made by many\nindividuals. For exact contribution history, see the revision history\navailable at https://github.com/lodash/lodash\n\nThe following license applies to all parts of this software except as\ndocumented below:\n\n====\n\nPermission is hereby granted, free of charge, to any person obtaining\na copy of this software and associated documentation files (the\n\"Software\"), to deal in the Software without restriction, including\nwithout limitation the rights to use, copy, modify, merge, publish,\ndistribute, sublicense, and/or sell copies of the Software, and to\npermit persons to whom the Software is furnished to do so, subject to\nthe following conditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE\nLIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\nOF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION\nWITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n\n====\n\nCopyright and related rights for sample code are waived via CC0. Sample\ncode is defined as all source code displayed within the prose of the\ndocumentation.\n\nCC0: http://creativecommons.org/publicdomain/zero/1.0/\n\n====\n\nFiles located in the node_modules and vendor directories are externally\nmaintained libraries used by this software which have their own\nlicenses; we recommend you read them, as their terms may differ from the\nterms above.\n */\n\n/** Error message constants. */\nconst FUNC_ERROR_TEXT = 'Expected a function'\n\n/* Built-in method references for those with the same name as other `lodash` methods. */\nconst nativeMax = Math.max,\n  nativeMin = Math.min\n\n/**\n * Creates a debounced function that delays invoking `func` until after `wait`\n * milliseconds have elapsed since the last time the debounced function was\n * invoked. The debounced function comes with a `cancel` method to cancel\n * delayed `func` invocations and a `flush` method to immediately invoke them.\n * Provide `options` to indicate whether `func` should be invoked on the\n * leading and/or trailing edge of the `wait` timeout. The `func` is invoked\n * with the last arguments provided to the debounced function. Subsequent\n * calls to the debounced function return the result of the last `func`\n * invocation.\n *\n * **Note:** If `leading` and `trailing` options are `true`, `func` is\n * invoked on the trailing edge of the timeout only if the debounced function\n * is invoked more than once during the `wait` timeout.\n *\n * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred\n * until to the next tick, similar to `setTimeout` with a timeout of `0`.\n *\n * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)\n * for details over the differences between `_.debounce` and `_.throttle`.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Function\n * @param {Function} func The function to debounce.\n * @param {number} [wait=0] The number of milliseconds to delay.\n * @param {Object} [options={}] The options object.\n * @param {boolean} [options.leading=false]\n *  Specify invoking on the leading edge of the timeout.\n * @param {number} [options.maxWait]\n *  The maximum time `func` is allowed to be delayed before it's invoked.\n * @param {boolean} [options.trailing=true]\n *  Specify invoking on the trailing edge of the timeout.\n * @returns {Function} Returns the new debounced function.\n * @example\n *\n * // Avoid costly calculations while the window size is in flux.\n * jQuery(window).on('resize', _.debounce(calculateLayout, 150));\n *\n * // Invoke `sendMail` when clicked, debouncing subsequent calls.\n * jQuery(element).on('click', _.debounce(sendMail, 300, {\n *   'leading': true,\n *   'trailing': false\n * }));\n *\n * // Ensure `batchLog` is invoked once after 1 second of debounced calls.\n * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });\n * var source = new EventSource('/stream');\n * jQuery(source).on('message', debounced);\n *\n * // Cancel the trailing debounced invocation.\n * jQuery(window).on('popstate', debounced.cancel);\n */\nfunction debounce(func, wait, options) {\n  let lastArgs,\n    lastThis,\n    maxWait,\n    result,\n    timerId,\n    lastCallTime,\n    lastInvokeTime = 0,\n    leading = false,\n    maxing = false,\n    trailing = true\n\n  if (typeof func != 'function') {\n    throw new TypeError(FUNC_ERROR_TEXT)\n  }\n  wait = wait || 0\n  if (typeof options === 'object') {\n    leading = !!options.leading\n    maxing = 'maxWait' in options\n    maxWait = maxing ? nativeMax(options.maxWait || 0, wait) : maxWait\n    trailing = 'trailing' in options ? !!options.trailing : trailing\n  }\n\n  function invokeFunc(time) {\n    const args = lastArgs,\n      thisArg = lastThis\n\n    lastArgs = lastThis = undefined\n    lastInvokeTime = time\n    result = func.apply(thisArg, args)\n    return result\n  }\n\n  function leadingEdge(time) {\n    // Reset any `maxWait` timer.\n    lastInvokeTime = time\n    // Start the timer for the trailing edge.\n    timerId = setTimeout(timerExpired, wait)\n    // Invoke the leading edge.\n    return leading ? invokeFunc(time) : result\n  }\n\n  function remainingWait(time) {\n    const timeSinceLastCall = time - lastCallTime,\n      timeSinceLastInvoke = time - lastInvokeTime,\n      timeWaiting = wait - timeSinceLastCall\n\n    return maxing ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting\n  }\n\n  function shouldInvoke(time) {\n    const timeSinceLastCall = time - lastCallTime,\n      timeSinceLastInvoke = time - lastInvokeTime\n\n    // Either this is the first call, activity has stopped and we're at the\n    // trailing edge, the system time has gone backwards and we're treating\n    // it as the trailing edge, or we've hit the `maxWait` limit.\n    return (\n      lastCallTime === undefined ||\n      timeSinceLastCall >= wait ||\n      timeSinceLastCall < 0 ||\n      (maxing && timeSinceLastInvoke >= maxWait)\n    )\n  }\n\n  function timerExpired() {\n    const time = Date.now()\n    if (shouldInvoke(time)) {\n      return trailingEdge(time)\n    }\n    // Restart the timer.\n    timerId = setTimeout(timerExpired, remainingWait(time))\n  }\n\n  function trailingEdge(time) {\n    timerId = undefined\n\n    // Only invoke if we have `lastArgs` which means `func` has been\n    // debounced at least once.\n    if (trailing && lastArgs) {\n      return invokeFunc(time)\n    }\n    lastArgs = lastThis = undefined\n    return result\n  }\n\n  function cancel() {\n    if (timerId !== undefined) {\n      clearTimeout(timerId)\n    }\n    lastInvokeTime = 0\n    lastArgs = lastCallTime = lastThis = timerId = undefined\n  }\n\n  function flush() {\n    return timerId === undefined ? result : trailingEdge(Date.now())\n  }\n\n  function debounced() {\n    const time = Date.now(),\n      isInvoking = shouldInvoke(time)\n\n    // eslint-disable-next-line prefer-rest-params\n    lastArgs = arguments\n    // eslint-disable-next-line @typescript-eslint/no-this-alias\n    lastThis = this\n    lastCallTime = time\n\n    if (isInvoking) {\n      if (timerId === undefined) {\n        return leadingEdge(lastCallTime)\n      }\n      if (maxing) {\n        // Handle invocations in a tight loop.\n        clearTimeout(timerId)\n        timerId = setTimeout(timerExpired, wait)\n        return invokeFunc(lastCallTime)\n      }\n    }\n    if (timerId === undefined) {\n      timerId = setTimeout(timerExpired, wait)\n    }\n    return result\n  }\n  debounced.cancel = cancel\n  debounced.flush = flush\n  return debounced\n}\n\nexport default debounce\n"],"names":["FUNC_ERROR_TEXT","nativeMax","Math","max","nativeMin","min","debounce","func","wait","options","lastArgs","lastThis","maxWait","result","timerId","lastCallTime","lastInvokeTime","leading","maxing","trailing","TypeError","invokeFunc","time","args","thisArg","undefined","apply","leadingEdge","setTimeout","timerExpired","remainingWait","timeSinceLastCall","timeSinceLastInvoke","timeWaiting","shouldInvoke","Date","now","trailingEdge","cancel","clearTimeout","flush","debounced","isInvoking","arguments"],"mappings":"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"}

package/dist/features/experimental_table/client/utils/useDebounce.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDebounce.d.ts","sourceRoot":"","sources":["../../../../../src/features/experimental_table/client/utils/useDebounce.ts"],"names":[],"mappings":"AAIA,wBAAgB,WAAW,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,IAAI,EAC9D,EAAE,EAAE,CAAC,EACL,EAAE,EAAE,MAAM,EACV,OAAO,CAAC,EAAE,MAAM;;;;EAkBjB"}

package/dist/features/experimental_table/client/utils/useDebounce.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/features/experimental_table/client/utils/useDebounce.ts"],"sourcesContent":["import { useMemo, useRef } from 'react'\n\nimport debounce from './debounce.js'\n\nexport function useDebounce<T extends (...args: never[]) => void>(\n  fn: T,\n  ms: number,\n  maxWait?: number,\n) {\n  const funcRef = useRef<T | null>(null)\n  funcRef.current = fn\n\n  return useMemo(\n    () =>\n      debounce(\n        (...args: Parameters<T>) => {\n          if (funcRef.current) {\n            funcRef.current(...args)\n          }\n        },\n        ms,\n        { maxWait },\n      ),\n    [ms, maxWait],\n  )\n}\n"],"names":["useMemo","useRef","debounce","useDebounce","fn","ms","maxWait","funcRef","current","args"],"mappings":"AAAA,SAASA,OAAO,EAAEC,MAAM,QAAQ,QAAO;AAEvC,OAAOC,cAAc,gBAAe;AAEpC,OAAO,SAASC,YACdC,EAAK,EACLC,EAAU,EACVC,OAAgB;IAEhB,MAAMC,UAAUN,OAAiB;IACjCM,QAAQC,OAAO,GAAGJ;IAElB,OAAOJ,QACL,IACEE,SACE,CAAC,GAAGO;YACF,IAAIF,QAAQC,OAAO,EAAE;gBACnBD,QAAQC,OAAO,IAAIC;YACrB;QACF,GACAJ,IACA;YAAEC;QAAQ,IAEd;QAACD;QAAIC;KAAQ;AAEjB"}

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

@@ -13,7 +13,7 @@ import { useEffect, useRef, useState } from 'react';
 import * as React from 'react';
 import { createPortal } from 'react-dom';
 import { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js';
-import { useDebounce } from '../../utils/useDebounce.js';
+import { useDebounce } from '../../client/utils/useDebounce.js';
 const BUTTON_WIDTH_PX = 20;
 function TableHoverActionsContainer({ anchorElem }) {
     const [editor] = useLexicalComposerContext();

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/features/experimental_table/plugins/TableHoverActionsPlugin/index.tsx"],"sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\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 {\n  $getTableColumnIndexFromTableCellNode,\n  $getTableRowIndexFromTableCellNode,\n  $insertTableColumn__EXPERIMENTAL,\n  $insertTableRow__EXPERIMENTAL,\n  $isTableCellNode,\n  $isTableNode,\n  TableNode,\n} from '@lexical/table'\nimport { $findMatchingParent, mergeRegister } from '@lexical/utils'\nimport { $getNearestNodeFromDOMNode } from 'lexical'\nimport { useEffect, 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({ anchorElem }: { anchorElem: HTMLElement }): JSX.Element {\n  const [editor] = useLexicalComposerContext()\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 codeSetRef = useRef<Set<NodeKey>>(new Set())\n  const tableDOMNodeRef = 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      tableDOMNodeRef.current = tableDOMNode\n\n      let hoveredRowNode: TableCellNode | null = null\n      let hoveredColumnNode: TableCellNode | null = null\n      let tableDOMElement: HTMLElement | null = null\n\n      editor.update(() => {\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 = editor.getElementByKey(table?.getKey())\n\n          if (tableDOMElement) {\n            const rowCount = table.getChildrenSize()\n            const colCount =\n              // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n              ((table as TableNode).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\n      if (tableDOMElement) {\n        const {\n          bottom: tableElemBottom,\n          height: tableElemHeight,\n          right: tableElemRight,\n          width: tableElemWidth,\n          x: tableElemX,\n          y: tableElemY,\n        } = (tableDOMElement as HTMLTableElement).getBoundingClientRect()\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: tableElemX - editorElemLeft,\n            top: tableElemBottom - editorElemY + 5,\n            width: 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    },\n    50,\n    250,\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            for (const [key, type] of mutations) {\n              switch (type) {\n                case 'created':\n                  codeSetRef.current.add(key)\n                  setShouldListenMouseMove(codeSetRef.current.size > 0)\n                  break\n\n                case 'destroyed':\n                  codeSetRef.current.delete(key)\n                  setShouldListenMouseMove(codeSetRef.current.size > 0)\n                  break\n\n                default:\n                  break\n              }\n            }\n          })\n        },\n        { skipInitialization: false },\n      ),\n    )\n  }, [editor])\n\n  const insertAction = (insertRow: boolean) => {\n    editor.update(() => {\n      if (tableDOMNodeRef.current) {\n        const maybeTableNode = $getNearestNodeFromDOMNode(tableDOMNodeRef.current)\n        maybeTableNode?.selectEnd()\n        if (insertRow) {\n          $insertTableRow__EXPERIMENTAL()\n          setShownRow(false)\n        } else {\n          $insertTableColumn__EXPERIMENTAL()\n          setShownColumn(false)\n        }\n      }\n    })\n  }\n\n  return (\n    <>\n      {isShownRow && (\n        <button\n          className={editorConfig.editorConfig.lexical.theme.tableAddRows}\n          onClick={() => insertAction(true)}\n          style={{ ...position }}\n        />\n      )}\n      {isShownColumn && (\n        <button\n          className={editorConfig.editorConfig.lexical.theme.tableAddColumns}\n          onClick={() => insertAction(false)}\n          style={{ ...position }}\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 (target && target instanceof HTMLElement) {\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}): React.ReactPortal | null {\n  return createPortal(<TableHoverActionsContainer anchorElem={anchorElem} />, anchorElem)\n}\n"],"names":["useLexicalComposerContext","$getTableColumnIndexFromTableCellNode","$getTableRowIndexFromTableCellNode","$insertTableColumn__EXPERIMENTAL","$insertTableRow__EXPERIMENTAL","$isTableCellNode","$isTableNode","TableNode","$findMatchingParent","mergeRegister","$getNearestNodeFromDOMNode","useEffect","useRef","useState","React","createPortal","useEditorConfigContext","useDebounce","BUTTON_WIDTH_PX","TableHoverActionsContainer","anchorElem","editor","editorConfig","isShownRow","setShownRow","isShownColumn","setShownColumn","shouldListenMouseMove","setShouldListenMouseMove","position","setPosition","codeSetRef","Set","tableDOMNodeRef","debouncedOnMouseMove","event","isOutside","tableDOMNode","getMouseInfo","lexical","current","hoveredRowNode","hoveredColumnNode","tableDOMElement","update","maybeTableCell","table","node","getElementByKey","getKey","rowCount","getChildrenSize","colCount","getChildAtIndex","rowIndex","colIndex","bottom","tableElemBottom","height","tableElemHeight","right","tableElemRight","width","tableElemWidth","x","tableElemX","y","tableElemY","getBoundingClientRect","left","editorElemLeft","editorElemY","top","document","addEventListener","removeEventListener","registerMutationListener","mutations","getEditorState","read","key","type","add","size","delete","skipInitialization","insertAction","insertRow","maybeTableNode","selectEnd","button","className","theme","tableAddRows","onClick","style","tableAddColumns","target","HTMLElement","closest","tableCell","tableCellResizer","TableHoverActionsPlugin","body"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/features/experimental_table/plugins/TableHoverActionsPlugin/index.tsx"],"sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\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 {\n  $getTableColumnIndexFromTableCellNode,\n  $getTableRowIndexFromTableCellNode,\n  $insertTableColumn__EXPERIMENTAL,\n  $insertTableRow__EXPERIMENTAL,\n  $isTableCellNode,\n  $isTableNode,\n  TableNode,\n} from '@lexical/table'\nimport { $findMatchingParent, mergeRegister } from '@lexical/utils'\nimport { $getNearestNodeFromDOMNode } from 'lexical'\nimport { useEffect, 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 '../../client/utils/useDebounce.js'\n\nconst BUTTON_WIDTH_PX = 20\n\nfunction TableHoverActionsContainer({ anchorElem }: { anchorElem: HTMLElement }): JSX.Element {\n  const [editor] = useLexicalComposerContext()\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 codeSetRef = useRef<Set<NodeKey>>(new Set())\n  const tableDOMNodeRef = 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      tableDOMNodeRef.current = tableDOMNode\n\n      let hoveredRowNode: TableCellNode | null = null\n      let hoveredColumnNode: TableCellNode | null = null\n      let tableDOMElement: HTMLElement | null = null\n\n      editor.update(() => {\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 = editor.getElementByKey(table?.getKey())\n\n          if (tableDOMElement) {\n            const rowCount = table.getChildrenSize()\n            const colCount =\n              // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n              ((table as TableNode).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\n      if (tableDOMElement) {\n        const {\n          bottom: tableElemBottom,\n          height: tableElemHeight,\n          right: tableElemRight,\n          width: tableElemWidth,\n          x: tableElemX,\n          y: tableElemY,\n        } = (tableDOMElement as HTMLTableElement).getBoundingClientRect()\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: tableElemX - editorElemLeft,\n            top: tableElemBottom - editorElemY + 5,\n            width: 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    },\n    50,\n    250,\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            for (const [key, type] of mutations) {\n              switch (type) {\n                case 'created':\n                  codeSetRef.current.add(key)\n                  setShouldListenMouseMove(codeSetRef.current.size > 0)\n                  break\n\n                case 'destroyed':\n                  codeSetRef.current.delete(key)\n                  setShouldListenMouseMove(codeSetRef.current.size > 0)\n                  break\n\n                default:\n                  break\n              }\n            }\n          })\n        },\n        { skipInitialization: false },\n      ),\n    )\n  }, [editor])\n\n  const insertAction = (insertRow: boolean) => {\n    editor.update(() => {\n      if (tableDOMNodeRef.current) {\n        const maybeTableNode = $getNearestNodeFromDOMNode(tableDOMNodeRef.current)\n        maybeTableNode?.selectEnd()\n        if (insertRow) {\n          $insertTableRow__EXPERIMENTAL()\n          setShownRow(false)\n        } else {\n          $insertTableColumn__EXPERIMENTAL()\n          setShownColumn(false)\n        }\n      }\n    })\n  }\n\n  return (\n    <>\n      {isShownRow && (\n        <button\n          className={editorConfig.editorConfig.lexical.theme.tableAddRows}\n          onClick={() => insertAction(true)}\n          style={{ ...position }}\n        />\n      )}\n      {isShownColumn && (\n        <button\n          className={editorConfig.editorConfig.lexical.theme.tableAddColumns}\n          onClick={() => insertAction(false)}\n          style={{ ...position }}\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 (target && target instanceof HTMLElement) {\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}): React.ReactPortal | null {\n  return createPortal(<TableHoverActionsContainer anchorElem={anchorElem} />, anchorElem)\n}\n"],"names":["useLexicalComposerContext","$getTableColumnIndexFromTableCellNode","$getTableRowIndexFromTableCellNode","$insertTableColumn__EXPERIMENTAL","$insertTableRow__EXPERIMENTAL","$isTableCellNode","$isTableNode","TableNode","$findMatchingParent","mergeRegister","$getNearestNodeFromDOMNode","useEffect","useRef","useState","React","createPortal","useEditorConfigContext","useDebounce","BUTTON_WIDTH_PX","TableHoverActionsContainer","anchorElem","editor","editorConfig","isShownRow","setShownRow","isShownColumn","setShownColumn","shouldListenMouseMove","setShouldListenMouseMove","position","setPosition","codeSetRef","Set","tableDOMNodeRef","debouncedOnMouseMove","event","isOutside","tableDOMNode","getMouseInfo","lexical","current","hoveredRowNode","hoveredColumnNode","tableDOMElement","update","maybeTableCell","table","node","getElementByKey","getKey","rowCount","getChildrenSize","colCount","getChildAtIndex","rowIndex","colIndex","bottom","tableElemBottom","height","tableElemHeight","right","tableElemRight","width","tableElemWidth","x","tableElemX","y","tableElemY","getBoundingClientRect","left","editorElemLeft","editorElemY","top","document","addEventListener","removeEventListener","registerMutationListener","mutations","getEditorState","read","key","type","add","size","delete","skipInitialization","insertAction","insertRow","maybeTableNode","selectEnd","button","className","theme","tableAddRows","onClick","style","tableAddColumns","target","HTMLElement","closest","tableCell","tableCellResizer","TableHoverActionsPlugin","body"],"mappings":"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"}

package/dist/features/experimental_table/server/index.d.ts

@@ -0,0 +1,13 @@
+import type { SerializedTableCellNode as _SerializedTableCellNode, SerializedTableNode as _SerializedTableNode, SerializedTableRowNode as _SerializedTableRowNode } from '@lexical/table';
+import type { Spread } from 'lexical';
+export type SerializedTableCellNode = Spread<{
+    type: 'tablecell';
+}, _SerializedTableCellNode>;
+export type SerializedTableNode = Spread<{
+    type: 'table';
+}, _SerializedTableNode>;
+export type SerializedTableRowNode = Spread<{
+    type: 'tablerow';
+}, _SerializedTableRowNode>;
+export declare const EXPERIMENTAL_TableFeature: import("../../typesServer.js").FeatureProviderProviderServer<undefined, undefined, undefined>;
+//# sourceMappingURL=index.d.ts.map

package/dist/features/experimental_table/server/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/features/experimental_table/server/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,uBAAuB,IAAI,wBAAwB,EACnD,mBAAmB,IAAI,oBAAoB,EAC3C,sBAAsB,IAAI,uBAAuB,EAClD,MAAM,gBAAgB,CAAA;AACvB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAyBrC,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAC1C;IACE,IAAI,EAAE,WAAW,CAAA;CAClB,EACD,wBAAwB,CACzB,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG,MAAM,CACtC;IACE,IAAI,EAAE,OAAO,CAAA;CACd,EACD,oBAAoB,CACrB,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG,MAAM,CACzC;IACE,IAAI,EAAE,UAAU,CAAA;CACjB,EACD,uBAAuB,CACxB,CAAA;AACD,eAAO,MAAM,yBAAyB,+FA8HpC,CAAA"}

package/dist/features/experimental_table/server/index.js

@@ -0,0 +1,123 @@
+import { TableCellNode, TableNode, TableRowNode } from '@lexical/table';
+import { sanitizeFields } from 'payload';
+import { createServerFeature } from '../../../utilities/createServerFeature.js';
+import { convertLexicalNodesToHTML } from '../../converters/html/converter/index.js';
+import { createNode } from '../../typeUtilities.js';
+const fields = [
+    {
+        name: 'rows',
+        type: 'number',
+        defaultValue: 5,
+        required: true
+    },
+    {
+        name: 'columns',
+        type: 'number',
+        defaultValue: 5,
+        required: true
+    }
+];
+export const EXPERIMENTAL_TableFeature = createServerFeature({
+    feature: async ({ config, isRoot })=>{
+        const validRelationships = config.collections.map((c)=>c.slug) || [];
+        const sanitizedFields = await sanitizeFields({
+            config: config,
+            fields,
+            requireFieldLevelRichTextEditor: isRoot,
+            validRelationships
+        });
+        return {
+            ClientFeature: '@payloadcms/richtext-lexical/client#TableFeatureClient',
+            generateSchemaMap: ()=>{
+                const schemaMap = new Map();
+                schemaMap.set('fields', sanitizedFields);
+                return schemaMap;
+            },
+            nodes: [
+                createNode({
+                    converters: {
+                        html: {
+                            converter: async ({ converters, draft, node, overrideAccess, parent, req, showHiddenFields })=>{
+                                const childrenText = await convertLexicalNodesToHTML({
+                                    converters,
+                                    draft,
+                                    lexicalNodes: node.children,
+                                    overrideAccess,
+                                    parent: {
+                                        ...node,
+                                        parent
+                                    },
+                                    req,
+                                    showHiddenFields
+                                });
+                                return `<table class="lexical-table" style="border-collapse: collapse;">${childrenText}</table>`;
+                            },
+                            nodeTypes: [
+                                TableNode.getType()
+                            ]
+                        }
+                    },
+                    node: TableNode
+                }),
+                createNode({
+                    converters: {
+                        html: {
+                            converter: async ({ converters, draft, node, overrideAccess, parent, req, showHiddenFields })=>{
+                                const childrenText = await convertLexicalNodesToHTML({
+                                    converters,
+                                    draft,
+                                    lexicalNodes: node.children,
+                                    overrideAccess,
+                                    parent: {
+                                        ...node,
+                                        parent
+                                    },
+                                    req,
+                                    showHiddenFields
+                                });
+                                const tagName = node.headerState > 0 ? 'th' : 'td';
+                                const headerStateClass = `lexical-table-cell-header-${node.headerState}`;
+                                const backgroundColor = node.backgroundColor ? `background-color: ${node.backgroundColor};` : '';
+                                const colSpan = node.colSpan > 1 ? `colspan="${node.colSpan}"` : '';
+                                const rowSpan = node.rowSpan > 1 ? `rowspan="${node.rowSpan}"` : '';
+                                return `<${tagName} class="lexical-table-cell ${headerStateClass}" style="border: 1px solid #ccc; padding: 8px; ${backgroundColor}" ${colSpan} ${rowSpan}>${childrenText}</${tagName}>`;
+                            },
+                            nodeTypes: [
+                                TableCellNode.getType()
+                            ]
+                        }
+                    },
+                    node: TableCellNode
+                }),
+                createNode({
+                    converters: {
+                        html: {
+                            converter: async ({ converters, draft, node, overrideAccess, parent, req, showHiddenFields })=>{
+                                const childrenText = await convertLexicalNodesToHTML({
+                                    converters,
+                                    draft,
+                                    lexicalNodes: node.children,
+                                    overrideAccess,
+                                    parent: {
+                                        ...node,
+                                        parent
+                                    },
+                                    req,
+                                    showHiddenFields
+                                });
+                                return `<tr class="lexical-table-row">${childrenText}</tr>`;
+                            },
+                            nodeTypes: [
+                                TableRowNode.getType()
+                            ]
+                        }
+                    },
+                    node: TableRowNode
+                })
+            ]
+        };
+    },
+    key: 'experimental_table'
+});
+
+//# sourceMappingURL=index.js.map