@yuntijs/ui 1.1.0-beta.1 → 1.1.0-beta.10

package/es/ChatItem/index.js

@@ -2,7 +2,7 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["avatarAddon", "onAvatarClick", "avatarProps", "actions", "className", "primary", "loading", "message", "placement", "type", "avatar", "error", "showTitle", "time", "editing", "onChange", "onEditingChange", "messageExtra", "affixation", "renderMessage", "text", "errorMessage", "onDoubleClick", "fontSize", "markdownProps", "markdownClassname", "isLatest"];
+var _excluded = ["avatarAddon", "onAvatarClick", "avatarProps", "actions", "className", "primary", "loading", "message", "placement", "type", "avatar", "error", "showTitle", "time", "editing", "onChange", "onEditingChange", "messageExtra", "affixation", "renderMessage", "text", "errorMessage", "onDoubleClick", "fontSize", "markdownProps", "markdownClassname", "isLatest", "hideAvatar"];
 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; }
 import Avatar from '@lobehub/ui/es/chat/ChatItem/components/Avatar';
@@ -48,6 +48,7 @@ export var ChatItem = /*#__PURE__*/memo(function (_ref) {
     markdownProps = _ref.markdownProps,
     markdownClassname = _ref.markdownClassname,
     isLatest = _ref.isLatest,
+    hideAvatar = _ref.hideAvatar,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useResponsive = useResponsive(),
     mobile = _useResponsive.mobile;
@@ -68,7 +69,7 @@ export var ChatItem = /*#__PURE__*/memo(function (_ref) {
     direction: placement === 'left' ? 'horizontal' : 'horizontal-reverse',
     gap: mobile ? 6 : 12
   }, rest), {}, {
-    children: [/*#__PURE__*/_jsx(Avatar, _objectSpread(_objectSpread({}, avatarProps), {}, {
+    children: [hideAvatar ? null : /*#__PURE__*/_jsx(Avatar, _objectSpread(_objectSpread({}, avatarProps), {}, {
       addon: avatarAddon,
       avatar: avatar,
       loading: loading,

package/es/ChatItem/style.js

@@ -16,11 +16,12 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     editing = _ref2.editing,
     time = _ref2.time,
     isLatest = _ref2.isLatest;
-  var blockStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding-block: 8px;\n      padding-inline: 12px;\n\n      background-color: ", ";\n      border-radius: ", "px;\n\n      transition: background-color 100ms ", ";\n    "])), primary ? isDarkMode ? token.colorFill : token.colorBgElevated : isDarkMode ? token.colorFillSecondary : token.colorBgContainer, token.borderRadiusLG, token.motionEaseOut);
+  var blockStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      /* padding-block: 8px;\n      padding-inline: 12px; */\n\n      background-color: ", ";\n      border-radius: ", "px;\n      transition: background-color 100ms ", ";\n    "])), primary ? isDarkMode ? token.colorFill : token.colorBgElevated : isDarkMode ? token.colorFillSecondary : token.colorBgContainer, token.borderRadiusLG, token.motionEaseOut);
   var pureStylish = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      padding-block-start: ", ";\n    "])), title ? 0 : '6px');
   var pureContainerStylish = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      margin-block-end: -16px;\n      transition: background-color 100ms ", ";\n    "])), token.motionEaseOut);
   var typeStylish = type === 'block' ? blockStylish : pureStylish;
   var editingStylish = editing && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        width: 100%;\n      "])));
+  var insetInline = placement === 'right' ? '-4px unset' : 'unset -4px';
   return {
     actions: cx(css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          flex: none;\n          align-self: ", ";\n          justify-content: ", ";\n        "])), placement === 'left' ? 'flex-start' : 'flex-end', placement === 'left' ? 'flex-end' : 'flex-start'), editing && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n            pointer-events: none !important;\n            opacity: 0 !important;\n          "])))),
     avatarContainer: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        position: relative;\n        flex: none;\n        width: ", "px;\n        height: ", "px;\n      "])), avatarSize, avatarSize),
@@ -29,7 +30,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     editingContainer: cx(editingStylish, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          padding-block: 8px 12px;\n          padding-inline: 12px;\n          border: 1px solid ", ";\n\n          &:active,\n          &:hover {\n            border-color: ", ";\n          }\n        "])), token.colorBorderSecondary, token.colorBorder), type === 'pure' && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n            background: ", ";\n            border-radius: ", "px;\n          "])), token.colorFillQuaternary, token.borderRadius)),
     editingInput: css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n        width: 100%;\n      "]))),
     errorContainer: css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n        position: relative;\n        overflow: hidden;\n        width: 100%;\n      "]))),
-    loading: css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n        position: absolute;\n        inset-block-end: 0;\n        inset-inline: ", "\n          ", ";\n\n        width: 16px;\n        height: 16px;\n\n        color: ", ";\n\n        background: ", ";\n        border-radius: 50%;\n      "])), placement === 'right' ? '-4px' : 'unset', placement === 'left' ? '-4px' : 'unset', token.colorBgLayout, token.colorPrimary),
+    loading: css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n        position: absolute;\n        inset-block-end: 0;\n        inset-inline: ", ";\n\n        width: 16px;\n        height: 16px;\n\n        color: ", ";\n\n        background: ", ";\n        border-radius: 50%;\n      "])), insetInline, token.colorBgLayout, token.colorPrimary),
     message: cx(typeStylish, css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n          position: relative;\n          overflow: hidden;\n          max-width: 100%;\n\n          ", " {\n            width: 100%;\n          }\n        "])), responsive.mobile)),
     messageContainer: cx(editingStylish, css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n          position: relative;\n          overflow: hidden;\n          max-width: 100%;\n          margin-block-start: ", "px;\n\n          ", " {\n            overflow-x: auto;\n          }\n        "])), time ? -16 : 0, responsive.mobile)),
     messageContent: cx(editingStylish, css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n          position: relative;\n          overflow: hidden;\n          max-width: 100%;\n\n          ", " {\n            flex-direction: column !important;\n          }\n        "])), responsive.mobile)),

package/es/ChatItem/type.d.ts

@@ -84,4 +84,8 @@ export interface ChatItemProps {
      * @description Whether this message is latest
      */
     isLatest?: boolean;
+    /**
+     * @description Hide avatar
+     */
+    hideAvatar?: boolean;
 }

package/es/Form/collapse-list/index.js

@@ -19,7 +19,7 @@ import { CollapseGroup } from "../../CollapseGroup";
 import { FormCollapseListFieldsWatcher } from "./FieldsWatcher";
 import { useFormCollapseListHooks } from "./hooks";
 import { useStyles } from "./style";
-import { FIELD_KEY_PATH, toRowKey } from "./utils";
+import { FIELD_KEY_PATH, TEXT_INPUT_COMPOENT_TYPES, toRowKey } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var Text = Typography.Text;
@@ -222,14 +222,21 @@ export var FormCollapseList = /*#__PURE__*/memo(function (_ref) {
                   chidrenProps.disabled = disabled;
                 }
                 if (readOnly === true) {
-                  return /*#__PURE__*/_jsx(Flex, {
-                    align: "center",
-                    className: cx(styles.readOnlyItem, className),
-                    children: text !== null && text !== void 0 ? text : /*#__PURE__*/_jsx(Text, {
-                      type: "secondary",
-                      children: "-"
-                    })
-                  });
+                  var _props, _type;
+                  chidrenProps.disabled = true;
+                  if (children !== null && children !== void 0 && (_props = children.props) !== null && _props !== void 0 && _props.showCount) {
+                    chidrenProps.showCount = undefined;
+                  }
+                  if (TEXT_INPUT_COMPOENT_TYPES.includes(children === null || children === void 0 || (_type = children.type) === null || _type === void 0 ? void 0 : _type.displayName)) {
+                    return /*#__PURE__*/_jsx(Flex, {
+                      align: "center",
+                      className: cx(styles.readOnlyItem, className),
+                      children: text !== null && text !== void 0 ? text : /*#__PURE__*/_jsx(Text, {
+                        type: "secondary",
+                        children: "-"
+                      })
+                    });
+                  }
                 }
                 return /*#__PURE__*/_jsx(Form.Item, _objectSpread(_objectSpread(_objectSpread({
                   className: className

package/es/Form/collapse-list/utils.d.ts

@@ -8,3 +8,4 @@ export type ListFieldValue<K extends string = 'children'> = {
 };
 export type FieldPath = NamePath<any>;
 export declare const toRowKey: (keyPath: number[]) => string;
+export declare const TEXT_INPUT_COMPOENT_TYPES: string[];

package/es/Form/collapse-list/utils.js

@@ -1,4 +1,5 @@
 export var FIELD_KEY_PATH = '__YUNTI_FORM_COLLAPSE_LIST_FIELD_KEY_PATH';
 export var toRowKey = function toRowKey(keyPath) {
   return keyPath.join('-');
-};
+};
+export var TEXT_INPUT_COMPOENT_TYPES = ['Input', 'InputNumber', 'AutoComplete', 'Mentions', 'Radio', 'RadioGroup', 'CheckBox', 'CheckBoxGroup', 'Rate', 'Slider', 'Switch'];

package/es/Mentions/index.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import { type MentionPickerPluginProps } from './plugins/mention-picker';
-import type { AutoSize } from './types';
+import { AutoSize, MentionsEditor } from './types';
+export * from './types';
+export * from './utils';
 export interface MentionsProps extends MentionPickerPluginProps {
     className?: string;
     classNames?: {
@@ -8,7 +10,7 @@ export interface MentionsProps extends MentionPickerPluginProps {
         menuOverlay?: string;
     };
     wrapperClassname?: string;
-    placeholder?: string;
+    placeholder?: React.ReactNode;
     style?: React.CSSProperties;
     value?: string;
     defaultValue?: string;
@@ -17,9 +19,15 @@ export interface MentionsProps extends MentionPickerPluginProps {
     onChange?: (text: string) => void;
     onBlur?: () => void;
     onFocus?: () => void;
+    /**
+     * 按下回车的回调，指定后会改变回车的默认行为，换行需要使用 shift + enter
+     */
+    onPressEnter?: (value: string, { event }: {
+        event: KeyboardEvent | null;
+    }) => void;
     variant?: 'outlined' | 'filled' | 'borderless';
     autoSize?: AutoSize;
     code?: boolean;
     getPopContainer?: () => HTMLElement;
 }
-export declare const Mentions: React.FC<MentionsProps>;
+export declare const Mentions: React.ForwardRefExoticComponent<MentionsProps & React.RefAttributes<MentionsEditor>>;

package/es/Mentions/index.js

@@ -9,21 +9,24 @@ import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
 import { ConfigProvider } from 'antd';
 // @Todo: 升级 0.25.0 后，ops-console 使用的时候出现了只输入 / 无法触发的问题
-
 import { $getRoot, TextNode } from 'lexical';
-import React, { useMemo } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import { isBrowser } from "../utils/tools";
-import { OnBlurBlockPlugin } from "./plugins/OnBlurBlockPlugin";
 import { CustomTextNode } from "./plugins/custom-text/node";
 import { EditablePlugin } from "./plugins/editable";
+import { EditorRefPlugin } from "./plugins/editor-ref";
 import { MentionNode, MentionNodePlugin, MentionNodePluginReplacement } from "./plugins/mention-node";
 import { MentionPickerPlugin } from "./plugins/mention-picker";
+import { OnBlurBlockPlugin } from "./plugins/on-blur-block";
+import { ShiftEnterKeyPlugin } from "./plugins/shift-enter-key";
 import { MentionsConfigProvider } from "./provider";
 import { useStyles } from "./style";
 import { textToEditorState } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var Mentions = function Mentions(_ref) {
+export * from "./types";
+export * from "./utils";
+export var Mentions = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     classNames = _ref.classNames,
     placeholder = _ref.placeholder,
@@ -49,7 +52,8 @@ export var Mentions = function Mentions(_ref) {
     onSelect = _ref.onSelect,
     _ref$code = _ref.code,
     code = _ref$code === void 0 ? false : _ref$code,
-    getPopContainer = _ref.getPopContainer;
+    getPopContainer = _ref.getPopContainer,
+    onPressEnter = _ref.onPressEnter;
   var _ConfigProvider$useCo = ConfigProvider.useConfig(),
     componentDisabled = _ConfigProvider$useCo.componentDisabled;
   var _useStyles = useStyles({
@@ -73,7 +77,7 @@ export var Mentions = function Mentions(_ref) {
           return new CustomTextNode(node.__text);
         }
       }, MentionNode],
-      editorState: textToEditorState(value || defaultValue || ''),
+      editorState: textToEditorState(value || defaultValue || '', triggers),
       onError: function onError(error) {
         throw error;
       }
@@ -113,22 +117,13 @@ export var Mentions = function Mentions(_ref) {
     if (!isBrowser) {
       return;
     }
+    if (getPopContainer) {
+      return getPopContainer();
+    }
     if (document.fullscreenElement) {
       return document.fullscreenElement;
     }
-  }, []);
-  if (!isBrowser) {
-    return /*#__PURE__*/_jsxs("div", {
-      className: cx(styles.wrapper, classNames === null || classNames === void 0 ? void 0 : classNames.wrapper),
-      children: [/*#__PURE__*/_jsx("div", {
-        className: cx(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.root, true), styles.filled, variant === 'filled'), styles.borderless, variant === 'borderless'), styles.disabled, disabled), className),
-        style: style || {}
-      }), /*#__PURE__*/_jsx("div", {
-        className: styles.placeholder,
-        children: placeholder || "\u8F93\u5165 ".concat(triggers.join(' 或 '), " \u63D2\u5165\u5F15\u7528")
-      })]
-    });
-  }
+  }, [getPopContainer]);
   return /*#__PURE__*/_jsx(LexicalComposer, {
     initialConfig: _objectSpread(_objectSpread({}, initialConfig), {}, {
       editable: editable
@@ -165,8 +160,12 @@ export var Mentions = function Mentions(_ref) {
           onFocus: onFocus
         }), /*#__PURE__*/_jsx(EditablePlugin, {
           editable: editable
+        }), /*#__PURE__*/_jsx(EditorRefPlugin, {
+          editorRef: ref
+        }), onPressEnter && /*#__PURE__*/_jsx(ShiftEnterKeyPlugin, {
+          onPressEnter: onPressEnter
         })]
       })
     })
   });
-};
+});

package/es/Mentions/plugins/editor-ref.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { MentionsEditor } from '../types';
+export declare const EditorRefPlugin: React.FC<{
+    editorRef?: React.ForwardedRef<MentionsEditor>;
+}>;

package/es/Mentions/plugins/editor-ref.js

@@ -0,0 +1,13 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useImperativeHandle } from 'react';
+export var EditorRefPlugin = function EditorRefPlugin(_ref) {
+  var editorRef = _ref.editorRef;
+  var _useLexicalComposerCo = useLexicalComposerContext(),
+    _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  useImperativeHandle(editorRef, function () {
+    return editor;
+  });
+  return null;
+};

package/es/Mentions/plugins/mention-converter.d.ts

@@ -0,0 +1,32 @@
+/**
+ * source:
+ * https://github.com/sodenn/lexical-beautiful-mentions/blob/8d2c8fbfaa63fe0100ac9f6c4bcb61e816d14a30/plugin/src/mention-converter.ts
+ */
+import { LexicalNode, TextNode } from 'lexical';
+interface MentionEntry {
+    type: 'mention-node';
+    trigger: string;
+    value: string;
+}
+interface TextEntry {
+    type: 'custom-text';
+    value: string;
+}
+type Entry = MentionEntry | TextEntry;
+export declare function convertToMentionEntries(text: string, triggers: string[], punctuation: string): Entry[];
+/**
+ * Utility function that takes a string or a text nodes and converts it to a
+ * list of mention and text nodes.
+ *
+ * 🚨 Only works for mentions without spaces. Ensure spaces are disabled
+ *  via the `allowSpaces` prop.
+ */
+export declare function $convertToMentionNodes(textOrNode: string | TextNode, triggers: string[], punctuation?: string): LexicalNode[];
+/**
+ * Transforms text nodes containing mention strings into mention nodes.
+ *
+ *  🚨 Only works for mentions without spaces. Ensure spaces are disabled
+ *  via the `allowSpaces` prop.
+ */
+export declare function $transformTextToMentionNodes(triggers: string[], punctuation?: string): void;
+export {};

package/es/Mentions/plugins/mention-converter.js

@@ -0,0 +1,151 @@
+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; }
+/**
+ * source:
+ * https://github.com/sodenn/lexical-beautiful-mentions/blob/8d2c8fbfaa63fe0100ac9f6c4bcb61e816d14a30/plugin/src/mention-converter.ts
+ */
+import { $createTextNode, $getRoot, $isElementNode, $isTextNode } from 'lexical';
+import { DEFAULT_PUNCTUATION, LENGTH_LIMIT, TRIGGERS, VALID_CHARS } from "../constants";
+import { $createMentionNode } from "./mention-node";
+function findMentions(text, triggers, punctuation) {
+  var regex = new RegExp('(?<=\\s|^|\\()' + TRIGGERS(triggers) + '((?:' + VALID_CHARS(triggers, punctuation) + '){1,' + LENGTH_LIMIT + '})', 'g');
+  var matches = [];
+  var match;
+  regex.lastIndex = 0;
+  while ((match = regex.exec(text)) !== null) {
+    matches.push({
+      value: match[0],
+      index: match.index
+    });
+  }
+  return matches;
+}
+export function convertToMentionEntries(text, triggers, punctuation) {
+  var matches = findMentions(text, triggers, punctuation);
+  var result = [];
+  var lastIndex = 0;
+  var _iterator = _createForOfIteratorHelper(matches),
+    _step;
+  try {
+    var _loop = function _loop() {
+      var _step$value = _step.value,
+        value = _step$value.value,
+        index = _step$value.index;
+      // Add text before mention
+      if (index > lastIndex) {
+        // eslint-disable-next-line unicorn/prefer-string-slice
+        var textBeforeMention = text.substring(lastIndex, index);
+        result.push({
+          type: 'custom-text',
+          value: textBeforeMention
+        });
+      }
+      // Add mention
+      var triggerRegExp = triggers.find(function (trigger) {
+        return new RegExp(trigger).test(value);
+      });
+      var match = triggerRegExp && new RegExp(triggerRegExp).exec(value);
+      if (!match) {
+        // should never happen since we only find mentions with the given triggers
+        throw new Error('No trigger found for mention');
+      }
+      var trigger = match[0];
+      result.push({
+        type: 'mention-node',
+        value: value.slice(trigger.length),
+        trigger: trigger
+      });
+      // Update lastIndex
+      lastIndex = index + value.length;
+    };
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      _loop();
+    }
+
+    // Add text after last mention
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  if (lastIndex < text.length) {
+    var textAfterMentions = text.slice(Math.max(0, lastIndex));
+    result.push({
+      type: 'custom-text',
+      value: textAfterMentions
+    });
+  }
+  return result;
+}
+
+/**
+ * Utility function that takes a string or a text nodes and converts it to a
+ * list of mention and text nodes.
+ *
+ * 🚨 Only works for mentions without spaces. Ensure spaces are disabled
+ *  via the `allowSpaces` prop.
+ */
+export function $convertToMentionNodes(textOrNode, triggers) {
+  var punctuation = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_PUNCTUATION;
+  var text = typeof textOrNode === 'string' ? textOrNode : textOrNode.getTextContent();
+  var entries = convertToMentionEntries(text, triggers, punctuation);
+  var nodes = [];
+  var _iterator2 = _createForOfIteratorHelper(entries),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var entry = _step2.value;
+      if (entry.type === 'custom-text') {
+        var textNode = $createTextNode(entry.value);
+        if (typeof textOrNode !== 'string') {
+          textNode.setFormat(textOrNode.getFormat());
+        }
+        nodes.push(textNode);
+      } else {
+        nodes.push($createMentionNode(entry.value));
+      }
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  return nodes;
+}
+
+/**
+ * Transforms text nodes containing mention strings into mention nodes.
+ *
+ *  🚨 Only works for mentions without spaces. Ensure spaces are disabled
+ *  via the `allowSpaces` prop.
+ */
+export function $transformTextToMentionNodes(triggers) {
+  var punctuation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_PUNCTUATION;
+  var root = $getRoot();
+  var nodes = root.getChildren();
+  var traverseNodes = function traverseNodes(nodes) {
+    var _iterator3 = _createForOfIteratorHelper(nodes),
+      _step3;
+    try {
+      for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+        var node = _step3.value;
+        if ($isTextNode(node)) {
+          var newNodes = $convertToMentionNodes(node, triggers, punctuation);
+          if (newNodes.length > 1) {
+            var parent = node.getParent();
+            var index = node.getIndexWithinParent();
+            parent === null || parent === void 0 || parent.splice(index, 1, newNodes);
+          }
+        } else if ($isElementNode(node)) {
+          traverseNodes(node.getChildren());
+        }
+      }
+    } catch (err) {
+      _iterator3.e(err);
+    } finally {
+      _iterator3.f();
+    }
+  };
+  traverseNodes(nodes);
+}

package/es/Mentions/plugins/mention-picker/index.js

@@ -3,6 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { LexicalTypeaheadMenuPlugin } from '@lexical/react/LexicalTypeaheadMenuPlugin';
 import { ConfigProvider, Tree } from 'antd';
+import { COMMAND_PRIORITY_NORMAL } from 'lexical';
 import { flatMap } from 'lodash-es';
 import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
@@ -163,7 +164,10 @@ export var MentionPickerPlugin = /*#__PURE__*/memo(function (_ref) {
     return null;
   }, [cx, handleDisabledItem, options, overlayClassName, queryString, renderMenuTree, styles.menuOverlay]);
   return /*#__PURE__*/_jsx(LexicalTypeaheadMenuPlugin, {
-    anchorClassName: styles.anchor,
+    anchorClassName: styles.anchor
+    // 优先级要高于 ShiftEnterKeyPlugin
+    ,
+    commandPriority: COMMAND_PRIORITY_NORMAL,
     menuRenderFn: renderMenu,
     onQueryChange: setQueryString,
     onSelectOption: onSelectOption,

package/es/Mentions/plugins/shift-enter-key.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { MentionsProps } from '..';
+export interface ShiftEnterKeyPluginProps {
+    onPressEnter: Required<MentionsProps>['onPressEnter'];
+}
+export declare const ShiftEnterKeyPlugin: React.FC<ShiftEnterKeyPluginProps>;

package/es/Mentions/plugins/shift-enter-key.js

@@ -0,0 +1,48 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { CAN_USE_BEFORE_INPUT, IS_APPLE_WEBKIT, IS_IOS, IS_SAFARI } from '@lexical/utils';
+import { $getRoot, $getSelection, $isRangeSelection, COMMAND_PRIORITY_LOW, INSERT_PARAGRAPH_COMMAND, KEY_ENTER_COMMAND } from 'lexical';
+import { useEffect } from 'react';
+export var ShiftEnterKeyPlugin = function ShiftEnterKeyPlugin(_ref) {
+  var onPressEnter = _ref.onPressEnter;
+  var _useLexicalComposerCo = useLexicalComposerContext(),
+    _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  useEffect(function () {
+    // https://github.com/facebook/lexical/discussions/4464#discussioncomment-5833227
+    editor.registerCommand(KEY_ENTER_COMMAND, function (event) {
+      var selection = $getSelection();
+      if (!$isRangeSelection(selection)) {
+        return false;
+      }
+      if (event !== null) {
+        // If we have beforeinput, then we can avoid blocking
+        // the default behavior. This ensures that the iOS can
+        // intercept that we're actually inserting a paragraph,
+        // and autocomplete, autocapitalize etc work as intended.
+        // This can also cause a strange performance issue in
+        // Safari, where there is a noticeable pause due to
+        // preventing the key down of enter.
+        if ((IS_IOS || IS_SAFARI || IS_APPLE_WEBKIT) && CAN_USE_BEFORE_INPUT) {
+          return false;
+        }
+        event.preventDefault();
+        if (event.shiftKey) {
+          return editor.dispatchCommand(INSERT_PARAGRAPH_COMMAND, void 0);
+        }
+      }
+      event === null || event === void 0 || event.preventDefault();
+      var text = editor.read(function () {
+        return $getRoot().getTextContent();
+      });
+      var value = text.replaceAll('\n\n', '\n');
+      onPressEnter(value, {
+        event: event
+      });
+      return true;
+    },
+    // 优先级要低于 MentionPickerPlugin
+    COMMAND_PRIORITY_LOW);
+  }, [editor, onPressEnter]);
+  return null;
+};

package/es/Mentions/types.d.ts

@@ -10,3 +10,4 @@ export interface AutoSize {
     minRows?: number;
     maxRows?: number;
 }
+export type { LexicalEditor as MentionsEditor, EditorState as MentionsEditorState } from 'lexical';

package/es/Mentions/utils.d.ts

@@ -6,4 +6,4 @@ export declare const DELETE_MENTION_COMMAND: import("lexical").LexicalCommand<un
 export declare const CLEAR_HIDE_MENU_TIMEOUT: import("lexical").LexicalCommand<unknown>;
 export declare const UPDATE_MENTIONS_OPTIONS: import("lexical").LexicalCommand<unknown>;
 export declare const decoratorTransform: (node: CustomTextNode, getMatch: (text: string) => null | EntityMatch, createNode: (textNode: TextNode) => LexicalNode) => void;
-export declare function textToEditorState(text: string): string;
+export declare function textToEditorState(initialValue: string, triggers: string[]): () => void;

package/es/Mentions/utils.js

@@ -1,5 +1,7 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { $isTextNode, createCommand } from 'lexical';
+import { $createParagraphNode, $getRoot, $isTextNode, createCommand } from 'lexical';
+import { $convertToMentionNodes } from "./plugins/mention-converter";
 export var INSERT_MENTION_COMMAND = createCommand('INSERT_MENTION_COMMAND');
 export var DELETE_MENTION_COMMAND = createCommand('DELETE_MENTION_COMMAND');
 export var CLEAR_HIDE_MENU_TIMEOUT = createCommand('CLEAR_HIDE_MENU_TIMEOUT');
@@ -63,33 +65,12 @@ export var decoratorTransform = function decoratorTransform(node, getMatch, crea
     }
   }
 };
-export function textToEditorState(text) {
-  var paragraph = text.split('\n');
-  return JSON.stringify({
-    root: {
-      children: paragraph.map(function (p) {
-        return {
-          children: [{
-            detail: 0,
-            format: 0,
-            mode: 'normal',
-            style: '',
-            text: p,
-            type: 'custom-text',
-            version: 1
-          }],
-          direction: 'ltr',
-          format: '',
-          indent: 0,
-          type: 'paragraph',
-          version: 1
-        };
-      }),
-      direction: 'ltr',
-      format: '',
-      indent: 0,
-      type: 'root',
-      version: 1
-    }
-  });
+export function textToEditorState(initialValue, triggers) {
+  return function () {
+    var root = $getRoot();
+    root.clear();
+    var paragraph = $createParagraphNode();
+    paragraph.append.apply(paragraph, _toConsumableArray($convertToMentionNodes(initialValue, triggers)));
+    root.append(paragraph);
+  };
 }

package/es/MonacoEditor/base/helper.js

@@ -159,6 +159,10 @@ export var useEditor = function useEditor(type, props) {
       if (!containerRef.current) {
         return;
       }
+      if (editorRef.current) {
+        editorRef.current.dispose();
+        decomposeRef.current = false;
+      }
       var editor;
       if (typeRef.current === 'single') {
         var _ref, _valueRef$current;
@@ -201,7 +205,7 @@ export var useEditor = function useEditor(type, props) {
         setLoading(false);
       }
     });
-  }, []);
+  }, [placeholder]);
   useEffect(function () {
     var _monacoRef$current;
     if (!isEditorReady) {

package/es/MonacoEditor/base/style.js

@@ -34,7 +34,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     }
   };
   return {
-    base: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        position: relative;\n\n        box-sizing: content-box;\n        min-height: 100px;\n\n        background-color: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n        &:hover {\n          border-color: ", ";\n          ", "\n        }\n\n        &.ve-focused {\n          ", "\n          ", "\n        }\n\n        &.ve-outline {\n          border: 1px solid var(--color-field-border, rgba(31, 56, 88, 0.05)) !important;\n        }\n\n        & > .react-monaco-editor-container {\n          width: 100%;\n          height: 100%;\n          min-height: 100px;\n          background: transparent;\n\n          ", "\n\n          .monaco-editor,\n          .monaco-editor-background,\n          .monaco-editor .inputarea.ime-input,\n          .monaco-editor .margin {\n            ", "\n          }\n\n          & > .monaco-editor {\n            border-radius: ", "px;\n            outline: none;\n            .overflow-guard,\n            .margin {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n            .monaco-scrollable-element {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n          .monaco-diff-editor {\n            border-radius: ", "px;\n            & > .original > .monaco-editor {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n              .overflow-guard,\n              .margin {\n                border-top-left-radius: ", "px;\n                border-bottom-left-radius: ", "px;\n              }\n            }\n            .diffViewport {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n        }\n\n        .syntaxTips {\n          position: absolute;\n          bottom: 0;\n          left: 0;\n\n          box-sizing: border-box;\n          width: 100%;\n          max-height: 0;\n          margin: 0;\n          padding: 10px 30px;\n\n          color: ", ";\n\n          background: ", ";\n\n          transition: 0.2s ease max-height;\n        }\n\n        .syntaxTips:hover {\n          overflow: auto;\n          max-height: 50%;\n        }\n\n        .syntaxTips .infoIcon {\n          position: absolute;\n          top: 2px;\n          right: 5px;\n          transform: rotateY(180deg);\n\n          width: 20px;\n          height: 16px;\n        }\n      "])), getBgColor(), variant === 'outlined' ? token.colorBorder : 'transparent', token.borderRadius, variant === 'outlined' ? token.colorPrimaryHover : 'transparent', variant === 'filled' && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            background-color: ", ";\n          "])), token.colorFillSecondary), variant === 'filled' && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n            background-color: ", ";\n          "])), token.colorBgBase), variant !== 'borderless' && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n            border-color: ", ";\n          "])), token.colorPrimaryActive), isFullScreen && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n            position: fixed;\n            z-index: 9998;\n            inset: 0;\n\n            width: auto !important;\n            height: auto !important;\n          "]))), !isFullScreen && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n              background-color: transparent;\n            "]))), token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius - 1, token.borderRadius - 1, token.colorErrorText, token.colorErrorBg),
+    base: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        position: relative;\n\n        box-sizing: content-box;\n        min-height: 100px;\n\n        background-color: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n        &:hover {\n          border-color: ", ";\n          ", "\n        }\n\n        &.ve-focused {\n          ", "\n          ", "\n        }\n\n        &.ve-outline {\n          border: 1px solid var(--color-field-border, rgba(31, 56, 88, 0.05)) !important;\n        }\n\n        & > .react-monaco-editor-container {\n          width: 100%;\n          height: 100%;\n          min-height: 100px;\n          background: transparent;\n\n          ", "\n\n          .monaco-editor,\n          .monaco-editor-background,\n          .monaco-editor .inputarea.ime-input,\n          .monaco-editor .margin {\n            ", "\n          }\n\n          & > .monaco-editor {\n            border-radius: ", "px;\n            outline: none;\n            .overflow-guard,\n            .margin {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n            .monaco-scrollable-element {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n          .monaco-diff-editor {\n            border-radius: ", "px;\n            & > .gutter {\n              outline: none;\n            }\n            & > .original > .monaco-editor {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n              outline: none;\n              .overflow-guard,\n              .margin {\n                border-top-left-radius: ", "px;\n                border-bottom-left-radius: ", "px;\n              }\n            }\n            & > .modified > .monaco-editor {\n              outline: none;\n            }\n            .diffViewport {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n              outline: none;\n            }\n          }\n        }\n\n        .syntaxTips {\n          position: absolute;\n          bottom: 0;\n          left: 0;\n\n          box-sizing: border-box;\n          width: 100%;\n          max-height: 0;\n          margin: 0;\n          padding: 10px 30px;\n\n          color: ", ";\n\n          background: ", ";\n\n          transition: 0.2s ease max-height;\n        }\n\n        .syntaxTips:hover {\n          overflow: auto;\n          max-height: 50%;\n        }\n\n        .syntaxTips .infoIcon {\n          position: absolute;\n          top: 2px;\n          right: 5px;\n          transform: rotateY(180deg);\n\n          width: 20px;\n          height: 16px;\n        }\n      "])), getBgColor(), variant === 'outlined' ? token.colorBorder : 'transparent', token.borderRadius, variant === 'outlined' ? token.colorPrimaryHover : 'transparent', variant === 'filled' && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            background-color: ", ";\n          "])), token.colorFillSecondary), variant === 'filled' && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n            background-color: ", ";\n          "])), token.colorBgBase), variant !== 'borderless' && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n            border-color: ", ";\n          "])), token.colorPrimaryActive), isFullScreen && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n            position: fixed;\n            z-index: 9998;\n            inset: 0;\n\n            width: auto !important;\n            height: auto !important;\n          "]))), !isFullScreen && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n              background-color: transparent;\n            "]))), token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius - 1, token.borderRadius - 1, token.colorErrorText, token.colorErrorBg),
     fullScreenBtn: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        &.", "-btn {\n          position: absolute;\n          top: 20px;\n          color: ", ";\n          transition: none;\n          ", "\n        }\n      "])), prefixCls, token.colorTextSecondary, isFullScreen ? css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n                z-index: 9999;\n                right: ", "px;\n              "])), diff ? 64 : 138) : css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n                right: ", "px;\n              "])), minimapEnabled || diff ? 64 : 20)),
     loading: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n        position: absolute;\n        inset: 0;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        font-size: ", "px;\n        color: ", ";\n\n        background-color: transparent;\n\n        &::after {\n          content: '';\n          width: 16px;\n          /* display: inline; */\n          animation: ", " steps(3) 1s infinite;\n        }\n      "])), token.fontSizeSM, token.colorTextTertiary, dots)
   };