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

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";
@@ -129,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
@@ -151,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,

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/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

@@ -9,5 +9,6 @@ export declare const decoratorTransform: (node: CustomTextNode, getMatch: (text:
 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

@@ -67,15 +67,16 @@ export var decoratorTransform = function decoratorTransform(node, getMatch, crea
 };
 export function textToEditorState(initialValue, triggers, options) {
   return function () {
-    var root = $getRoot();
-    root.clear();
-    var paragraph = $createParagraphNode();
-    paragraph.append.apply(paragraph, _toConsumableArray($convertToMentionNodes(initialValue, triggers)));
-    root.append(paragraph);
     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, punctuation)));
+    root.append(paragraph);
     if (!cursor || cursor === 'end') {
       // 👇 把光标移动到文本末尾
       var lastNode = paragraph.getLastDescendant();

package/package.json

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