@yuntijs/ui 1.0.0 → 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,7 +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

@@ -8,20 +8,25 @@ import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
 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,
@@ -44,11 +49,16 @@ export var Mentions = function Mentions(_ref) {
     allowSpaces = _ref.allowSpaces,
     punctuation = _ref.punctuation,
     preTriggerChars = _ref.preTriggerChars,
-    onSelect = _ref.onSelect;
+    onSelect = _ref.onSelect,
+    _ref$code = _ref.code,
+    code = _ref$code === void 0 ? false : _ref$code,
+    getPopContainer = _ref.getPopContainer,
+    onPressEnter = _ref.onPressEnter;
   var _ConfigProvider$useCo = ConfigProvider.useConfig(),
     componentDisabled = _ConfigProvider$useCo.componentDisabled;
   var _useStyles = useStyles({
-      autoSize: autoSize
+      autoSize: autoSize,
+      code: code
     }),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
@@ -67,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;
       }
@@ -103,18 +113,17 @@ export var Mentions = function Mentions(_ref) {
     };
     return buildMap(options);
   }, [options]);
-  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")
-      })]
-    });
-  }
+  var parent = useMemo(function () {
+    if (!isBrowser) {
+      return;
+    }
+    if (getPopContainer) {
+      return getPopContainer();
+    }
+    if (document.fullscreenElement) {
+      return document.fullscreenElement;
+    }
+  }, [getPopContainer]);
   return /*#__PURE__*/_jsx(LexicalComposer, {
     initialConfig: _objectSpread(_objectSpread({}, initialConfig), {}, {
       editable: editable
@@ -140,6 +149,7 @@ export var Mentions = function Mentions(_ref) {
           onSelect: onSelect,
           options: options,
           overlayClassName: classNames === null || classNames === void 0 ? void 0 : classNames.menuOverlay,
+          parent: parent,
           preTriggerChars: preTriggerChars,
           punctuation: punctuation,
           triggers: triggers
@@ -150,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-node/component.js

@@ -47,7 +47,7 @@ export var MentionNodeComponent = /*#__PURE__*/memo(function (_ref) {
       }), /*#__PURE__*/_jsx(Flex, {
         className: styles.text,
         gap: 2,
-        title: (option === null || option === void 0 ? void 0 : option.label) || variable,
+        title: (option === null || option === void 0 ? void 0 : option.selectedLabel) || (option === null || option === void 0 ? void 0 : option.label) || variable,
         children: /*#__PURE__*/_jsx("span", {
           children: (option === null || option === void 0 ? void 0 : option.selectedLabel) || (option === null || option === void 0 ? void 0 : option.label) || variable
         })

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

@@ -32,6 +32,7 @@ export var useOptions = function useOptions(allOptions, queryString) {
   var options = useMemo(function () {
     var _addOnselect = function _addOnselect(option) {
       var menuOption = _objectSpread(_objectSpread({}, option), {}, {
+        title: option.title || option.selectedLabel,
         children: undefined,
         onSelect: function onSelect() {
           editor.dispatchCommand(INSERT_MENTION_COMMAND, option.value);

package/es/Mentions/plugins/mention-picker/index.d.ts

@@ -35,5 +35,9 @@ export interface MentionPickerPluginProps {
      * When mention selected, this func will be called
      */
     onSelect?: (option: MentionMenuOption, trigger: string | null, queryString: string | null) => void;
+    /**
+     * Parent element
+     */
+    parent?: HTMLElement;
 }
 export declare const MentionPickerPlugin: React.FC<MentionPickerPluginProps>;

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

@@ -1,12 +1,11 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 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';
-// @Todo: 目前不支持上下键选中 children，后续支持可能需要定制 menu 和 plugin
-// import type { MenuRenderFn } from '../LexicalTypeaheadMenuPlugin';
-// import { LexicalTypeaheadMenuPlugin } from '../LexicalTypeaheadMenuPlugin';
-
-import React, { memo, useCallback, useState } from 'react';
+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';
 import { DEFAULT_PUNCTUATION, PRE_TRIGGER_CHARS } from "../../constants";
 import { useCheckForMentionMatch } from "../../hooks";
@@ -27,7 +26,8 @@ export var MentionPickerPlugin = /*#__PURE__*/memo(function (_ref) {
     punctuation = _ref$punctuation === void 0 ? DEFAULT_PUNCTUATION : _ref$punctuation,
     _ref$preTriggerChars = _ref.preTriggerChars,
     preTriggerChars = _ref$preTriggerChars === void 0 ? PRE_TRIGGER_CHARS : _ref$preTriggerChars,
-    onSelect = _ref.onSelect;
+    onSelect = _ref.onSelect,
+    parent = _ref.parent;
   var _useStyles = useStyles({}),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
@@ -47,6 +47,14 @@ export var MentionPickerPlugin = /*#__PURE__*/memo(function (_ref) {
     setQueryString = _useState2[1];
   var _useOptions = useOptions(allOptions, queryString),
     options = _useOptions.options;
+  var flatOptions = useMemo(function () {
+    var _flattenTree = function _flattenTree(nodes) {
+      return flatMap(nodes, function (node) {
+        return [node].concat(_toConsumableArray(node.children ? _flattenTree(node.children) : []));
+      });
+    };
+    return _flattenTree(options);
+  }, [options]);
   var onSelectOption = useCallback(function (selectedOption, nodeToRemove, closeMenu, matchingString) {
     onSelect === null || onSelect === void 0 || onSelect(selectedOption, trigger, queryString);
     editor.update(function () {
@@ -59,9 +67,36 @@ export var MentionPickerPlugin = /*#__PURE__*/memo(function (_ref) {
       closeMenu();
     });
   }, [editor, onSelect, queryString, trigger]);
+  var preSelectedIndex = useRef();
+  var handleDisabledItem = useCallback(function (itemProps) {
+    var selectedIndex = itemProps.selectedIndex,
+      setHighlightedIndex = itemProps.setHighlightedIndex;
+    if (selectedIndex !== null) {
+      var _flatOptions$selected;
+      if ((_flatOptions$selected = flatOptions[selectedIndex]) !== null && _flatOptions$selected !== void 0 && _flatOptions$selected.disabled) {
+        var newIndex = selectedIndex;
+        // 如果是最后一项，则回到第一项
+        if (selectedIndex === flatOptions.length - 1) {
+          newIndex = flatOptions.length === 1 ? null : 0;
+          // @ts-ignore
+          setHighlightedIndex(newIndex);
+        } else if (selectedIndex !== preSelectedIndex.current) {
+          var _preSelectedIndex$cur;
+          if (selectedIndex > ((_preSelectedIndex$cur = preSelectedIndex.current) !== null && _preSelectedIndex$cur !== void 0 ? _preSelectedIndex$cur : 0)) {
+            newIndex++;
+          } else {
+            newIndex--;
+          }
+          setHighlightedIndex(newIndex);
+        }
+      }
+      preSelectedIndex.current = selectedIndex;
+    }
+  }, [flatOptions]);
   var renderMenuTree = useCallback(function (itemProps) {
     var selectedIndex = itemProps.selectedIndex,
       selectOptionAndCleanUp = itemProps.selectOptionAndCleanUp;
+    handleDisabledItem(itemProps);
     return /*#__PURE__*/_jsx(ConfigProvider, {
       theme: {
         components: {
@@ -69,7 +104,8 @@ export var MentionPickerPlugin = /*#__PURE__*/memo(function (_ref) {
             indentSize: 16,
             lineHeight: 32,
             titleHeight: 32,
-            paddingXS: 0
+            paddingXS: 0,
+            nodeHoverBg: 'transparent'
           }
         }
       },
@@ -86,9 +122,9 @@ export var MentionPickerPlugin = /*#__PURE__*/memo(function (_ref) {
           selectOptionAndCleanUp(info.node);
         },
         titleRender: function titleRender(option) {
-          var _options;
+          var _flatOptions;
           return /*#__PURE__*/_jsx(MentionMenuItem, {
-            isSelected: ((_options = options[selectedIndex]) === null || _options === void 0 ? void 0 : _options.value) === option.value,
+            isSelected: ((_flatOptions = flatOptions[selectedIndex]) === null || _flatOptions === void 0 ? void 0 : _flatOptions.value) === option.value,
             option: option,
             queryString: queryString,
             showIcon: !option.isChild
@@ -97,11 +133,12 @@ export var MentionPickerPlugin = /*#__PURE__*/memo(function (_ref) {
         treeData: options
       })
     });
-  }, [options, editor, queryString]);
+  }, [handleDisabledItem, options, editor, flatOptions, queryString]);
   var renderMenu = useCallback(function (anchorElementRef, itemProps, _matchingString) {
     var selectedIndex = itemProps.selectedIndex,
       selectOptionAndCleanUp = itemProps.selectOptionAndCleanUp,
       setHighlightedIndex = itemProps.setHighlightedIndex;
+    handleDisabledItem(itemProps);
     if (anchorElementRef.current) {
       return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/_jsx("div", {
         className: cx(styles.menuOverlay, overlayClassName),
@@ -125,13 +162,17 @@ export var MentionPickerPlugin = /*#__PURE__*/memo(function (_ref) {
       }), anchorElementRef.current);
     }
     return null;
-  }, [cx, options, overlayClassName, queryString, renderMenuTree, styles.menuOverlay]);
+  }, [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,
-    options: options,
+    options: flatOptions,
+    parent: parent,
     triggerFn: checkForMentionMatch
   });
 });