@astii/monaco-editor

Monaco Editor component for React. which based on @monaco-editor/react. Provide more custom configurations and capabilities

Features

• [x] Support tsx theme and syntax highlight
• [x] Support ts(x) compile and babel-standalone
• [x] Support extraLibs
• [x] Support more monaco-editor events
• [x] Support AI copilot with @astii/monaco-copilot
• [x] Support AI code chat with @astii/monaco-chat

Install

$ yarn add @astii/monaco-editor

Usage

import React, { useCallback, useRef, useState } from "react";
import { Code, type EditorProps, type HandlerType, type Editor } from "@astii/monaco-editor";
export default () => {
  const codeIns = useRef<HandlerType>();
  const [value, setValue] = useState<string | undefined>(`const Test = () => {
    const num: number = 123
    return (
      <div className='test'>
        {num}
        <h3 style={{color: '#00FF00'}}>这是一个React组件</h3>
      </div>
    )
  }
  `);

  const handleFormat = () => {
    codeIns.current?.format();
  };

  const handleCompile = useCallback(async () => {
    const code = await codeIns.current.compile(value);
    console.log(code);
  }, [value]);

  return (
    <div>
      <button onClick={handleFormat}>format</button>
      <button onClick={handleCompile}>compile</button>
      <div style={{height: 300}}>
        <Editor
          ref={codeIns}
          value={value}
          language="typescript"
          isTsx={true}
          height={800}
          path={"index.tsx"}
          onMount={(editor, monaco) => {
            console.log("editor mounted", editor, monaco);
          }}
          onChange={(value) => setValue(value)}
        />
      </div>
    </div>
  );
};

Options

type EditorProps = {
  /**
   * Default value of the current model
   */
  defaultValue?: string;
  /**
   * Default language of the current model
   */
  defaultLanguage?: string;
  /**
   * Default path of the current model
   * Will be passed as the third argument to `.createModel` method
   * `monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))`
   */
  defaultPath?: string;
  /**
   * Value of the current model
   */
  value?: string;
  /**
   * Language of the current model
   */
  language?: string;
  /**
   * Path of the current model
   * Will be passed as the third argument to `.createModel` method
   * `monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))`
   */
  path?: string;
  /**
   * The theme for the monaco
   * Available options "vs-dark" | "light"
   * Define new themes by `monaco.editor.defineTheme`
   * @default "light"
   */
  theme?: Theme | string;
  /**
   * The line to jump on it
   */
  line?: number;
  /**
   * The loading screen before the editor will be mounted
   * @default "Loading..."
   */
  loading?: ReactNode;
  /**
   * IStandaloneEditorConstructionOptions
   */
  options?: editor.IStandaloneEditorConstructionOptions;
  /**
   * IEditorOverrideServices
   */
  overrideServices?: editor.IEditorOverrideServices;
  /**
   * Indicator whether to save the models' view states between model changes or not
   * Defaults to true
   */
  saveViewState?: boolean;
  /**
   * Indicator whether to dispose the current model when the Editor is unmounted or not
   * @default false
   */
  keepCurrentModel?: boolean;
  /**
   * Width of the editor wrapper
   * @default "100%"
   */
  width?: number | string;
  /**
   * Height of the editor wrapper, must set the height of parentNode
   * @default "100%"
   */
  height?: number | string;
  /**
   * Class name for the editor container
   */
  className?: string;
  /**
   * Props applied to the wrapper element
   */
  wrapperProps?: object;
  /**
   * Signature: function(monaco: Monaco) => void
   * An event is emitted before the editor is mounted
   * It gets the monaco instance as a first argument
   * Defaults to "noop"
   */
  beforeMount?: BeforeMount;
  /**
   * Signature: function(editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => void
   * An event is emitted when the editor is mounted
   * It gets the editor instance as a first argument and the monaco instance as a second
   * Defaults to "noop"
   */
  onMount?: OnMount;
  /**
   * Signature: function(value: string | undefined, ev: monaco.editor.IModelContentChangedEvent) => void
   * An event is emitted when the content of the current model is changed
   */
  onChange?: OnChange;
  /**
   * Signature: function(markers: monaco.editor.IMarker[]) => void
   * An event is emitted when the content of the current model is changed
   * and the current model markers are ready
   * Defaults to "noop"
   */
  onValidate?: OnValidate;
};

interface CoderProps extends EditorProps {
  extraLib?: { name: string; content: string }[];
  isTsx?: boolean;
  loaderConfig?: {
    paths: {
      vs: string;
    };
  };
  eslint?: Partial<{
    src: string;
    config: Record<string, any>;
  }>;
  /**
   * babel-standalone
   * @default "https://unpkg.com/@babel/standalone/babel.min.js"
   */
  babel?: Partial<{
    standalone: string;
    options: TransformOptions;
  }>;
  onBlur?: (editor: editor) => void;
  onFocus?: (editor: editor) => void;
}

Handler

type HandlerType = {
  format(): void;
  compile(value?: string, options?: TransformOptions): Promise<string>;
  transform(
    options?: Partial<{ ignores: string[]; semantic: boolean }>
  ): Promise<EmitOutput["outputFiles"] | Diagnostic[]>;
  getSemanticDiagnostics(): Promise<Diagnostic[]>;
  anchorDiagnostic(diagnostic: Diagnostic): void;
};

LICENSE

MIT