Monaco Editor
Monaco Editor: anatomy, keyboard behavior, state, and theming in Askr.
Example
import { MonacoEditor } from '@askrjs/monaco';
// MonacoEditorProps has no onChange — subscribe to edits through onMount
// and the real Monaco editor instance it hands you instead.
<MonacoEditor
value={source()}
language="typescript"
onMount={(editor) => {
editor.onDidChangeModelContent(() => setSource(editor.getValue()));
}}
options={{ minimap: { enabled: false } }}
/>Lazy loading
By default, MonacoEditor calls its built-in loader to fetch monaco-editor on demand, so the editor's dependency weight stays out of your initial bundle. Supply a loadMonaco function if you need to control the fetch — say, loading from a CDN or a pinned local build — or pass an already-imported namespace through the monaco prop to skip lazy loading entirely and mount synchronously.
Editor ownership
MonacoEditor renders a plain div (JSX.IntrinsicElements['div'] minus children and ref) and forwards editorRef and monacoRef so you can reach the live IStandaloneCodeEditor instance and the monaco namespace once mounted. beforeMount, onMount, onUnmount, and onError give you lifecycle hooks around Monaco's own initialization, so you configure languages, themes, or providers directly against Monaco rather than through a wrapper API.
Models and disposal
Pass an external model (an ITextModel) when you want to own creation and disposal yourself — useful for tabs, diff views, or anything sharing a model across editors. If you don't pass one, the wrapper manages a model from value, defaultValue, language, and path for you. path values need to be unique per model; reuse monaco.editor.getModel(uri) to intentionally share one instead of creating a duplicate.
SSR fallback
MonacoEditor depends on Monaco's browser runtime, so it has nothing useful to render on the server beyond its container div — there is no server-side text or DOM fallback baked into the wrapper. Wrap it in whatever loading UI or client-only gate your app uses for other browser-only widgets, and mount it after hydration.