@yuntijs/ui 1.1.0-beta.7 → 1.1.0-beta.8

package/es/Mentions/index.d.ts

@@ -19,6 +19,12 @@ 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;

package/es/Mentions/index.js

@@ -18,6 +18,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 { ShiftEnterKeyPlugin } from "./plugins/shift-enter-key";
 import { MentionsConfigProvider } from "./provider";
 import { useStyles } from "./style";
 import { textToEditorState } from "./utils";
@@ -51,7 +52,8 @@ export var Mentions = /*#__PURE__*/forwardRef(function (_ref, 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({
@@ -160,6 +162,8 @@ export var Mentions = /*#__PURE__*/forwardRef(function (_ref, ref) {
           editable: editable
         }), /*#__PURE__*/_jsx(EditorRefPlugin, {
           editorRef: ref
+        }), onPressEnter && /*#__PURE__*/_jsx(ShiftEnterKeyPlugin, {
+          onPressEnter: onPressEnter
         })]
       })
     })

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/package.json

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