# peerDependencies
pnpm add dolphindb monaco-editor vscode-oniguruma vscode-textmate
pnpm add monaco-dolphindb
# optionalDependencies if you want to use 'monaco-dolphindb/react'
pnpm add @monaco-editor/react
monaco-dolphindb need some external resources to work properly, you should copy them from node_modules to your project:
-
onig.wasm
fromvscode-oniguruma/release/onig.wasm
-
docs.en.json
anddocs.zh.json
fromdolphindb
Then write some code to load them.
import { registerDolphinDBLanguage } from 'monaco-dolphindb';
import { loadWASM } from 'vscode-oniguruma';
// load wasm
await loadWASM(await fetch('/onig.wasm'));
await registerDolphinDBLanguage(Monaco, {
docs: '/docs.zh.json',
});
const editor = Monaco.editor.create(document.getElementById('root')!, {
value: '1 + 2',
language: 'dolphindb',
...settings,
});
PS: monaco-dolphindb/react
include some special logic to make it easy to use for our internal project, so it may not fit your project, you can copy the source code and modify it to fit your project.
import { loadWASM } from 'vscode-oniguruma';
import { MonacoDolphinDBEditor } from 'monaco-dolphindb/react';
import * as monaco from 'monaco-editor';
import { loader } from '@monaco-editor/react';
import * as ReactDOM from 'react-dom/client';
loader.config({
monaco,
});
async function beforeMonacoEditorInit() {
return loadWASM(await fetch('/onig.wasm'));
}
function App() {
const [value, setValue] = React.useState('1 + 2');
const onChange = React.useCallback((value?: string) => {
setValue(value ?? '');
}, []);
return (
<MonacoDolphinDBEditor
dolphinDBLanguageOptions={{
docs: '/docs.zh.json',
language: 'zh',
}}
beforeInit={beforeMonacoEditorInit}
options={{
acceptSuggestionOnEnter: 'on',
}}
value={value}
onChange={onChange}
/>
);
}
ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
import { loadWASM } from 'vscode-oniguruma';
import { MonacoDolphinDBDiffEditor } from 'monaco-dolphindb/react';
import * as monaco from 'monaco-editor';
import { loader } from '@monaco-editor/react';
import * as ReactDOM from 'react-dom/client';
loader.config({
monaco,
});
async function beforeMonacoEditorInit() {
return loadWASM(await fetch('/onig.wasm'));
}
function App() {
return (
<MonacoDolphinDBDiffEditor
dolphinDBLanguageOptions={{
docs: '/docs.zh.json',
language: 'zh',
}}
beforeInit={beforeMonacoEditorInit}
original="1 + 2"
modified="1 + 3"
/>
);
}
ReactDOM.createRoot(document.getElementById('root')!).render(<App />);