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

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

See Monaco Editor integrate Docs.

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)} /> ); }

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)} /> ); }

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.

• 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).

• 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).

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 for zh-CN
• changelog base on commits