I have a functional component in my React project. I have included the Monaco editor dependency as
import * as Monaco from 'monaco-editor/esm/vs/editor/editor.api';
How to use Editor object from here to actually render and test things for monaco-editor?
I have code like below,
return (
<Flex>
<Flex.Box auto>
<Input.Textarea
ref={ref}
size="small"
value={value}
onChange={onChange}
onKeyPress={(e) => { handleKeyDown(e, value); }}
error={error}
readOnly={readOnly}
/>
<MonacoEnvironment.
</Flex.Box>
<Flex align="flex-start" w="21px">
{icon}
</Flex>
</Flex>
);
I am looking at MonacoEnvironment object, but I am clueless about setting it up as an Editor.
I want to mimick the below functionality in my code,
monaco.editor.create(document.getElementById('container'), {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript'
});
I see two options for you here:
document.getElementById call in the second code snippet. This requires an element with the id container: return (
<Flex>
<Flex.Box auto>
<Input.Textarea
ref={ref}
size="small"
value={value}
onChange={onChange}
onKeyPress={(e) => { handleKeyDown(e, value); }}
error={error}
readOnly={readOnly}
/>
<div id="container />
</Flex.Box>
<Flex align="flex-start" w="21px">
{icon}
</Flex>
</Flex>
);
return (
<Flex>
<Flex.Box auto>
<Input.Textarea
ref={ref}
size="small"
value={value}
onChange={onChange}
onKeyPress={(e) => { handleKeyDown(e, value); }}
error={error}
readOnly={readOnly}
/>
<MonacoEditor
width="800"
height="600"
language="javascript"
theme="vs-dark"
value={code}
options={options}
/>
</Flex.Box>
<Flex align="flex-start" w="21px">
{icon}
</Flex>
</Flex>
);
You don't need that second part then, where you manually created the editor.