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

package/es/ChatItem/index.js

@@ -2,7 +2,7 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["avatarAddon", "onAvatarClick", "avatarProps", "actions", "className", "primary", "loading", "message", "placement", "type", "avatar", "error", "showTitle", "time", "editing", "onChange", "onEditingChange", "messageExtra", "affixation", "renderMessage", "text", "errorMessage", "onDoubleClick", "fontSize", "markdownProps", "markdownClassname", "isLatest"];
+var _excluded = ["avatarAddon", "onAvatarClick", "avatarProps", "actions", "className", "primary", "loading", "message", "placement", "type", "avatar", "error", "showTitle", "time", "editing", "onChange", "onEditingChange", "messageExtra", "affixation", "renderMessage", "text", "errorMessage", "onDoubleClick", "fontSize", "markdownProps", "markdownClassname", "isLatest", "hideAvatar"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import Avatar from '@lobehub/ui/es/chat/ChatItem/components/Avatar';
@@ -48,6 +48,7 @@ export var ChatItem = /*#__PURE__*/memo(function (_ref) {
     markdownProps = _ref.markdownProps,
     markdownClassname = _ref.markdownClassname,
     isLatest = _ref.isLatest,
+    hideAvatar = _ref.hideAvatar,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useResponsive = useResponsive(),
     mobile = _useResponsive.mobile;
@@ -68,7 +69,7 @@ export var ChatItem = /*#__PURE__*/memo(function (_ref) {
     direction: placement === 'left' ? 'horizontal' : 'horizontal-reverse',
     gap: mobile ? 6 : 12
   }, rest), {}, {
-    children: [/*#__PURE__*/_jsx(Avatar, _objectSpread(_objectSpread({}, avatarProps), {}, {
+    children: [hideAvatar ? null : /*#__PURE__*/_jsx(Avatar, _objectSpread(_objectSpread({}, avatarProps), {}, {
       addon: avatarAddon,
       avatar: avatar,
       loading: loading,

package/es/ChatItem/style.js

@@ -16,11 +16,12 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     editing = _ref2.editing,
     time = _ref2.time,
     isLatest = _ref2.isLatest;
-  var blockStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding-block: 8px;\n      padding-inline: 12px;\n\n      background-color: ", ";\n      border-radius: ", "px;\n\n      transition: background-color 100ms ", ";\n    "])), primary ? isDarkMode ? token.colorFill : token.colorBgElevated : isDarkMode ? token.colorFillSecondary : token.colorBgContainer, token.borderRadiusLG, token.motionEaseOut);
+  var blockStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      /* padding-block: 8px;\n      padding-inline: 12px; */\n\n      background-color: ", ";\n      border-radius: ", "px;\n      transition: background-color 100ms ", ";\n    "])), primary ? isDarkMode ? token.colorFill : token.colorBgElevated : isDarkMode ? token.colorFillSecondary : token.colorBgContainer, token.borderRadiusLG, token.motionEaseOut);
   var pureStylish = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      padding-block-start: ", ";\n    "])), title ? 0 : '6px');
   var pureContainerStylish = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      margin-block-end: -16px;\n      transition: background-color 100ms ", ";\n    "])), token.motionEaseOut);
   var typeStylish = type === 'block' ? blockStylish : pureStylish;
   var editingStylish = editing && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        width: 100%;\n      "])));
+  var insetInline = placement === 'right' ? '-4px unset' : 'unset -4px';
   return {
     actions: cx(css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          flex: none;\n          align-self: ", ";\n          justify-content: ", ";\n        "])), placement === 'left' ? 'flex-start' : 'flex-end', placement === 'left' ? 'flex-end' : 'flex-start'), editing && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n            pointer-events: none !important;\n            opacity: 0 !important;\n          "])))),
     avatarContainer: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        position: relative;\n        flex: none;\n        width: ", "px;\n        height: ", "px;\n      "])), avatarSize, avatarSize),
@@ -29,7 +30,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     editingContainer: cx(editingStylish, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          padding-block: 8px 12px;\n          padding-inline: 12px;\n          border: 1px solid ", ";\n\n          &:active,\n          &:hover {\n            border-color: ", ";\n          }\n        "])), token.colorBorderSecondary, token.colorBorder), type === 'pure' && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n            background: ", ";\n            border-radius: ", "px;\n          "])), token.colorFillQuaternary, token.borderRadius)),
     editingInput: css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n        width: 100%;\n      "]))),
     errorContainer: css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n        position: relative;\n        overflow: hidden;\n        width: 100%;\n      "]))),
-    loading: css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n        position: absolute;\n        inset-block-end: 0;\n        inset-inline: ", "\n          ", ";\n\n        width: 16px;\n        height: 16px;\n\n        color: ", ";\n\n        background: ", ";\n        border-radius: 50%;\n      "])), placement === 'right' ? '-4px' : 'unset', placement === 'left' ? '-4px' : 'unset', token.colorBgLayout, token.colorPrimary),
+    loading: css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n        position: absolute;\n        inset-block-end: 0;\n        inset-inline: ", ";\n\n        width: 16px;\n        height: 16px;\n\n        color: ", ";\n\n        background: ", ";\n        border-radius: 50%;\n      "])), insetInline, token.colorBgLayout, token.colorPrimary),
     message: cx(typeStylish, css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n          position: relative;\n          overflow: hidden;\n          max-width: 100%;\n\n          ", " {\n            width: 100%;\n          }\n        "])), responsive.mobile)),
     messageContainer: cx(editingStylish, css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n          position: relative;\n          overflow: hidden;\n          max-width: 100%;\n          margin-block-start: ", "px;\n\n          ", " {\n            overflow-x: auto;\n          }\n        "])), time ? -16 : 0, responsive.mobile)),
     messageContent: cx(editingStylish, css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n          position: relative;\n          overflow: hidden;\n          max-width: 100%;\n\n          ", " {\n            flex-direction: column !important;\n          }\n        "])), responsive.mobile)),

package/es/ChatItem/type.d.ts

@@ -84,4 +84,8 @@ export interface ChatItemProps {
      * @description Whether this message is latest
      */
     isLatest?: boolean;
+    /**
+     * @description Hide avatar
+     */
+    hideAvatar?: boolean;
 }

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.9",
   "description": "☁️ Yunti UI - an open-source UI component library for building Cloud Native web apps",
   "keywords": [
     "yuntijs",