@lobehub/editor 1.0.0

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

@@ -0,0 +1,378 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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; }
+import { $computeTableMapSkipCellCheck, $getTableNodeFromLexicalNodeOrThrow, $getTableRowIndexFromTableCellNode, $isTableCellNode, $isTableRowNode, TableNode, getDOMCellFromTarget, getTableElement } from '@lexical/table';
+import { calculateZoomLevel, mergeRegister } from '@lexical/utils';
+import { $getNearestNodeFromDOMNode, SKIP_SCROLL_INTO_VIEW_TAG, isHTMLElement } from 'lexical';
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { MIN_COLUMN_WIDTH, MIN_ROW_HEIGHT, useStyles } from "./style";
+import { getCellColumnIndex, getCellNodeHeight } from "./utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var TableCellResize = /*#__PURE__*/memo(function (_ref) {
+  var editor = _ref.editor,
+    eventEmitter = _ref.eventEmitter;
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles,
+    theme = _useStyles.theme;
+  var targetRef = useRef(null);
+  var resizerRef = useRef(null);
+  // eslint-disable-next-line no-undef
+  var tableRectRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hasTable = _useState2[0],
+    setHasTable = _useState2[1];
+  var pointerStartPosRef = useRef(null);
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    pointerCurrentPos = _useState4[0],
+    updatePointerCurrentPos = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    activeCell = _useState6[0],
+    updateActiveCell = _useState6[1];
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    draggingDirection = _useState8[0],
+    updateDraggingDirection = _useState8[1];
+  var resetState = useCallback(function () {
+    updateActiveCell(null);
+    targetRef.current = null;
+    updateDraggingDirection(null);
+    pointerStartPosRef.current = null;
+    tableRectRef.current = null;
+  }, []);
+  useEffect(function () {
+    var tableKeys = new Set();
+    return mergeRegister(editor.registerMutationListener(TableNode, function (nodeMutations) {
+      var _iterator = _createForOfIteratorHelper(nodeMutations),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var _step$value = _slicedToArray(_step.value, 2),
+            nodeKey = _step$value[0],
+            mutation = _step$value[1];
+          if (mutation === 'destroyed') {
+            tableKeys.delete(nodeKey);
+          } else {
+            tableKeys.add(nodeKey);
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      setHasTable(tableKeys.size > 0);
+    }), editor.registerNodeTransform(TableNode, function (tableNode) {
+      if (tableNode.getColWidths()) {
+        return tableNode;
+      }
+      var numColumns = tableNode.getColumnCount();
+      var columnWidth = MIN_COLUMN_WIDTH;
+
+      // eslint-disable-next-line unicorn/no-new-array
+      tableNode.setColWidths(new Array(numColumns).fill(columnWidth));
+      return tableNode;
+    }));
+  }, [editor]);
+  useEffect(function () {
+    if (!hasTable) {
+      return;
+    }
+    var onPointerMove = function onPointerMove(event) {
+      var target = event.target;
+      if (!isHTMLElement(target)) {
+        return;
+      }
+      if (draggingDirection) {
+        event.preventDefault();
+        event.stopPropagation();
+        updatePointerCurrentPos({
+          x: event.clientX,
+          y: event.clientY
+        });
+        return;
+      }
+      if (resizerRef.current && resizerRef.current.contains(target)) {
+        return;
+      }
+      if (targetRef.current !== target) {
+        targetRef.current = target;
+        var cell = getDOMCellFromTarget(target);
+        if (cell && activeCell !== cell) {
+          editor.getEditorState().read(function () {
+            var tableCellNode = $getNearestNodeFromDOMNode(cell.elem);
+            if (!tableCellNode) {
+              throw new Error('TableCellResizer: Table cell node not found.');
+            }
+            var tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+            var tableElement = getTableElement(tableNode, editor.getElementByKey(tableNode.getKey()));
+            if (!tableElement) {
+              throw new Error('TableCellResizer: Table element not found.');
+            }
+            targetRef.current = target;
+            tableRectRef.current = tableElement.getBoundingClientRect();
+            updateActiveCell(cell);
+          }, {
+            editor: editor
+          });
+        } else if (!cell) {
+          resetState();
+        }
+      }
+    };
+    var onPointerDown = function onPointerDown(event) {
+      var isTouchEvent = event.pointerType === 'touch';
+      if (isTouchEvent) {
+        onPointerMove(event);
+      }
+    };
+    var resizerContainer = resizerRef.current;
+    resizerContainer === null || resizerContainer === void 0 || resizerContainer.addEventListener('pointermove', onPointerMove, {
+      capture: true
+    });
+    var removeRootListener = editor.registerRootListener(function (rootElement, prevRootElement) {
+      prevRootElement === null || prevRootElement === void 0 || prevRootElement.removeEventListener('pointermove', onPointerMove);
+      prevRootElement === null || prevRootElement === void 0 || prevRootElement.removeEventListener('pointerdown', onPointerDown);
+      rootElement === null || rootElement === void 0 || rootElement.addEventListener('pointermove', onPointerMove);
+      rootElement === null || rootElement === void 0 || rootElement.addEventListener('pointerdown', onPointerDown);
+    });
+    return function () {
+      removeRootListener();
+      resizerContainer === null || resizerContainer === void 0 || resizerContainer.removeEventListener('pointermove', onPointerMove);
+    };
+  }, [activeCell, draggingDirection, editor, resetState, hasTable]);
+  var isHeightChanging = function isHeightChanging(direction) {
+    if (direction === 'bottom') {
+      return true;
+    }
+    return false;
+  };
+  var updateRowHeight = useCallback(function (heightChange) {
+    if (!activeCell) {
+      throw new Error('TableCellResizer: Expected active cell.');
+    }
+    editor.update(function () {
+      var tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);
+      if (!$isTableCellNode(tableCellNode)) {
+        throw new Error('TableCellResizer: Table cell node not found.');
+      }
+      var tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+      var baseRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode);
+      var tableRows = tableNode.getChildren();
+
+      // Determine if this is a full row merge by checking colspan
+      var isFullRowMerge = tableCellNode.getColSpan() === tableNode.getColumnCount();
+
+      // For full row merges, apply to first row. For partial merges, apply to last row
+      var tableRowIndex = isFullRowMerge ? baseRowIndex : baseRowIndex + tableCellNode.getRowSpan() - 1;
+      if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
+        throw new Error('Expected table cell to be inside of table row.');
+      }
+      var tableRow = tableRows[tableRowIndex];
+      if (!$isTableRowNode(tableRow)) {
+        throw new Error('Expected table row');
+      }
+      var height = tableRow.getHeight();
+      if (height === undefined) {
+        var rowCells = tableRow.getChildren();
+        height = Math.min.apply(Math, _toConsumableArray(rowCells.map(
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        function (cell) {
+          var _getCellNodeHeight;
+          return (_getCellNodeHeight = getCellNodeHeight(cell, editor)) !== null && _getCellNodeHeight !== void 0 ? _getCellNodeHeight : Infinity;
+        })));
+      }
+      var newHeight = Math.max(height + heightChange, MIN_ROW_HEIGHT);
+      tableRow.setHeight(newHeight);
+      eventEmitter.emit('table:resize', {
+        heightChange: heightChange,
+        newHeight: newHeight
+      });
+    }, {
+      tag: SKIP_SCROLL_INTO_VIEW_TAG
+    });
+  }, [activeCell, editor]);
+  var updateColumnWidth = useCallback(function (widthChange) {
+    if (!activeCell) {
+      throw new Error('TableCellResizer: Expected active cell.');
+    }
+    editor.update(function () {
+      var tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);
+      if (!$isTableCellNode(tableCellNode)) {
+        throw new Error('TableCellResizer: Table cell node not found.');
+      }
+      var tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+      var _$computeTableMapSkip = $computeTableMapSkipCellCheck(tableNode, null, null),
+        _$computeTableMapSkip2 = _slicedToArray(_$computeTableMapSkip, 1),
+        tableMap = _$computeTableMapSkip2[0];
+      var columnIndex = getCellColumnIndex(tableCellNode, tableMap);
+      if (columnIndex === undefined) {
+        throw new Error('TableCellResizer: Table column not found.');
+      }
+      var colWidths = tableNode.getColWidths();
+      if (!colWidths) {
+        return;
+      }
+      var width = colWidths[columnIndex];
+      if (width === undefined) {
+        return;
+      }
+      var newColWidths = _toConsumableArray(colWidths);
+      var newWidth = Math.max(width + widthChange, MIN_COLUMN_WIDTH);
+      newColWidths[columnIndex] = newWidth;
+      tableNode.setColWidths(newColWidths);
+      requestAnimationFrame(function () {
+        eventEmitter.emit('table:resize', {
+          newColWidths: newColWidths
+        });
+      });
+    }, {
+      tag: SKIP_SCROLL_INTO_VIEW_TAG
+    });
+  }, [activeCell, editor]);
+  var pointerUpHandler = useCallback(function (direction) {
+    var handler = function handler(event) {
+      event.preventDefault();
+      event.stopPropagation();
+      if (!activeCell) {
+        throw new Error('TableCellResizer: Expected active cell.');
+      }
+      if (pointerStartPosRef.current) {
+        var _pointerStartPosRef$c = pointerStartPosRef.current,
+          x = _pointerStartPosRef$c.x,
+          y = _pointerStartPosRef$c.y;
+        if (activeCell === null) {
+          return;
+        }
+        var zoom = calculateZoomLevel(event.target);
+        if (isHeightChanging(direction)) {
+          var heightChange = (event.clientY - y) / zoom;
+          updateRowHeight(heightChange);
+        } else {
+          var widthChange = (event.clientX - x) / zoom;
+          updateColumnWidth(widthChange);
+        }
+        resetState();
+        if (typeof document !== 'undefined') {
+          document.removeEventListener('pointerup', handler);
+        }
+      }
+    };
+    return handler;
+  }, [activeCell, resetState, updateColumnWidth, updateRowHeight]);
+  var toggleResize = useCallback(function (direction) {
+    return function (event) {
+      event.preventDefault();
+      event.stopPropagation();
+      if (!activeCell) {
+        throw new Error('TableCellResizer: Expected active cell.');
+      }
+      pointerStartPosRef.current = {
+        x: event.clientX,
+        y: event.clientY
+      };
+      updatePointerCurrentPos(pointerStartPosRef.current);
+      updateDraggingDirection(direction);
+      if (typeof document !== 'undefined') {
+        document.addEventListener('pointerup', pointerUpHandler(direction));
+      }
+    };
+  }, [activeCell, pointerUpHandler]);
+  var getResizers = useCallback(function () {
+    if (activeCell) {
+      var _activeCell$elem$getB = activeCell.elem.getBoundingClientRect(),
+        height = _activeCell$elem$getB.height,
+        width = _activeCell$elem$getB.width,
+        top = _activeCell$elem$getB.top,
+        left = _activeCell$elem$getB.left;
+      var zoom = calculateZoomLevel(activeCell.elem);
+      var zoneWidth = 16; // Pixel width of the zone where you can drag the edge
+
+      // Default to 0 for server side
+      var scrollX = typeof window !== 'undefined' ? window.scrollX : 0;
+      var scrollY = typeof window !== 'undefined' ? window.scrollY : 0;
+      var _styles = {
+        bottom: {
+          backgroundColor: 'none',
+          cursor: 'row-resize',
+          height: "".concat(zoneWidth, "px"),
+          left: "".concat(scrollX + left, "px"),
+          top: "".concat(scrollY + top + height - zoneWidth / 2, "px"),
+          width: "".concat(width, "px")
+        },
+        right: {
+          backgroundColor: 'none',
+          cursor: 'col-resize',
+          height: "".concat(height, "px"),
+          left: "".concat(scrollX + left + width - zoneWidth / 2, "px"),
+          top: "".concat(scrollY + top, "px"),
+          width: "".concat(zoneWidth, "px")
+        }
+      };
+      var tableRect = tableRectRef.current;
+      if (draggingDirection && pointerCurrentPos && tableRect) {
+        if (isHeightChanging(draggingDirection)) {
+          _styles[draggingDirection].left = "".concat(scrollX + tableRect.left, "px");
+          _styles[draggingDirection].top = "".concat(scrollY + pointerCurrentPos.y / zoom, "px");
+          _styles[draggingDirection].height = '3px';
+          _styles[draggingDirection].width = "".concat(tableRect.width, "px");
+        } else {
+          _styles[draggingDirection].top = "".concat(scrollY + tableRect.top, "px");
+          _styles[draggingDirection].left = "".concat(scrollX + pointerCurrentPos.x / zoom, "px");
+          _styles[draggingDirection].width = '3px';
+          _styles[draggingDirection].height = "".concat(tableRect.height, "px");
+        }
+        _styles[draggingDirection].backgroundColor = theme.colorPrimary;
+        _styles[draggingDirection].mixBlendMode = 'unset';
+      }
+      return _styles;
+    }
+    return {
+      bottom: null,
+      left: null,
+      right: null,
+      top: null
+    };
+  }, [activeCell, draggingDirection, pointerCurrentPos, theme.colorPrimary]);
+  var resizerStyles = getResizers();
+  return /*#__PURE__*/_jsx("div", {
+    ref: resizerRef,
+    children: activeCell && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("div", {
+        className: cx(styles, 'TableCellResizer__resizer', 'TableCellResizer__ui'),
+        onPointerDown: toggleResize('right'),
+        style: resizerStyles.right || undefined
+      }), /*#__PURE__*/_jsx("div", {
+        className: cx(styles, 'TableCellResizer__resizer', 'TableCellResizer__ui'),
+        onPointerDown: toggleResize('bottom'),
+        style: resizerStyles.bottom || undefined
+      })]
+    })
+  });
+});
+export default /*#__PURE__*/memo(function (_ref2) {
+  var editor = _ref2.editor,
+    eventEmitter = _ref2.eventEmitter;
+  // Don't render portal on server side
+  if (typeof document === 'undefined') {
+    return null;
+  }
+  return /*#__PURE__*/createPortal( /*#__PURE__*/_jsx(TableCellResize, {
+    editor: editor,
+    eventEmitter: eventEmitter
+  }), document.body);
+});

package/es/plugins/table/react/TableResize/style.d.ts

@@ -0,0 +1,3 @@
+export declare const MIN_ROW_HEIGHT = 33;
+export declare const MIN_COLUMN_WIDTH = 92;
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<import("antd-style").SerializedStyles>;

package/es/plugins/table/react/TableResize/style.js

@@ -0,0 +1,10 @@
+var _templateObject;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { createStyles } from 'antd-style';
+export var MIN_ROW_HEIGHT = 33;
+export var MIN_COLUMN_WIDTH = 92;
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    touch-action: none;\n    position: absolute;\n    z-index: 1;\n\n    @media (pointer: coarse) {\n      background-color: ", ";\n      mix-blend-mode: color;\n    }\n  "])), token.colorPrimary);
+});

package/es/plugins/table/react/TableResize/utils.d.ts

@@ -0,0 +1,4 @@
+import { TableCellNode, TableMapType } from '@lexical/table';
+import { LexicalEditor } from 'lexical';
+export declare const getCellColumnIndex: (tableCellNode: TableCellNode, tableMap: TableMapType) => number | undefined;
+export declare const getCellNodeHeight: (cell: TableCellNode, activeEditor: LexicalEditor) => number | undefined;

package/es/plugins/table/react/TableResize/utils.js

@@ -0,0 +1,40 @@
+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 _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; }
+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 _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; }
+export var getCellColumnIndex = function getCellColumnIndex(tableCellNode, tableMap) {
+  var _iterator = _createForOfIteratorHelper(tableMap),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var element = _step.value;
+      var _iterator2 = _createForOfIteratorHelper(element.entries()),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var _step2$value = _slicedToArray(_step2.value, 2),
+            column = _step2$value[0],
+            element_ = _step2$value[1];
+          if (element_.cell === tableCellNode) {
+            return column;
+          }
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+};
+export var getCellNodeHeight = function getCellNodeHeight(cell, activeEditor) {
+  var domCellNode = activeEditor.getElementByKey(cell.getKey());
+  return domCellNode === null || domCellNode === void 0 ? void 0 : domCellNode.clientHeight;
+};

package/es/plugins/table/react/hooks.d.ts

@@ -0,0 +1 @@
+export declare function useDebounce<T extends (...args: never[]) => void>(fn: T, ms: number, maxWait?: number): import("lodash").DebouncedFunc<(...args: Parameters<T>) => void>;

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

@@ -0,0 +1,22 @@
+/**
+ * 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 { debounce } from 'lodash-es';
+import { useMemo, useRef } from 'react';
+export function useDebounce(fn, ms, maxWait) {
+  var funcRef = useRef(null);
+  funcRef.current = fn;
+  return useMemo(function () {
+    return debounce(function () {
+      if (funcRef.current) {
+        funcRef.current.apply(funcRef, arguments);
+      }
+    }, ms, {
+      maxWait: maxWait
+    });
+  }, [ms, maxWait]);
+}

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

@@ -0,0 +1,3 @@
+import { type FC } from 'react';
+import { ReactTablePluginProps } from './type';
+export declare const ReactTablePlugin: FC<ReactTablePluginProps>;

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

@@ -0,0 +1,77 @@
+'use client';
+
+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; }
+import { $findTableNode, $getElementForTableNode, $isTableSelection } from '@lexical/table';
+import EventEmitter from 'eventemitter3';
+import { $getSelection, $isRangeSelection } from 'lexical';
+import { useLayoutEffect, useMemo, useState } from 'react';
+import { useLexicalEditor } from "../../../editor-kernel/react";
+import { useLexicalComposerContext } from "../../../editor-kernel/react/react-context";
+import { TablePlugin } from "../plugin";
+import { $updateDOMForSelection } from "../utils";
+import TableActionMenuPlugin from "./TableActionMenu";
+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";
+export var ReactTablePlugin = function ReactTablePlugin(_ref) {
+  var className = _ref.className,
+    locale = _ref.locale;
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles;
+  var _useLexicalComposerCo = useLexicalComposerContext(),
+    _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    lexicalEditor = _useState2[0],
+    setLexicalEditor = _useState2[1];
+  var eventEmitter = useMemo(function () {
+    return new EventEmitter();
+  }, []);
+  useLayoutEffect(function () {
+    if (locale) {
+      editor.registerLocale(locale);
+    }
+    editor.registerPlugin(TablePlugin, {
+      theme: cx(styles, className)
+    });
+  }, []);
+  useLexicalEditor(function (editor) {
+    setLexicalEditor(editor);
+    editor.registerUpdateListener(function () {
+      editor.read(function () {
+        var selection = $getSelection();
+        if (!$isTableSelection(selection) && !$isRangeSelection(selection)) {
+          return null;
+        }
+        var tableNode = $findTableNode(selection.anchor.getNode());
+        if (!tableNode) {
+          return null;
+        }
+        $updateDOMForSelection(editor, $getElementForTableNode(editor, tableNode), selection);
+      });
+    });
+    return function () {
+      setLexicalEditor(null);
+    };
+  }, []);
+  return lexicalEditor && /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(TableCellResizePlugin, {
+      editor: lexicalEditor,
+      eventEmitter: eventEmitter
+    }), /*#__PURE__*/_jsx(TableActionMenuPlugin, {
+      editor: lexicalEditor
+    }), /*#__PURE__*/_jsx(TableHoverActionsPlugin, {
+      editor: lexicalEditor
+    })]
+  });
+};

package/es/plugins/table/react/style.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<import("antd-style").SerializedStyles>;

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

@@ -0,0 +1,8 @@
+var _templateObject;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    overflow-x: auto;\n    margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n\n    .editor_table {\n      table-layout: fixed;\n      border-spacing: 0;\n      border-collapse: collapse;\n\n      width: fit-content;\n\n      text-align: start;\n      text-indent: initial;\n      text-wrap: pretty;\n      word-break: auto-phrase;\n      overflow-wrap: break-word;\n\n      background: ", ";\n\n      > tr:first-of-type {\n        background: ", ";\n\n        .editor_table_cell_header {\n          font-weight: bold;\n        }\n      }\n    }\n\n    code {\n      word-break: break-word;\n    }\n\n    .editor_table_cell_header {\n      font-weight: normal;\n    }\n\n    .editor_table_cell {\n      position: relative;\n\n      overflow: auto;\n\n      width: 75px;\n      padding-block: 6px;\n      padding-inline: 8px;\n      border: 1px solid ", ";\n\n      text-align: start;\n      vertical-align: top;\n\n      outline: none;\n    }\n\n    .editor_table_cell_selected {\n      color: #000;\n      background-color: ", ";\n      caret-color: transparent;\n    }\n  "])), token.colorFillQuaternary, token.colorFillQuaternary, token.colorFillSecondary, token.yellow);
+});

package/es/plugins/table/react/type.d.ts

@@ -0,0 +1,5 @@
+import type { ILocaleKeys } from "../../../types";
+export interface ReactTablePluginProps {
+    className?: string;
+    locale?: Partial<Record<keyof ILocaleKeys, string>>;
+}

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

@@ -0,0 +1 @@
+export {};

package/es/plugins/table/utils/index.d.ts

@@ -0,0 +1,8 @@
+import { TableDOMCell, TableSelection } from '@lexical/table';
+import { TableDOMTable } from '@lexical/table/LexicalTableObserver';
+import { LexicalEditor, LexicalNode, RangeSelection } from 'lexical';
+export declare function $forEachTableCell(grid: TableDOMTable, cb: (cell: TableDOMCell, lexicalNode: LexicalNode, cords: {
+    x: number;
+    y: number;
+}) => void): void;
+export declare function $updateDOMForSelection(editor: LexicalEditor, table: TableDOMTable, selection: TableSelection | RangeSelection | null): void;