Skip to content

DTStack/dt-react-monaco-editor

Repository files navigation

dt-react-monaco-editor

Monaco Editor React Components

NPM version NPM downloads

English | 简体中文

Introduction

Provides MonacoEditor and MonacoDiffEditor component, make it easier to use Monaco Editor in React.


Installation

use npm

npm install dt-react-monaco-editor

or use yarn

yarn add dt-react-monaco-editor

or use pnpm

pnpm install dt-react-monaco-editor

Integrating

See Monaco Editor integrate Docs.


Usage

MonacoEditor Component

import { MonacoEditor } from 'dt-react-monaco-editor';

function App() {
    const editorRef = useRef();
    return (
        <MonacoEditor
            value=""
            language="javascript"
            style={{ height: 400, width: 600 }}
            onChange={(value) => {
                console.log(value);
            }}
            editorDidMount={(ins) => (editorRef.current = ins)}
        />
    );
}

MonacoDiffEditor Component

import { MonacoDiffEditor } from 'dt-react-monaco-editor';

function App() {
    const editorRef = useRef();
    return (
        <MonacoDiffEditor
            original="const a = 1;"
            value="const a = 2;"
            language="sql"
            style={{ height: 400, width: 1200 }}
            onChange={(value) => {
                console.log(value);
            }}
            editorDidMount={(ins) => (editorRef.current = ins)}
        />
    );
}

Properties

Common Properties

common properties can be used on MonacoEditor and MonacoDiffEditor.

  • theme theme used when the editor renders, defaults to vs.
  • language language of model in editor, defaults to sql.
  • sync sync value to model when value change, if sync property is true, the editor is controlled, defaults to false.
  • onChange an event emitted when the value of the editor model has changed.

MonacoEditor Own Properties

  • value value of model in editor.
  • options options for monaco editor, refer to monaco interface IStandaloneEditorConstructionOptions.
  • [deprecated] editorInstanceRef get editor instance.
  • onCursorSelection an event emitted when the selection of the editor model has changed.
  • onFocus an event emitted when the editor is in focus.
  • onBlur an event emitted when the editor is out of focus.
  • editorWillMount called immediately before the editor is mounted (similar to componentWillMount of React).
  • editorDidMount called immediately after the editor is mounted (similar to componentDidMount of React).
  • editorWillUnMount called immediately before the editor is destroyed (similar to componentWillUnmount of React).

MonacoDiffEditor Own Properties

  • value value of model in modifiedEditor.
  • original value of model in originalEditor.
  • options options for monaco diff editor, refer to monaco interface IStandaloneDiffEditorConstructionOptions.
  • [deprecated] diffEditorInstanceRef get diff editor instance.
  • editorWillMount called immediately before the editor is mounted (similar to componentWillMount of React).
  • editorDidMount called immediately after the editor is mounted (similar to componentDidMount of React).
  • editorWillUnMount called immediately before the editor is destroyed (similar to componentWillUnmount of React).

Support more sql languages

Please see monaco-sql-languages.

monaco-sql-languages provides highlighting, error prompts and auto-completion functions for many kinds of SQL Languages for BigData domain. It supports on-demand import and is easy to integrate.


CHANGELOG