@yuntijs/ui 1.2.0-beta.2 → 1.2.0-beta.4

package/es/Mentions/index.d.ts

@@ -26,6 +26,13 @@ export interface MentionsProps extends MentionPickerPluginProps {
     onPressEnter?: (value: string, { event }: {
         event: KeyboardEvent | null;
     }) => void;
+    /**
+     * 用户输入 trigger 后的回调
+     */
+    /**
+     * 按下键盘的回调
+     */
+    onKeyDown?: (event: KeyboardEvent | null) => void;
     /**
      * 用户输入 trigger 后的回调
      */

package/es/Mentions/index.js

@@ -11,7 +11,7 @@ import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
 import { ConfigProvider } from 'antd';
 // @Todo: 升级 0.25.0 后，ops-console 使用的时候出现了只输入 / 无法触发的问题
 import { $getRoot, TextNode } from 'lexical';
-import React, { forwardRef, useMemo } from 'react';
+import React, { forwardRef, useCallback, useMemo } from 'react';
 import { isBrowser } from "../utils/tools";
 import { CustomTextNode } from "./plugins/custom-text/node";
 import { EditablePlugin } from "./plugins/editable";
@@ -19,6 +19,7 @@ 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 { OnKeyDownPlugin } from "./plugins/on-key-down";
 import { ShiftEnterKeyPlugin } from "./plugins/shift-enter-key";
 import { MentionsConfigProvider } from "./provider";
 import { useStyles } from "./style";
@@ -56,6 +57,7 @@ export var Mentions = /*#__PURE__*/forwardRef(function (_ref, ref) {
     code = _ref$code === void 0 ? false : _ref$code,
     getPopContainer = _ref.getPopContainer,
     onPressEnter = _ref.onPressEnter,
+    onKeyDown = _ref.onKeyDown,
     onTrigger = _ref.onTrigger;
   var _ConfigProvider$useCo = ConfigProvider.useConfig(),
     componentDisabled = _ConfigProvider$useCo.componentDisabled;
@@ -127,6 +129,11 @@ export var Mentions = /*#__PURE__*/forwardRef(function (_ref, ref) {
       return document.fullscreenElement;
     }
   }, [getPopContainer]);
+  var onMentionPickerOpen = useCallback(function (resolution) {
+    var _resolution$match$rep, _resolution$match;
+    var _trigger = (_resolution$match$rep = (_resolution$match = resolution.match) === null || _resolution$match === void 0 ? void 0 : _resolution$match.replaceableString) !== null && _resolution$match$rep !== void 0 ? _resolution$match$rep : triggers[0];
+    onTrigger === null || onTrigger === void 0 || onTrigger(_trigger);
+  }, [onTrigger, triggers]);
   return /*#__PURE__*/_jsx(LexicalComposer, {
     initialConfig: _objectSpread(_objectSpread({}, initialConfig), {}, {
       editable: editable
@@ -149,10 +156,7 @@ export var Mentions = /*#__PURE__*/forwardRef(function (_ref, ref) {
           })
         }), editable && /*#__PURE__*/_jsx(MentionPickerPlugin, {
           allowSpaces: allowSpaces,
-          onOpen: function onOpen(resolution) {
-            var _resolution$match$rep, _resolution$match;
-            return onTrigger === null || onTrigger === void 0 ? void 0 : onTrigger((_resolution$match$rep = (_resolution$match = resolution.match) === null || _resolution$match === void 0 ? void 0 : _resolution$match.replaceableString) !== null && _resolution$match$rep !== void 0 ? _resolution$match$rep : triggers[0]);
-          },
+          onOpen: onMentionPickerOpen,
           onSelect: onSelect,
           options: options,
           overlayClassName: classNames === null || classNames === void 0 ? void 0 : classNames.menuOverlay,
@@ -171,6 +175,8 @@ export var Mentions = /*#__PURE__*/forwardRef(function (_ref, ref) {
           editorRef: ref
         }), /*#__PURE__*/_jsx(ClearEditorPlugin, {}), onPressEnter && /*#__PURE__*/_jsx(ShiftEnterKeyPlugin, {
           onPressEnter: onPressEnter
+        }), onKeyDown && /*#__PURE__*/_jsx(OnKeyDownPlugin, {
+          onKeyDown: onKeyDown
         })]
       })
     })

package/es/Mentions/plugins/mention-node/utils.js

@@ -7,4 +7,5 @@ export var CLEAR_HIDE_MENU_TIMEOUT = createCommand('CLEAR_HIDE_MENU_TIMEOUT');
 // export const MENTION_REGEX = /{{(.+?)}}/g;
 // {{plugin-m67m66l8-794.json."id"}}
 // {{plugin-m67m66l8-794.json."tags"[0]."id"}}
-export var MENTION_REGEX = /{{([\w-]{1,50}(\."?[_a-z][\w"[\]]*){1,10})}}/gi;
+// export const MENTION_REGEX = /{{([\w-]{1,50}(\."?[_a-z][\w"[\]]*){1,10})}}/gi;
+export var MENTION_REGEX = /{{[^.}]+\.(.+)}}/gi;

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

@@ -1,5 +1,5 @@
 import type { MentionOption } from '../../types';
 import { MentionMenuOption } from './utils';
-export declare const useOptions: (allOptions: MentionOption[], queryString: string | null) => {
+export declare const useOptions: (allOptions: MentionOption[], queryString: string | null, trigger: string | null) => {
     options: MentionMenuOption[];
 };

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

@@ -18,17 +18,20 @@ var filterOptionWithChildren = function filterOptionWithChildren(option, filterO
   });
   return option;
 };
-export var useOptions = function useOptions(allOptions, queryString) {
+export var useOptions = function useOptions(allOptions, queryString, trigger) {
   var _useLexicalComposerCo = useLexicalComposerContext(),
     _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
     editor = _useLexicalComposerCo2[0];
   var filterOption = useCallback(function (option) {
     var _option$keywords;
+    if (option.triggers && trigger && !option.triggers.includes(trigger)) {
+      return false;
+    }
     var regex = new RegExp(escapeRegExp(queryString), 'i');
     return regex.test(option.label) || ((_option$keywords = option.keywords) === null || _option$keywords === void 0 ? void 0 : _option$keywords.some(function (keyword) {
       return regex.test(keyword);
     })) || false;
-  }, [queryString]);
+  }, [queryString, trigger]);
   var options = useMemo(function () {
     var _addOnselect = function _addOnselect(option) {
       var menuOption = _objectSpread(_objectSpread({}, option), {}, {
@@ -48,9 +51,9 @@ export var useOptions = function useOptions(allOptions, queryString) {
     var menuOptions = allOptions.map(function (o) {
       return new MentionMenuOption(_addOnselect(o));
     });
-    if (!queryString) {
-      return menuOptions;
-    }
+    // if (!queryString) {
+    //   return menuOptions;
+    // }
     return menuOptions.map(function (o) {
       if (!o.children) {
         return o;
@@ -59,7 +62,7 @@ export var useOptions = function useOptions(allOptions, queryString) {
     }).filter(function (o) {
       return filterOption(o) || (o.children || []).length > 0;
     });
-  }, [allOptions, queryString, editor, filterOption]);
+  }, [allOptions, editor, filterOption]);
   return {
     options: options
   };

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

@@ -46,7 +46,7 @@ export var MentionPickerPlugin = /*#__PURE__*/memo(function (_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     queryString = _useState2[0],
     setQueryString = _useState2[1];
-  var _useOptions = useOptions(allOptions, queryString),
+  var _useOptions = useOptions(allOptions, queryString, trigger),
     options = _useOptions.options;
   var flatOptions = useMemo(function () {
     var _flattenTree = function _flattenTree(nodes) {

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

@@ -10,6 +10,8 @@ export interface MentionMenuOptionInitParams {
     keywords?: Array<string>;
     keyboardShortcut?: string;
     disabled?: boolean;
+    /** 指定触发这个选项的 triggers，指定后会根据指定的 triggers 进行筛选 */
+    triggers?: string[];
     onSelect: (queryString: string) => void;
     isChild?: boolean;
     children?: MentionMenuOptionInitParams[];
@@ -26,8 +28,9 @@ export declare class MentionMenuOption extends MenuOption {
     keyboardShortcut?: string;
     onSelect: (queryString: string) => void;
     disabled?: boolean;
+    triggers?: string[];
     data?: any;
     children?: MentionMenuOption[];
     isChild?: boolean;
-    constructor({ label, value, title, data, icon, extraElement, keywords, keyboardShortcut, disabled, onSelect, children, isChild, }: MentionMenuOptionInitParams);
+    constructor({ label, value, title, data, icon, extraElement, keywords, keyboardShortcut, disabled, triggers, onSelect, children, isChild, }: MentionMenuOptionInitParams);
 }

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

@@ -24,6 +24,7 @@ export var MentionMenuOption = /*#__PURE__*/function (_MenuOption) {
       keywords = _ref.keywords,
       keyboardShortcut = _ref.keyboardShortcut,
       disabled = _ref.disabled,
+      triggers = _ref.triggers,
       onSelect = _ref.onSelect,
       children = _ref.children,
       isChild = _ref.isChild;
@@ -42,6 +43,7 @@ export var MentionMenuOption = /*#__PURE__*/function (_MenuOption) {
     _defineProperty(_assertThisInitialized(_this), "keyboardShortcut", void 0);
     _defineProperty(_assertThisInitialized(_this), "onSelect", void 0);
     _defineProperty(_assertThisInitialized(_this), "disabled", void 0);
+    _defineProperty(_assertThisInitialized(_this), "triggers", void 0);
     _defineProperty(_assertThisInitialized(_this), "data", void 0);
     _defineProperty(_assertThisInitialized(_this), "children", void 0);
     _defineProperty(_assertThisInitialized(_this), "isChild", void 0);
@@ -56,6 +58,7 @@ export var MentionMenuOption = /*#__PURE__*/function (_MenuOption) {
     _this.keyboardShortcut = keyboardShortcut;
     _this.onSelect = onSelect.bind(_assertThisInitialized(_this));
     _this.disabled = disabled;
+    _this.triggers = triggers;
     _this.data = data;
     _this.isChild = isChild !== null && isChild !== void 0 ? isChild : false;
     _this.children = children === null || children === void 0 ? void 0 : children.map(function (m) {

package/es/Mentions/plugins/on-key-down.d.ts

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

package/es/Mentions/plugins/on-key-down.js

@@ -0,0 +1,31 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { COMMAND_PRIORITY_LOW, KEY_DOWN_COMMAND } from 'lexical';
+import { useEffect, useRef } from 'react';
+export var OnKeyDownPlugin = function OnKeyDownPlugin(_ref) {
+  var onKeyDown = _ref.onKeyDown;
+  var _useLexicalComposerCo = useLexicalComposerContext(),
+    _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  var onKeyDownRef = useRef(onKeyDown);
+  useEffect(function () {
+    onKeyDownRef.current = onKeyDown;
+  }, [onKeyDown]);
+  useEffect(function () {
+    // https://github.com/facebook/lexical/discussions/4464#discussioncomment-5833227
+    editor.registerCommand(KEY_DOWN_COMMAND, function (event) {
+      // 这里把 onKeyDown 放在下一次事件循环中触发，是为了避免跟 Lexical 还未结束的输入等事务发生冲突
+      if (window.queueMicrotask === undefined) {
+        setTimeout(function () {
+          onKeyDownRef.current(event);
+        }, 0);
+      } else {
+        queueMicrotask(function () {
+          onKeyDownRef.current(event);
+        });
+      }
+      return false;
+    }, COMMAND_PRIORITY_LOW);
+  }, [editor]);
+  return null;
+};

package/es/Mentions/types.d.ts

@@ -1,4 +1,4 @@
-import { MentionMenuOptionInitParams } from './plugins/mention-picker/utils';
+import type { MentionMenuOptionInitParams } from './plugins/mention-picker/utils';
 export interface MentionOption extends Omit<MentionMenuOptionInitParams, 'onSelect' | 'children'> {
     /** 选中后展示的 label 名称，不指定则直接使用 label */
     selectedLabel?: string;

package/es/Mentions/utils.d.ts

@@ -6,4 +6,9 @@ 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(initialValue: string, triggers: string[]): () => void;
+export interface TextToEditorStateOptions {
+    /** 光标位置，默认为 end */
+    cursor?: 'start' | 'end' | 'all';
+    punctuation?: string;
+}
+export declare function textToEditorState(initialValue: string, triggers: string[], options?: TextToEditorStateOptions): () => void;

package/es/Mentions/utils.js

@@ -1,6 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { $createParagraphNode, $getRoot, $isTextNode, createCommand } from 'lexical';
+import { $createParagraphNode, $getRoot, $isTextNode, $selectAll, 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');
@@ -65,12 +65,27 @@ export var decoratorTransform = function decoratorTransform(node, getMatch, crea
     }
   }
 };
-export function textToEditorState(initialValue, triggers) {
+export function textToEditorState(initialValue, triggers, options) {
   return function () {
+    var _ref = options || {
+        cursor: 'end'
+      },
+      punctuation = _ref.punctuation,
+      cursor = _ref.cursor;
     var root = $getRoot();
     root.clear();
     var paragraph = $createParagraphNode();
-    paragraph.append.apply(paragraph, _toConsumableArray($convertToMentionNodes(initialValue, triggers)));
+    paragraph.append.apply(paragraph, _toConsumableArray($convertToMentionNodes(initialValue, triggers, punctuation)));
     root.append(paragraph);
+    if (!cursor || cursor === 'end') {
+      // 👇 把光标移动到文本末尾
+      var lastNode = paragraph.getLastDescendant();
+      if ($isTextNode(lastNode)) {
+        lastNode.select(); // 选中并聚焦尾部
+      }
+    }
+    if (cursor === 'all') {
+      $selectAll();
+    }
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuntijs/ui",
-  "version": "1.2.0-beta.2",
+  "version": "1.2.0-beta.4",
   "description": "☁️ Yunti UI - an open-source UI component library for building Cloud Native web apps",
   "keywords": [
     "yuntijs",