@yuntijs/ui 1.0.0 → 1.1.0

package/es/Mentions/index.d.ts

@@ -19,5 +19,7 @@ export interface MentionsProps extends MentionPickerPluginProps {
     onFocus?: () => void;
     variant?: 'outlined' | 'filled' | 'borderless';
     autoSize?: AutoSize;
+    code?: boolean;
+    getPopContainer?: () => HTMLElement;
 }
 export declare const Mentions: React.FC<MentionsProps>;

package/es/Mentions/index.js

@@ -8,6 +8,8 @@ import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
 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 { isBrowser } from "../utils/tools";
@@ -44,11 +46,15 @@ export var Mentions = function Mentions(_ref) {
     allowSpaces = _ref.allowSpaces,
     punctuation = _ref.punctuation,
     preTriggerChars = _ref.preTriggerChars,
-    onSelect = _ref.onSelect;
+    onSelect = _ref.onSelect,
+    _ref$code = _ref.code,
+    code = _ref$code === void 0 ? false : _ref$code,
+    getPopContainer = _ref.getPopContainer;
   var _ConfigProvider$useCo = ConfigProvider.useConfig(),
     componentDisabled = _ConfigProvider$useCo.componentDisabled;
   var _useStyles = useStyles({
-      autoSize: autoSize
+      autoSize: autoSize,
+      code: code
     }),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
@@ -103,6 +109,14 @@ export var Mentions = function Mentions(_ref) {
     };
     return buildMap(options);
   }, [options]);
+  var parent = useMemo(function () {
+    if (!isBrowser) {
+      return;
+    }
+    if (document.fullscreenElement) {
+      return document.fullscreenElement;
+    }
+  }, []);
   if (!isBrowser) {
     return /*#__PURE__*/_jsxs("div", {
       className: cx(styles.wrapper, classNames === null || classNames === void 0 ? void 0 : classNames.wrapper),
@@ -140,6 +154,7 @@ export var Mentions = function Mentions(_ref) {
           onSelect: onSelect,
           options: options,
           overlayClassName: classNames === null || classNames === void 0 ? void 0 : classNames.menuOverlay,
+          parent: parent,
           preTriggerChars: preTriggerChars,
           punctuation: punctuation,
           triggers: triggers

package/es/Mentions/plugins/mention-node/component.js

@@ -47,7 +47,7 @@ export var MentionNodeComponent = /*#__PURE__*/memo(function (_ref) {
       }), /*#__PURE__*/_jsx(Flex, {
         className: styles.text,
         gap: 2,
-        title: (option === null || option === void 0 ? void 0 : option.label) || variable,
+        title: (option === null || option === void 0 ? void 0 : option.selectedLabel) || (option === null || option === void 0 ? void 0 : option.label) || variable,
         children: /*#__PURE__*/_jsx("span", {
           children: (option === null || option === void 0 ? void 0 : option.selectedLabel) || (option === null || option === void 0 ? void 0 : option.label) || variable
         })

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

@@ -32,6 +32,7 @@ export var useOptions = function useOptions(allOptions, queryString) {
   var options = useMemo(function () {
     var _addOnselect = function _addOnselect(option) {
       var menuOption = _objectSpread(_objectSpread({}, option), {}, {
+        title: option.title || option.selectedLabel,
         children: undefined,
         onSelect: function onSelect() {
           editor.dispatchCommand(INSERT_MENTION_COMMAND, option.value);

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

@@ -35,5 +35,9 @@ export interface MentionPickerPluginProps {
      * When mention selected, this func will be called
      */
     onSelect?: (option: MentionMenuOption, trigger: string | null, queryString: string | null) => void;
+    /**
+     * Parent element
+     */
+    parent?: HTMLElement;
 }
 export declare const MentionPickerPlugin: React.FC<MentionPickerPluginProps>;

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

@@ -1,12 +1,10 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 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';
-// @Todo: 目前不支持上下键选中 children，后续支持可能需要定制 menu 和 plugin
-// import type { MenuRenderFn } from '../LexicalTypeaheadMenuPlugin';
-// import { LexicalTypeaheadMenuPlugin } from '../LexicalTypeaheadMenuPlugin';
-
-import React, { memo, useCallback, useState } from 'react';
+import { flatMap } from 'lodash-es';
+import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { DEFAULT_PUNCTUATION, PRE_TRIGGER_CHARS } from "../../constants";
 import { useCheckForMentionMatch } from "../../hooks";
@@ -27,7 +25,8 @@ export var MentionPickerPlugin = /*#__PURE__*/memo(function (_ref) {
     punctuation = _ref$punctuation === void 0 ? DEFAULT_PUNCTUATION : _ref$punctuation,
     _ref$preTriggerChars = _ref.preTriggerChars,
     preTriggerChars = _ref$preTriggerChars === void 0 ? PRE_TRIGGER_CHARS : _ref$preTriggerChars,
-    onSelect = _ref.onSelect;
+    onSelect = _ref.onSelect,
+    parent = _ref.parent;
   var _useStyles = useStyles({}),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
@@ -47,6 +46,14 @@ export var MentionPickerPlugin = /*#__PURE__*/memo(function (_ref) {
     setQueryString = _useState2[1];
   var _useOptions = useOptions(allOptions, queryString),
     options = _useOptions.options;
+  var flatOptions = useMemo(function () {
+    var _flattenTree = function _flattenTree(nodes) {
+      return flatMap(nodes, function (node) {
+        return [node].concat(_toConsumableArray(node.children ? _flattenTree(node.children) : []));
+      });
+    };
+    return _flattenTree(options);
+  }, [options]);
   var onSelectOption = useCallback(function (selectedOption, nodeToRemove, closeMenu, matchingString) {
     onSelect === null || onSelect === void 0 || onSelect(selectedOption, trigger, queryString);
     editor.update(function () {
@@ -59,9 +66,36 @@ export var MentionPickerPlugin = /*#__PURE__*/memo(function (_ref) {
       closeMenu();
     });
   }, [editor, onSelect, queryString, trigger]);
+  var preSelectedIndex = useRef();
+  var handleDisabledItem = useCallback(function (itemProps) {
+    var selectedIndex = itemProps.selectedIndex,
+      setHighlightedIndex = itemProps.setHighlightedIndex;
+    if (selectedIndex !== null) {
+      var _flatOptions$selected;
+      if ((_flatOptions$selected = flatOptions[selectedIndex]) !== null && _flatOptions$selected !== void 0 && _flatOptions$selected.disabled) {
+        var newIndex = selectedIndex;
+        // 如果是最后一项，则回到第一项
+        if (selectedIndex === flatOptions.length - 1) {
+          newIndex = flatOptions.length === 1 ? null : 0;
+          // @ts-ignore
+          setHighlightedIndex(newIndex);
+        } else if (selectedIndex !== preSelectedIndex.current) {
+          var _preSelectedIndex$cur;
+          if (selectedIndex > ((_preSelectedIndex$cur = preSelectedIndex.current) !== null && _preSelectedIndex$cur !== void 0 ? _preSelectedIndex$cur : 0)) {
+            newIndex++;
+          } else {
+            newIndex--;
+          }
+          setHighlightedIndex(newIndex);
+        }
+      }
+      preSelectedIndex.current = selectedIndex;
+    }
+  }, [flatOptions]);
   var renderMenuTree = useCallback(function (itemProps) {
     var selectedIndex = itemProps.selectedIndex,
       selectOptionAndCleanUp = itemProps.selectOptionAndCleanUp;
+    handleDisabledItem(itemProps);
     return /*#__PURE__*/_jsx(ConfigProvider, {
       theme: {
         components: {
@@ -69,7 +103,8 @@ export var MentionPickerPlugin = /*#__PURE__*/memo(function (_ref) {
             indentSize: 16,
             lineHeight: 32,
             titleHeight: 32,
-            paddingXS: 0
+            paddingXS: 0,
+            nodeHoverBg: 'transparent'
           }
         }
       },
@@ -86,9 +121,9 @@ export var MentionPickerPlugin = /*#__PURE__*/memo(function (_ref) {
           selectOptionAndCleanUp(info.node);
         },
         titleRender: function titleRender(option) {
-          var _options;
+          var _flatOptions;
           return /*#__PURE__*/_jsx(MentionMenuItem, {
-            isSelected: ((_options = options[selectedIndex]) === null || _options === void 0 ? void 0 : _options.value) === option.value,
+            isSelected: ((_flatOptions = flatOptions[selectedIndex]) === null || _flatOptions === void 0 ? void 0 : _flatOptions.value) === option.value,
             option: option,
             queryString: queryString,
             showIcon: !option.isChild
@@ -97,11 +132,12 @@ export var MentionPickerPlugin = /*#__PURE__*/memo(function (_ref) {
         treeData: options
       })
     });
-  }, [options, editor, queryString]);
+  }, [handleDisabledItem, options, editor, flatOptions, queryString]);
   var renderMenu = useCallback(function (anchorElementRef, itemProps, _matchingString) {
     var selectedIndex = itemProps.selectedIndex,
       selectOptionAndCleanUp = itemProps.selectOptionAndCleanUp,
       setHighlightedIndex = itemProps.setHighlightedIndex;
+    handleDisabledItem(itemProps);
     if (anchorElementRef.current) {
       return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/_jsx("div", {
         className: cx(styles.menuOverlay, overlayClassName),
@@ -125,13 +161,14 @@ export var MentionPickerPlugin = /*#__PURE__*/memo(function (_ref) {
       }), anchorElementRef.current);
     }
     return null;
-  }, [cx, options, overlayClassName, queryString, renderMenuTree, styles.menuOverlay]);
+  }, [cx, handleDisabledItem, options, overlayClassName, queryString, renderMenuTree, styles.menuOverlay]);
   return /*#__PURE__*/_jsx(LexicalTypeaheadMenuPlugin, {
     anchorClassName: styles.anchor,
     menuRenderFn: renderMenu,
     onQueryChange: setQueryString,
     onSelectOption: onSelectOption,
-    options: options,
+    options: flatOptions,
+    parent: parent,
     triggerFn: checkForMentionMatch
   });
 });

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/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/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],
@@ -164,14 +165,18 @@ export var useEditor = function useEditor(type, props) {
         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

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

@@ -1,6 +1,6 @@
 {
   "name": "@yuntijs/ui",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "☁️ Yunti UI - an open-source UI component library for building Cloud Native web apps",
   "keywords": [
     "yuntijs",
@@ -130,7 +130,7 @@
     "jsdom": "^22",
     "lint-staged": "^15",
     "mdast-util-to-markdown": "^2.1.2",
-    "monaco-editor": "^0.45.0",
+    "monaco-editor": "^0.52.2",
     "prettier": "^3",
     "react": "^18",
     "react-dom": "^18",