Monaco Editor en React
Monaco Editor es la biblioteca que usa Microsoft para desarrollar el editor de código Visual Studio Code, basicamente esta biblioteca te permite tener el autocompletado basico, el minimapa, el resaltado de código, entre otras caracteristicas core de VSCode.
Monaco editor se pude instalar con una CDN o con un paquete de Nodejs. Y al ser bibliotecas de Javascript se pueden adaptar a un componente de React, pero como esto lleva trabajo y estoy seguro que muchos les gustaria ya tenerlo listo en un componente, existen dos paquetes para react que son facilmente instalables:
- https://github.com/react-monaco-editor/react-monaco-editor
- https://www.npmjs.com/package/@monaco-editor/react
En lo personal, probando ambos, el paquete que mas actualizaciones tiene y menos errores me ha dado es @monaco-editor/react. Tambien he llegado a usar el otro paquete react-monaco-editor, pero me he encontrado bugs que el otro paquete ya tiene resuleto, así que en este ejemplo usaré
Lista de temas
- Instalación de Monaco Editor
- Opciones de Monaco Editor como el tema, el lenguaje por defecto
- eventos de @monaco-editor/react como
Height
height="90vh"
theme
theme="vs-dark"
default language
defaultLanguage="markdown"
Default Value
defaultValue="Hello, world!"
onMount
function handleEditorDidMount(editor, monaco) { editorRef.current = editor; }
function showValue() { console.log(editorRef.current.getValue()); }
<button onClick={showValue}>Save Your Changes</button>
onMount={handleEditorDidMount}
onChange
function handleEditorChange(value, event) { console.log("here is the current model value:", value); }
onChange={handleEditorChange}
Commandos en Monaco editor
https://www.npmjs.com/package/@monaco-editor/react#installation
Ctrl+S: https://github.com/microsoft/monaco-editor/issues/25 https://codesandbox.io/s/addcommand-forked-cghjn
Añadir Temas
Para añadir otros temas diferentes tienes la opcion de crearlos desde cero o usar el paquete de npm monaco-themes
- https://github.com/suren-atoyan/monaco-react/blob/277c249ffef6a6a4bb5ea12e2a20fa78abdbddea/demo/src/store/effects/index.js
- https://stackoverflow.com/questions/61511974/how-to-change-monaco-editor-background-colour-in-react
- https://github.com/brijeshb42/monaco-themes
- https://editor.bitwiser.in/
- Repositorio de Código de Monaco Themes
- https://codesandbox.io/s/monaco-editorcustom-theme-quhcg?file=/src/index.js
Si usas Typescript, tambien es necesario que definas un module:
Más Recursos
- https://stackoverflow.com/questions/60355761/no-syntax-highlighting-with-react-monaco-editor
- https://microsoft.github.io/monaco-editor/