@lobehub/editor 1.0.2 → 1.0.4

package/es/plugins/common/plugin/register.js

@@ -1,7 +1,7 @@
 import { $isCodeHighlightNode, $isCodeNode } from '@lexical/code';
 import { $isHeadingNode } from '@lexical/rich-text';
 import { mergeRegister } from '@lexical/utils';
-import { $createNodeSelection, $createParagraphNode, $getRoot, $getSelection, $isDecoratorNode, $isElementNode, $isLineBreakNode, $isNodeSelection, $isRangeSelection, $isRootOrShadowRoot, $isTextNode, $setSelection, COMMAND_PRIORITY_CRITICAL, COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_NORMAL, FORMAT_TEXT_COMMAND, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DOWN_COMMAND, isModifierMatch } from 'lexical';
+import { $createNodeSelection, $createParagraphNode, $getRoot, $getSelection, $isDecoratorNode, $isElementNode, $isLineBreakNode, $isNodeSelection, $isRangeSelection, $isRootOrShadowRoot, $isTextNode, $setSelection, COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_NORMAL, FORMAT_TEXT_COMMAND, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DOWN_COMMAND, isModifierMatch } from 'lexical';
 import { CONTROL_OR_META, CONTROL_OR_META_AND_SHIFT } from "../../../common/sys";
 function resolveElement(element, isBackward, focusOffset) {
   var parent = element.getParent();
@@ -156,7 +156,7 @@ export function registerRichKeydown(editor) {
       }
     }
     return false;
-  }, COMMAND_PRIORITY_NORMAL), editor.registerCommand(KEY_ARROW_DOWN_COMMAND, function (event) {
+  }, COMMAND_PRIORITY_EDITOR), editor.registerCommand(KEY_ARROW_DOWN_COMMAND, function (event) {
     var selection = $getSelection();
     if ($isNodeSelection(selection)) {
       // If selection is on a node, let's try and move selection
@@ -199,7 +199,7 @@ export function registerRichKeydown(editor) {
       }
     }
     return false;
-  }, COMMAND_PRIORITY_CRITICAL), editor.registerCommand(KEY_ARROW_RIGHT_COMMAND, function (event) {
+  }, COMMAND_PRIORITY_EDITOR), editor.registerCommand(KEY_ARROW_RIGHT_COMMAND, function (event) {
     var selection = $getSelection();
     if ($isRangeSelection(selection)) {
       var _focusNode$getChildAt;
@@ -226,5 +226,5 @@ export function registerRichKeydown(editor) {
       }
     }
     return false;
-  }, COMMAND_PRIORITY_CRITICAL));
+  }, COMMAND_PRIORITY_EDITOR));
 }

package/es/plugins/common/react/ReactPlainText.js

@@ -15,7 +15,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 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 { Children, memo, useEffect, useLayoutEffect, useRef } from 'react';
+import { Children, memo, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { LexicalErrorBoundary } from "../../../editor-kernel/react/LexicalErrorBoundary";
 import { useLexicalComposerContext } from "../../../editor-kernel/react/react-context";
 import { useDecorators } from "../../../editor-kernel/react/useDecorators";
@@ -58,6 +58,10 @@ var ReactPlainText = /*#__PURE__*/memo(function (_ref) {
     }),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isInitialized = _useState2[0],
+    setIsInitialized = _useState2[1];
   var _Children$only = Children.only(children),
     _Children$only$props = _Children$only.props,
     type = _Children$only$props.type,
@@ -72,15 +76,18 @@ var ReactPlainText = /*#__PURE__*/memo(function (_ref) {
   useEffect(function () {
     var _editor$getLexicalEdi;
     var container = editorContainerRef.current;
-    if (container) {
+    if (container && !isInitialized) {
       // Initialize the editor
       editor.setRootElement(container);
+
+      // Set initial document content only once
+      editor.setDocument(type, content);
+      setIsInitialized(true);
     }
-    editor.setDocument(type, content);
     return (_editor$getLexicalEdi = editor.getLexicalEditor()) === null || _editor$getLexicalEdi === void 0 ? void 0 : _editor$getLexicalEdi.registerUpdateListener(function () {
       onChange === null || onChange === void 0 || onChange(editor);
     });
-  }, [editor, type, content, onChange]);
+  }, [editor, type, content, onChange, isInitialized]);
   return /*#__PURE__*/_jsxs("div", {
     className: cx(styles.root, styles.variant, className),
     style: style,

package/es/plugins/slash/react/ReactSlashPlugin.js

@@ -7,7 +7,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 { mergeRegister } from '@lexical/utils';
-import { COMMAND_PRIORITY_NORMAL, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND, KEY_TAB_COMMAND } from 'lexical';
+import { COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_NORMAL, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND, KEY_TAB_COMMAND } from 'lexical';
 import { Children, useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { useLexicalEditor } from "../../../editor-kernel/react";
 import { useLexicalComposerContext } from "../../../editor-kernel/react/react-context";
@@ -156,7 +156,7 @@ var ReactSlashPlugin = function ReactSlashPlugin(_ref) {
         event.stopImmediatePropagation();
       }
       return true;
-    }, COMMAND_PRIORITY_NORMAL), editor.registerCommand(KEY_ARROW_UP_COMMAND, function (payload) {
+    }, COMMAND_PRIORITY_HIGH), editor.registerCommand(KEY_ARROW_UP_COMMAND, function (payload) {
       var event = payload;
       if (pureOptions !== null && pureOptions.length) {
         var currentIndex = activeKey ? pureOptions.findIndex(function (opt) {
@@ -168,7 +168,7 @@ var ReactSlashPlugin = function ReactSlashPlugin(_ref) {
         event.stopImmediatePropagation();
       }
       return true;
-    }, COMMAND_PRIORITY_NORMAL), editor.registerCommand(KEY_ESCAPE_COMMAND, function (payload) {
+    }, COMMAND_PRIORITY_HIGH), editor.registerCommand(KEY_ESCAPE_COMMAND, function (payload) {
       var event = payload;
       event.preventDefault();
       event.stopImmediatePropagation();

package/es/react/ChatInput/ChatInput.js

@@ -1,11 +1,14 @@
 '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"];
 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 _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 { Flexbox } from 'react-layout-kit';
 import { useStyles } from "./style";
@@ -19,23 +22,30 @@ var ChatInput = /*#__PURE__*/memo(function (_ref) {
     footer = _ref.footer,
     header = _ref.header,
     style = _ref.style,
-    slashMenuRef = _ref.slashMenuRef;
+    slashMenuRef = _ref.slashMenuRef,
+    classNames = _ref.classNames,
+    fullscreen = _ref.fullscreen,
+    customStyles = _ref.styles,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
-  return /*#__PURE__*/_jsxs(Flexbox, {
+  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
     className: cx(styles.container, className),
+    height: fullscreen ? '100%' : undefined,
     style: _objectSpread({
-      maxHeight: maxHeight
+      maxHeight: fullscreen ? undefined : maxHeight
     }, style),
-    width: '100%',
+    width: '100%'
+  }, rest), {}, {
     children: [slashMenuRef && /*#__PURE__*/_jsx("div", {
       ref: slashMenuRef
     }), header, /*#__PURE__*/_jsx("div", {
-      className: styles.editor,
+      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]
-  });
+  }));
 });
 ChatInput.displayName = 'ChatInput';
 export default ChatInput;

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

@@ -1,10 +1,15 @@
 import type { CSSProperties, ReactNode, Ref } from 'react';
-export interface ChatInputProps {
-    children?: ReactNode;
-    className?: string;
+import { FlexboxProps } from 'react-layout-kit';
+export interface ChatInputProps extends FlexboxProps {
+    classNames?: {
+        body?: string;
+    };
     footer?: ReactNode;
+    fullscreen?: boolean;
     header?: ReactNode;
     maxHeight?: string | number;
     slashMenuRef?: Ref<HTMLDivElement>;
-    style?: CSSProperties;
+    styles?: {
+        body?: CSSProperties;
+    };
 }

package/es/react/ChatInputActionBar/ChatInputActionBar.js

@@ -1,5 +1,14 @@
 '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 = ["className", "style", "left", "right"];
+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 _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 { Flexbox } from 'react-layout-kit';
 import { useStyles } from "./style";
@@ -8,20 +17,22 @@ var ChatInputActionBar = /*#__PURE__*/memo(function (_ref) {
   var className = _ref.className,
     style = _ref.style,
     left = _ref.left,
-    right = _ref.right;
+    right = _ref.right,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
-  return /*#__PURE__*/_jsxs(Flexbox, {
+  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
     align: 'center',
     className: cx(styles.container, className),
     gap: 4,
     horizontal: true,
     justify: 'space-between',
     padding: 4,
-    style: style,
+    style: style
+  }, rest), {}, {
     children: [left, right]
-  });
+  }));
 });
 ChatInputActionBar.displayName = 'ChatInputActionBar';
 export default ChatInputActionBar;

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

@@ -1,7 +1,6 @@
-import type { CSSProperties, ReactNode } from 'react';
-export interface ChatInputActionBarProps {
-    className?: string;
+import type { ReactNode } from 'react';
+import { FlexboxProps } from 'react-layout-kit';
+export interface ChatInputActionBarProps extends Omit<FlexboxProps, 'children'> {
     left?: ReactNode;
     right?: ReactNode;
-    style?: CSSProperties;
 }

package/es/react/Editor/Editor.js

@@ -9,7 +9,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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 _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 { createElement, memo } from 'react';
+import { createElement, memo, useMemo } from 'react';
 import { ReactEditor } from "../../editor-kernel/react/react-editor";
 import { ReactEditorContent, ReactPlainText } from "../../plugins/common";
 import { ReactMentionPlugin } from "../../plugins/mention";
@@ -32,28 +32,17 @@ var Editor = /*#__PURE__*/memo(function (_ref) {
     mentionOption = _ref$mentionOption === void 0 ? {} : _ref$mentionOption,
     variant = _ref.variant,
     theme = _ref.theme,
-    children = _ref.children;
+    children = _ref.children,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'json' : _ref$type;
   var _useEditorContent = useEditorContent(),
     config = _useEditorContent.config;
   var enableSlash = Boolean((slashOption === null || slashOption === void 0 ? void 0 : slashOption.items) && slashOption.items.length > 0);
   var enableMention = Boolean((mentionOption === null || mentionOption === void 0 ? void 0 : mentionOption.items) && mentionOption.items.length > 0);
   var markdownWriter = mentionOption.markdownWriter,
     restMentionOption = _objectWithoutProperties(mentionOption, _excluded);
-  return /*#__PURE__*/_jsxs(ReactEditor, {
-    config: config,
-    editorRef: editorRef,
-    children: [/*#__PURE__*/_jsx(ReactPlainText, {
-      className: className,
-      onChange: onChange,
-      style: style,
-      theme: theme,
-      variant: variant,
-      children: /*#__PURE__*/_jsx(ReactEditorContent, {
-        content: content,
-        placeholder: placeholder,
-        type: "json"
-      })
-    }), plugins.map(function (plugin, index) {
+  var memoPlugins = useMemo(function () {
+    return plugins.map(function (plugin, index) {
       var withNoProps = typeof plugin === 'function';
       if (withNoProps) return /*#__PURE__*/createElement(plugin, {
         key: index
@@ -61,9 +50,17 @@ var Editor = /*#__PURE__*/memo(function (_ref) {
       return /*#__PURE__*/createElement(plugin[0], _objectSpread({
         key: index
       }, plugin[1]));
-    }), enableMention && /*#__PURE__*/_jsx(ReactMentionPlugin, {
+    });
+  }, [plugins]);
+  var memoMention = useMemo(function () {
+    if (!enableMention) return;
+    return /*#__PURE__*/_jsx(ReactMentionPlugin, {
       markdownWriter: markdownWriter
-    }), (enableSlash || enableMention) && /*#__PURE__*/_jsxs(ReactSlashPlugin, {
+    });
+  }, [enableMention, markdownWriter]);
+  var memoSlash = useMemo(function () {
+    if (!enableSlash && !enableMention) return null;
+    return /*#__PURE__*/_jsxs(ReactSlashPlugin, {
       children: [enableSlash ? /*#__PURE__*/_jsx(ReactSlashOption, _objectSpread({
         maxLength: 1,
         trigger: "/"
@@ -71,6 +68,22 @@ var Editor = /*#__PURE__*/memo(function (_ref) {
         maxLength: 6,
         trigger: "@"
       }, restMentionOption)) : undefined]
+    });
+  }, [enableSlash, enableMention, slashOption, restMentionOption]);
+  return /*#__PURE__*/_jsxs(ReactEditor, {
+    config: config,
+    editorRef: editorRef,
+    children: [memoPlugins, memoSlash, memoMention, /*#__PURE__*/_jsx(ReactPlainText, {
+      className: className,
+      onChange: onChange,
+      style: style,
+      theme: theme,
+      variant: variant,
+      children: /*#__PURE__*/_jsx(ReactEditorContent, {
+        content: content,
+        placeholder: placeholder,
+        type: type
+      })
     }), children]
   });
 });

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

@@ -7,14 +7,12 @@ export type EditorPlugin = FC<any> | [FC<any>, Record<string, any>];
 interface MentionOption extends Partial<ReactSlashOptionProps> {
     markdownWriter?: ReactMentionPluginProps['markdownWriter'];
 }
-export interface EditorProps {
+export interface EditorProps extends Partial<ReactEditorContentProps> {
     children?: ReactNode;
     className?: string;
-    content?: ReactEditorContentProps['content'];
     editorRef?: Ref<IEditor>;
     mentionOption?: MentionOption;
     onChange?: (editor: IEditor) => void;
-    placeholder?: ReactNode;
     plugins?: EditorPlugin[];
     slashOption?: Partial<ReactSlashOptionProps>;
     style?: CSSProperties;

package/es/react/SendButton/SendButton.js

@@ -1,7 +1,7 @@
 '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 = ["type", "menu", "className", "style", "loading", "generating", "size", "shape"];
+var _excluded = ["type", "menu", "className", "style", "loading", "generating", "size", "shape", "onSend", "onStop", "onClick"];
 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; }
@@ -28,12 +28,21 @@ var SendButton = /*#__PURE__*/memo(function (_ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 32 : _ref$size,
     shape = _ref.shape,
+    onSend = _ref.onSend,
+    onStop = _ref.onStop,
+    _onClick = _ref.onClick,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles(size),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
   if (generating) return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
     className: cx(styles.loadingButton, className),
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      if (onStop) onStop(e);
+      if (_onClick) _onClick(e);
+    },
     shape: shape,
     style: _objectSpread(_objectSpread({}, style), {}, {
       width: menu ? size * 2 : size
@@ -56,6 +65,12 @@ var SendButton = /*#__PURE__*/memo(function (_ref) {
   if (!menu) return /*#__PURE__*/_jsx(Button, _objectSpread({
     className: cx(styles.button, className),
     icon: /*#__PURE__*/_jsx(SendIcon, {}),
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      if (onSend) onSend(e);
+      if (_onClick) _onClick(e);
+    },
     shape: shape,
     style: style,
     type: type
@@ -66,6 +81,12 @@ var SendButton = /*#__PURE__*/memo(function (_ref) {
       icon: ChevronDownIcon
     }),
     menu: menu,
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      if (onSend) onSend(e);
+      if (_onClick) _onClick(e);
+    },
     placement: 'topRight',
     style: style,
     type: type

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

@@ -1,6 +1,8 @@
 import type { DropdownButtonProps } from 'antd/lib/dropdown';
 export interface SendButtonProps extends Omit<DropdownButtonProps, 'children' | 'icon' | 'size'> {
     generating?: boolean;
+    onSend?: DropdownButtonProps['onClick'];
+    onStop?: DropdownButtonProps['onClick'];
     shape?: 'default' | 'round';
     size?: number;
 }

package/es/react/SlashMenu/SlashMenu.js

@@ -22,7 +22,10 @@ var SlashMenu = /*#__PURE__*/memo(function (_ref) {
     loading = _ref.loading,
     _ref$maxHeight = _ref.maxHeight,
     maxHeight = _ref$maxHeight === void 0 ? 'min(50vh, 640px)' : _ref$maxHeight,
-    onSelect = _ref.onSelect;
+    onSelect = _ref.onSelect,
+    customStyles = _ref.styles,
+    classNames = _ref.classNames,
+    menuProps = _ref.menuProps;
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
@@ -38,19 +41,21 @@ var SlashMenu = /*#__PURE__*/memo(function (_ref) {
   if (!parent) return;
   if (!open) return;
   var node = /*#__PURE__*/_jsx(Flexbox, {
-    className: styles.root,
+    className: cx(styles.root, classNames === null || classNames === void 0 ? void 0 : classNames.root),
     paddingInline: 8,
+    style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.root,
     width: '100%',
     children: /*#__PURE__*/_jsx(Block, {
-      className: cx(styles.container, className),
+      className: cx(styles.container, className, classNames === null || classNames === void 0 ? void 0 : classNames.container),
       gap: 4,
       horizontal: true,
       shadow: true,
-      style: _objectSpread({
+      style: _objectSpread(_objectSpread({
         maxHeight: maxHeight
-      }, style),
+      }, style), customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
       variant: 'outlined',
-      children: /*#__PURE__*/_jsx(Menu, {
+      children: /*#__PURE__*/_jsx(Menu, _objectSpread({
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.menu,
         items: loading ? [{
           disabled: true,
           key: 'loading',
@@ -58,8 +63,9 @@ var SlashMenu = /*#__PURE__*/memo(function (_ref) {
         }] : options,
         mode: 'inline',
         onClick: handleMenuClick,
-        selectedKeys: activeKey ? [activeKey] : undefined
-      })
+        selectedKeys: activeKey ? [activeKey] : undefined,
+        style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.menu
+      }, menuProps))
     })
   });
   return /*#__PURE__*/createPortal(node, parent);

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

@@ -1,8 +1,21 @@
+import type { BlockProps, MenuProps } from '@lobehub/ui';
 import type { CSSProperties } from 'react';
-import { MenuRenderProps } from "../../plugins/slash";
+import type { MenuRenderProps } from "../../plugins/slash";
 export interface SlashMenuProps extends MenuRenderProps {
     className?: string;
+    classNames?: {
+        container?: string;
+        menu?: string;
+        root?: string;
+    };
+    containerProps?: Omit<BlockProps, 'children'>;
     getPopupContainer: () => HTMLDivElement | null;
     maxHeight?: string | number;
+    menuProps?: MenuProps;
     style?: CSSProperties;
+    styles?: {
+        container?: CSSProperties;
+        menu?: CSSProperties;
+        root?: CSSProperties;
+    };
 }

package/package.json

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