dt-react-monaco-editor
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);
}}
editorInstanceRef={(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);
}}
diffEditorInstanceRef={(ins) => (editorRef.current = ins)}
/>
);
}
Properties
Common Properties
common properties can be used on MonacoEditor
and MonacoDiffEditor
.
-
theme
theme used when the editor renders, defaults tovs
. -
language
language of model in editor, defaults tosql
. -
sync
sync value to model when value change, if sync property is true, the editor is controlled, defaults tofalse
. -
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. -
readOnly
set modified editor readonly. -
[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.