| 1 | import React from 'react';
|
| 2 | import { MonacoApi, MonacoCodeEditor, MonacoEditor } from './MonacoEditor';
|
| 3 |
|
| 4 | export default {
|
| 5 | title: 'editors/monaco/amd',
|
| 6 | };
|
| 7 |
|
| 8 | export const DynamicLoadDemo = () => {
|
| 9 | const ref = React.useRef<[MonacoCodeEditor, MonacoApi]>();
|
| 10 | const [value, setValue] = React.useState('{"name":"wener"}');
|
| 11 | return (
|
| 12 | <div>
|
| 13 | <div>
|
| 14 | <button onClick={() => ref.current?.[0].getAction('editor.action.formatDocument')?.run()}>Format</button>
|
| 15 | </div>
|
| 16 | <MonacoEditor
|
| 17 | value={value}
|
| 18 | onChange={(v) => setValue(v)}
|
| 19 | language="json"
|
| 20 | theme="vs-dark"
|
| 21 | height={640}
|
| 22 | editorDidMount={(...args) => (ref.current = args)}
|
| 23 | />
|
| 24 | </div>
|
| 25 | );
|
| 26 | };
|