@yuntijs/ui 1.0.0 → 1.1.0-beta.10

package/es/Mentions/plugins/mention-picker/menu-item.js

@@ -1,6 +1,6 @@
 import { Flex } from 'antd';
 import { escapeRegExp } from 'lodash-es';
-import React, { memo, useMemo } from 'react';
+import React, { memo, useEffect, useMemo, useRef } from 'react';
 import Typography from "../../../Typography";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -43,6 +43,22 @@ export var MentionMenuItem = /*#__PURE__*/memo(function (_ref) {
     before = _useMemo.before,
     middle = _useMemo.middle,
     after = _useMemo.after;
+  var ref = useRef(null);
+
+  // 自动滚动
+  useEffect(function () {
+    if (isSelected) {
+      var _ref$current;
+      ref === null || ref === void 0 || (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest'
+      });
+    }
+  }, [isSelected]);
+  useEffect(function () {
+    option.setRefElement(ref === null || ref === void 0 ? void 0 : ref.current);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   return /*#__PURE__*/_jsxs(Flex, {
     align: "center",
     className: styles.menuItem,
@@ -53,14 +69,14 @@ export var MentionMenuItem = /*#__PURE__*/memo(function (_ref) {
     onMouseEnter: function onMouseEnter() {
       return _onMouseEnter === null || _onMouseEnter === void 0 ? void 0 : _onMouseEnter(index, option);
     },
-    ref: option.setRefElement,
+    ref: ref,
     tabIndex: -1,
+    title: option.htmlTitle || option.label,
     children: [showIcon && /*#__PURE__*/_jsx(Flex, {
       className: styles.menuItemIcon,
       children: option.icon
     }), /*#__PURE__*/_jsxs("div", {
       className: styles.menuItemLabel,
-      title: option.label,
       children: [before, /*#__PURE__*/_jsx(Text, {
         mark: true,
         children: middle

package/es/Mentions/plugins/mention-picker/style.js

@@ -7,7 +7,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     prefixCls = _ref.prefixCls;
   var isSelected = _ref2.isSelected,
     disabled = _ref2.disabled;
-  var selectedBg = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      background-color: ", ";\n    "])), token.colorFillSecondary);
+  var selectedBg = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      background-color: ", ";\n    "])), token.colorFillTertiary);
   return {
     anchor: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        z-index: 9999;\n      "]))),
     menuEmpty: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        padding: ", "px;\n      "])), token.padding),

package/es/Mentions/plugins/mention-picker/utils.d.ts

@@ -3,6 +3,7 @@ import { MenuOption } from '@lexical/react/LexicalTypeaheadMenuPlugin';
 export interface MentionMenuOptionInitParams {
     label: string;
     value: string;
+    title?: string;
     data?: any;
     icon?: JSX.Element;
     extraElement?: JSX.Element;
@@ -16,6 +17,7 @@ export interface MentionMenuOptionInitParams {
 export declare class MentionMenuOption extends MenuOption {
     label: string;
     value: string;
+    htmlTitle?: string;
     title: string;
     key: string;
     icon?: JSX.Element;
@@ -27,5 +29,5 @@ export declare class MentionMenuOption extends MenuOption {
     data?: any;
     children?: MentionMenuOption[];
     isChild?: boolean;
-    constructor({ label, value, data, icon, extraElement, keywords, keyboardShortcut, disabled, onSelect, children, isChild, }: MentionMenuOptionInitParams);
+    constructor({ label, value, title, data, icon, extraElement, keywords, keyboardShortcut, disabled, onSelect, children, isChild, }: MentionMenuOptionInitParams);
 }

package/es/Mentions/plugins/mention-picker/utils.js

@@ -17,6 +17,7 @@ export var MentionMenuOption = /*#__PURE__*/function (_MenuOption) {
     var _this;
     var label = _ref.label,
       value = _ref.value,
+      title = _ref.title,
       data = _ref.data,
       icon = _ref.icon,
       extraElement = _ref.extraElement,
@@ -30,6 +31,7 @@ export var MentionMenuOption = /*#__PURE__*/function (_MenuOption) {
     _this = _super.call(this, value);
     _defineProperty(_assertThisInitialized(_this), "label", void 0);
     _defineProperty(_assertThisInitialized(_this), "value", void 0);
+    _defineProperty(_assertThisInitialized(_this), "htmlTitle", void 0);
     // for Tree, the same as label
     _defineProperty(_assertThisInitialized(_this), "title", void 0);
     // for Tree, the same as value
@@ -45,6 +47,7 @@ export var MentionMenuOption = /*#__PURE__*/function (_MenuOption) {
     _defineProperty(_assertThisInitialized(_this), "isChild", void 0);
     _this.value = value;
     _this.label = label;
+    _this.htmlTitle = title;
     _this.title = label;
     _this.key = value;
     _this.keywords = keywords || [];

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/style.d.ts

@@ -1,6 +1,7 @@
 import { AutoSize } from './types';
 export declare const useStyles: (props?: {
     autoSize?: AutoSize | undefined;
+    code: boolean;
 } | undefined) => import("antd-style").ReturnStyles<{
     wrapper: import("antd-style").SerializedStyles;
     placeholder: import("antd-style").SerializedStyles;

package/es/Mentions/style.js

@@ -8,13 +8,13 @@ var calculateHeight = function calculateHeight(rows) {
 };
 export var useStyles = createStyles(function (_ref, _ref2) {
   var css = _ref.css,
-    token = _ref.token,
-    prefixCls = _ref.prefixCls;
-  var autoSize = _ref2.autoSize;
+    token = _ref.token;
+  var autoSize = _ref2.autoSize,
+    code = _ref2.code;
   return {
     wrapper: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        position: relative;\n        display: inline-block;\n        width: 100%;\n        min-width: 0;\n      "]))),
     placeholder: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        pointer-events: none;\n        user-select: none;\n\n        position: absolute;\n        top: 0;\n        left: 13px;\n\n        height: ", "px;\n\n        font-size: ", "px;\n        line-height: ", "px;\n        color: ", ";\n      "])), inputHeight, token.fontSize, inputHeight, token.colorTextPlaceholder),
-    root: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        outline: none;\n        border: 1px solid ", ";\n        border-radius: ", "px;\n\n        margin: 0;\n        padding: 4px 11px;\n\n        color: ", ";\n        font-size: ", "px;\n        font-family: ", ";\n\n        display: inline-block;\n\n        width: 100%;\n        min-width: 0;\n\n        ", "\n        ", "\n        overflow: auto;\n\n        transition: all ", ";\n        &:focus {\n          border-color: ", ";\n        }\n        p {\n          margin-bottom: 0;\n          margin-block: 0 0;\n          line-height: ", "px;\n        }\n      "])), token.colorBorder, token.borderRadius, token.colorText, token.fontSize, token.fontFamily, (autoSize === null || autoSize === void 0 ? void 0 : autoSize.minRows) && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          min-height: ", "px;\n        "])), calculateHeight(autoSize.minRows)), (autoSize === null || autoSize === void 0 ? void 0 : autoSize.maxRows) && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          max-height: ", "px;\n        "])), calculateHeight(autoSize.maxRows)), token.motionDurationMid, token.colorPrimaryBorder, lineHeight),
+    root: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        outline: none;\n        border: 1px solid ", ";\n        border-radius: ", "px;\n\n        margin: 0;\n        padding: 4px 11px;\n\n        color: ", ";\n        font-size: ", "px;\n        .align-middle {\n          vertical-align: middle;\n        }\n        font-family: ", ";\n\n        display: inline-block;\n\n        width: 100%;\n        min-width: 0;\n\n        ", "\n        ", "\n        overflow: auto;\n\n        transition: all ", ";\n        &:focus {\n          border-color: ", ";\n        }\n        p {\n          margin-bottom: 0;\n          margin-block: 0 0;\n          line-height: ", "px;\n        }\n      "])), token.colorBorder, token.borderRadius, token.colorText, token.fontSize, code ? token.fontFamilyCode : token.fontFamily, (autoSize === null || autoSize === void 0 ? void 0 : autoSize.minRows) && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          min-height: ", "px;\n        "])), calculateHeight(autoSize.minRows)), (autoSize === null || autoSize === void 0 ? void 0 : autoSize.maxRows) && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          max-height: ", "px;\n        "])), calculateHeight(autoSize.maxRows)), token.motionDurationMid, token.colorPrimaryBorder, lineHeight),
     filled: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        background: ", ";\n        border-color: transparent;\n        &:hover {\n          background: ", ";\n        }\n        &:focus {\n          background: ", ";\n        }\n      "])), token.colorFillTertiary, token.colorFillSecondary, token.colorBgBase),
     borderless: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        background: transparent;\n        border: none;\n      "]))),
     disabled: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        cursor: not-allowed;\n        color: ", ";\n        background: ", ";\n      "])), token.colorTextDisabled, token.colorBgContainerDisabled)

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.d.ts

@@ -38,14 +38,18 @@ export interface IGeneralManacoEditorProps {
     /** style of wrapper */
     style?: CSSProperties;
     enhancers?: EditorEnhancer[];
+    placeholder?: string;
 }
 export interface ISingleMonacoEditorProps extends IGeneralManacoEditorProps {
     onChange?: (input: string, event: IEditor.IModelContentChangedEvent) => void;
+    onBlur?: (input: string, event: any) => void;
     supportFullScreen?: boolean;
+    onFullScreenChange?: (isFullScreen: boolean) => void;
 }
 export interface IDiffMonacoEditorProps extends IGeneralManacoEditorProps {
     onChange?: (input: string, event: IEditor.IModelContentChangedEvent) => void;
     supportFullScreen?: boolean;
+    onFullScreenChange?: (isFullScreen: boolean) => void;
     original?: string;
 }
 export declare const WORD_EDITOR_INITIALIZING: string;

package/es/MonacoEditor/base/helper.js

@@ -90,7 +90,8 @@ export var useEditor = function useEditor(type, props) {
     language = props.language,
     saveViewState = props.saveViewState,
     defaultValue = props.defaultValue,
-    enhancers = props.enhancers;
+    enhancers = props.enhancers,
+    placeholder = props.placeholder;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isEditorReady = _useState2[0],
@@ -158,20 +159,28 @@ export var useEditor = function useEditor(type, props) {
       if (!containerRef.current) {
         return;
       }
+      if (editorRef.current) {
+        editorRef.current.dispose();
+        decomposeRef.current = false;
+      }
       var editor;
       if (typeRef.current === 'single') {
         var _ref, _valueRef$current;
         var model = getOrCreateModel(monaco, (_ref = (_valueRef$current = valueRef.current) !== null && _valueRef$current !== void 0 ? _valueRef$current : defaultValueRef.current) !== null && _ref !== void 0 ? _ref : '', languageRef.current, pathRef.current);
         editor = monaco.editor.create(containerRef.current, _objectSpread(_objectSpread({
           automaticLayout: true
-        }, INITIAL_OPTIONS), optionRef.current));
+        }, INITIAL_OPTIONS), {}, {
+          placeholder: placeholder
+        }, optionRef.current));
         editor.setModel(model);
       } else {
         var originalModel = monaco.editor.createModel(valueRef.current, languageRef.current);
         var modifiedModel = monaco.editor.createModel(valueRef.current, languageRef.current);
         editor = monaco.editor.createDiffEditor(containerRef.current, _objectSpread(_objectSpread({
           automaticLayout: true
-        }, DIFF_EDITOR_INITIAL_OPTIONS), optionRef.current));
+        }, DIFF_EDITOR_INITIAL_OPTIONS), {}, {
+          placeholder: placeholder
+        }, optionRef.current));
         editor.setModel({
           original: originalModel,
           modified: modifiedModel
@@ -196,7 +205,7 @@ export var useEditor = function useEditor(type, props) {
         setLoading(false);
       }
     });
-  }, []);
+  }, [placeholder]);
   useEffect(function () {
     var _monacoRef$current;
     if (!isEditorReady) {

package/es/MonacoEditor/base/index.d.ts

@@ -8,7 +8,7 @@ export declare const SingleMonacoEditorComponent: React.FC<ISingleMonacoEditorPr
     variant?: "filled" | "borderless" | "outlined" | undefined;
 }> & {
     displayName: string;
-    defaultProps: {
+    default: {
         width: string;
         height: number;
         defaultValue: string;
@@ -23,7 +23,7 @@ export declare const SingleMonacoEditorComponent: React.FC<ISingleMonacoEditorPr
         variant?: "filled" | "borderless" | "outlined" | undefined;
     }> & {
         displayName: string;
-        defaultProps: {
+        default: {
             width: string;
             height: number;
             defaultValue: string;

package/es/MonacoEditor/base/index.js

@@ -1,7 +1,7 @@
 import { Icon } from '@lobehub/ui';
 import { Button } from 'antd';
 import { Maximize2, Minimize2 } from 'lucide-react';
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { INITIAL_OPTIONS, WORD_EDITOR_INITIALIZING, useEditor, useFullScreen } from "./helper";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -12,12 +12,15 @@ function noop() {}
 var SingleMonacoEditor = function SingleMonacoEditor(props) {
   var _props$options;
   var onChange = props.onChange,
+    onBlur = props.onBlur,
     enableOutline = props.enableOutline,
     width = props.width,
     height = props.height,
     language = props.language,
-    supportFullScreen = props.supportFullScreen;
+    supportFullScreen = props.supportFullScreen,
+    onFullScreenChange = props.onFullScreenChange;
   var onChangeRef = useRef(onChange);
+  var onBlurRef = useRef(onBlur);
   var _useEditor = useEditor('single', props),
     isEditorReady = _useEditor.isEditorReady,
     focused = _useEditor.focused,
@@ -27,6 +30,7 @@ var SingleMonacoEditor = function SingleMonacoEditor(props) {
     editorRef = _useEditor.editorRef,
     valueRef = _useEditor.valueRef;
   var subscriptionRef = useRef();
+  var subscriptionBlurRef = useRef();
   var _useFullScreen = useFullScreen(editorRef === null || editorRef === void 0 ? void 0 : editorRef.current),
     isFullScreen = _useFullScreen.isFullScreen,
     fullScreen = _useFullScreen.fullScreen;
@@ -50,9 +54,12 @@ var SingleMonacoEditor = function SingleMonacoEditor(props) {
   useEffect(function () {
     onChangeRef.current = onChange;
   }, [onChange]);
+  useEffect(function () {
+    onBlurRef.current = onBlur;
+  }, [onBlur]);
   useEffect(function () {
     if (isEditorReady) {
-      var _subscriptionRef$curr;
+      var _subscriptionRef$curr, _subscriptionBlurRef$;
       var editorInstance = editorRef.current;
       (_subscriptionRef$curr = subscriptionRef.current) === null || _subscriptionRef$curr === void 0 || _subscriptionRef$curr.dispose();
       subscriptionRef.current = editorInstance === null || editorInstance === void 0 ? void 0 : editorInstance.onDidChangeModelContent(function (event) {
@@ -63,14 +70,21 @@ var SingleMonacoEditor = function SingleMonacoEditor(props) {
           (_onChangeRef$current = onChangeRef.current) === null || _onChangeRef$current === void 0 || _onChangeRef$current.call(onChangeRef, editorValue, event);
         }
       });
+      (_subscriptionBlurRef$ = subscriptionBlurRef.current) === null || _subscriptionBlurRef$ === void 0 || _subscriptionBlurRef$.dispose();
+      subscriptionBlurRef.current = editorInstance === null || editorInstance === void 0 ? void 0 : editorInstance.onDidBlurEditorText(function (event) {
+        var _editorInstance$getMo2, _onBlurRef$current;
+        var editorValue = editorInstance === null || editorInstance === void 0 || (_editorInstance$getMo2 = editorInstance.getModel()) === null || _editorInstance$getMo2 === void 0 ? void 0 : _editorInstance$getMo2.getValue();
+        (_onBlurRef$current = onBlurRef.current) === null || _onBlurRef$current === void 0 || _onBlurRef$current.call(onBlurRef, editorValue, event);
+      });
     }
   }, [editorRef, isEditorReady, subscriptionRef, valueRef]);
   useEffect(function () {
     return function () {
-      var _subscriptionRef$curr2, _editorInstance$getMo2, _editorRef$current;
+      var _subscriptionRef$curr2, _subscriptionBlurRef$2, _editorInstance$getMo3, _editorRef$current;
       var editorInstance = editorRef.current;
       (_subscriptionRef$curr2 = subscriptionRef.current) === null || _subscriptionRef$curr2 === void 0 || _subscriptionRef$curr2.dispose();
-      editorInstance === null || editorInstance === void 0 || (_editorInstance$getMo2 = editorInstance.getModel()) === null || _editorInstance$getMo2 === void 0 || _editorInstance$getMo2.dispose();
+      (_subscriptionBlurRef$2 = subscriptionBlurRef.current) === null || _subscriptionBlurRef$2 === void 0 || _subscriptionBlurRef$2.dispose();
+      editorInstance === null || editorInstance === void 0 || (_editorInstance$getMo3 = editorInstance.getModel()) === null || _editorInstance$getMo3 === void 0 || _editorInstance$getMo3.dispose();
       // eslint-disable-next-line react-hooks/exhaustive-deps
       (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 || _editorRef$current.dispose();
     };
@@ -86,6 +100,10 @@ var SingleMonacoEditor = function SingleMonacoEditor(props) {
       (_monacoRef$current = monacoRef.current) === null || _monacoRef$current === void 0 || _monacoRef$current.editor.setModelLanguage(model, language);
     }
   }, [editorRef, isEditorReady, language, monacoRef]);
+  var fullScreenChange = useCallback(function () {
+    onFullScreenChange === null || onFullScreenChange === void 0 || onFullScreenChange(!isFullScreen);
+    fullScreen();
+  }, [fullScreen, isFullScreen, onFullScreenChange]);
   return /*#__PURE__*/_jsxs("div", {
     className: className,
     style: props.style,
@@ -101,7 +119,7 @@ var SingleMonacoEditor = function SingleMonacoEditor(props) {
         icon: /*#__PURE__*/_jsx(Icon, {
           icon: isFullScreen ? Minimize2 : Maximize2
         }),
-        onClick: fullScreen,
+        onClick: fullScreenChange,
         size: "small",
         type: "text"
       })
@@ -115,7 +133,8 @@ var DiffMonacoEditor = function DiffMonacoEditor(props) {
     language = props.language,
     onChange = props.onChange,
     original = props.original,
-    supportFullScreen = props.supportFullScreen;
+    supportFullScreen = props.supportFullScreen,
+    onFullScreenChange = props.onFullScreenChange;
   var onChangeRef = useRef(onChange);
   var _useEditor2 = useEditor('diff', props),
     isEditorReady = _useEditor2.isEditorReady,
@@ -184,6 +203,10 @@ var DiffMonacoEditor = function DiffMonacoEditor(props) {
     (_monacoRef$current2 = monacoRef.current) === null || _monacoRef$current2 === void 0 || _monacoRef$current2.editor.setModelLanguage(originalModel, language);
     (_monacoRef$current3 = monacoRef.current) === null || _monacoRef$current3 === void 0 || _monacoRef$current3.editor.setModelLanguage(modifiedModel, language);
   }, [editorRef, isEditorReady, language, monacoRef]);
+  var fullScreenChange = useCallback(function () {
+    onFullScreenChange === null || onFullScreenChange === void 0 || onFullScreenChange(!isFullScreen);
+    fullScreen();
+  }, [fullScreen, isFullScreen, onFullScreenChange]);
   return /*#__PURE__*/_jsxs("div", {
     className: className,
     style: props.style,
@@ -199,7 +222,7 @@ var DiffMonacoEditor = function DiffMonacoEditor(props) {
         icon: /*#__PURE__*/_jsx(Icon, {
           icon: isFullScreen ? Minimize2 : Maximize2
         }),
-        onClick: fullScreen,
+        onClick: fullScreenChange,
         size: "small",
         type: "text"
       })
@@ -208,7 +231,7 @@ var DiffMonacoEditor = function DiffMonacoEditor(props) {
 };
 var DiffMonacoEditorComponent = Object.assign(DiffMonacoEditor, {
   displayName: 'DiffMonacoEditor',
-  defaultProps: {
+  default: {
     width: '100%',
     height: 150,
     defaultValue: '',
@@ -222,7 +245,7 @@ var DiffMonacoEditorComponent = Object.assign(DiffMonacoEditor, {
 });
 export var SingleMonacoEditorComponent = Object.assign(SingleMonacoEditor, {
   displayName: 'SingleMonacoEditor',
-  defaultProps: {
+  default: {
     width: '100%',
     height: 150,
     defaultValue: '',

package/es/MonacoEditor/base/style.js

@@ -34,7 +34,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     }
   };
   return {
-    base: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        position: relative;\n\n        box-sizing: content-box;\n        min-height: 100px;\n\n        background-color: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n        &:hover {\n          border-color: ", ";\n          ", "\n        }\n\n        &.ve-focused {\n          ", "\n          ", "\n        }\n\n        &.ve-outline {\n          border: 1px solid var(--color-field-border, rgba(31, 56, 88, 0.05)) !important;\n        }\n\n        & > .react-monaco-editor-container {\n          width: 100%;\n          height: 100%;\n          min-height: 100px;\n          background: transparent;\n\n          ", "\n\n          .monaco-editor,\n          .monaco-editor-background,\n          .monaco-editor .inputarea.ime-input,\n          .monaco-editor .margin {\n            ", "\n          }\n\n          & > .monaco-editor {\n            border-radius: ", "px;\n            .overflow-guard,\n            .margin {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n            .monaco-scrollable-element {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n          .monaco-diff-editor {\n            border-radius: ", "px;\n            & > .original > .monaco-editor {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n              .overflow-guard,\n              .margin {\n                border-top-left-radius: ", "px;\n                border-bottom-left-radius: ", "px;\n              }\n            }\n            .diffViewport {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n        }\n\n        .syntaxTips {\n          position: absolute;\n          bottom: 0;\n          left: 0;\n\n          box-sizing: border-box;\n          width: 100%;\n          max-height: 0;\n          margin: 0;\n          padding: 10px 30px;\n\n          color: ", ";\n\n          background: ", ";\n\n          transition: 0.2s ease max-height;\n        }\n\n        .syntaxTips:hover {\n          overflow: auto;\n          max-height: 50%;\n        }\n\n        .syntaxTips .infoIcon {\n          position: absolute;\n          top: 2px;\n          right: 5px;\n          transform: rotateY(180deg);\n\n          width: 20px;\n          height: 16px;\n        }\n      "])), getBgColor(), variant === 'outlined' ? token.colorBorder : 'transparent', token.borderRadius, variant === 'outlined' ? token.colorPrimaryHover : 'transparent', variant === 'filled' && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            background-color: ", ";\n          "])), token.colorFillSecondary), variant === 'filled' && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n            background-color: ", ";\n          "])), token.colorBgBase), variant !== 'borderless' && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n            border-color: ", ";\n          "])), token.colorPrimaryActive), isFullScreen && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n            position: fixed;\n            z-index: 9998;\n            inset: 0;\n\n            width: auto !important;\n            height: auto !important;\n          "]))), !isFullScreen && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n              background-color: transparent;\n            "]))), token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius - 1, token.borderRadius - 1, token.colorErrorText, token.colorErrorBg),
+    base: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        position: relative;\n\n        box-sizing: content-box;\n        min-height: 100px;\n\n        background-color: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n        &:hover {\n          border-color: ", ";\n          ", "\n        }\n\n        &.ve-focused {\n          ", "\n          ", "\n        }\n\n        &.ve-outline {\n          border: 1px solid var(--color-field-border, rgba(31, 56, 88, 0.05)) !important;\n        }\n\n        & > .react-monaco-editor-container {\n          width: 100%;\n          height: 100%;\n          min-height: 100px;\n          background: transparent;\n\n          ", "\n\n          .monaco-editor,\n          .monaco-editor-background,\n          .monaco-editor .inputarea.ime-input,\n          .monaco-editor .margin {\n            ", "\n          }\n\n          & > .monaco-editor {\n            border-radius: ", "px;\n            outline: none;\n            .overflow-guard,\n            .margin {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n            .monaco-scrollable-element {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n          .monaco-diff-editor {\n            border-radius: ", "px;\n            & > .gutter {\n              outline: none;\n            }\n            & > .original > .monaco-editor {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n              outline: none;\n              .overflow-guard,\n              .margin {\n                border-top-left-radius: ", "px;\n                border-bottom-left-radius: ", "px;\n              }\n            }\n            & > .modified > .monaco-editor {\n              outline: none;\n            }\n            .diffViewport {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n              outline: none;\n            }\n          }\n        }\n\n        .syntaxTips {\n          position: absolute;\n          bottom: 0;\n          left: 0;\n\n          box-sizing: border-box;\n          width: 100%;\n          max-height: 0;\n          margin: 0;\n          padding: 10px 30px;\n\n          color: ", ";\n\n          background: ", ";\n\n          transition: 0.2s ease max-height;\n        }\n\n        .syntaxTips:hover {\n          overflow: auto;\n          max-height: 50%;\n        }\n\n        .syntaxTips .infoIcon {\n          position: absolute;\n          top: 2px;\n          right: 5px;\n          transform: rotateY(180deg);\n\n          width: 20px;\n          height: 16px;\n        }\n      "])), getBgColor(), variant === 'outlined' ? token.colorBorder : 'transparent', token.borderRadius, variant === 'outlined' ? token.colorPrimaryHover : 'transparent', variant === 'filled' && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            background-color: ", ";\n          "])), token.colorFillSecondary), variant === 'filled' && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n            background-color: ", ";\n          "])), token.colorBgBase), variant !== 'borderless' && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n            border-color: ", ";\n          "])), token.colorPrimaryActive), isFullScreen && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n            position: fixed;\n            z-index: 9998;\n            inset: 0;\n\n            width: auto !important;\n            height: auto !important;\n          "]))), !isFullScreen && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n              background-color: transparent;\n            "]))), token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius - 1, token.borderRadius - 1, token.colorErrorText, token.colorErrorBg),
     fullScreenBtn: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        &.", "-btn {\n          position: absolute;\n          top: 20px;\n          color: ", ";\n          transition: none;\n          ", "\n        }\n      "])), prefixCls, token.colorTextSecondary, isFullScreen ? css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n                z-index: 9999;\n                right: ", "px;\n              "])), diff ? 64 : 138) : css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n                right: ", "px;\n              "])), minimapEnabled || diff ? 64 : 20)),
     loading: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n        position: absolute;\n        inset: 0;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        font-size: ", "px;\n        color: ", ";\n\n        background-color: transparent;\n\n        &::after {\n          content: '';\n          width: 16px;\n          /* display: inline; */\n          animation: ", " steps(3) 1s infinite;\n        }\n      "])), token.fontSizeSM, token.colorTextTertiary, dots)
   };

package/es/MonacoEditor/index.js

@@ -28,7 +28,7 @@ export var BaseMonacoEditor = function BaseMonacoEditor(props) {
     _props$minimapEnabled = props.minimapEnabled,
     minimapEnabled = _props$minimapEnabled === void 0 ? false : _props$minimapEnabled,
     _props$version = props.version,
-    version = _props$version === void 0 ? '0.45.0' : _props$version,
+    version = _props$version === void 0 ? '0.52.2' : _props$version,
     _props$requireConfig = props.requireConfig,
     requireConfigFromProps = _props$requireConfig === void 0 ? {} : _props$requireConfig,
     options = props.options,

package/es/SelectCard/index.js

@@ -107,7 +107,7 @@ export var SelectCard = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }), o.label && !selected && /*#__PURE__*/_jsx(Text, {
         ellipsis: true,
         children: o.label
-      }), !isImg && o.description && /*#__PURE__*/_jsx(Paragraph, {
+      }), o.description && /*#__PURE__*/_jsx(Paragraph, {
         ellipsis: {
           rows: 2
         },

package/es/hooks/useHighlight.d.ts

@@ -1,5 +1,3 @@
 export declare const FALLBACK_LANG = "txt";
-export declare const useHighlight: (text: string, lang: string, isDarkMode: boolean) => import("swr/dist/_internal").SWRResponse<string, any, {
-    revalidateOnFocus: false;
-}>;
+export declare const useHighlight: (text: string, lang: string, enableTransformer?: boolean) => import("swr/dist/_internal").SWRResponse<string, any, any>;
 export { languageMap } from './languageMap';