Version 0.46.0 of monaco-editor introduced some breaking changes.
.
Namely, the EditorOption map has changed (source code here, API reference here), breaking features such as this:
import * as monaco from "monaco-editor";
// Value of `lineHeight` is incorrect: broken due to monaco-editor update
const lineHeight = editorRef.current.getOption(monaco.editor.EditorOption.lineHeight);
/*
* Note:
* `editorRef.current.getOption` refers to the `@monaco-editor/react -> Editor` instance
* `monaco.editor.[...]` refers to the `import *` from `monaco-editor`
* /
Source code for EditorOption can be found either on the monaco-editor npm page as esm/vs/editor/editor.api.d.ts or the vscode GitHub repo as src/vs/monaco.d.ts.
Because editorRef.current.getOption() comes from monaco-react (maintained by @suren-atoyan), but monaco.editor.EditorOption.lineHeight comes from monaco-editor (maintained by @microsoft), and the versions are out-of-sync, these changes break user applications that depends on monaco-react.
I have personally ran into such issues, as have others. This is made apparent by issues created on the monaco-react repo such as this one: Bug issue #546.
Some temporary solutions before the PR merge is to modify the Editor component in monaco-react to include these lines in the useMount() hook:
loader.config({ paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.46.0/min/vs' } }); // this is new
const cancelable = loader.init(); // this should already exist
Alternatively, one could also use the monaco instance provided by the monaco-react library by following this guide on the documentation. However, this is not ideal in some cases, because users still have to import from the monaco-editor package for TypeScript type definitions.
NOTE: For TypeScript type definitions, this package uses the monaco-editor package as a peer dependency. So, if you need types and don't already have the monaco-editor package installed, you will need to do so
Version
0.46.0
ofmonaco-editor
introduced some breaking changes..
Namely, the
EditorOption
map has changed (source code here, API reference here), breaking features such as this:API References
.getOption()
: hereEditorOption
: hereEditorOption
can be found either on the monaco-editor npm page asesm/vs/editor/editor.api.d.ts
or the vscode GitHub repo assrc/vs/monaco.d.ts
.Because
editorRef.current.getOption()
comes from monaco-react (maintained by @suren-atoyan), butmonaco.editor.EditorOption.lineHeight
comes from monaco-editor (maintained by @microsoft), and the versions are out-of-sync, these changes break user applications that depends on monaco-react.I have personally ran into such issues, as have others. This is made apparent by issues created on the monaco-react repo such as this one: Bug issue #546.
Some temporary solutions before the PR merge is to modify the Editor component in monaco-react to include these lines in the
useMount()
hook:Alternatively, one could also use the monaco instance provided by the monaco-react library by following this guide on the documentation. However, this is not ideal in some cases, because users still have to import from the
monaco-editor
package for TypeScript type definitions.^ From the documentation
Note: Similar PRs have been merged in the past (see #33), this is just the continuation of such efforts.