@yuntijs/ui 1.0.0-beta.9 → 1.0.0-beta.91

package/es/MonacoEditor/base/helper.js

@@ -0,0 +1,324 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+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; }
+/* eslint-disable no-empty */
+
+import { useEffect, useRef, useState } from 'react';
+import { isBrowser } from "../../utils/tools";
+import { getMonaco } from "./monaco";
+
+// @todo fill type def for monaco editor without refering monaco editor
+/**
+ * @see https://microsoft.github.io/monaco-editor/api/index.html
+ */
+
+var CURRENT_LANGUAGE = isBrowser ? (window.locale || window.localStorage.getItem('vdev-locale') || '').replace(/_/, '-') || 'zh-CN' : 'zh-CN';
+export var WORD_EDITOR_INITIALIZING = CURRENT_LANGUAGE === 'en-US' ? 'Initializing Editor' : '编辑器初始化中';
+export var INITIAL_OPTIONS = {
+  fontSize: 12,
+  tabSize: 2,
+  fontFamily: 'Menlo, Monaco, Courier New, monospace',
+  folding: true,
+  minimap: {
+    enabled: false
+  },
+  autoIndent: 'advanced',
+  contextmenu: true,
+  useTabStops: true,
+  // wordBasedSuggestions: true,
+  formatOnPaste: true,
+  automaticLayout: true,
+  lineNumbers: 'on',
+  wordWrap: 'off',
+  scrollBeyondLastLine: false,
+  fixedOverflowWidgets: false,
+  snippetSuggestions: 'top',
+  scrollbar: {
+    vertical: 'auto',
+    horizontal: 'auto',
+    verticalScrollbarSize: 10,
+    horizontalScrollbarSize: 10
+  }
+};
+var DIFF_EDITOR_INITIAL_OPTIONS = {
+  fontSize: 12,
+  fontFamily: 'Menlo, Monaco, Courier New, monospace',
+  folding: true,
+  minimap: {
+    enabled: false
+  },
+  autoIndent: 'advanced',
+  contextmenu: true,
+  useTabStops: true,
+  formatOnPaste: true,
+  automaticLayout: true,
+  lineNumbers: 'on',
+  wordWrap: 'off',
+  scrollBeyondLastLine: false,
+  fixedOverflowWidgets: false,
+  snippetSuggestions: 'top',
+  scrollbar: {
+    vertical: 'auto',
+    horizontal: 'auto',
+    verticalScrollbarSize: 10,
+    horizontalScrollbarSize: 10
+  }
+};
+function usePrevious(value) {
+  var ref = useRef();
+  useEffect(function () {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+function getOrCreateModel(monaco, value, language, path) {
+  if (path) {
+    var prevModel = monaco.editor.getModel(monaco.Uri.parse(path));
+    if (prevModel) {
+      return prevModel;
+    }
+  }
+  return monaco.editor.createModel(value, language, path ? monaco.Uri.parse(path) : undefined);
+}
+export var useEditor = function useEditor(type, props) {
+  var editorDidMount = props.editorDidMount,
+    editorWillMount = props.editorWillMount,
+    theme = props.theme,
+    value = props.value,
+    path = props.path,
+    language = props.language,
+    saveViewState = props.saveViewState,
+    defaultValue = props.defaultValue,
+    enhancers = props.enhancers;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isEditorReady = _useState2[0],
+    setIsEditorReady = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    focused = _useState4[0],
+    setFocused = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    loading = _useState6[0],
+    setLoading = _useState6[1];
+  var defaultValueRef = useRef(defaultValue);
+  var valueRef = useRef(value);
+  var languageRef = useRef(language || 'text');
+  var pathRef = useRef(path);
+  var previousPath = usePrevious(path);
+  var requireConfigRef = useRef(props.requireConfig);
+  var optionRef = useRef(props.options);
+  var monacoRef = useRef();
+  var editorRef = useRef();
+  var containerRef = useRef();
+  var typeRef = useRef(type);
+  var editorDidMountRef = useRef();
+  var editorWillMountRef = useRef();
+  var decomposeRef = useRef(false);
+  var viewStatusRef = useRef(new Map());
+  var enhancersRef = useRef({});
+  useEffect(function () {
+    enhancersRef.current.enhancers = enhancers;
+  }, [enhancers]);
+  useEffect(function () {
+    editorDidMountRef.current = editorDidMount;
+  }, [editorDidMount]);
+  useEffect(function () {
+    editorWillMountRef.current = editorWillMount;
+  }, [editorWillMount]);
+  useEffect(function () {
+    valueRef.current = value;
+  }, [value]);
+  useEffect(function () {
+    languageRef.current = language;
+  }, [language]);
+  useEffect(function () {
+    defaultValueRef.current = defaultValue;
+  }, [defaultValue]);
+
+  // make sure loader / editor only init once
+  useEffect(function () {
+    setLoading(true);
+    getMonaco(requireConfigRef.current).then(function (monaco) {
+      var _enhancersRef$current;
+      // 兼容旧版本 monaco-editor 写死 MonacoEnvironment 的问题
+      window.MonacoEnvironment = undefined;
+      if (typeof window.define === 'function' && window.define.amd) {
+        // make monaco-editor's loader work with webpack's umd loader
+        // @see https://github.com/microsoft/monaco-editor/issues/2283
+        delete window.define.amd;
+      }
+      monacoRef.current = monaco;
+      try {
+        var _editorWillMountRef$c;
+        (_editorWillMountRef$c = editorWillMountRef.current) === null || _editorWillMountRef$c === void 0 || _editorWillMountRef$c.call(editorWillMountRef, monaco);
+      } catch (_unused) {}
+      if (!containerRef.current) {
+        return;
+      }
+      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));
+        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));
+        editor.setModel({
+          original: originalModel,
+          modified: modifiedModel
+        });
+      }
+      editorRef.current = editor;
+      (_enhancersRef$current = enhancersRef.current.enhancers) === null || _enhancersRef$current === void 0 || _enhancersRef$current.forEach(function (en) {
+        return en(monaco, editor);
+      });
+      try {
+        var _editorDidMountRef$cu;
+        (_editorDidMountRef$cu = editorDidMountRef.current) === null || _editorDidMountRef$cu === void 0 || _editorDidMountRef$cu.call(editorDidMountRef, monaco, editor);
+      } catch (_unused2) {}
+      if (!decomposeRef.current) {
+        setIsEditorReady(true);
+      }
+    }).catch(function (error) {
+      // eslint-disable-next-line no-console
+      console.error('Monaco Editor Load Error!', error);
+    }).then(function () {
+      if (!decomposeRef.current) {
+        setLoading(false);
+      }
+    });
+  }, []);
+  useEffect(function () {
+    var _monacoRef$current;
+    if (!isEditorReady) {
+      return;
+    }
+    (_monacoRef$current = monacoRef.current) === null || _monacoRef$current === void 0 || _monacoRef$current.editor.setTheme(theme);
+  }, [isEditorReady, theme]);
+
+  // focus status
+  useEffect(function () {
+    if (!isEditorReady) {
+      return;
+    }
+    var editor = type === 'diff' ? editorRef.current.getModifiedEditor() : editorRef.current;
+    editor === null || editor === void 0 || editor.onDidFocusEditorText(function () {
+      if (!decomposeRef.current) {
+        setFocused(true);
+      }
+    });
+    editor === null || editor === void 0 || editor.onDidBlurEditorText(function () {
+      if (!decomposeRef.current) {
+        setFocused(false);
+      }
+    });
+  }, [isEditorReady, type]);
+
+  // decomposing status
+  useEffect(function () {
+    return function () {
+      decomposeRef.current = true;
+    };
+  }, []);
+
+  // controlled value -- diff mode / without path only
+  useEffect(function () {
+    var _ref2, _monacoRef$current2, _editor$getOption;
+    if (!isEditorReady) {
+      return;
+    }
+    if (type !== 'diff' && !!path) {
+      return;
+    }
+    var editor = type === 'diff' ? editorRef.current.getModifiedEditor() : editorRef.current;
+    var nextValue = (_ref2 = value !== null && value !== void 0 ? value : defaultValueRef.current) !== null && _ref2 !== void 0 ? _ref2 : '';
+    var readOnly = (_monacoRef$current2 = monacoRef.current) === null || _monacoRef$current2 === void 0 ? void 0 : _monacoRef$current2.editor.EditorOption.readOnly;
+    if (readOnly && editor !== null && editor !== void 0 && (_editor$getOption = editor.getOption) !== null && _editor$getOption !== void 0 && _editor$getOption.call(editor, readOnly)) {
+      editor === null || editor === void 0 || editor.setValue(nextValue);
+    } else if (value !== (editor === null || editor === void 0 ? void 0 : editor.getValue())) {
+      editor === null || editor === void 0 || editor.executeEdits('', [{
+        range: editor === null || editor === void 0 ? void 0 : editor.getModel().getFullModelRange(),
+        text: nextValue,
+        forceMoveMarkers: true
+      }]);
+      editor === null || editor === void 0 || editor.pushUndoStop();
+    }
+  }, [isEditorReady, path, type, value]);
+
+  // multi-model && controlled value (shouldn't be diff mode)
+  useEffect(function () {
+    var _valueRef$current2, _editorRef$current;
+    if (!isEditorReady) {
+      return;
+    }
+    if (type === 'diff') {
+      return;
+    }
+    if (path === previousPath) {
+      return;
+    }
+    var model = getOrCreateModel(monacoRef.current, (_valueRef$current2 = valueRef.current) !== null && _valueRef$current2 !== void 0 ? _valueRef$current2 : defaultValueRef.current, languageRef.current, path);
+    var editor = editorRef.current;
+    if (valueRef.current !== null && valueRef.current !== undefined && model.getValue() !== valueRef.current) {
+      model.setValue(valueRef.current);
+    }
+    if (model !== ((_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.getModel())) {
+      if (saveViewState) {
+        viewStatusRef.current.set(previousPath, editor.saveViewState());
+      }
+      editor.setModel(model);
+      if (saveViewState) {
+        editor.restoreViewState(viewStatusRef.current.get(path));
+      }
+    }
+  }, [isEditorReady, value, path, previousPath, type, saveViewState]);
+  var retEditorRef = editorRef;
+  return {
+    isEditorReady: isEditorReady,
+    focused: focused,
+    loading: loading,
+    containerRef: containerRef,
+    monacoRef: monacoRef,
+    editorRef: retEditorRef,
+    valueRef: valueRef
+  };
+};
+export var useFullScreen = function useFullScreen(editor) {
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isFullScreen = _useState8[0],
+    setIsFullScreen = _useState8[1];
+  var fullScreen = function fullScreen() {
+    if (isFullScreen) {
+      setIsFullScreen(false);
+      editor === null || editor === void 0 || editor.updateOptions(_objectSpread(_objectSpread({}, editor === null || editor === void 0 ? void 0 : editor.getOptions()), {}, {
+        minimap: {
+          enabled: false
+        }
+      }));
+      editor === null || editor === void 0 || editor.layout();
+      return;
+    }
+    setIsFullScreen(true);
+    // 更新小地图配置
+    editor === null || editor === void 0 || editor.updateOptions(_objectSpread(_objectSpread({}, editor === null || editor === void 0 ? void 0 : editor.getOptions()), {}, {
+      minimap: {
+        enabled: true
+      }
+    }));
+    editor === null || editor === void 0 || editor.layout();
+  };
+  return {
+    isFullScreen: isFullScreen,
+    fullScreen: fullScreen
+  };
+};

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

@@ -0,0 +1,39 @@
+import type { editor } from 'monaco-editor';
+import React from 'react';
+import { IDiffMonacoEditorProps, ISingleMonacoEditorProps } from './helper';
+export * from './controller';
+export * from './monaco';
+declare function noop(): void;
+export declare const SingleMonacoEditorComponent: React.FC<ISingleMonacoEditorProps & {
+    variant?: "filled" | "borderless" | "outlined" | undefined;
+}> & {
+    displayName: string;
+    defaultProps: {
+        width: string;
+        height: number;
+        defaultValue: string;
+        language: string;
+        options: editor.IStandaloneEditorConstructionOptions;
+        editorDidMount: typeof noop;
+        editorWillMount: typeof noop;
+        onChange: typeof noop;
+        requireConfig: {};
+    };
+    MonacoDiffEditor: React.FC<IDiffMonacoEditorProps & {
+        variant?: "filled" | "borderless" | "outlined" | undefined;
+    }> & {
+        displayName: string;
+        defaultProps: {
+            width: string;
+            height: number;
+            defaultValue: string;
+            language: string;
+            options: editor.IStandaloneEditorConstructionOptions;
+            editorDidMount: typeof noop;
+            editorWillMount: typeof noop;
+            onChange: typeof noop;
+            requireConfig: {};
+        };
+    };
+};
+export default SingleMonacoEditorComponent;

package/es/MonacoEditor/base/index.js

@@ -0,0 +1,238 @@
+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,
+      variant: props.variant
+    }),
+    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,
+      variant: props.variant
+    }),
+    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/{style.d.ts → base/style.d.ts}

@@ -4,7 +4,10 @@
 export declare const useStyles: (props?: {
     minimapEnabled?: boolean | undefined;
     isFullScreen?: boolean | undefined;
+    diff?: boolean | undefined;
+    variant?: "filled" | "borderless" | "outlined" | undefined;
 } | undefined) => import("antd-style").ReturnStyles<{
     base: import("antd-style").SerializedStyles;
-    diff: import("antd-style").SerializedStyles;
+    fullScreenBtn: import("antd-style").SerializedStyles;
+    loading: import("antd-style").SerializedStyles;
 }>;