@yuntijs/ui 1.0.0-beta.7 → 1.0.0-beta.71

package/es/MonacoEditor/base/index.js

@@ -0,0 +1,236 @@
+import { Icon } from '@lobehub/ui';
+import { Button } from 'antd';
+import { Maximize2, Minimize2 } from 'lucide-react';
+import React, { 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";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export * from "./controller";
+export * from "./monaco";
+function noop() {}
+var SingleMonacoEditor = function SingleMonacoEditor(props) {
+  var _props$options;
+  var onChange = props.onChange,
+    enableOutline = props.enableOutline,
+    width = props.width,
+    height = props.height,
+    language = props.language,
+    supportFullScreen = props.supportFullScreen;
+  var onChangeRef = useRef(onChange);
+  var _useEditor = useEditor('single', props),
+    isEditorReady = _useEditor.isEditorReady,
+    focused = _useEditor.focused,
+    loading = _useEditor.loading,
+    containerRef = _useEditor.containerRef,
+    monacoRef = _useEditor.monacoRef,
+    editorRef = _useEditor.editorRef,
+    valueRef = _useEditor.valueRef;
+  var subscriptionRef = useRef();
+  var _useFullScreen = useFullScreen(editorRef === null || editorRef === void 0 ? void 0 : editorRef.current),
+    isFullScreen = _useFullScreen.isFullScreen,
+    fullScreen = _useFullScreen.fullScreen;
+  var _useStyles = useStyles({
+      isFullScreen: isFullScreen,
+      minimapEnabled: (_props$options = props.options) === null || _props$options === void 0 || (_props$options = _props$options.minimap) === null || _props$options === void 0 ? void 0 : _props$options.enabled
+    }),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles;
+  var className = cx(styles.base, props.className, {
+    've-focused': focused,
+    've-outline': enableOutline
+  });
+  var style = useMemo(function () {
+    return {
+      width: width,
+      height: height
+    };
+  }, [width, height]);
+  useEffect(function () {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  useEffect(function () {
+    if (isEditorReady) {
+      var _subscriptionRef$curr;
+      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) {
+        var _editorInstance$getMo;
+        var editorValue = editorInstance === null || editorInstance === void 0 || (_editorInstance$getMo = editorInstance.getModel()) === null || _editorInstance$getMo === void 0 ? void 0 : _editorInstance$getMo.getValue();
+        if (valueRef.current !== editorValue) {
+          var _onChangeRef$current;
+          (_onChangeRef$current = onChangeRef.current) === null || _onChangeRef$current === void 0 || _onChangeRef$current.call(onChangeRef, editorValue, event);
+        }
+      });
+    }
+  }, [editorRef, isEditorReady, subscriptionRef, valueRef]);
+  useEffect(function () {
+    return function () {
+      var _subscriptionRef$curr2, _editorInstance$getMo2, _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();
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 || _editorRef$current.dispose();
+    };
+  }, [editorRef]);
+  useEffect(function () {
+    var _editorRef$current2;
+    if (!isEditorReady) {
+      return;
+    }
+    var model = (_editorRef$current2 = editorRef.current) === null || _editorRef$current2 === void 0 ? void 0 : _editorRef$current2.getModel();
+    if (model) {
+      var _monacoRef$current;
+      (_monacoRef$current = monacoRef.current) === null || _monacoRef$current === void 0 || _monacoRef$current.editor.setModelLanguage(model, language);
+    }
+  }, [editorRef, isEditorReady, language, monacoRef]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: className,
+    style: props.style,
+    children: [loading && /*#__PURE__*/_jsx("span", {
+      className: cx(styles.loading, 'loading'),
+      children: WORD_EDITOR_INITIALIZING
+    }), /*#__PURE__*/_jsx("div", {
+      className: "react-monaco-editor-container",
+      ref: containerRef,
+      style: style,
+      children: supportFullScreen && /*#__PURE__*/_jsx(Button, {
+        className: styles.fullScreenBtn,
+        icon: /*#__PURE__*/_jsx(Icon, {
+          icon: isFullScreen ? Minimize2 : Maximize2
+        }),
+        onClick: fullScreen,
+        size: "small",
+        type: "text"
+      })
+    })]
+  });
+};
+var DiffMonacoEditor = function DiffMonacoEditor(props) {
+  var enableOutline = props.enableOutline,
+    width = props.width,
+    height = props.height,
+    language = props.language,
+    onChange = props.onChange,
+    original = props.original,
+    supportFullScreen = props.supportFullScreen;
+  var onChangeRef = useRef(onChange);
+  var _useEditor2 = useEditor('diff', props),
+    isEditorReady = _useEditor2.isEditorReady,
+    focused = _useEditor2.focused,
+    loading = _useEditor2.loading,
+    containerRef = _useEditor2.containerRef,
+    monacoRef = _useEditor2.monacoRef,
+    editorRef = _useEditor2.editorRef,
+    valueRef = _useEditor2.valueRef;
+  var _useFullScreen2 = useFullScreen(),
+    isFullScreen = _useFullScreen2.isFullScreen,
+    fullScreen = _useFullScreen2.fullScreen;
+  var _useStyles2 = useStyles({
+      isFullScreen: isFullScreen,
+      diff: true
+    }),
+    cx = _useStyles2.cx,
+    styles = _useStyles2.styles;
+  var className = cx(styles.base, props.className, {
+    've-focused': focused,
+    've-outline': enableOutline
+  });
+  var style = useMemo(function () {
+    return {
+      width: width,
+      height: height
+    };
+  }, [width, height]);
+  useEffect(function () {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  useEffect(function () {
+    var _editorRef$current$ge;
+    if (!isEditorReady) {
+      return;
+    }
+    (_editorRef$current$ge = editorRef.current.getModel()) === null || _editorRef$current$ge === void 0 || _editorRef$current$ge.original.setValue(original !== null && original !== void 0 ? original : '');
+    var _ref = editorRef.current.getModel() || {},
+      modified = _ref.modified;
+    modified === null || modified === void 0 || modified.onDidChangeContent(function (event) {
+      var editorValue = modified.getValue();
+      if (valueRef.current !== editorValue) {
+        var _onChangeRef$current2;
+        (_onChangeRef$current2 = onChangeRef.current) === null || _onChangeRef$current2 === void 0 || _onChangeRef$current2.call(onChangeRef, editorValue, event);
+      }
+    });
+  }, [editorRef, isEditorReady, original, valueRef]);
+  useEffect(function () {
+    return function () {
+      var _editorRef$current3, _editorRef$current4, _editorRef$current5;
+      (_editorRef$current3 = editorRef.current) === null || _editorRef$current3 === void 0 || (_editorRef$current3 = _editorRef$current3.getModel()) === null || _editorRef$current3 === void 0 || (_editorRef$current3 = _editorRef$current3.original) === null || _editorRef$current3 === void 0 || _editorRef$current3.dispose();
+      (_editorRef$current4 = editorRef.current) === null || _editorRef$current4 === void 0 || (_editorRef$current4 = _editorRef$current4.getModel()) === null || _editorRef$current4 === void 0 || (_editorRef$current4 = _editorRef$current4.modified) === null || _editorRef$current4 === void 0 || _editorRef$current4.dispose();
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      (_editorRef$current5 = editorRef.current) === null || _editorRef$current5 === void 0 || _editorRef$current5.dispose();
+    };
+  }, [editorRef]);
+  useEffect(function () {
+    var _editorRef$current6, _monacoRef$current2, _monacoRef$current3;
+    if (!isEditorReady) {
+      return;
+    }
+    var _ref2 = ((_editorRef$current6 = editorRef.current) === null || _editorRef$current6 === void 0 ? void 0 : _editorRef$current6.getModel()) || {},
+      originalModel = _ref2.original,
+      modifiedModel = _ref2.modified;
+    (_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]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: className,
+    style: props.style,
+    children: [loading && /*#__PURE__*/_jsx("span", {
+      className: cx(styles.loading, 'loading'),
+      children: WORD_EDITOR_INITIALIZING
+    }), /*#__PURE__*/_jsx("div", {
+      className: "react-monaco-editor-container react-monaco-editor-diff-container",
+      ref: containerRef,
+      style: style,
+      children: supportFullScreen && /*#__PURE__*/_jsx(Button, {
+        className: styles.fullScreenBtn,
+        icon: /*#__PURE__*/_jsx(Icon, {
+          icon: isFullScreen ? Minimize2 : Maximize2
+        }),
+        onClick: fullScreen,
+        size: "small",
+        type: "text"
+      })
+    })]
+  });
+};
+var DiffMonacoEditorComponent = Object.assign(DiffMonacoEditor, {
+  displayName: 'DiffMonacoEditor',
+  defaultProps: {
+    width: '100%',
+    height: 150,
+    defaultValue: '',
+    language: 'javascript',
+    options: INITIAL_OPTIONS,
+    editorDidMount: noop,
+    editorWillMount: noop,
+    onChange: noop,
+    requireConfig: {}
+  }
+});
+export var SingleMonacoEditorComponent = Object.assign(SingleMonacoEditor, {
+  displayName: 'SingleMonacoEditor',
+  defaultProps: {
+    width: '100%',
+    height: 150,
+    defaultValue: '',
+    language: 'javascript',
+    options: INITIAL_OPTIONS,
+    editorDidMount: noop,
+    editorWillMount: noop,
+    onChange: noop,
+    requireConfig: {}
+  },
+  MonacoDiffEditor: DiffMonacoEditorComponent
+});
+export default SingleMonacoEditorComponent;

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

@@ -0,0 +1,6 @@
+import { Monaco } from '@monaco-editor/loader';
+import { EditorMeta } from './controller';
+export declare const getSingletonMonaco: (options?: any) => Promise<typeof import("monaco-editor")>;
+export declare const getCommonMonaco: (config: any) => Promise<Monaco>;
+export declare function getMonaco(config?: any): Promise<typeof import("monaco-editor")>;
+export declare function configure(config: EditorMeta): void;

package/es/MonacoEditor/base/monaco.js

@@ -0,0 +1,64 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import loader from '@monaco-editor/loader';
+import { isEqual } from 'lodash-es';
+import { controller } from "./controller";
+export var getSingletonMonaco = function () {
+  var monaco;
+  var prevOptions;
+  return /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(options) {
+      var hasConfig;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(!monaco || !isEqual(prevOptions, options))) {
+              _context.next = 7;
+              break;
+            }
+            hasConfig = Object.keys(options || {}).length > 0;
+            loader.config(hasConfig ? options : {
+              paths: {
+                vs: 'https://g.alicdn.com/code/lib/monaco-editor/0.33.0/min/vs'
+              }
+            });
+            // eslint-disable-next-line require-atomic-updates
+            _context.next = 5;
+            return loader.init();
+          case 5:
+            monaco = _context.sent;
+            // eslint-disable-next-line require-atomic-updates
+            prevOptions = options;
+          case 7:
+            return _context.abrupt("return", monaco);
+          case 8:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+}();
+export var getCommonMonaco = function getCommonMonaco(config) {
+  if (config) {
+    loader.config(config);
+  } else {
+    loader.config({
+      paths: {
+        vs: 'https://g.alicdn.com/code/lib/monaco-editor/0.31.1/min/vs'
+      }
+    });
+  }
+  return loader.init();
+};
+export function getMonaco(config) {
+  var hasConfig = Object.keys(config || {}).length > 0;
+  var monacoConfig = hasConfig ? config : undefined;
+  return controller.getMeta().singleton ? getSingletonMonaco(monacoConfig) : getCommonMonaco(monacoConfig);
+}
+export function configure(config) {
+  controller.updateMeta(config);
+}

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

@@ -0,0 +1,12 @@
+/**
+ * styles from https://github.com/alibaba/lowcode-plugins/blob/main/packages/base-monaco-editor/src/index.scss
+ */
+export declare const useStyles: (props?: {
+    minimapEnabled?: boolean | undefined;
+    isFullScreen?: boolean | undefined;
+    diff?: boolean | undefined;
+} | undefined) => import("antd-style").ReturnStyles<{
+    base: import("antd-style").SerializedStyles;
+    fullScreenBtn: import("antd-style").SerializedStyles;
+    loading: import("antd-style").SerializedStyles;
+}>;

package/es/MonacoEditor/base/style.js

@@ -0,0 +1,26 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+import { createStyles, keyframes } from 'antd-style';
+
+/**
+ * styles from https://github.com/alibaba/lowcode-plugins/blob/main/packages/base-monaco-editor/src/index.scss
+ */
+export var useStyles = createStyles(function (_ref, _ref2) {
+  var css = _ref.css,
+    token = _ref.token,
+    prefixCls = _ref.prefixCls;
+  var _ref2$minimapEnabled = _ref2.minimapEnabled,
+    minimapEnabled = _ref2$minimapEnabled === void 0 ? false : _ref2$minimapEnabled,
+    _ref2$isFullScreen = _ref2.isFullScreen,
+    isFullScreen = _ref2$isFullScreen === void 0 ? false : _ref2$isFullScreen,
+    _ref2$diff = _ref2.diff,
+    diff = _ref2$diff === void 0 ? false : _ref2$diff;
+  var dots = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      0% { content: '.'; }\n      20% { content: '..'; }\n      40% { content: '...'; }\n      60% { content: '....'; }\n      80% { content: '.....'; }\n    "])));
+  return {
+    base: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        position: relative;\n\n        box-sizing: content-box;\n        min-height: 100px;\n\n        border: 1px solid transparent;\n        border-radius: 3px;\n        &:hover {\n          border-color: var(--color-field-border-hover, rgba(31, 56, 88, 0.1));\n        }\n\n        &.ve-focused {\n          border-color: var(--color-field-border-active, rgba(31, 56, 88, 0.15));\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            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: red;\n\n          background: rgba(255, 234, 234, 0.8);\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      "])), isFullScreen && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            position: fixed;\n            z-index: 9998;\n            inset: 0;\n\n            width: auto !important;\n            height: auto !important;\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),
+    fullScreenBtn: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        &.", "-btn {\n          position: absolute;\n          color: ", ";\n          top: 20px;\n          transition: none;\n          ", "\n        }\n      "])), prefixCls, token.colorTextSecondary, isFullScreen ? css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n                z-index: 9999;\n                right: ", "px;\n              "])), diff ? 64 : 138) : css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n                right: ", "px;\n              "])), minimapEnabled || diff ? 64 : 20)),
+    loading: css(_templateObject7 || (_templateObject7 = _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: 20px; */\n          display: inline;\n          animation: ", " steps(3) 1s infinite;\n        }\n      "])), token.fontSizeSM, token.colorTextTertiary, dots)
+  };
+}, {
+  hashPriority: 'low'
+});

package/es/MonacoEditor/index.d.ts

@@ -1,6 +1,6 @@
-import type { IDiffMonacoEditorProps, IGeneralManacoEditorProps, ISingleMonacoEditorProps } from '@alilc/lowcode-plugin-base-monaco-editor/lib/helper';
 import React from 'react';
-export { type EditorMeta, Controller as MonacoController, } from '@alilc/lowcode-plugin-base-monaco-editor/es/controller';
+import type { IDiffMonacoEditorProps, IGeneralManacoEditorProps, ISingleMonacoEditorProps } from './base/helper';
+export { type EditorMeta, Controller as MonacoController } from './base/controller';
 export interface BaseMonacoEditorProps extends IGeneralManacoEditorProps {
     /** Should the editor be read only. See also domReadOnly. Defaults to false. */
     readOnly?: boolean;
@@ -22,8 +22,6 @@ export declare const BaseMonacoEditor: React.FC<BaseMonacoEditorProps & {
     type?: 'single' | 'diff';
     /** Is show fullscreen button */
     supportFullScreen?: boolean;
-    /** className of diff editor wrapper */
-    diffEditorWrapperClassName?: boolean;
 }>;
 export type MonacoEditorProps = ISingleMonacoEditorProps & BaseMonacoEditorProps;
 export declare const MonacoEditor: React.FC<MonacoEditorProps>;

package/es/MonacoEditor/index.js

@@ -1,18 +1,17 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["type", "editorDidMount", "readOnly", "lineNumbers", "wordWrap", "contextmenu", "theme", "minimapEnabled", "version", "requireConfig", "options", "onChange", "className", "diffEditorWrapperClassName", "supportFullScreen", "width", "height"],
+var _excluded = ["type", "editorDidMount", "readOnly", "lineNumbers", "wordWrap", "contextmenu", "theme", "minimapEnabled", "version", "requireConfig", "options", "className", "supportFullScreen"],
   _excluded2 = ["inlineView", "options"];
 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 { SingleMonacoEditorComponent } from '@alilc/lowcode-plugin-base-monaco-editor';
 import { useThemeMode } from 'antd-style';
-import React, { useMemo, useState } from 'react';
-import { useCdnFn } from '..';
-import { useStyles } from "./style";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCdnFn } from "../ConfigProvider";
+import { SingleMonacoEditorComponent } from "./base";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export { Controller as MonacoController } from '@alilc/lowcode-plugin-base-monaco-editor/es/controller';
+// @Todo: Controller SSR error: https://github.com/alibaba/lowcode-plugins/blob/main/packages/base-monaco-editor/src/controller.ts#L33
+export { Controller as MonacoController } from "./base/controller";
 export var BaseMonacoEditor = function BaseMonacoEditor(props) {
   var _props$type = props.type,
     type = _props$type === void 0 ? 'single' : _props$type,
@@ -33,13 +32,13 @@ export var BaseMonacoEditor = function BaseMonacoEditor(props) {
     _props$requireConfig = props.requireConfig,
     requireConfigFromProps = _props$requireConfig === void 0 ? {} : _props$requireConfig,
     options = props.options,
-    onChange = props.onChange,
     className = props.className,
-    diffEditorWrapperClassName = props.diffEditorWrapperClassName,
     supportFullScreen = props.supportFullScreen,
-    width = props.width,
-    height = props.height,
     otherProps = _objectWithoutProperties(props, _excluded);
+  var editorDidMountRef = useRef(editorDidMount);
+  useEffect(function () {
+    editorDidMountRef.current = editorDidMount;
+  }, [editorDidMount]);
   var _useThemeMode = useThemeMode(),
     isDarkMode = _useThemeMode.isDarkMode;
   var theme = useMemo(function () {
@@ -52,18 +51,11 @@ export var BaseMonacoEditor = function BaseMonacoEditor(props) {
     _useState2 = _slicedToArray(_useState, 2),
     editorInstance = _useState2[0],
     setEditorInstance = _useState2[1];
-  var handleEditorDidMount = function handleEditorDidMount(monaco, editor) {
+  var handleEditorDidMount = useCallback(function (monaco, editor) {
+    var _editorDidMountRef$cu;
     setEditorInstance(editor);
-    editorDidMount === null || editorDidMount === void 0 || editorDidMount(monaco, editor);
-    // add onChange event for diff editor
-    if (type === 'diff') {
-      var _ref = editor.getModel(),
-        modified = _ref.modified;
-      modified.onDidChangeContent(function (event) {
-        onChange === null || onChange === void 0 || onChange(modified.getValue(), event);
-      });
-    }
-  };
+    (_editorDidMountRef$cu = editorDidMountRef.current) === null || _editorDidMountRef$cu === void 0 || _editorDidMountRef$cu.call(editorDidMountRef, monaco, editor);
+  }, []);
   var editorOptions = useMemo(function () {
     var newOps = Object.assign({}, options, {
       readOnly: readOnly,
@@ -76,7 +68,7 @@ export var BaseMonacoEditor = function BaseMonacoEditor(props) {
     });
     editorInstance === null || editorInstance === void 0 || editorInstance.updateOptions(newOps);
     return newOps;
-  }, [readOnly, lineNumbers, wordWrap, contextmenu, minimapEnabled, options]);
+  }, [options, readOnly, lineNumbers, wordWrap, contextmenu, minimapEnabled, editorInstance]);
   var genCdnUrl = useCdnFn();
   var requireConfig = useMemo(function () {
     return Object.assign({}, requireConfigFromProps, {
@@ -88,53 +80,25 @@ export var BaseMonacoEditor = function BaseMonacoEditor(props) {
         })
       }, requireConfigFromProps.paths)
     });
-  }, [requireConfigFromProps, version]);
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isFullScreen = _useState4[0],
-    setIsFullScreen = _useState4[1];
-  var _useStyles = useStyles({
-      minimapEnabled: minimapEnabled,
-      isFullScreen: isFullScreen
-    }),
-    styles = _useStyles.styles,
-    cx = _useStyles.cx;
+  }, [genCdnUrl, requireConfigFromProps, version]);
   if (type !== 'diff') {
     return /*#__PURE__*/_jsx(SingleMonacoEditorComponent, _objectSpread({
-      className: cx(styles.base, className),
+      className: className,
       editorDidMount: handleEditorDidMount,
-      height: height,
-      onChange: onChange,
       options: editorOptions,
       requireConfig: requireConfig,
       supportFullScreen: editorInstance && supportFullScreen,
-      theme: theme,
-      width: width
+      theme: theme
     }, otherProps));
   }
-  var fullScreen = function fullScreen() {
-    setIsFullScreen(!isFullScreen);
-    editorInstance === null || editorInstance === void 0 || editorInstance.layout();
-  };
-  var fullScreenClassName = cx({
-    'base-monaco-full-screen-icon': !isFullScreen,
-    'base-monaco-full-screen-icon-cancel': isFullScreen
-  });
-  return /*#__PURE__*/_jsxs("div", {
-    className: cx(styles.diff, diffEditorWrapperClassName),
-    children: [/*#__PURE__*/_jsx(SingleMonacoEditorComponent.MonacoDiffEditor, _objectSpread({
-      className: cx(styles.base, className),
-      editorDidMount: handleEditorDidMount,
-      height: isFullScreen ? 'auto' : height,
-      options: editorOptions,
-      requireConfig: requireConfig,
-      theme: theme,
-      width: isFullScreen ? 'auto' : width
-    }, otherProps)), editorInstance && supportFullScreen && /*#__PURE__*/_jsx("div", {
-      className: fullScreenClassName,
-      onClick: fullScreen
-    })]
-  });
+  return /*#__PURE__*/_jsx(SingleMonacoEditorComponent.MonacoDiffEditor, _objectSpread({
+    className: className,
+    editorDidMount: handleEditorDidMount,
+    options: editorOptions,
+    requireConfig: requireConfig,
+    supportFullScreen: editorInstance && supportFullScreen,
+    theme: theme
+  }, otherProps));
 };
 export var MonacoEditor = function MonacoEditor(props) {
   return /*#__PURE__*/_jsx(BaseMonacoEditor, _objectSpread(_objectSpread({}, props), {}, {

package/es/MonacoEditor/style.js

@@ -8,15 +8,16 @@ import fullScreenIcon from "./assets/img/full-screen-icon.png";
  * styles from https://github.com/alibaba/lowcode-plugins/blob/main/packages/base-monaco-editor/src/index.scss
  */
 export var useStyles = createStyles(function (_ref, _ref2) {
-  var css = _ref.css;
+  var css = _ref.css,
+    token = _ref.token;
   var _ref2$minimapEnabled = _ref2.minimapEnabled,
     minimapEnabled = _ref2$minimapEnabled === void 0 ? false : _ref2$minimapEnabled,
     _ref2$isFullScreen = _ref2.isFullScreen,
     isFullScreen = _ref2$isFullScreen === void 0 ? false : _ref2$isFullScreen;
   var dots = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      0% { content: '.'; }\n      20% { content: '..'; }\n      40% { content: '...'; }\n      60% { content: '....'; }\n      80% { content: '.....'; }\n    "])));
-  var fullScreenStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      .base-monaco-full-screen-icon,\n      .base-monaco-full-screen-icon-cancel {\n        cursor: pointer;\n\n        position: absolute;\n        z-index: 9999;\n\n        width: 20px;\n        height: 20px;\n\n        background-size: 20px 20px;\n      }\n\n      .base-monaco-full-screen-icon {\n        top: 40px;\n        right: ", ";\n        background-image: url(", ");\n      }\n\n      .base-monaco-full-screen-icon-cancel {\n        top: 10px;\n        right: 138px;\n        background-image: url(", ");\n      }\n    "])), minimapEnabled ? '64px' : '20px', fullScreenIcon, fullScreenCancelIcon);
+  var fullScreenStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      .base-monaco-full-screen-icon,\n      .base-monaco-full-screen-icon-cancel {\n        cursor: pointer;\n\n        position: absolute;\n\n        width: 20px;\n        height: 20px;\n\n        background-size: 20px 20px;\n      }\n\n      .base-monaco-full-screen-icon {\n        top: 40px;\n        right: ", ";\n        background-image: url(", ");\n      }\n\n      .base-monaco-full-screen-icon-cancel {\n        z-index: 9999;\n        top: 10px;\n        right: 138px;\n        background-image: url(", ");\n      }\n    "])), minimapEnabled ? '64px' : '20px', fullScreenIcon, fullScreenCancelIcon);
   return {
-    base: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        position: relative;\n\n        box-sizing: content-box;\n        min-height: 100px;\n\n        border: 1px solid transparent;\n        border-radius: 3px;\n        &:hover {\n          border-color: var(--color-field-border-hover, rgba(31, 56, 88, 0.1));\n        }\n        &.ve-focused {\n          border-color: var(--color-field-border-active, rgba(31, 56, 88, 0.15));\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\n        .loading {\n          position: absolute;\n          inset: 0;\n\n          display: flex;\n          align-items: center;\n          justify-content: center;\n\n          color: var(--color-text, rgba(0, 0, 0, 0.3));\n\n          background-color: transparent;\n\n          &::after {\n            content: '';\n            display: inline;\n            animation: ", " steps(3) 1s infinite;\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: red;\n\n          background: rgba(255, 234, 234, 0.8);\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      "])), fullScreenStyle, dots),
+    base: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        position: relative;\n\n        box-sizing: content-box;\n        width: 100%;\n        min-height: 100px;\n\n        border: 1px solid ", ";\n        border-radius: ", "px;\n        &:hover {\n          border-color: var(--color-field-border-hover, rgba(31, 56, 88, 0.1));\n        }\n        &.ve-focused {\n          border-color: var(--color-field-border-active, rgba(31, 56, 88, 0.15));\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          & > .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        ", "\n\n        .loading {\n          position: absolute;\n          inset: 0;\n\n          display: flex;\n          align-items: center;\n          justify-content: center;\n\n          color: var(--color-text, rgba(0, 0, 0, 0.3));\n\n          background-color: transparent;\n\n          &::after {\n            content: '';\n            display: inline;\n            animation: ", " steps(3) 1s infinite;\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: red;\n\n          background: rgba(255, 234, 234, 0.8);\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      "])), token.colorBorder, token.borderRadius, 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, fullScreenStyle, dots),
     diff: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        position: relative;\n        box-sizing: content-box;\n\n        .react-monaco-editor-container {\n          ", "\n        }\n\n        ", "\n\n        .base-monaco-full-screen-icon {\n          right: 64px;\n        }\n\n        .base-monaco-full-screen-icon-cancel {\n          position: fixed;\n          right: 64px;\n        }\n      "])), isFullScreen && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n            position: fixed;\n            z-index: 9998;\n            inset: 0;\n\n            width: auto;\n            height: auto;\n          "]))), fullScreenStyle)
   };
 }, {

package/es/Page/Breadcrumb/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { BreadcrumbProps } from '../../Breadcrumb';
+import { PageContextValue } from '../PageContext';
+export type PageBreadcrumbProps = BreadcrumbProps;
+export interface BreadcrumbLinkProps extends React.HtmlHTMLAttributes<HTMLElement> {
+    to: string;
+    Link?: PageContextValue['Link'];
+}
+export declare const PageBreadcrumb: React.FC<PageBreadcrumbProps>;

package/es/Page/Breadcrumb/index.js

@@ -0,0 +1,56 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["to", "Link", "children"];
+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 React, { useCallback, useContext, useEffect } from 'react';
+import { Breadcrumb } from "../../Breadcrumb";
+import { PageContext } from "../PageContext";
+import { jsx as _jsx } from "react/jsx-runtime";
+var BreadcrumbLink = function BreadcrumbLink(props) {
+  var to = props.to,
+    Link = props.Link,
+    children = props.children,
+    otherProps = _objectWithoutProperties(props, _excluded);
+  if (Link) {
+    return /*#__PURE__*/_jsx(Link, _objectSpread(_objectSpread({
+      to: to
+    }, otherProps), {}, {
+      children: children
+    }));
+  }
+  return /*#__PURE__*/_jsx("a", _objectSpread(_objectSpread({
+    href: "#".concat(to)
+  }, otherProps), {}, {
+    children: children
+  }));
+};
+export var PageBreadcrumb = function PageBreadcrumb(props) {
+  var _useContext = useContext(PageContext),
+    Link = _useContext.Link,
+    breadcrumb = _useContext.breadcrumb;
+  useEffect(function () {
+    var _breadcrumb$setItems;
+    breadcrumb === null || breadcrumb === void 0 || (_breadcrumb$setItems = breadcrumb.setItems) === null || _breadcrumb$setItems === void 0 || _breadcrumb$setItems.call(breadcrumb, props.items);
+  }, [breadcrumb, props.items]);
+
+  // @ts-ignore
+  var itemRender = useCallback(function (currentRoute, params, items, paths) {
+    var _items$at, _items$at2;
+    var isLast = currentRoute.href ? currentRoute.href === ((_items$at = items.at(-1)) === null || _items$at === void 0 ? void 0 : _items$at.href) : currentRoute.path === ((_items$at2 = items.at(-1)) === null || _items$at2 === void 0 ? void 0 : _items$at2.path);
+    if (isLast) {
+      return /*#__PURE__*/_jsx("span", {
+        children: currentRoute.title
+      });
+    }
+    var to = currentRoute.href ? currentRoute.href : "/".concat(paths.join('/'));
+    return /*#__PURE__*/_jsx(BreadcrumbLink, {
+      Link: Link,
+      to: to,
+      children: currentRoute.title
+    });
+  }, [Link]);
+  return /*#__PURE__*/_jsx(Breadcrumb, _objectSpread({
+    itemRender: itemRender
+  }, props));
+};

package/es/Page/Content/index.d.ts

@@ -0,0 +1,4 @@
+import type { FlexProps } from 'antd';
+import React from 'react';
+export type PageContentProps = FlexProps;
+export declare const PageContent: React.FC<PageContentProps>;