@lobehub/editor 1.8.1 → 1.8.3

package/es/plugins/table/react/TableActionMenu/index.js

@@ -1,4 +1,3 @@
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -12,311 +11,25 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { $computeTableMapSkipCellCheck, $deleteTableColumnAtSelection, $deleteTableRowAtSelection, $getTableCellNodeFromLexicalNode, $getTableColumnIndexFromTableCellNode, $getTableNodeFromLexicalNodeOrThrow, $getTableRowIndexFromTableCellNode, $insertTableColumnAtSelection, $insertTableRowAtSelection, $isTableCellNode, $isTableSelection, $mergeCells, $unmergeCell, TableCellHeaderStates, TableCellNode, getTableElement, getTableObserverFromTableElement } from '@lexical/table';
+import { $getTableCellNodeFromLexicalNode, $getTableNodeFromLexicalNodeOrThrow, $isTableCellNode, $isTableSelection, getTableElement, getTableObserverFromTableElement } from '@lexical/table';
 import { mergeRegister } from '@lexical/utils';
-import { ActionIcon, Dropdown } from '@lobehub/ui';
-import { $getSelection, $isRangeSelection, $setSelection, COMMAND_PRIORITY_CRITICAL, SELECTION_CHANGE_COMMAND, getDOMSelection } from 'lexical';
-import { ChevronDown, Grid2X2XIcon, PanelBottomCloseIcon, PanelLeftCloseIcon, PanelRightCloseIcon, PanelTopCloseIcon, TableColumnsSplitIcon, TableRowsSplitIcon } from 'lucide-react';
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { useTranslation } from "../../../../editor-kernel/react/useTranslation";
+import { ActionIcon } from '@lobehub/ui';
+import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_CRITICAL, SELECTION_CHANGE_COMMAND, getDOMSelection } from 'lexical';
+import { ChevronDown } from 'lucide-react';
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { useAnchor } from "../../../../editor-kernel/react/useAnchor";
+import ActionMenu from "./ActionMenu";
 import { useStyles } from "./style";
-import { $canUnmerge, $selectLastDescendant, computeSelectionCount, currentCellBackgroundColor } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 var TableActionMenu = /*#__PURE__*/memo(function (_ref) {
-  var editor = _ref.editor,
-    _tableCellNode = _ref.tableCellNode,
-    cellMerge = _ref.cellMerge,
-    children = _ref.children;
-  var _useState = useState(_tableCellNode),
+  var cellMerge = _ref.cellMerge,
+    editor = _ref.editor;
+  var anchorElem = useAnchor();
+  var menuButtonRef = useRef(null);
+  var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     tableCellNode = _useState2[0],
-    updateTableCellNode = _useState2[1];
-  var _useState3 = useState({
-      columns: 1,
-      rows: 1
-    }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    selectionCounts = _useState4[0],
-    updateSelectionCounts = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    canMergeCells = _useState6[0],
-    setCanMergeCells = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    canUnmergeCell = _useState8[0],
-    setCanUnmergeCell = _useState8[1];
-  var _useState9 = useState(function () {
-      return currentCellBackgroundColor(editor) || '';
-    }),
-    _useState10 = _slicedToArray(_useState9, 2),
-    setBackgroundColor = _useState10[1];
-  var t = useTranslation();
-  useEffect(function () {
-    return editor.registerMutationListener(TableCellNode, function (nodeMutations) {
-      var nodeUpdated = nodeMutations.get(tableCellNode.getKey()) === 'updated';
-      if (nodeUpdated) {
-        editor.getEditorState().read(function () {
-          updateTableCellNode(tableCellNode.getLatest());
-        });
-        setBackgroundColor(currentCellBackgroundColor(editor) || '');
-      }
-    }, {
-      skipInitialization: true
-    });
-  }, [editor, tableCellNode]);
-  useEffect(function () {
-    editor.getEditorState().read(function () {
-      var selection = $getSelection();
-      // Merge cells
-      if ($isTableSelection(selection)) {
-        var currentSelectionCounts = computeSelectionCount(selection);
-        updateSelectionCounts(computeSelectionCount(selection));
-        setCanMergeCells(currentSelectionCounts.columns > 1 || currentSelectionCounts.rows > 1);
-      }
-      // Unmerge cell
-      setCanUnmergeCell($canUnmerge());
-    });
-  }, [editor]);
-  var clearTableSelection = useCallback(function () {
-    editor.update(function () {
-      if (tableCellNode.isAttached()) {
-        var tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
-        var tableElement = getTableElement(tableNode, editor.getElementByKey(tableNode.getKey()));
-        if (tableElement === null) {
-          throw new Error('TableActionMenu: Expected to find tableElement in DOM');
-        }
-        var tableObserver = getTableObserverFromTableElement(tableElement);
-        if (tableObserver !== null) {
-          tableObserver.$clearHighlight();
-        }
-        tableNode.markDirty();
-        updateTableCellNode(tableCellNode.getLatest());
-      }
-      $setSelection(null);
-    });
-  }, [editor, tableCellNode]);
-  var mergeTableCellsAtSelection = function mergeTableCellsAtSelection() {
-    editor.update(function () {
-      var selection = $getSelection();
-      if (!$isTableSelection(selection)) {
-        return;
-      }
-      var nodes = selection.getNodes();
-      var tableCells = nodes.filter($isTableCellNode);
-      var targetCell = $mergeCells(tableCells);
-      if (targetCell) {
-        $selectLastDescendant(targetCell);
-      }
-    });
-  };
-  var unmergeTableCellsAtSelection = function unmergeTableCellsAtSelection() {
-    editor.update(function () {
-      $unmergeCell();
-    });
-  };
-  var insertTableRowAtSelection = useCallback(function (shouldInsertAfter) {
-    editor.update(function () {
-      for (var i = 0; i < selectionCounts.rows; i++) {
-        $insertTableRowAtSelection(shouldInsertAfter);
-      }
-    });
-  }, [editor, selectionCounts.rows]);
-  var insertTableColumnAtSelection = useCallback(function (shouldInsertAfter) {
-    editor.update(function () {
-      for (var i = 0; i < selectionCounts.columns; i++) {
-        $insertTableColumnAtSelection(shouldInsertAfter);
-      }
-    });
-  }, [editor, selectionCounts.columns]);
-  var deleteTableRowAtSelection = useCallback(function () {
-    editor.update(function () {
-      $deleteTableRowAtSelection();
-    });
-  }, [editor]);
-  var deleteTableAtSelection = useCallback(function () {
-    editor.update(function () {
-      var tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
-      tableNode.remove();
-      clearTableSelection();
-    });
-  }, [editor, tableCellNode, clearTableSelection]);
-  var deleteTableColumnAtSelection = useCallback(function () {
-    editor.update(function () {
-      $deleteTableColumnAtSelection();
-    });
-  }, [editor]);
-  var toggleTableRowIsHeader = useCallback(function () {
-    editor.update(function () {
-      var tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
-      var tableRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode);
-      var _$computeTableMapSkip = $computeTableMapSkipCellCheck(tableNode, null, null),
-        _$computeTableMapSkip2 = _slicedToArray(_$computeTableMapSkip, 1),
-        gridMap = _$computeTableMapSkip2[0];
-      var rowCells = new Set();
-      var newStyle = tableCellNode.getHeaderStyles() ^ TableCellHeaderStates.ROW;
-      for (var col = 0; col < gridMap[tableRowIndex].length; col++) {
-        var mapCell = gridMap[tableRowIndex][col];
-        if (!(mapCell !== null && mapCell !== void 0 && mapCell.cell)) {
-          continue;
-        }
-        if (!rowCells.has(mapCell.cell)) {
-          rowCells.add(mapCell.cell);
-          mapCell.cell.setHeaderStyles(newStyle, TableCellHeaderStates.ROW);
-        }
-      }
-      clearTableSelection();
-    });
-  }, [editor, tableCellNode, clearTableSelection]);
-  var toggleTableColumnIsHeader = useCallback(function () {
-    editor.update(function () {
-      var tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
-      var tableColumnIndex = $getTableColumnIndexFromTableCellNode(tableCellNode);
-      var _$computeTableMapSkip3 = $computeTableMapSkipCellCheck(tableNode, null, null),
-        _$computeTableMapSkip4 = _slicedToArray(_$computeTableMapSkip3, 1),
-        gridMap = _$computeTableMapSkip4[0];
-      var columnCells = new Set();
-      var newStyle = tableCellNode.getHeaderStyles() ^ TableCellHeaderStates.COLUMN;
-      var _iterator = _createForOfIteratorHelper(gridMap),
-        _step;
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var element = _step.value;
-          var mapCell = element[tableColumnIndex];
-          if (!(mapCell !== null && mapCell !== void 0 && mapCell.cell)) {
-            continue;
-          }
-          if (!columnCells.has(mapCell.cell)) {
-            columnCells.add(mapCell.cell);
-            mapCell.cell.setHeaderStyles(newStyle, TableCellHeaderStates.COLUMN);
-          }
-        }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
-      }
-      clearTableSelection();
-    });
-  }, [editor, tableCellNode, clearTableSelection]);
-
-  // Create menu items array with useMemo for performance
-  var menuItems = useMemo(function () {
-    return [
-    // // Merge/Unmerge cells (conditional)
-    // ...(cellMerge && canMergeCells
-    //   ? [
-    //       {
-    //         key: 'table-merge-cells',
-    //         label: 'Merge cells',
-    //         onClick: () => mergeTableCellsAtSelection(),
-    //       },
-    //     ]
-    //   : []),
-    // ...(cellMerge && canUnmergeCell
-    //   ? [
-    //       {
-    //         key: 'table-unmerge-cells',
-    //         label: 'Unmerge cells',
-    //         onClick: () => unmergeTableCellsAtSelection(),
-    //       },
-    //     ]
-    //   : []),
-    // // Divider after merge operations (if any merge operations exist)
-    // ...(cellMerge && (canMergeCells || canUnmergeCell) ? [{ type: 'divider' as const }] : []),
-    //
-    // // Row operations
-    {
-      icon: PanelTopCloseIcon,
-      key: 'table-insert-row-above',
-      label: t("table.insertRowAbove", {
-        count: selectionCounts.rows
-      }),
-      onClick: function onClick() {
-        return insertTableRowAtSelection(false);
-      }
-    }, {
-      icon: PanelBottomCloseIcon,
-      key: 'table-insert-row-below',
-      label: t("table.insertRowBelow", {
-        count: selectionCounts.rows
-      }),
-      onClick: function onClick() {
-        return insertTableRowAtSelection(true);
-      }
-    }, {
-      type: 'divider'
-    },
-    // Column operations
-    {
-      icon: PanelLeftCloseIcon,
-      key: 'table-insert-column-before',
-      // label: `Insert ${selectionCounts.columns === 1 ? 'column' : `${selectionCounts.columns} columns`} left`,
-      label: t("table.insertColumnLeft", {
-        count: selectionCounts.columns
-      }),
-      onClick: function onClick() {
-        return insertTableColumnAtSelection(false);
-      }
-    }, {
-      icon: PanelRightCloseIcon,
-      key: 'table-insert-column-after',
-      // label: `Insert ${selectionCounts.columns === 1 ? 'column' : `${selectionCounts.columns} columns`} right`,
-      label: t("table.insertColumnRight", {
-        count: selectionCounts.columns
-      }),
-      onClick: function onClick() {
-        return insertTableColumnAtSelection(true);
-      }
-    }, {
-      type: 'divider'
-    },
-    // Delete operations
-    {
-      icon: TableColumnsSplitIcon,
-      key: 'table-delete-columns',
-      // label: 'Delete column',
-      label: t("table.deleteColumn"),
-      onClick: function onClick() {
-        return deleteTableColumnAtSelection();
-      }
-    }, {
-      icon: TableRowsSplitIcon,
-      key: 'table-delete-rows',
-      // label: 'Delete row',
-      label: t("table.deleteRow"),
-      onClick: function onClick() {
-        return deleteTableRowAtSelection();
-      }
-    }, {
-      type: 'divider'
-    }, {
-      icon: Grid2X2XIcon,
-      key: 'table-delete',
-      // label: 'Delete table',
-      label: t("table.delete"),
-      onClick: function onClick() {
-        return deleteTableAtSelection();
-      }
-    }];
-  }, [cellMerge, canMergeCells, canUnmergeCell, selectionCounts.rows, selectionCounts.columns, tableCellNode.__headerState, mergeTableCellsAtSelection, unmergeTableCellsAtSelection, insertTableRowAtSelection, insertTableColumnAtSelection, deleteTableColumnAtSelection, deleteTableRowAtSelection, deleteTableAtSelection, toggleTableRowIsHeader, toggleTableColumnIsHeader]);
-  return /*#__PURE__*/_jsx(Dropdown, {
-    menu: {
-      items: menuItems
-    },
-    children: children
-  });
-});
-function TableCellActionMenuContainer(_ref2) {
-  var anchorElem = _ref2.anchorElem,
-    cellMerge = _ref2.cellMerge,
-    editor = _ref2.editor;
-  var menuButtonRef = useRef(null);
-  var _useState11 = useState(null),
-    _useState12 = _slicedToArray(_useState11, 2),
-    tableCellNode = _useState12[0],
-    setTableMenuCellNode = _useState12[1];
+    setTableMenuCellNode = _useState2[1];
 
   // const [colorPickerModal, showColorPickerModal] = useModal();
 
@@ -402,7 +115,7 @@ function TableCellActionMenuContainer(_ref2) {
     var enabled = !tableObserver || !tableObserver.isSelecting;
     menu.classList.toggle('table-cell-action-button-container--active', enabled);
     menu.classList.toggle('table-cell-action-button-container--inactive', !enabled);
-    if (enabled) {
+    if (enabled && anchorElem) {
       var tableCellRect = tableCellParentNodeDOM.getBoundingClientRect();
       var anchorRect = anchorElem.getBoundingClientRect();
       var top = tableCellRect.top - anchorRect.top;
@@ -445,7 +158,7 @@ function TableCellActionMenuContainer(_ref2) {
   return /*#__PURE__*/_jsx("div", {
     className: styles,
     ref: menuButtonRef,
-    children: tableCellNode && /*#__PURE__*/_jsx(TableActionMenu, {
+    children: tableCellNode && /*#__PURE__*/_jsx(ActionMenu, {
       cellMerge: cellMerge,
       editor: editor,
       tableCellNode: tableCellNode,
@@ -462,22 +175,5 @@ function TableCellActionMenuContainer(_ref2) {
       })
     })
   });
-}
-export default /*#__PURE__*/memo(function (_ref3) {
-  var anchorElem = _ref3.anchorElem,
-    _ref3$cellMerge = _ref3.cellMerge,
-    cellMerge = _ref3$cellMerge === void 0 ? false : _ref3$cellMerge,
-    editor = _ref3.editor;
-  // Don't render portal on server side
-  if (typeof document === 'undefined') {
-    return null;
-  }
-  var root = editor.getRootElement();
-  var anchor = root ? root.parentElement : null;
-  var targetElement = anchorElem || anchor || document.body;
-  return /*#__PURE__*/createPortal( /*#__PURE__*/_jsx(TableCellActionMenuContainer, {
-    anchorElem: targetElement,
-    cellMerge: cellMerge,
-    editor: editor
-  }), targetElement);
-});
+});
+export default TableActionMenu;

package/es/plugins/table/react/TableHoverActions/index.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import { LexicalEditor } from 'lexical';
-declare const _default: import("react").MemoExoticComponent<({ anchorElem, editor }: {
-    anchorElem?: HTMLElement | undefined;
+declare const TableHoverActions: import("react").NamedExoticComponent<{
     editor: LexicalEditor;
-}) => import("react").ReactPortal | null>;
-export default _default;
+}>;
+export default TableHoverActions;

package/es/plugins/table/react/TableHoverActions/index.js

@@ -17,15 +17,15 @@ import { ActionIcon } from '@lobehub/ui';
 import { $getNearestNodeFromDOMNode } from 'lexical';
 import { PlusIcon } from 'lucide-react';
 import { memo, useEffect, useMemo, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
 import { useLexicalComposerContext } from "../../../../editor-kernel/react";
+import { useAnchor } from "../../../../editor-kernel/react/useAnchor";
 import { useStyles } from "./style";
 import { getMouseInfo, useDebounce } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var TableHoverActionsContainer = /*#__PURE__*/memo(function (_ref) {
-  var anchorElem = _ref.anchorElem,
-    editor = _ref.editor;
+var TableHoverActions = /*#__PURE__*/memo(function (_ref) {
+  var editor = _ref.editor;
+  var anchorElem = useAnchor();
   var _useLexicalComposerCo = useLexicalComposerContext(),
     _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
     iEditor = _useLexicalComposerCo2[0];
@@ -92,7 +92,7 @@ var TableHoverActionsContainer = /*#__PURE__*/memo(function (_ref) {
     }, {
       editor: editor
     });
-    if (tableDOMElement) {
+    if (tableDOMElement && anchorElem) {
       var _getBoundingClientRec = tableDOMElement.getBoundingClientRect(),
         tableElemY = _getBoundingClientRec.y,
         tableElemRight = _getBoundingClientRec.right,
@@ -247,18 +247,5 @@ var TableHoverActionsContainer = /*#__PURE__*/memo(function (_ref) {
     })]
   });
 });
-export default /*#__PURE__*/memo(function (_ref2) {
-  var anchorElem = _ref2.anchorElem,
-    editor = _ref2.editor;
-  // Don't render portal on server side
-  if (typeof document === 'undefined') {
-    return null;
-  }
-  var root = editor.getRootElement();
-  var anchor = root ? root.parentElement : null;
-  var targetElement = anchorElem || anchor || document.body;
-  return /*#__PURE__*/createPortal( /*#__PURE__*/_jsx(TableHoverActionsContainer, {
-    anchorElem: targetElement,
-    editor: editor
-  }), targetElement);
-});
+TableHoverActions.displayName = 'TableHoverActions';
+export default TableHoverActions;

package/es/plugins/table/react/index.js

@@ -11,6 +11,7 @@ import EventEmitter from 'eventemitter3';
 import { $getSelection, $isRangeSelection } from 'lexical';
 import { useLayoutEffect, useMemo, useState } from 'react';
 import { useLexicalEditor } from "../../../editor-kernel/react";
+import PortalAnchor from "../../../editor-kernel/react/PortalAnchor";
 import { useLexicalComposerContext } from "../../../editor-kernel/react/react-context";
 import { TablePlugin } from "../plugin";
 import { $updateDOMForSelection } from "../utils";
@@ -19,8 +20,8 @@ import TableHoverActionsPlugin from "./TableHoverActions";
 import TableCellResizePlugin from "./TableResize";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 export var ReactTablePlugin = function ReactTablePlugin(_ref) {
   var className = _ref.className,
     locale = _ref.locale;
@@ -68,10 +69,12 @@ export var ReactTablePlugin = function ReactTablePlugin(_ref) {
     children: [/*#__PURE__*/_jsx(TableCellResizePlugin, {
       editor: lexicalEditor,
       eventEmitter: eventEmitter
-    }), /*#__PURE__*/_jsx(TableActionMenuPlugin, {
-      editor: lexicalEditor
-    }), /*#__PURE__*/_jsx(TableHoverActionsPlugin, {
-      editor: lexicalEditor
+    }), /*#__PURE__*/_jsxs(PortalAnchor, {
+      children: [/*#__PURE__*/_jsx(TableActionMenuPlugin, {
+        editor: lexicalEditor
+      }), /*#__PURE__*/_jsx(TableHoverActionsPlugin, {
+        editor: lexicalEditor
+      })]
     })]
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/editor",
-  "version": "1.8.1",
+  "version": "1.8.3",
   "description": "A powerful and extensible rich text editor built on Meta's Lexical framework, providing a modern editing experience with React integration.",
   "keywords": [
     "lobehub",