feat(core): add disableValidation and monacoEditorOptions props

.eslintrc.js

@@ -71,6 +71,7 @@ module.exports = {
     'react/require-default-props': 'warn',
     'react/no-unused-prop-types': 'warn',
     'jsx-a11y/click-events-have-key-events': 'warn',
+    'react/jsx-no-bind': 'off',
 
     // import 相关
     'import/prefer-default-export': 'off',

packages/core/src/editor/index.tsx

@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import { Allotment } from 'allotment';
 import { CommandLineIcon } from '@heroicons/react/24/outline';
 import merge from 'lodash/merge';
+import BaseMonaco from 'monaco-editor';
 
 import { ModelInfoType } from '../types/monaco';
 import FileNavBar from '../components/FileNavBar';
@@ -40,10 +41,12 @@ export type TEditorProps = {
   id: string;
   modelInfos: ModelInfoType[];
   height: string;
+  disableValidation?: boolean;
   fileNav?: TFileNavProps;
   rounded?: string;
   console?: TConsoleProps;
   deploy?: TDeployProps;
+  monacoEditorOptions?: BaseMonaco.editor.IStandaloneEditorConstructionOptions;
   // onSuccess?: Dispatch<SetStateAction<number>>;
   // onFailure?: () => void;
   // onCompile?: () => void;
@@ -79,6 +82,7 @@ function Main(props: TEditorProps) {
     fileNav = {},
     rounded = '12px',
     modelInfos,
+    ...others
   } = props;
   const consoleProps = merge(DefaultConsoleProps, console);
   const deployProps = merge(DefaultDeployProps, deploy);
@@ -123,7 +127,7 @@ function Main(props: TEditorProps) {
                   }}
                   />
                 )}
-                <MonacoEditor modelInfos={modelInfos} />
+                <MonacoEditor modelInfos={modelInfos} {...others} />
               </Allotment.Pane>
               {consoleProps.open && (
                 <Allotment.Pane

packages/core/src/editor/monacoEditor.tsx

@@ -21,9 +21,11 @@ loader.config({ paths: { vs: 'https://cdn.jsdelivr.net/npm/[email protected]/
 
 interface IProps {
   modelInfos: ModelInfoType[];
+  disableValidation?: boolean;
+  monacoEditorOptions?: BaseMonaco.editor.IStandaloneEditorConstructionOptions;
 }
 
-function App({ modelInfos }: IProps) {
+function App({ modelInfos, disableValidation = false, monacoEditorOptions = {} }: IProps) {
   const {
     stateRef, dispatch, actions, id,
   } = useEditor();
@@ -46,7 +48,9 @@ function App({ modelInfos }: IProps) {
     actions.updateCodeParserLoading(false);
 
     registerCommandsAndActions(monaco, editor, dispatch, stateRef.current);
-    registerListeners(editor, editorApiRef.current, stateRef.current);
+    // TODO 目前监听仅有处理语法校验问题，后续状态控制需要特殊处理
+    // eslint-disable-next-line no-unused-expressions
+    !disableValidation && registerListeners(editor, editorApiRef.current, stateRef.current);
   }
 
   function handleEditorBeforeMount(monaco: Monaco) {
@@ -113,6 +117,8 @@ function App({ modelInfos }: IProps) {
         minimap: {
           enabled: false,
         },
+        fontSize: 14,
+        ...monacoEditorOptions,
       }}
     />
   );