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

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,9 +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

@@ -9,21 +9,24 @@ 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,
@@ -49,7 +52,8 @@ export var Mentions = function Mentions(_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({
@@ -73,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;
       }
@@ -156,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-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/es/Mentions/types.d.ts

@@ -10,3 +10,4 @@ export interface AutoSize {
     minRows?: number;
     maxRows?: number;
 }
+export type { LexicalEditor as MentionsEditor, EditorState as MentionsEditorState } from 'lexical';

package/es/Mentions/utils.d.ts

@@ -6,4 +6,4 @@ 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(text: string): string;
+export declare function textToEditorState(initialValue: string, triggers: string[]): () => void;

package/es/Mentions/utils.js

@@ -1,5 +1,7 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { $isTextNode, createCommand } from 'lexical';
+import { $createParagraphNode, $getRoot, $isTextNode, 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');
 export var CLEAR_HIDE_MENU_TIMEOUT = createCommand('CLEAR_HIDE_MENU_TIMEOUT');
@@ -63,33 +65,12 @@ export var decoratorTransform = function decoratorTransform(node, getMatch, crea
     }
   }
 };
-export function textToEditorState(text) {
-  var paragraph = text.split('\n');
-  return JSON.stringify({
-    root: {
-      children: paragraph.map(function (p) {
-        return {
-          children: [{
-            detail: 0,
-            format: 0,
-            mode: 'normal',
-            style: '',
-            text: p,
-            type: 'custom-text',
-            version: 1
-          }],
-          direction: 'ltr',
-          format: '',
-          indent: 0,
-          type: 'paragraph',
-          version: 1
-        };
-      }),
-      direction: 'ltr',
-      format: '',
-      indent: 0,
-      type: 'root',
-      version: 1
-    }
-  });
+export function textToEditorState(initialValue, triggers) {
+  return function () {
+    var root = $getRoot();
+    root.clear();
+    var paragraph = $createParagraphNode();
+    paragraph.append.apply(paragraph, _toConsumableArray($convertToMentionNodes(initialValue, triggers)));
+    root.append(paragraph);
+  };
 }

package/es/MonacoEditor/base/helper.js

@@ -205,7 +205,7 @@ export var useEditor = function useEditor(type, props) {
         setLoading(false);
       }
     });
-  }, []);
+  }, [placeholder]);
   useEffect(function () {
     var _monacoRef$current;
     if (!isEditorReady) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuntijs/ui",
-  "version": "1.1.0-beta.6",
+  "version": "1.1.0-beta.8",
   "description": "☁️ Yunti UI - an open-source UI component library for building Cloud Native web apps",
   "keywords": [
     "yuntijs",
@@ -80,7 +80,6 @@
     ]
   },
   "dependencies": {
-    "@alilc/lowcode-plugin-base-monaco-editor": "^1.1.2",
     "@ant-design/icons": "^5",
     "@babel/runtime": "^7",
     "@lexical/react": "^0.23.1",