@lobehub/editor 1.7.1 → 1.8.1

package/es/plugins/slash/plugin/index.js

@@ -15,7 +15,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { $getSelection, $isRangeSelection } from 'lexical';
+import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_CRITICAL, KEY_DOWN_COMMAND } from 'lexical';
 import { KernelPlugin } from "../../../editor-kernel/plugin";
 import { ISlashService, SlashService } from "../service/i-slash-service";
 import { getQueryTextForSearch, tryToPositionRange } from "../utils/utils";
@@ -29,6 +29,7 @@ export var SlashPlugin = (_class = /*#__PURE__*/function (_KernelPlugin) {
     _defineProperty(_assertThisInitialized(_this), "service", null);
     _defineProperty(_assertThisInitialized(_this), "currentSlashTrigger", null);
     _defineProperty(_assertThisInitialized(_this), "currentSlashTriggerIndex", -1);
+    _defineProperty(_assertThisInitialized(_this), "suppressOpen", false);
     _this.config = config;
     _this.service = new SlashService(kernel);
     kernel.registerService(ISlashService, _this.service);
@@ -47,11 +48,23 @@ export var SlashPlugin = (_class = /*#__PURE__*/function (_KernelPlugin) {
       (_this$config = this.config) === null || _this$config === void 0 || _this$config.triggerClose();
       this.currentSlashTrigger = null;
       this.currentSlashTriggerIndex = -1;
+      // After an explicit close, suppress reopening until next typing input
+      this.suppressOpen = true;
     }
   }, {
     key: "onInit",
     value: function onInit(editor) {
       var _this2 = this;
+      // Reset suppression on typing-related key presses
+      this.register(editor.registerCommand(KEY_DOWN_COMMAND, function (event) {
+        if (event.isComposing) return false;
+        var key = event.key;
+        // Any character input or deletion should re-enable opening
+        if (key.length === 1 || key === 'Backspace' || key === 'Delete') {
+          _this2.suppressOpen = false;
+        }
+        return false;
+      }, COMMAND_PRIORITY_CRITICAL));
       this.register(editor.registerUpdateListener(function () {
         editor.getEditorState().read(function () {
           var _this2$service, _this2$service2, _this2$service3;
@@ -79,6 +92,12 @@ export var SlashPlugin = (_class = /*#__PURE__*/function (_KernelPlugin) {
             _this2.triggerClose();
             return;
           }
+
+          // If we previously suppressed opening, do not reopen until user types
+          if (_this2.currentSlashTrigger === null && _this2.suppressOpen) {
+            _this2.triggerClose();
+            return;
+          }
           var triggerText = _this2.currentSlashTrigger;
           if (triggerText === null) {
             triggerText = text.slice(-1);
@@ -101,6 +120,14 @@ export var SlashPlugin = (_class = /*#__PURE__*/function (_KernelPlugin) {
           var fuse = (_this2$service3 = _this2.service) === null || _this2$service3 === void 0 ? void 0 : _this2$service3.getSlashFuse(triggerText);
           var isRangePositioned = tryToPositionRange(_this2.currentSlashTriggerIndex, range, editorWindow);
           var match = triggerFn === null || triggerFn === void 0 ? void 0 : triggerFn(text.slice(_this2.currentSlashTriggerIndex));
+
+          // Check if there's a space in the current search text that should close the menu
+          var searchText = text.slice(_this2.currentSlashTriggerIndex);
+          var hasSpaceAfterTrigger = searchText.includes(' ') && !(slashOptions !== null && slashOptions !== void 0 && slashOptions.allowWhitespace);
+          if (hasSpaceAfterTrigger) {
+            _this2.triggerClose();
+            return;
+          }
           var finalItems = fuse && match && match.matchingString.length > 0 ? fuse.search(match.matchingString).map(function (result) {
             return result.item;
           }) : slashOptions.items;

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

@@ -1,8 +1,20 @@
+import type { IFuseOptions } from 'fuse.js';
 import type { FC, ReactElement } from 'react';
 import type { SlashOptions } from "..";
 import type { ISlashMenuOption, ISlashOption } from "../service/i-slash-service";
 import type { IEditor } from "../../../types";
 export interface ReactSlashOptionProps {
+    /**
+     * Complete Fuse.js configuration options
+     * @example
+     * {
+     *   keys: ['key', 'label', 'description'],
+     *   threshold: 0.3,
+     *   includeScore: true,
+     *   includeMatches: true
+     * }
+     */
+    fuseOptions?: IFuseOptions<ISlashMenuOption>;
     /**
      * Searchable options
      */
@@ -17,6 +29,13 @@ export interface ReactSlashOptionProps {
      * Custom render component
      */
     renderComp?: FC<MenuRenderProps>;
+    /**
+     * Fuse.js search keys for fuzzy matching
+     * Default is ['key']
+     * @example ['key', 'label', 'description']
+     * @deprecated Use fuseOptions instead
+     */
+    searchKeys?: string[];
     /**
      * Trigger character
      */

package/es/plugins/slash/service/i-slash-service.d.ts

@@ -1,17 +1,28 @@
 import { DropdownMenuItemType } from '@lobehub/ui';
-import Fuse from 'fuse.js';
+import Fuse, { type IFuseOptions } from 'fuse.js';
 import type { IEditor, IEditorKernel, IServiceID } from "../../../types";
 import { getBasicTypeaheadTriggerMatch } from '../utils/utils';
 export type ISlashDividerOption = {
     type: 'divider';
 };
-export interface ISlashMenuOption extends Omit<DropdownMenuItemType, 'extra'> {
+export interface ISlashMenuOption extends DropdownMenuItemType {
     metadata?: Record<string, any>;
     onSelect?: (editor: IEditor, matchingString: string) => void;
 }
 export type ISlashOption = ISlashMenuOption | ISlashDividerOption;
 export interface SlashOptions {
     allowWhitespace?: boolean;
+    /**
+     * Complete Fuse.js configuration options
+     * @example
+     * {
+     *   keys: ['key', 'label', 'description'],
+     *   threshold: 0.3,
+     *   includeScore: true,
+     *   includeMatches: true
+     * }
+     */
+    fuseOptions?: IFuseOptions<ISlashMenuOption>;
     items: Array<ISlashOption> | ((search: {
         leadOffset: number;
         matchingString: string;
@@ -20,6 +31,13 @@ export interface SlashOptions {
     maxLength?: number;
     minLength?: number;
     punctuation?: string;
+    /**
+     * Fuse.js search keys for fuzzy matching
+     * Default is ['key']
+     * @example ['key', 'label', 'description']
+     * @deprecated Use fuseOptions instead
+     */
+    searchKeys?: string[];
     trigger: string;
 }
 export interface ISlashService {

package/es/plugins/slash/service/i-slash-service.js

@@ -46,9 +46,12 @@ export var SlashService = /*#__PURE__*/function () {
         var searchableItems = options.items.filter(function (item) {
           return !('type' in item) || item.type !== 'divider';
         });
-        this.triggerFuseMap.set(options.trigger, new Fuse(searchableItems, {
-          keys: ['label', 'value']
-        }));
+
+        // Use fuseOptions if provided, otherwise fallback to searchKeys or default
+        var fuseConfig = options.fuseOptions || {
+          keys: options.searchKeys || ['key']
+        };
+        this.triggerFuseMap.set(options.trigger, new Fuse(searchableItems, fuseConfig));
       }
     }
   }, {

package/es/plugins/slash/utils/utils.js

@@ -120,14 +120,20 @@ export function getBasicTypeaheadTriggerMatch(trigger, _ref) {
     _ref$allowWhitespace = _ref.allowWhitespace,
     allowWhitespace = _ref$allowWhitespace === void 0 ? false : _ref$allowWhitespace;
   return function (text) {
+    // When whitespace is not allowed, we need to ensure the regex stops at whitespace
     var validCharsSuffix = allowWhitespace ? '' : '\\s';
     var validChars = '[^' + trigger + punctuation + validCharsSuffix + ']';
-    var TypeaheadTriggerRegex = new RegExp('(^|\\s|\\()(' + '[' + trigger + ']' + '((?:' + validChars + '){0,' + maxLength + '})' + ')$');
+
+    // Create regex that matches from trigger to either end of string OR whitespace (when not allowed)
+    var regexPattern = allowWhitespace ? '(^|\\s|\\()(' + '[' + trigger + ']' + '((?:' + validChars + '){0,' + maxLength + '})' + ')$' : '(^|\\s|\\()(' + '[' + trigger + ']' + '((?:' + validChars + ')*?)' + ')(?=\\s|$)';
+    var TypeaheadTriggerRegex = new RegExp(regexPattern);
     var match = TypeaheadTriggerRegex.exec(text);
     if (match !== null) {
       var maybeLeadingWhitespace = match[1];
       var matchingString = match[3];
-      if (matchingString.length >= minLength) {
+
+      // Check length constraints
+      if (matchingString.length >= minLength && matchingString.length <= maxLength) {
         return {
           leadOffset: match.index + maybeLeadingWhitespace.length,
           matchingString: matchingString,

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

@@ -472,7 +472,9 @@ export default /*#__PURE__*/memo(function (_ref3) {
   if (typeof document === 'undefined') {
     return null;
   }
-  var targetElement = anchorElem || document.body;
+  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,

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

@@ -3,5 +3,5 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref) {
   var css = _ref.css;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    will-change: transform;\n\n    position: absolute;\n    z-index: 3;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n  "])));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    will-change: transform;\n\n    position: absolute;\n    z-index: 3;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n\n    background: red;\n  "])));
 });

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

@@ -19,7 +19,7 @@ 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 { BUTTON_WIDTH_PX, useStyles } from "./style";
+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";
@@ -94,12 +94,10 @@ var TableHoverActionsContainer = /*#__PURE__*/memo(function (_ref) {
     });
     if (tableDOMElement) {
       var _getBoundingClientRec = tableDOMElement.getBoundingClientRect(),
-        tableElemWidth = _getBoundingClientRec.width,
         tableElemY = _getBoundingClientRec.y,
         tableElemRight = _getBoundingClientRec.right,
         tableElemLeft = _getBoundingClientRec.left,
-        tableElemBottom = _getBoundingClientRec.bottom,
-        tableElemHeight = _getBoundingClientRec.height;
+        tableElemBottom = _getBoundingClientRec.bottom;
 
       // Adjust for using the scrollable table container
       var parentElement = tableDOMElement.parentElement;
@@ -114,19 +112,15 @@ var TableHoverActionsContainer = /*#__PURE__*/memo(function (_ref) {
         setShownColumn(false);
         setShownRow(true);
         setPosition({
-          height: BUTTON_WIDTH_PX,
           left: tableHasScroll && parentElement ? parentElement.offsetLeft : tableElemLeft - editorElemLeft,
-          top: tableElemBottom - editorElemY + 5,
-          width: tableHasScroll && parentElement ? parentElement.offsetWidth : tableElemWidth
+          top: tableElemBottom - editorElemY + 5
         });
       } else if (hoveredColumnNode) {
         setShownColumn(true);
         setShownRow(false);
         setPosition({
-          height: tableElemHeight,
           left: tableElemRight - editorElemLeft + 5,
-          top: tableElemY - editorElemY,
-          width: BUTTON_WIDTH_PX
+          top: tableElemY - editorElemY
         });
       }
     }
@@ -260,7 +254,9 @@ export default /*#__PURE__*/memo(function (_ref2) {
   if (typeof document === 'undefined') {
     return null;
   }
-  var targetElement = anchorElem || document.body;
+  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

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

@@ -5,7 +5,7 @@ export var BUTTON_WIDTH_PX = 20;
 export var useStyles = createStyles(function (_ref) {
   var css = _ref.css;
   return {
-    tableAddColumns: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: absolute;\n      height: 100%;\n    "]))),
-    tableAddRows: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      position: absolute;\n      width: calc(100% - 25px);\n    "])))
+    tableAddColumns: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: absolute;\n    "]))),
+    tableAddRows: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      position: absolute;\n    "])))
   };
 });

package/es/react/ChatInput/ChatInput.js

@@ -1,50 +1,152 @@
 'use client';
 
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["maxHeight", "className", "children", "footer", "header", "style", "slashMenuRef", "classNames", "fullscreen", "styles"];
+var _excluded = ["defaultHeight", "height", "maxHeight", "minHeight", "resizeMaxHeightOffset", "resize", "onSizeChange", "onSizeDragging", "className", "children", "footer", "header", "style", "slashMenuRef", "classNames", "fullscreen", "showResizeHandle", "styles"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import { memo } from 'react';
+import { Resizable } from 're-resizable';
+import { memo, useCallback } from 'react';
 import { Flexbox } from 'react-layout-kit';
+import useMergeState from 'use-merge-value';
+import { useHeight } from "../hooks/useSize";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var ChatInput = /*#__PURE__*/memo(function (_ref) {
-  var _ref$maxHeight = _ref.maxHeight,
-    maxHeight = _ref$maxHeight === void 0 ? 'min(50vh, 640px)' : _ref$maxHeight,
-    className = _ref.className,
-    children = _ref.children,
-    footer = _ref.footer,
-    header = _ref.header,
-    style = _ref.style,
-    slashMenuRef = _ref.slashMenuRef,
-    classNames = _ref.classNames,
-    fullscreen = _ref.fullscreen,
-    customStyles = _ref.styles,
-    rest = _objectWithoutProperties(_ref, _excluded);
+var ChatInput = /*#__PURE__*/memo(function (props) {
+  var _props$defaultHeight = props.defaultHeight,
+    defaultHeight = _props$defaultHeight === void 0 ? props.defaultHeight || props.minHeight || 64 : _props$defaultHeight,
+    height = props.height,
+    _props$maxHeight = props.maxHeight,
+    maxHeight = _props$maxHeight === void 0 ? 320 : _props$maxHeight,
+    _props$minHeight = props.minHeight,
+    minHeight = _props$minHeight === void 0 ? 64 : _props$minHeight,
+    _props$resizeMaxHeigh = props.resizeMaxHeightOffset,
+    resizeMaxHeightOffset = _props$resizeMaxHeigh === void 0 ? 120 : _props$resizeMaxHeigh,
+    _props$resize = props.resize,
+    resize = _props$resize === void 0 ? true : _props$resize,
+    onSizeChange = props.onSizeChange,
+    onSizeDragging = props.onSizeDragging,
+    className = props.className,
+    children = props.children,
+    footer = props.footer,
+    header = props.header,
+    style = props.style,
+    slashMenuRef = props.slashMenuRef,
+    classNames = props.classNames,
+    fullscreen = props.fullscreen,
+    showResizeHandle = props.showResizeHandle,
+    customStyles = props.styles,
+    rest = _objectWithoutProperties(props, _excluded);
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
+  var _useHeight = useHeight(),
+    headerRef = _useHeight.ref,
+    _useHeight$height = _useHeight.height,
+    headerHeight = _useHeight$height === void 0 ? 0 : _useHeight$height;
+
+  // 使用 useMergeState 管理高度状态
+  var _useMergeState = useMergeState(defaultHeight, {
+      defaultValue: defaultHeight,
+      onChange: onSizeChange,
+      value: height
+    }),
+    _useMergeState2 = _slicedToArray(_useMergeState, 2),
+    currentHeight = _useMergeState2[0],
+    setCurrentHeight = _useMergeState2[1];
+
+  // 处理尺寸变化
+  var handleResizeStop = useCallback(function (e, direction, ref) {
+    var newHeight = ref.style.height ? parseInt(ref.style.height) : defaultHeight;
+    setCurrentHeight(newHeight);
+  }, [setCurrentHeight, defaultHeight]);
+
+  // 处理拖拽过程中的尺寸变化
+  var handleResize = useCallback(function (e, direction, ref) {
+    var newHeight = ref.style.height ? parseInt(ref.style.height) : defaultHeight;
+    onSizeDragging === null || onSizeDragging === void 0 || onSizeDragging(newHeight);
+  }, [onSizeDragging, defaultHeight]);
+  var bodyNode = /*#__PURE__*/_jsx("div", {
+    className: cx(styles.editor, classNames === null || classNames === void 0 ? void 0 : classNames.body),
+    style: _objectSpread(_objectSpread({}, customStyles === null || customStyles === void 0 ? void 0 : customStyles.body), {}, {
+      flex: 1,
+      maxHeight: fullscreen ? '100%' : maxHeight,
+      minHeight: resize ? currentHeight : minHeight,
+      zIndex: 0
+    }),
+    children: children
+  });
   return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
     className: cx(styles.container, className),
     height: fullscreen ? '100%' : undefined,
     style: _objectSpread({
-      maxHeight: fullscreen ? undefined : maxHeight
+      position: 'relative'
     }, style),
-    width: '100%'
+    width: "100%"
   }, rest), {}, {
     children: [slashMenuRef && /*#__PURE__*/_jsx("div", {
       ref: slashMenuRef
-    }), header, /*#__PURE__*/_jsx("div", {
-      className: cx(styles.editor, classNames === null || classNames === void 0 ? void 0 : classNames.body),
-      style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.body,
-      children: children
-    }), footer]
+    }), /*#__PURE__*/_jsx("div", {
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.header,
+      ref: headerRef,
+      style: _objectSpread({
+        width: '100%',
+        zIndex: 1
+      }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.header),
+      children: header
+    }), resize ? /*#__PURE__*/_jsx(Resizable, {
+      className: styles.resizableContainer,
+      enable: fullscreen ? false : {
+        top: true
+      },
+      handleClasses: {
+        top: showResizeHandle ? styles.resizeHandle : undefined
+      },
+      handleStyles: {
+        top: {
+          backgroundColor: 'transparent',
+          borderRadius: '4px',
+          cursor: 'ns-resize',
+          height: '8px',
+          left: '50%',
+          top: !!header ? -3 - headerHeight : -3,
+          transform: 'translateX(-50%)',
+          width: '100%'
+        }
+      },
+      maxHeight: fullscreen ? undefined : maxHeight + resizeMaxHeightOffset,
+      minHeight: fullscreen ? undefined : minHeight,
+      onResize: handleResize,
+      onResizeStop: handleResizeStop,
+      size: {
+        height: fullscreen ? undefined : 'auto',
+        width: '100%'
+      },
+      style: fullscreen ? {
+        flex: 1,
+        overflow: 'hidden',
+        position: 'relative'
+      } : {},
+      children: bodyNode
+    }) : bodyNode, /*#__PURE__*/_jsx("div", {
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.footer,
+      style: _objectSpread({
+        width: '100%',
+        zIndex: 1
+      }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.footer),
+      children: footer
+    })]
   }));
 });
 ChatInput.displayName = 'ChatInput';

package/es/react/ChatInput/style.d.ts

@@ -1,4 +1,6 @@
 export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
     container: import("antd-style").SerializedStyles;
     editor: import("antd-style").SerializedStyles;
+    resizableContainer: import("antd-style").SerializedStyles;
+    resizeHandle: import("antd-style").SerializedStyles;
 }>;

package/es/react/ChatInput/style.js

@@ -1,11 +1,13 @@
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 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 {
-    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n\n    border: 1px solid ", ";\n    border-radius: ", "px;\n\n    background-color: ", ";\n    box-shadow:\n      ", ",\n      0 32px 0 ", ";\n  "])), token.colorBorderSecondary, token.borderRadiusLG, token.colorBgContainer, token.boxShadowTertiary, token.colorBgContainerSecondary),
-    editor: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    overflow: hidden auto;\n    flex: 1;\n\n    width: 100%;\n    padding-block: 8px 0;\n    padding-inline: 12px;\n  "])))
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n\n    height: 100%;\n    border: 1px solid ", ";\n    border-radius: ", "px;\n\n    background-color: ", ";\n    box-shadow:\n      ", ",\n      0 32px 0 ", ";\n  "])), token.colorBorderSecondary, token.borderRadiusLG, token.colorBgContainer, token.boxShadowTertiary, token.colorBgContainerSecondary),
+    editor: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    overflow: hidden auto;\n    flex: 1;\n\n    width: 100%;\n    padding-block: 8px 0;\n    padding-inline: 12px;\n  "]))),
+    resizableContainer: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n    align-self: flex-end;\n\n    width: 100%;\n\n    &:hover .resize-handle {\n      opacity: 1;\n    }\n  "]))),
+    resizeHandle: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    position: absolute;\n    inset-block-start: -4px;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n\n    width: 100%;\n    height: 8px;\n\n    opacity: 0;\n\n    transition: opacity 0.2s ease-in-out;\n\n    &::before {\n      content: '';\n\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 50%;\n      transform: translateX(-50%);\n\n      width: 32px;\n      height: 4px;\n      border-radius: 4px;\n\n      background-color: ", ";\n      box-shadow: 0 1px 2px ", "20;\n    }\n\n    &:hover {\n      opacity: 1 !important;\n\n      &::before {\n        background-color: ", ";\n        box-shadow: 0 2px 4px ", "40;\n      }\n    }\n\n    &:active {\n      &::before {\n        background-color: ", ";\n      }\n    }\n  "])), token.colorPrimary, token.colorTextSecondary, token.colorPrimaryHover, token.colorTextSecondary, token.colorPrimaryActive)
   };
 });

package/es/react/ChatInput/type.d.ts

@@ -1,15 +1,27 @@
 import type { CSSProperties, ReactNode, Ref } from 'react';
 import { FlexboxProps } from 'react-layout-kit';
-export interface ChatInputProps extends FlexboxProps {
+export interface ChatInputProps extends Omit<FlexboxProps, 'height'> {
     classNames?: {
         body?: string;
+        footer?: string;
+        header?: string;
     };
+    defaultHeight?: number;
     footer?: ReactNode;
     fullscreen?: boolean;
     header?: ReactNode;
-    maxHeight?: string | number;
+    height?: number;
+    maxHeight?: number;
+    minHeight?: number;
+    onSizeChange?: (height: number) => void;
+    onSizeDragging?: (height: number) => void;
+    resize?: boolean;
+    resizeMaxHeightOffset?: number;
+    showResizeHandle?: boolean;
     slashMenuRef?: Ref<HTMLDivElement>;
     styles?: {
         body?: CSSProperties;
+        footer?: CSSProperties;
+        header?: CSSProperties;
     };
 }

package/es/react/ChatInputActions/components/useDisplayActionCount.d.ts

@@ -8,6 +8,6 @@ interface UseDisplayActionCountOptions {
 export declare const useDisplayActionCount: ({ items, collapseOffset, autoCollapse, }?: UseDisplayActionCountOptions) => {
     collapsed: boolean;
     maxCount: number;
-    ref: import("react").RefObject<HTMLElement | null>;
+    ref: import("react").RefObject<HTMLDivElement | null>;
 };
 export {};

package/es/react/ChatInputActions/components/useDisplayActionCount.js

@@ -5,7 +5,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 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 { useEffect, useMemo, useState } from 'react';
-import { useContainerSize } from "./useContainerSize";
+import { useWidth } from "../../hooks/useSize";
 export var useDisplayActionCount = function useDisplayActionCount() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
     _ref$items = _ref.items,
@@ -13,9 +13,9 @@ export var useDisplayActionCount = function useDisplayActionCount() {
     _ref$collapseOffset = _ref.collapseOffset,
     collapseOffset = _ref$collapseOffset === void 0 ? 0 : _ref$collapseOffset,
     autoCollapse = _ref.autoCollapse;
-  var _useContainerSize = useContainerSize(),
-    ref = _useContainerSize.ref,
-    size = _useContainerSize.size;
+  var _useWidth = useWidth(),
+    ref = _useWidth.ref,
+    width = _useWidth.width;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     collapsed = _useState2[0],
@@ -48,14 +48,14 @@ export var useDisplayActionCount = function useDisplayActionCount() {
       setMaxCount(rawMaxCount);
       return;
     }
-    if (!size) return;
+    if (!width) return;
     var atLeastCount = 1 + alwaysDisplayCount;
-    var calcMaxCount = Math.floor((size - collapseOffset) / 38);
+    var calcMaxCount = Math.floor((width - collapseOffset) / 38);
     if (calcMaxCount < atLeastCount) calcMaxCount = atLeastCount;
     setCollapsed(calcMaxCount < rawMaxCount);
     if (calcMaxCount >= rawMaxCount) return;
     setMaxCount(calcMaxCount);
-  }, [autoCollapse, size, rawMaxCount, collapseOffset, alwaysDisplayCount]);
+  }, [autoCollapse, width, rawMaxCount, collapseOffset, alwaysDisplayCount]);
   return useMemo(function () {
     return {
       collapsed: collapsed,

package/es/react/Editor/Editor.js

@@ -71,10 +71,10 @@ var Editor = /*#__PURE__*/memo(function (_ref) {
     if (!enableSlash && !enableMention) return null;
     return /*#__PURE__*/_jsxs(ReactSlashPlugin, {
       children: [enableSlash ? /*#__PURE__*/_jsx(ReactSlashOption, _objectSpread({
-        maxLength: 1,
+        maxLength: 8,
         trigger: "/"
       }, slashOption)) : undefined, enableMention ? /*#__PURE__*/_jsx(ReactSlashOption, _objectSpread({
-        maxLength: 6,
+        maxLength: 8,
         trigger: "@"
       }, restMentionOption)) : undefined]
     });

package/es/react/hooks/useSize.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+interface UseContainerSizeOptions {
+    debounceMs?: number;
+}
+export declare const useWidth: (options?: UseContainerSizeOptions) => {
+    ref: import("react").RefObject<HTMLDivElement | null>;
+    width: number | undefined;
+};
+export declare const useHeight: (options?: UseContainerSizeOptions) => {
+    height: number | undefined;
+    ref: import("react").RefObject<HTMLDivElement | null>;
+};
+export {};

package/es/react/{ChatInputActions/components/useContainerSize.js → hooks/useSize.js}

@@ -7,7 +7,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 // hooks/useContainerSize.ts
 import { debounce } from 'lodash-es';
 import { useCallback, useEffect, useRef, useState } from 'react';
-export var useContainerSize = function useContainerSize() {
+export var useWidth = function useWidth() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var _options$debounceMs = options.debounceMs,
     debounceMs = _options$debounceMs === void 0 ? 100 : _options$debounceMs;
@@ -32,12 +32,46 @@ export var useContainerSize = function useContainerSize() {
       if (resizeObserverRef.current) {
         var _updateSize$cancel;
         resizeObserverRef.current.disconnect();
-        (_updateSize$cancel = updateSize.cancel) === null || _updateSize$cancel === void 0 || _updateSize$cancel.call(updateSize); // 清理防抖
+        (_updateSize$cancel = updateSize.cancel) === null || _updateSize$cancel === void 0 || _updateSize$cancel.call(updateSize);
       }
     };
   }, [updateSize]);
   return {
     ref: ref,
-    size: size
+    width: size
+  };
+};
+export var useHeight = function useHeight() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _options$debounceMs2 = options.debounceMs,
+    debounceMs = _options$debounceMs2 === void 0 ? 100 : _options$debounceMs2;
+  var ref = useRef(null);
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    size = _useState4[0],
+    setSize = _useState4[1];
+  var resizeObserverRef = useRef(null);
+  var updateSize = useCallback(debounce(function (entries) {
+    if (entries[0]) {
+      var height = entries[0].contentRect.height;
+      setSize(Math.floor(height));
+    }
+  }, debounceMs), [debounceMs]);
+  useEffect(function () {
+    var element = ref.current;
+    if (!element) return;
+    resizeObserverRef.current = new ResizeObserver(updateSize);
+    resizeObserverRef.current.observe(element);
+    return function () {
+      if (resizeObserverRef.current) {
+        var _updateSize$cancel2;
+        resizeObserverRef.current.disconnect();
+        (_updateSize$cancel2 = updateSize.cancel) === null || _updateSize$cancel2 === void 0 || _updateSize$cancel2.call(updateSize);
+      }
+    };
+  }, [updateSize]);
+  return {
+    height: size,
+    ref: ref
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/editor",
-  "version": "1.7.1",
+  "version": "1.8.1",
   "description": "A powerful and extensible rich text editor built on Meta's Lexical framework, providing a modern editing experience with React integration.",
   "keywords": [
     "lobehub",
@@ -52,6 +52,7 @@
     "lodash-es": "^4.17.21",
     "lucide-react": "^0.536.0",
     "polished": "^4.3.1",
+    "re-resizable": "^6.11.2",
     "react-error-boundary": "^6.0.0",
     "react-layout-kit": "^2.0.0",
     "react-merge-refs": "^3.0.2",

package/es/react/ChatInputActions/components/useContainerSize.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-interface UseContainerSizeOptions {
-    debounceMs?: number;
-}
-export declare const useContainerSize: (options?: UseContainerSizeOptions) => {
-    ref: import("react").RefObject<HTMLElement | null>;
-    size: number | undefined;
-};
-export {};