0.0.20 • Published 2 months ago
monaco-dolphindb v0.0.20
monaco-dolphindb
Install
# 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
Prepare
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.
Usage
Vanilla
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,
});
React
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.
MonacoDolphinDBEditor
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 />);
MonacoDolphinDBDiffEditor
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 />);
0.0.20
2 months ago
0.0.19
2 months ago
0.1.0-beta.1
6 months ago
0.0.14
7 months ago
0.0.15
7 months ago
0.0.16
7 months ago
0.0.17
7 months ago
0.0.10
8 months ago
0.0.11
8 months ago
0.0.12
8 months ago
0.0.13
8 months ago
0.0.9
8 months ago
0.0.8
8 months ago
0.0.7
8 months ago
0.0.6
9 months ago
0.0.5
9 months ago
0.0.3
11 months ago
0.0.2
11 months ago
0.0.2-beta.3
11 months ago
0.0.2-beta.2
11 months ago
0.0.2-beta.1
11 months ago
0.0.1
11 months ago