react-json-schema-editor-antd/dist/components/MonacoEditor/index.js

Json Schema Editor

import Editor, { loader } from '@monaco-editor/react';
import { theme } from 'antd';
import * as monaco from 'monaco-editor';
import React, { useContext, useMemo } from 'react';
import ThemeContext from "../../context";
import { xcodeDefault } from "./themes";
loader.config({
  monaco: monaco
});
var MonacoEditor = function MonacoEditor(props) {
  var width = props.width,
    _props$lineNumbers = props.lineNumbers,
    lineNumbers = _props$lineNumbers === void 0 ? 'on' : _props$lineNumbers,
    height = props.height,
    value = props.value,
    _props$folding = props.folding,
    folding = _props$folding === void 0 ? true : _props$folding,
    _props$language = props.language,
    language = _props$language === void 0 ? 'json' : _props$language,
    _props$readOnly = props.readOnly,
    readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
    _props$renderLineHigh = props.renderLineHighlight,
    renderLineHighlight = _props$renderLineHigh === void 0 ? 'all' : _props$renderLineHigh,
    onChange = props.onChange;
  var _theme$useToken = theme.useToken(),
    token = _theme$useToken.token;
  var themeColor = useContext(ThemeContext);
  function editorWillMount(monaco) {
    monaco.editor.defineTheme('x-code-default', xcodeDefault);
  }

  // 编辑器主题
  var computedTheme = useMemo(function () {
    if (['white', 'orange'].includes(themeColor)) {
      return 'vs';
    } else {
      return 'vs-dark';
    }
  }, [themeColor]);
  return /*#__PURE__*/React.createElement("div", {
    className: "monaco-wrapper",
    style: {
      border: "1px solid ".concat(token.colorBorder),
      width: width ? width : '100%'
    }
  }, /*#__PURE__*/React.createElement(Editor, {
    height: height,
    width: width,
    value: value,
    language: language,
    onChange: onChange,
    onMount: props.handleEditorDidMount,
    beforeMount: editorWillMount,
    theme: computedTheme,
    options: {
      // 只读
      readOnly: readOnly,
      // 关闭行数显示
      lineNumbers: lineNumbers,
      // 关闭选中行的渲染
      renderLineHighlight: renderLineHighlight,
      // 是否折叠
      folding: folding,
      smoothScrolling: true,
      // 编辑器中字体大小
      fontSize: 13,
      // 是否可以滚动到最后一行，可以往上滚动超出内容范围
      scrollBeyondLastLine: false,
      // 左边空出来的宽度
      // lineDecorationsWidth: 5,
      // lineNumbersMinChars: 3,
      // 滚动条样式
      scrollbar: {
        verticalScrollbarSize: 9,
        horizontalScrollbarSize: 9
      },
      // 小地图
      minimap: {
        enabled: false
      }
    }
  }));
};
export default MonacoEditor;