Tengo un componente funcional en mi proyecto React. He incluido la dependencia del editor Monaco como
import * as Monaco from 'monaco-editor/esm/vs/editor/editor.api';
¿Cómo usar el objeto Editor desde aquí para renderizar y probar cosas para monaco-editor?
Tengo un código como el siguiente,
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> );Estoy mirando el objeto MonacoEnvironment, pero no tengo ni idea de cómo configurarlo como Editor.
Quiero imitar la siguiente funcionalidad en mi código,
monaco.editor.create(document.getElementById('container'), { value: [ 'function x() {', '\tconsole.log("Hello world!");', '}' ].join('\n'), language: 'javascript' });Veo dos opciones para ti aquí:
document.getElementById en el segundo fragmento de código. Esto requiere un elemento con el container de identificación: 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> );Entonces, no necesita esa segunda parte, donde creó manualmente el editor.