@lobehub/editor 1.8.2 → 1.8.3

package/es/plugins/slash/react/components/DefaultSlashMenu.js

@@ -0,0 +1,48 @@
+'use client';
+
+import { Dropdown } from '@lobehub/ui';
+import { memo, useCallback } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var DefaultSlashMenu = /*#__PURE__*/memo(function (_ref) {
+  var activeKey = _ref.activeKey,
+    anchorClassName = _ref.anchorClassName,
+    loading = _ref.loading,
+    onSelect = _ref.onSelect,
+    open = _ref.open,
+    options = _ref.options,
+    position = _ref.position,
+    _onClose = _ref.onClose;
+  var handleMenuClick = useCallback(function (_ref2) {
+    var key = _ref2.key;
+    var option = options.find(function (item) {
+      return 'key' in item && item.key === key;
+    });
+    if (option) onSelect(option);
+  }, [options, onSelect]);
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      left: position.x,
+      position: 'fixed',
+      top: position.y,
+      zIndex: 9999
+    },
+    children: /*#__PURE__*/_jsx(Dropdown, {
+      menu: {
+        // @ts-ignore
+        activeKey: activeKey,
+        items: loading ? [{
+          disabled: true,
+          key: 'loading',
+          label: 'Loading...'
+        }] : options,
+        onClick: handleMenuClick
+      },
+      open: open,
+      children: /*#__PURE__*/_jsx("span", {
+        className: anchorClassName
+      })
+    })
+  });
+});
+DefaultSlashMenu.displayName = 'DefaultSlashMenu';
+export default DefaultSlashMenu;

package/es/plugins/slash/react/components/SlashMenu.d.ts

@@ -1,8 +1,8 @@
-import { type FC } from 'react';
+/// <reference types="react" />
 import type { SlashMenuProps } from '../type';
 /**
  * SlashMenu component - Only responsible for rendering the menu UI
  * All state management and plugin registration is handled by ReactSlashPlugin
  */
-declare const SlashMenu: FC<SlashMenuProps>;
+declare const SlashMenu: import("react").NamedExoticComponent<SlashMenuProps>;
 export default SlashMenu;

package/es/plugins/slash/react/components/SlashMenu.js

@@ -1,13 +1,14 @@
 'use client';
 
-import { Dropdown } from '@lobehub/ui';
-import { useCallback } from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useCallback } from 'react';
+import DefaultSlashMenu from "./DefaultSlashMenu";
+
 /**
  * SlashMenu component - Only responsible for rendering the menu UI
  * All state management and plugin registration is handled by ReactSlashPlugin
  */
-var SlashMenu = function SlashMenu(_ref) {
+import { jsx as _jsx } from "react/jsx-runtime";
+var SlashMenu = /*#__PURE__*/memo(function (_ref) {
   var activeKey = _ref.activeKey,
     anchorClassName = _ref.anchorClassName,
     CustomRender = _ref.customRender,
@@ -17,18 +18,11 @@ var SlashMenu = function SlashMenu(_ref) {
     open = _ref.open,
     options = _ref.options,
     position = _ref.position,
-    _onClose = _ref.onClose;
+    onClose = _ref.onClose;
   // Adapter for custom render component onSelect
   var customRenderOnSelect = useCallback(function (option) {
     onSelect(option);
   }, [onSelect]);
-  var handleMenuClick = useCallback(function (_ref2) {
-    var key = _ref2.key;
-    var option = options.find(function (item) {
-      return 'key' in item && item.key === key;
-    });
-    if (option) onSelect(option);
-  }, [options, onSelect]);
 
   /**
    * Render the custom component if it exists
@@ -43,30 +37,16 @@ var SlashMenu = function SlashMenu(_ref) {
       setActiveKey: onActiveKeyChange
     });
   }
-  return /*#__PURE__*/_jsx("div", {
-    style: {
-      left: position.x,
-      position: 'fixed',
-      top: position.y,
-      zIndex: 1050
-    },
-    children: /*#__PURE__*/_jsx(Dropdown, {
-      menu: {
-        // @ts-ignore
-        activeKey: activeKey,
-        items: loading ? [{
-          disabled: true,
-          key: 'loading',
-          label: 'Loading...'
-        }] : options,
-        onClick: handleMenuClick
-      },
-      open: open,
-      children: /*#__PURE__*/_jsx("span", {
-        className: anchorClassName
-      })
-    })
+  return /*#__PURE__*/_jsx(DefaultSlashMenu, {
+    activeKey: activeKey,
+    anchorClassName: anchorClassName,
+    loading: loading,
+    onClose: onClose,
+    onSelect: onSelect,
+    open: open,
+    options: options,
+    position: position
   });
-};
+});
 SlashMenu.displayName = 'SlashMenu';
 export default SlashMenu;

package/es/plugins/table/react/TableActionMenu/ActionMenu.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 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 { TableCellNode } from '@lexical/table';
+import type { LexicalEditor } from 'lexical';
+import { type ReactNode } from 'react';
+interface TableCellActionMenuProps {
+    cellMerge?: boolean;
+    children: ReactNode;
+    editor: LexicalEditor;
+    tableCellNode: TableCellNode;
+}
+declare const TableActionMenu: import("react").NamedExoticComponent<TableCellActionMenuProps>;
+export default TableActionMenu;

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

@@ -0,0 +1,309 @@
+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); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+/**
+ * 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 { $computeTableMapSkipCellCheck, $deleteTableColumnAtSelection, $deleteTableRowAtSelection, $getTableColumnIndexFromTableCellNode, $getTableNodeFromLexicalNodeOrThrow, $getTableRowIndexFromTableCellNode, $insertTableColumnAtSelection, $insertTableRowAtSelection, $isTableCellNode, $isTableSelection, $mergeCells, $unmergeCell, TableCellHeaderStates, TableCellNode, getTableElement, getTableObserverFromTableElement } from '@lexical/table';
+import { Dropdown } from '@lobehub/ui';
+import { $getSelection, $setSelection } from 'lexical';
+import { Grid2X2XIcon, PanelBottomCloseIcon, PanelLeftCloseIcon, PanelRightCloseIcon, PanelTopCloseIcon, TableColumnsSplitIcon, TableRowsSplitIcon } from 'lucide-react';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from "../../../../editor-kernel/react/useTranslation";
+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),
+    _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
+  });
+});
+TableActionMenu.displayName = 'TableActionMenu';
+export default TableActionMenu;

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

@@ -1,8 +1,7 @@
 /// <reference types="react" />
 import type { LexicalEditor } from 'lexical';
-declare const _default: import("react").NamedExoticComponent<{
-    anchorElem?: HTMLElement | undefined;
+declare const TableActionMenu: import("react").NamedExoticComponent<{
     cellMerge?: boolean | undefined;
     editor: LexicalEditor;
 }>;
-export default _default;
+export default TableActionMenu;