@askrjs/monaco

ESM-only Askr wrapper for Monaco Editor.

This package keeps the wrapper thin on purpose: it hosts Monaco inside an Askr component without inventing a second editor API. Raw Monaco options, external model ownership, and direct editor/namespace escape hatches are the contract.

Install

npm install @askrjs/monaco monaco-editor

Import

import { MonacoEditor } from '@askrjs/monaco';
import * as monaco from 'monaco-editor';

Example

const model = monaco.editor.createModel(
  'const answer = 42;',
  'typescript',
  monaco.Uri.parse('file:///src/example.ts')
);

<MonacoEditor
  monaco={monaco}
  model={model}
  options={{ automaticLayout: true, minimap: { enabled: false } }}
  onMount={(editor) => {
    editor.focus();
  }}
/>;

Status

• Root package and direct subpath exports expose the thin wrapper.
• @askrjs/monaco/testing exposes deterministic model-editing helpers for browser tests without pretending that touch devices have a keyboard modifier.
• MonacoEditor lazy-loads Monaco by default or accepts an injected namespace.
• Wrapper-owned concerns are host lifecycle, model wiring, and typed escape hatches.
• Controlled parent rerenders retain the live editor host, so focus, selection, history, and completion state survive model-content callbacks. Actual component unmount remains the single disposal boundary.
• Wrapper-owned path values must be unique; pass an existing Monaco model through model={monaco.editor.getModel(uri)} when sharing is intentional.

Layout

• src/components/monaco-editor - public wrapper surface
• tests - unit, jsdom, and browser smoke coverage
• docs - repo notes and package overview

Docs

• Docs index
• Package overview
• Testing editor interactions
• Vite and Rolldown lazy workers