dt-react-monaco-editor

dt-react-monaco-editor

Monaco Editor React Components

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

• changelog for zh-CN
• changelog base on commits