@payloadcms/richtext-lexical 3.68.0-internal-debug.2eb12b9 → 3.68.0-internal-debug.dafc24d

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

@@ -1 +1 @@
-{"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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"}
+{"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,5 +1,5 @@
 'use client';
-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';
@@ -11,6 +11,7 @@ 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,
@@ -23,7 +24,7 @@ export function TableContext({ children }) {
         cellEditorConfig: null,
         cellEditorPlugins: null
     });
-    return /*#__PURE__*/ _jsx(CellContext, {
+    return /*#__PURE__*/ _jsxDEV(CellContext, {
         value: useMemo(()=>({
                 cellEditorConfig: contextValue.cellEditorConfig,
                 cellEditorPlugins: contextValue.cellEditorPlugins,
@@ -38,7 +39,11 @@ export function TableContext({ children }) {
             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 [editor] = useLexicalComposerContext();
@@ -76,9 +81,9 @@ export const TablePlugin = ()=>{
         editor,
         toggleDrawer
     ]);
-    return /*#__PURE__*/ _jsxs(React.Fragment, {
+    return /*#__PURE__*/ _jsxDEV(React.Fragment, {
         children: [
-            /*#__PURE__*/ _jsx(FieldsDrawer, {
+            /*#__PURE__*/ _jsxDEV(FieldsDrawer, {
                 drawerSlug: drawerSlug,
                 drawerTitle: "Create Table",
                 featureKey: "experimental_table",
@@ -93,14 +98,26 @@ export const TablePlugin = ()=>{
                 },
                 schemaPath: schemaPath,
                 schemaPathSuffix: "fields"
-            }),
-            /*#__PURE__*/ _jsx(LexicalReactTablePlugin, {
+            }, 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,"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;AAoB5F,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,KAACF;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,MAACvB,MAAM+B,QAAQ;;0BACb,KAAC7B;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,KAAC1D;gBACC2D,wBAAwB;gBACxBC,YAAY;gBACZC,qBAAqB;;;;AAI7B,EAAC"}
+{"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);
+      }
+    }
+  }
+}

package/dist/features/horizontalRule/client/plugin/index.js

@@ -5,6 +5,7 @@ import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_EDITOR } from 'lexic
 import { useEffect } from 'react';
 import { INSERT_HORIZONTAL_RULE_COMMAND } from '../../server/nodes/HorizontalRuleNode.js';
 import { $createHorizontalRuleNode } from '../nodes/HorizontalRuleNode.js';
+import './index.scss';
 /**
  * Registers the INSERT_HORIZONTAL_RULE_COMMAND lexical command and defines the behavior for when it is called.
  */ export const HorizontalRulePlugin = ()=>{

package/dist/features/horizontalRule/client/plugin/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/features/horizontalRule/client/plugin/index.tsx"],"sourcesContent":["'use client'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { $insertNodeToNearestRoot } from '@lexical/utils'\nimport { $getSelection, $isRangeSelection, COMMAND_PRIORITY_EDITOR } from 'lexical'\nimport { useEffect } from 'react'\n\nimport type { PluginComponent } from '../../../typesClient.js'\n\nimport { INSERT_HORIZONTAL_RULE_COMMAND } from '../../server/nodes/HorizontalRuleNode.js'\nimport { $createHorizontalRuleNode } from '../nodes/HorizontalRuleNode.js'\nimport './index.scss'\n\n/**\n * Registers the INSERT_HORIZONTAL_RULE_COMMAND lexical command and defines the behavior for when it is called.\n */\nexport const HorizontalRulePlugin: PluginComponent<undefined> = () => {\n  const [editor] = useLexicalComposerContext()\n\n  useEffect(() => {\n    return editor.registerCommand(\n      INSERT_HORIZONTAL_RULE_COMMAND,\n      (type) => {\n        const selection = $getSelection()\n\n        if (!$isRangeSelection(selection)) {\n          return false\n        }\n\n        const focusNode = selection.focus.getNode()\n\n        if (focusNode !== null) {\n          const horizontalRuleNode = $createHorizontalRuleNode()\n          $insertNodeToNearestRoot(horizontalRuleNode)\n        }\n\n        return true\n      },\n      COMMAND_PRIORITY_EDITOR,\n    )\n  }, [editor])\n\n  return null\n}\n"],"names":["useLexicalComposerContext","$insertNodeToNearestRoot","$getSelection","$isRangeSelection","COMMAND_PRIORITY_EDITOR","useEffect","INSERT_HORIZONTAL_RULE_COMMAND","$createHorizontalRuleNode","HorizontalRulePlugin","editor","registerCommand","type","selection","focusNode","focus","getNode","horizontalRuleNode"],"mappings":"AAAA;AAEA,SAASA,yBAAyB,QAAQ,2CAA0C;AACpF,SAASC,wBAAwB,QAAQ,iBAAgB;AACzD,SAASC,aAAa,EAAEC,iBAAiB,EAAEC,uBAAuB,QAAQ,UAAS;AACnF,SAASC,SAAS,QAAQ,QAAO;AAIjC,SAASC,8BAA8B,QAAQ,2CAA0C;AACzF,SAASC,yBAAyB,QAAQ,iCAAgC;AAG1E;;CAEC,GACD,OAAO,MAAMC,uBAAmD;IAC9D,MAAM,CAACC,OAAO,GAAGT;IAEjBK,UAAU;QACR,OAAOI,OAAOC,eAAe,CAC3BJ,gCACA,CAACK;YACC,MAAMC,YAAYV;YAElB,IAAI,CAACC,kBAAkBS,YAAY;gBACjC,OAAO;YACT;YAEA,MAAMC,YAAYD,UAAUE,KAAK,CAACC,OAAO;YAEzC,IAAIF,cAAc,MAAM;gBACtB,MAAMG,qBAAqBT;gBAC3BN,yBAAyBe;YAC3B;YAEA,OAAO;QACT,GACAZ;IAEJ,GAAG;QAACK;KAAO;IAEX,OAAO;AACT,EAAC"}
+{"version":3,"sources":["../../../../../src/features/horizontalRule/client/plugin/index.tsx"],"sourcesContent":["'use client'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { $insertNodeToNearestRoot } from '@lexical/utils'\nimport { $getSelection, $isRangeSelection, COMMAND_PRIORITY_EDITOR } from 'lexical'\nimport { useEffect } from 'react'\n\nimport type { PluginComponent } from '../../../typesClient.js'\n\nimport { INSERT_HORIZONTAL_RULE_COMMAND } from '../../server/nodes/HorizontalRuleNode.js'\nimport { $createHorizontalRuleNode } from '../nodes/HorizontalRuleNode.js'\nimport './index.scss'\n\n/**\n * Registers the INSERT_HORIZONTAL_RULE_COMMAND lexical command and defines the behavior for when it is called.\n */\nexport const HorizontalRulePlugin: PluginComponent<undefined> = () => {\n  const [editor] = useLexicalComposerContext()\n\n  useEffect(() => {\n    return editor.registerCommand(\n      INSERT_HORIZONTAL_RULE_COMMAND,\n      (type) => {\n        const selection = $getSelection()\n\n        if (!$isRangeSelection(selection)) {\n          return false\n        }\n\n        const focusNode = selection.focus.getNode()\n\n        if (focusNode !== null) {\n          const horizontalRuleNode = $createHorizontalRuleNode()\n          $insertNodeToNearestRoot(horizontalRuleNode)\n        }\n\n        return true\n      },\n      COMMAND_PRIORITY_EDITOR,\n    )\n  }, [editor])\n\n  return null\n}\n"],"names":["useLexicalComposerContext","$insertNodeToNearestRoot","$getSelection","$isRangeSelection","COMMAND_PRIORITY_EDITOR","useEffect","INSERT_HORIZONTAL_RULE_COMMAND","$createHorizontalRuleNode","HorizontalRulePlugin","editor","registerCommand","type","selection","focusNode","focus","getNode","horizontalRuleNode"],"mappings":"AAAA;AAEA,SAASA,yBAAyB,QAAQ,2CAA0C;AACpF,SAASC,wBAAwB,QAAQ,iBAAgB;AACzD,SAASC,aAAa,EAAEC,iBAAiB,EAAEC,uBAAuB,QAAQ,UAAS;AACnF,SAASC,SAAS,QAAQ,QAAO;AAIjC,SAASC,8BAA8B,QAAQ,2CAA0C;AACzF,SAASC,yBAAyB,QAAQ,iCAAgC;AAC1E,OAAO,eAAc;AAErB;;CAEC,GACD,OAAO,MAAMC,uBAAmD;IAC9D,MAAM,CAACC,OAAO,GAAGT;IAEjBK,UAAU;QACR,OAAOI,OAAOC,eAAe,CAC3BJ,gCACA,CAACK;YACC,MAAMC,YAAYV;YAElB,IAAI,CAACC,kBAAkBS,YAAY;gBACjC,OAAO;YACT;YAEA,MAAMC,YAAYD,UAAUE,KAAK,CAACC,OAAO;YAEzC,IAAIF,cAAc,MAAM;gBACtB,MAAMG,qBAAqBT;gBAC3BN,yBAAyBe;YAC3B;YAEA,OAAO;QACT,GACAZ;IAEJ,GAAG;QAACK;KAAO;IAEX,OAAO;AACT,EAAC"}

package/dist/features/horizontalRule/client/plugin/index.scss

@@ -0,0 +1,23 @@
+@import '~@payloadcms/ui/scss';
+
+@layer payload-default {
+  .LexicalEditorTheme__hr {
+    width: auto !important;
+    padding: 2px 2px;
+    border: none;
+    margin: 1rem 0;
+    cursor: pointer;
+  }
+
+  .LexicalEditorTheme__hr:after {
+    content: '';
+    display: block;
+    height: 2px;
+    background-color: var(--theme-elevation-250);
+  }
+
+  .LexicalEditorTheme__hr.LexicalEditorTheme__hrSelected {
+    outline: 2px solid var(--theme-success-250);
+    user-select: none;
+  }
+}

package/dist/features/indent/client/IndentPlugin.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { TabIndentationPlugin } from '@lexical/react/LexicalTabIndentationPlugin';
 import { $findMatchingParent, mergeRegister } from '@lexical/utils';
@@ -56,7 +56,11 @@ export const IndentPlugin = ({ clientProps })=>{
         editor,
         disableTabNode
     ]);
-    return /*#__PURE__*/ _jsx(TabIndentationPlugin, {});
+    return /*#__PURE__*/ _jsxDEV(TabIndentationPlugin, {}, void 0, false, {
+        fileName: "src/features/indent/client/IndentPlugin.tsx",
+        lineNumber: 87,
+        columnNumber: 10
+    }, this);
 };
 function $handleIndentAndOutdent(indentOrOutdent) {
     const selection = $getSelection();

package/dist/features/indent/client/IndentPlugin.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/features/indent/client/IndentPlugin.tsx"],"sourcesContent":["import type { ElementNode } from 'lexical'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'\nimport { TabIndentationPlugin } from '@lexical/react/LexicalTabIndentationPlugin'\nimport { $findMatchingParent, mergeRegister } from '@lexical/utils'\nimport {\n  $getSelection,\n  $isElementNode,\n  $isRangeSelection,\n  COMMAND_PRIORITY_LOW,\n  INDENT_CONTENT_COMMAND,\n  KEY_TAB_COMMAND,\n  OUTDENT_CONTENT_COMMAND,\n  TabNode,\n} from 'lexical'\nimport { useEffect } from 'react'\n\nimport type { PluginComponent } from '../../typesClient.js'\nimport type { IndentFeatureProps } from '../server/index.js'\n\nexport const IndentPlugin: PluginComponent<IndentFeatureProps> = ({ clientProps }) => {\n  const [editor] = useLexicalComposerContext()\n  const { disabledNodes, disableTabNode } = clientProps\n\n  useEffect(() => {\n    if (!editor || !disabledNodes?.length) {\n      return\n    }\n    return mergeRegister(\n      editor.registerCommand(\n        INDENT_CONTENT_COMMAND,\n        () => {\n          return $handleIndentAndOutdent((block) => {\n            if (!disabledNodes.includes(block.getType())) {\n              const indent = block.getIndent()\n              block.setIndent(indent + 1)\n            }\n          })\n        },\n        COMMAND_PRIORITY_LOW,\n      ),\n      // If we disable indenting for certain nodes, we need to ensure that these are not indented,\n      // if they get transformed from an indented state (e.g. an indented list node gets transformed into a\n      // paragraph node for which indenting is disabled).\n      editor.registerUpdateListener(({ dirtyElements, editorState }) => {\n        editor.update(() => {\n          for (const [nodeKey] of dirtyElements) {\n            const node = editorState._nodeMap.get(nodeKey)\n            if ($isElementNode(node) && disabledNodes.includes(node.getType())) {\n              const currentIndent = node.getIndent()\n              if (currentIndent > 0) {\n                node.setIndent(0)\n              }\n            }\n          }\n        })\n      }),\n    )\n  }, [editor, disabledNodes])\n\n  useEffect(() => {\n    if (!editor || !disableTabNode) {\n      return\n    }\n    return mergeRegister(\n      // This is so that when you press Tab in the middle of a paragraph,\n      // it indents the paragraph, instead of inserting a TabNode.\n      editor.registerCommand<KeyboardEvent>(\n        KEY_TAB_COMMAND,\n        (event) => {\n          event.preventDefault()\n          return editor.dispatchCommand(\n            event.shiftKey ? OUTDENT_CONTENT_COMMAND : INDENT_CONTENT_COMMAND,\n            undefined,\n          )\n        },\n        COMMAND_PRIORITY_LOW,\n      ),\n      // Tab isn't the only way to insert a TabNode. We have to make sure\n      // it doesn't happen, for example, when pasting from the clipboard.\n      editor.registerNodeTransform(TabNode, (node) => {\n        node.remove()\n      }),\n    )\n  }, [editor, disableTabNode])\n\n  return <TabIndentationPlugin />\n}\n\nfunction $handleIndentAndOutdent(indentOrOutdent: (block: ElementNode) => void): boolean {\n  const selection = $getSelection()\n  if (!$isRangeSelection(selection)) {\n    return false\n  }\n  const alreadyHandled = new Set()\n  const nodes = selection.getNodes()\n  for (let i = 0; i < nodes.length; i++) {\n    const node = nodes[i]!\n    const key = node.getKey()\n    if (alreadyHandled.has(key)) {\n      continue\n    }\n    const parentBlock = $findMatchingParent(\n      node,\n      (parentNode): parentNode is ElementNode =>\n        $isElementNode(parentNode) && !parentNode.isInline(),\n    )\n    if (parentBlock === null) {\n      continue\n    }\n    const parentKey = parentBlock.getKey()\n    if (parentBlock.canIndent() && !alreadyHandled.has(parentKey)) {\n      alreadyHandled.add(parentKey)\n      indentOrOutdent(parentBlock)\n    }\n  }\n  return alreadyHandled.size > 0\n}\n"],"names":["useLexicalComposerContext","TabIndentationPlugin","$findMatchingParent","mergeRegister","$getSelection","$isElementNode","$isRangeSelection","COMMAND_PRIORITY_LOW","INDENT_CONTENT_COMMAND","KEY_TAB_COMMAND","OUTDENT_CONTENT_COMMAND","TabNode","useEffect","IndentPlugin","clientProps","editor","disabledNodes","disableTabNode","length","registerCommand","$handleIndentAndOutdent","block","includes","getType","indent","getIndent","setIndent","registerUpdateListener","dirtyElements","editorState","update","nodeKey","node","_nodeMap","get","currentIndent","event","preventDefault","dispatchCommand","shiftKey","undefined","registerNodeTransform","remove","indentOrOutdent","selection","alreadyHandled","Set","nodes","getNodes","i","key","getKey","has","parentBlock","parentNode","isInline","parentKey","canIndent","add","size"],"mappings":";AAEA,SAASA,yBAAyB,QAAQ,wCAAuC;AACjF,SAASC,oBAAoB,QAAQ,6CAA4C;AACjF,SAASC,mBAAmB,EAAEC,aAAa,QAAQ,iBAAgB;AACnE,SACEC,aAAa,EACbC,cAAc,EACdC,iBAAiB,EACjBC,oBAAoB,EACpBC,sBAAsB,EACtBC,eAAe,EACfC,uBAAuB,EACvBC,OAAO,QACF,UAAS;AAChB,SAASC,SAAS,QAAQ,QAAO;AAKjC,OAAO,MAAMC,eAAoD,CAAC,EAAEC,WAAW,EAAE;IAC/E,MAAM,CAACC,OAAO,GAAGf;IACjB,MAAM,EAAEgB,aAAa,EAAEC,cAAc,EAAE,GAAGH;IAE1CF,UAAU;QACR,IAAI,CAACG,UAAU,CAACC,eAAeE,QAAQ;YACrC;QACF;QACA,OAAOf,cACLY,OAAOI,eAAe,CACpBX,wBACA;YACE,OAAOY,wBAAwB,CAACC;gBAC9B,IAAI,CAACL,cAAcM,QAAQ,CAACD,MAAME,OAAO,KAAK;oBAC5C,MAAMC,SAASH,MAAMI,SAAS;oBAC9BJ,MAAMK,SAAS,CAACF,SAAS;gBAC3B;YACF;QACF,GACAjB,uBAEF,4FAA4F;QAC5F,qGAAqG;QACrG,mDAAmD;QACnDQ,OAAOY,sBAAsB,CAAC,CAAC,EAAEC,aAAa,EAAEC,WAAW,EAAE;YAC3Dd,OAAOe,MAAM,CAAC;gBACZ,KAAK,MAAM,CAACC,QAAQ,IAAIH,cAAe;oBACrC,MAAMI,OAAOH,YAAYI,QAAQ,CAACC,GAAG,CAACH;oBACtC,IAAI1B,eAAe2B,SAAShB,cAAcM,QAAQ,CAACU,KAAKT,OAAO,KAAK;wBAClE,MAAMY,gBAAgBH,KAAKP,SAAS;wBACpC,IAAIU,gBAAgB,GAAG;4BACrBH,KAAKN,SAAS,CAAC;wBACjB;oBACF;gBACF;YACF;QACF;IAEJ,GAAG;QAACX;QAAQC;KAAc;IAE1BJ,UAAU;QACR,IAAI,CAACG,UAAU,CAACE,gBAAgB;YAC9B;QACF;QACA,OAAOd,cACL,mEAAmE;QACnE,4DAA4D;QAC5DY,OAAOI,eAAe,CACpBV,iBACA,CAAC2B;YACCA,MAAMC,cAAc;YACpB,OAAOtB,OAAOuB,eAAe,CAC3BF,MAAMG,QAAQ,GAAG7B,0BAA0BF,wBAC3CgC;QAEJ,GACAjC,uBAEF,mEAAmE;QACnE,mEAAmE;QACnEQ,OAAO0B,qBAAqB,CAAC9B,SAAS,CAACqB;YACrCA,KAAKU,MAAM;QACb;IAEJ,GAAG;QAAC3B;QAAQE;KAAe;IAE3B,qBAAO,KAAChB;AACV,EAAC;AAED,SAASmB,wBAAwBuB,eAA6C;IAC5E,MAAMC,YAAYxC;IAClB,IAAI,CAACE,kBAAkBsC,YAAY;QACjC,OAAO;IACT;IACA,MAAMC,iBAAiB,IAAIC;IAC3B,MAAMC,QAAQH,UAAUI,QAAQ;IAChC,IAAK,IAAIC,IAAI,GAAGA,IAAIF,MAAM7B,MAAM,EAAE+B,IAAK;QACrC,MAAMjB,OAAOe,KAAK,CAACE,EAAE;QACrB,MAAMC,MAAMlB,KAAKmB,MAAM;QACvB,IAAIN,eAAeO,GAAG,CAACF,MAAM;YAC3B;QACF;QACA,MAAMG,cAAcnD,oBAClB8B,MACA,CAACsB,aACCjD,eAAeiD,eAAe,CAACA,WAAWC,QAAQ;QAEtD,IAAIF,gBAAgB,MAAM;YACxB;QACF;QACA,MAAMG,YAAYH,YAAYF,MAAM;QACpC,IAAIE,YAAYI,SAAS,MAAM,CAACZ,eAAeO,GAAG,CAACI,YAAY;YAC7DX,eAAea,GAAG,CAACF;YACnBb,gBAAgBU;QAClB;IACF;IACA,OAAOR,eAAec,IAAI,GAAG;AAC/B"}
+{"version":3,"sources":["../../../../src/features/indent/client/IndentPlugin.tsx"],"sourcesContent":["import type { ElementNode } from 'lexical'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'\nimport { TabIndentationPlugin } from '@lexical/react/LexicalTabIndentationPlugin'\nimport { $findMatchingParent, mergeRegister } from '@lexical/utils'\nimport {\n  $getSelection,\n  $isElementNode,\n  $isRangeSelection,\n  COMMAND_PRIORITY_LOW,\n  INDENT_CONTENT_COMMAND,\n  KEY_TAB_COMMAND,\n  OUTDENT_CONTENT_COMMAND,\n  TabNode,\n} from 'lexical'\nimport { useEffect } from 'react'\n\nimport type { PluginComponent } from '../../typesClient.js'\nimport type { IndentFeatureProps } from '../server/index.js'\n\nexport const IndentPlugin: PluginComponent<IndentFeatureProps> = ({ clientProps }) => {\n  const [editor] = useLexicalComposerContext()\n  const { disabledNodes, disableTabNode } = clientProps\n\n  useEffect(() => {\n    if (!editor || !disabledNodes?.length) {\n      return\n    }\n    return mergeRegister(\n      editor.registerCommand(\n        INDENT_CONTENT_COMMAND,\n        () => {\n          return $handleIndentAndOutdent((block) => {\n            if (!disabledNodes.includes(block.getType())) {\n              const indent = block.getIndent()\n              block.setIndent(indent + 1)\n            }\n          })\n        },\n        COMMAND_PRIORITY_LOW,\n      ),\n      // If we disable indenting for certain nodes, we need to ensure that these are not indented,\n      // if they get transformed from an indented state (e.g. an indented list node gets transformed into a\n      // paragraph node for which indenting is disabled).\n      editor.registerUpdateListener(({ dirtyElements, editorState }) => {\n        editor.update(() => {\n          for (const [nodeKey] of dirtyElements) {\n            const node = editorState._nodeMap.get(nodeKey)\n            if ($isElementNode(node) && disabledNodes.includes(node.getType())) {\n              const currentIndent = node.getIndent()\n              if (currentIndent > 0) {\n                node.setIndent(0)\n              }\n            }\n          }\n        })\n      }),\n    )\n  }, [editor, disabledNodes])\n\n  useEffect(() => {\n    if (!editor || !disableTabNode) {\n      return\n    }\n    return mergeRegister(\n      // This is so that when you press Tab in the middle of a paragraph,\n      // it indents the paragraph, instead of inserting a TabNode.\n      editor.registerCommand<KeyboardEvent>(\n        KEY_TAB_COMMAND,\n        (event) => {\n          event.preventDefault()\n          return editor.dispatchCommand(\n            event.shiftKey ? OUTDENT_CONTENT_COMMAND : INDENT_CONTENT_COMMAND,\n            undefined,\n          )\n        },\n        COMMAND_PRIORITY_LOW,\n      ),\n      // Tab isn't the only way to insert a TabNode. We have to make sure\n      // it doesn't happen, for example, when pasting from the clipboard.\n      editor.registerNodeTransform(TabNode, (node) => {\n        node.remove()\n      }),\n    )\n  }, [editor, disableTabNode])\n\n  return <TabIndentationPlugin />\n}\n\nfunction $handleIndentAndOutdent(indentOrOutdent: (block: ElementNode) => void): boolean {\n  const selection = $getSelection()\n  if (!$isRangeSelection(selection)) {\n    return false\n  }\n  const alreadyHandled = new Set()\n  const nodes = selection.getNodes()\n  for (let i = 0; i < nodes.length; i++) {\n    const node = nodes[i]!\n    const key = node.getKey()\n    if (alreadyHandled.has(key)) {\n      continue\n    }\n    const parentBlock = $findMatchingParent(\n      node,\n      (parentNode): parentNode is ElementNode =>\n        $isElementNode(parentNode) && !parentNode.isInline(),\n    )\n    if (parentBlock === null) {\n      continue\n    }\n    const parentKey = parentBlock.getKey()\n    if (parentBlock.canIndent() && !alreadyHandled.has(parentKey)) {\n      alreadyHandled.add(parentKey)\n      indentOrOutdent(parentBlock)\n    }\n  }\n  return alreadyHandled.size > 0\n}\n"],"names":["useLexicalComposerContext","TabIndentationPlugin","$findMatchingParent","mergeRegister","$getSelection","$isElementNode","$isRangeSelection","COMMAND_PRIORITY_LOW","INDENT_CONTENT_COMMAND","KEY_TAB_COMMAND","OUTDENT_CONTENT_COMMAND","TabNode","useEffect","IndentPlugin","clientProps","editor","disabledNodes","disableTabNode","length","registerCommand","$handleIndentAndOutdent","block","includes","getType","indent","getIndent","setIndent","registerUpdateListener","dirtyElements","editorState","update","nodeKey","node","_nodeMap","get","currentIndent","event","preventDefault","dispatchCommand","shiftKey","undefined","registerNodeTransform","remove","indentOrOutdent","selection","alreadyHandled","Set","nodes","getNodes","i","key","getKey","has","parentBlock","parentNode","isInline","parentKey","canIndent","add","size"],"mappings":";AAEA,SAASA,yBAAyB,QAAQ,wCAAuC;AACjF,SAASC,oBAAoB,QAAQ,6CAA4C;AACjF,SAASC,mBAAmB,EAAEC,aAAa,QAAQ,iBAAgB;AACnE,SACEC,aAAa,EACbC,cAAc,EACdC,iBAAiB,EACjBC,oBAAoB,EACpBC,sBAAsB,EACtBC,eAAe,EACfC,uBAAuB,EACvBC,OAAO,QACF,UAAS;AAChB,SAASC,SAAS,QAAQ,QAAO;AAKjC,OAAO,MAAMC,eAAoD,CAAC,EAAEC,WAAW,EAAE;IAC/E,MAAM,CAACC,OAAO,GAAGf;IACjB,MAAM,EAAEgB,aAAa,EAAEC,cAAc,EAAE,GAAGH;IAE1CF,UAAU;QACR,IAAI,CAACG,UAAU,CAACC,eAAeE,QAAQ;YACrC;QACF;QACA,OAAOf,cACLY,OAAOI,eAAe,CACpBX,wBACA;YACE,OAAOY,wBAAwB,CAACC;gBAC9B,IAAI,CAACL,cAAcM,QAAQ,CAACD,MAAME,OAAO,KAAK;oBAC5C,MAAMC,SAASH,MAAMI,SAAS;oBAC9BJ,MAAMK,SAAS,CAACF,SAAS;gBAC3B;YACF;QACF,GACAjB,uBAEF,4FAA4F;QAC5F,qGAAqG;QACrG,mDAAmD;QACnDQ,OAAOY,sBAAsB,CAAC,CAAC,EAAEC,aAAa,EAAEC,WAAW,EAAE;YAC3Dd,OAAOe,MAAM,CAAC;gBACZ,KAAK,MAAM,CAACC,QAAQ,IAAIH,cAAe;oBACrC,MAAMI,OAAOH,YAAYI,QAAQ,CAACC,GAAG,CAACH;oBACtC,IAAI1B,eAAe2B,SAAShB,cAAcM,QAAQ,CAACU,KAAKT,OAAO,KAAK;wBAClE,MAAMY,gBAAgBH,KAAKP,SAAS;wBACpC,IAAIU,gBAAgB,GAAG;4BACrBH,KAAKN,SAAS,CAAC;wBACjB;oBACF;gBACF;YACF;QACF;IAEJ,GAAG;QAACX;QAAQC;KAAc;IAE1BJ,UAAU;QACR,IAAI,CAACG,UAAU,CAACE,gBAAgB;YAC9B;QACF;QACA,OAAOd,cACL,mEAAmE;QACnE,4DAA4D;QAC5DY,OAAOI,eAAe,CACpBV,iBACA,CAAC2B;YACCA,MAAMC,cAAc;YACpB,OAAOtB,OAAOuB,eAAe,CAC3BF,MAAMG,QAAQ,GAAG7B,0BAA0BF,wBAC3CgC;QAEJ,GACAjC,uBAEF,mEAAmE;QACnE,mEAAmE;QACnEQ,OAAO0B,qBAAqB,CAAC9B,SAAS,CAACqB;YACrCA,KAAKU,MAAM;QACb;IAEJ,GAAG;QAAC3B;QAAQE;KAAe;IAE3B,qBAAO,QAAChB;;;;;AACV,EAAC;AAED,SAASmB,wBAAwBuB,eAA6C;IAC5E,MAAMC,YAAYxC;IAClB,IAAI,CAACE,kBAAkBsC,YAAY;QACjC,OAAO;IACT;IACA,MAAMC,iBAAiB,IAAIC;IAC3B,MAAMC,QAAQH,UAAUI,QAAQ;IAChC,IAAK,IAAIC,IAAI,GAAGA,IAAIF,MAAM7B,MAAM,EAAE+B,IAAK;QACrC,MAAMjB,OAAOe,KAAK,CAACE,EAAE;QACrB,MAAMC,MAAMlB,KAAKmB,MAAM;QACvB,IAAIN,eAAeO,GAAG,CAACF,MAAM;YAC3B;QACF;QACA,MAAMG,cAAcnD,oBAClB8B,MACA,CAACsB,aACCjD,eAAeiD,eAAe,CAACA,WAAWC,QAAQ;QAEtD,IAAIF,gBAAgB,MAAM;YACxB;QACF;QACA,MAAMG,YAAYH,YAAYF,MAAM;QACpC,IAAIE,YAAYI,SAAS,MAAM,CAACZ,eAAeO,GAAG,CAACI,YAAY;YAC7DX,eAAea,GAAG,CAACF;YACnBb,gBAAgBU;QAClB;IACF;IACA,OAAOR,eAAec,IAAI,GAAG;AAC/B"}

package/dist/features/link/client/plugins/autoLink/index.js

@@ -119,8 +119,10 @@ function $createAutoLinkNode_(nodes, startIndex, endIndex, match) {
         const remainingTextNode = nodes[0];
         let linkTextNode;
         if (startIndex === 0) {
+            ;
             [linkTextNode] = remainingTextNode.splitText(endIndex);
         } else {
+            ;
             [, linkTextNode] = remainingTextNode.splitText(startIndex, endIndex);
         }
         if (linkTextNode) {
@@ -139,6 +141,7 @@ function $createAutoLinkNode_(nodes, startIndex, endIndex, match) {
         if (startIndex === 0) {
             firstLinkTextNode = firstTextNode;
         } else {
+            ;
             [, firstLinkTextNode] = firstTextNode.splitText(startIndex);
         }
         const linkNodes = [];