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

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

@@ -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;
@@ -171,6 +173,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/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/plugins/shift-enter-key.js

@@ -2,12 +2,16 @@ 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';
+import { useEffect, useRef } from 'react';
 export var ShiftEnterKeyPlugin = function ShiftEnterKeyPlugin(_ref) {
   var onPressEnter = _ref.onPressEnter;
   var _useLexicalComposerCo = useLexicalComposerContext(),
     _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
     editor = _useLexicalComposerCo2[0];
+  var onPressEnterRef = useRef(onPressEnter);
+  useEffect(function () {
+    onPressEnterRef.current = onPressEnter;
+  }, [onPressEnter]);
   useEffect(function () {
     // https://github.com/facebook/lexical/discussions/4464#discussioncomment-5833227
     editor.registerCommand(KEY_ENTER_COMMAND, function (event) {
@@ -39,13 +43,13 @@ export var ShiftEnterKeyPlugin = function ShiftEnterKeyPlugin(_ref) {
       // 这里把 onPressEnter 放在下一次事件循环中触发，是为了避免跟 Lexical 还未结束的输入等事务发生冲突
       if (window.queueMicrotask === undefined) {
         setTimeout(function () {
-          onPressEnter(value, {
+          onPressEnterRef.current(value, {
             event: event
           });
         }, 0);
       } else {
         queueMicrotask(function () {
-          onPressEnter(value, {
+          onPressEnterRef.current(value, {
             event: event
           });
         });
@@ -54,6 +58,6 @@ export var ShiftEnterKeyPlugin = function ShiftEnterKeyPlugin(_ref) {
     },
     // 优先级要低于 MentionPickerPlugin
     COMMAND_PRIORITY_LOW);
-  }, [editor, onPressEnter]);
+  }, [editor]);
   return null;
 };

package/es/Mentions/utils.d.ts

@@ -6,4 +6,8 @@ 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';
+}
+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,26 @@ export var decoratorTransform = function decoratorTransform(node, getMatch, crea
     }
   }
 };
-export function textToEditorState(initialValue, triggers) {
+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'
+      },
+      cursor = _ref.cursor;
+    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.1",
+  "version": "1.2.0-beta.3",
   "description": "☁️ Yunti UI - an open-source UI component library for building Cloud Native web apps",
   "keywords": [
     "yuntijs",