@vmz/plugin-monaco 0.0.4 → 0.1.1

package/components/Monaco.vmz

@@ -3,74 +3,182 @@
 </template>
 
 <style>
+/*
+  Isolate Monaco glyph metrics from page CSS.
+  Inherited letter-spacing / proportional fonts desync caret + selection overlays.
+*/
 .monaco-host {
   display: block;
   width: 100%;
   height: 100%;
   min-height: 0;
+  overflow: hidden;
+  position: relative;
+  box-sizing: border-box;
+  font: 14px/21px Consolas, "Courier New", Menlo, Monaco, monospace !important;
+  letter-spacing: 0 !important;
+  word-spacing: 0 !important;
+  font-variant-ligatures: none !important;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+}
+.monaco-host .monaco-editor {
+  width: 100% !important;
+  height: 100% !important;
+  outline: none;
+  font-family: Consolas, "Courier New", Menlo, Monaco, monospace !important;
+  font-size: 14px !important;
+  line-height: 21px !important;
+  letter-spacing: 0 !important;
+}
+.monaco-host .monaco-editor .view-lines,
+.monaco-host .monaco-editor .view-line,
+.monaco-host .monaco-editor .view-line span,
+.monaco-host .monaco-editor .margin-view-overlays,
+.monaco-host .monaco-editor .lines-content {
+  font-family: Consolas, "Courier New", Menlo, Monaco, monospace !important;
+  font-size: 14px !important;
+  line-height: 21px !important;
+  letter-spacing: 0 !important;
+  word-spacing: 0 !important;
+}
+/*
+  Keep the hidden textarea from painting native OS selection
+  (shows up as yellow boxes / black bands when metrics desync).
+*/
+.monaco-host .monaco-editor .inputarea,
+.monaco-host .monaco-editor textarea.inputarea,
+.monaco-host .monaco-editor .native-edit-context {
+  opacity: 0 !important;
+  color: transparent !important;
+  background: transparent !important;
+  caret-color: transparent !important;
+  outline: none !important;
+  box-shadow: none !important;
+  border: 0 !important;
+  -webkit-user-select: text;
+  user-select: text;
+}
+.monaco-host .monaco-editor .inputarea::selection,
+.monaco-host .monaco-editor textarea.inputarea::selection,
+.monaco-host .monaco-editor .native-edit-context::selection {
+  background: transparent !important;
+  color: transparent !important;
+}
+.monaco-host .monaco-editor .inputarea::-moz-selection,
+.monaco-host .monaco-editor textarea.inputarea::-moz-selection,
+.monaco-host .monaco-editor .native-edit-context::-moz-selection {
+  background: transparent !important;
+  color: transparent !important;
 }
 </style>
 
 <script client>
-import { mountMonaco } from '@vmz/plugin-monaco/runtime';
-
 export default class Monaco {
-  public value: string = '';
-  public language: string = 'typescript';
-  public theme: string = 'vs-dark';
-  public readOnly: boolean = false;
-  /** Parent callback — keeps page state authoritative (same pattern as Switch.onChange). */
-  public onChange: ((v: string) => void) | null = null;
+  public value: string = ""
+  public language: string = "typescript"
+  public theme: string = "vs"
+  public readOnly: boolean = false
+  /** Optional JSON Schema URL (IR — completion + diagnostics). */
+  public jsonSchemaUrl: string = ""
+  public onChange: ((v: string) => void) | null = null
 
   #api: {
-    getValue: () => string;
-    setValue: (v: string) => void;
-    dispose: () => void;
-  } | null = null;
-  #applyingExternal = false;
-  #valueWatch: (() => void) | null = null;
+    getValue: () => string
+    setValue: (v: string) => void
+    dispose: () => void
+    monaco?: { editor?: { setTheme?: (t: string) => void } }
+  } | null = null
+  #applyingExternal = false
+  #valueWatch: (() => void) | null = null
+  #mountGen = 0
+  #onScheme: ((e: Event) => void) | null = null
+
+  #resolveTheme() {
+    if (typeof document === "undefined") return this.theme || "vs"
+    const dark =
+      document.documentElement.getAttribute("data-theme") === "dark" ||
+      document.documentElement.dataset.theme === "dark"
+    return dark ? "vs-dark" : "vs"
+  }
 
   async onMount() {
-    if (typeof window === 'undefined') return;
-    const root = this.__vmzDomRoot;
+    if (typeof window === "undefined") return
+    const gen = ++this.#mountGen
+    const root = this.__vmzDomRoot
     const el =
-      (root && root.nodeType === 1 && root.matches?.('[data-vmz-monaco]') && root) ||
-      root?.querySelector?.('[data-vmz-monaco]') ||
-      root;
-    if (!el || el.nodeType !== 1) return;
-    this.#api = await mountMonaco(el, {
+      (root && root.nodeType === 1 && root.matches?.("[data-vmz-monaco]") && root) ||
+      root?.querySelector?.("[data-vmz-monaco]") ||
+      root
+    if (!el || el.nodeType !== 1) return
+
+    this.#api?.dispose()
+    this.#api = null
+
+    // Dynamic import — never evaluate monaco on the Node/SSR route path.
+    const { mountMonaco } = await import("@vmz/plugin-monaco/runtime")
+    if (gen !== this.#mountGen || this.__vmzDestroyed) return
+
+    const theme = this.#resolveTheme()
+    this.theme = theme
+
+    const api = await mountMonaco(el, {
       value: this.value,
       language: this.language,
-      theme: this.theme,
+      theme,
       readOnly: this.readOnly,
+      jsonSchemaUrl: this.jsonSchemaUrl || undefined,
       onChange: (v) => {
-        this.#applyingExternal = true;
-        this.value = v;
-        this.#applyingExternal = false;
-        if (typeof this.onChange === 'function') this.onChange(v);
+        this.#applyingExternal = true
+        this.value = v
+        this.#applyingExternal = false
+        if (typeof this.onChange === "function") this.onChange(v)
       },
-    });
-    // Parent may push a new `value` after mount (loadSpec). Sync into the editor.
-    let last = this.value;
+    })
+    if (gen !== this.#mountGen || this.__vmzDestroyed) {
+      api.dispose()
+      return
+    }
+    this.#api = api
+
+    this.#onScheme = () => {
+      const next = this.#resolveTheme()
+      this.theme = next
+      try {
+        this.#api?.monaco?.editor?.setTheme?.(next)
+      } catch {
+        /* ignore */
+      }
+    }
+    window.addEventListener("davinci-theme", this.#onScheme)
+    window.addEventListener("storage", this.#onScheme)
+
+    let last = this.value
     const tick = () => {
-      if (!this.#api || this.__vmzDestroyed) return;
-      if (this.#applyingExternal) return;
+      if (!this.#api || this.__vmzDestroyed) return
+      if (this.#applyingExternal) return
       if (this.value !== last) {
-        last = this.value;
+        last = this.value
         if (this.#api.getValue() !== this.value) {
-          this.#api.setValue(this.value ?? '');
+          this.#api.setValue(this.value ?? "")
         }
       }
-    };
-    const id = window.setInterval(tick, 50);
-    this.#valueWatch = () => window.clearInterval(id);
+    }
+    const id = window.setInterval(tick, 50)
+    this.#valueWatch = () => window.clearInterval(id)
   }
 
   onDestroy() {
-    this.#valueWatch?.();
-    this.#valueWatch = null;
-    this.#api?.dispose();
-    this.#api = null;
+    this.#mountGen++
+    if (this.#onScheme && typeof window !== "undefined") {
+      window.removeEventListener("davinci-theme", this.#onScheme)
+      window.removeEventListener("storage", this.#onScheme)
+    }
+    this.#onScheme = null
+    this.#valueWatch?.()
+    this.#valueWatch = null
+    this.#api?.dispose()
+    this.#api = null
   }
 }
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vmz/plugin-monaco",
-  "version": "0.0.4",
+  "version": "0.1.1",
   "type": "module",
   "description": "VMZ Monaco editor adapter - <Monaco>",
   "license": "MIT",
@@ -17,7 +17,7 @@
     }
   },
   "dependencies": {
-    "@vmz/plugin": "0.0.4"
+    "@vmz/plugin": "0.1.1"
   },
   "peerDependencies": {
     "monaco-editor": ">=0.52"

package/runtime.ts

@@ -1,35 +1,280 @@
 /**
- * Monaco mount helper (browser). First slice: imperative create/dispose.
- * Peer: monaco-editor.
+ * Monaco mount helper (browser). Peer: monaco-editor.
+ *
+ * Dynamic-imports monaco so Node/SSR route collection never evaluates the
+ * browser bundle (`window is not defined`).
+ *
+ * Embedded VMZ hosts desync selection overlays unless we pin fonts, disable
+ * EditContext, remasure fonts, and drive layout via ResizeObserver.
  */
 
+export type JsonSchemaRegistration = {
+    uri: string;
+    fileMatch?: string[];
+    schema: object;
+};
+
 export type MountMonacoOptions = {
     value?: string;
     language?: string;
     theme?: string;
     readOnly?: boolean;
     onChange?: (v: string) => void;
+    jsonSchemaUrl?: string;
+    jsonSchemas?: JsonSchemaRegistration[];
+};
+
+type MonacoEnv = {
+    getWorkerUrl?: (moduleId: string, label: string) => string;
+    getWorker?: (moduleId: string, label: string) => Worker;
 };
 
+let mountSeq = 0;
+
+function ensureMonacoEnvironment(): void {
+    const g = globalThis as typeof globalThis & { MonacoEnvironment?: MonacoEnv };
+    if (g.MonacoEnvironment?.getWorker || g.MonacoEnvironment?.getWorkerUrl) return;
+    g.MonacoEnvironment = {
+        getWorkerUrl(_moduleId: string, label: string) {
+            if (label === 'json') return '/vendor/monaco-json.worker.js';
+            return '/vendor/monaco-editor.worker.js';
+        },
+    };
+}
+
+function ensureMonacoCss(): void {
+    if (typeof document === 'undefined') return;
+    if (document.querySelector('link[data-vmz-monaco-css]')) return;
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = '/vendor/plugin-monaco-runtime.css';
+    link.setAttribute('data-vmz-monaco-css', '');
+    document.head.appendChild(link);
+}
+
+async function loadJsonSchema(url: string): Promise<JsonSchemaRegistration | null> {
+    try {
+        const res = await fetch(url);
+        if (!res.ok) return null;
+        const schema = (await res.json()) as object;
+        const id = typeof (schema as { $id?: unknown }).$id === 'string' ? String((schema as { $id: string }).$id) : url;
+        return {
+            uri: id,
+            fileMatch: ['*'],
+            schema,
+        };
+    } catch {
+        return null;
+    }
+}
+
+function disposeHostEditor(el: HTMLElement): void {
+    const prior = (el as HTMLElement & { __vmzMonaco?: { dispose: () => void } }).__vmzMonaco;
+    if (!prior) return;
+    try {
+        prior.dispose();
+    } catch {
+        /* ignore */
+    }
+    delete (el as HTMLElement & { __vmzMonaco?: unknown }).__vmzMonaco;
+    el.replaceChildren();
+}
+
+function deadApi() {
+    return {
+        editor: null as unknown as never,
+        monaco: null as unknown as never,
+        getValue: () => '',
+        setValue: (_v: string) => {},
+        dispose: () => {},
+    };
+}
+
 export async function mountMonaco(el: HTMLElement, opts: MountMonacoOptions = {}) {
-    const monaco = await import('monaco-editor');
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
+        return deadApi();
+    }
+
+    const seq = ++mountSeq;
+    ensureMonacoEnvironment();
+    ensureMonacoCss();
+
+    // Prefer vendor-injected monaco (single ESM chunk); otherwise dynamic-import.
+    const injected = (globalThis as { __VMZ_MONACO__?: unknown }).__VMZ_MONACO__;
+    let MonacoNS: unknown = injected;
+    if (!MonacoNS) {
+        MonacoNS = await import('monaco-editor');
+        await import('monaco-editor/language/json/monaco.contribution.js');
+    }
+    const monaco = (MonacoNS as { languages?: unknown; default?: unknown }).languages
+        ? MonacoNS
+        : ((MonacoNS as { default: typeof MonacoNS }).default ?? MonacoNS);
+
+    const language = opts.language ?? 'typescript';
+    disposeHostEditor(el);
+
+    if (language === 'json') {
+        const jsonDefaults =
+            (monaco as { json?: { jsonDefaults?: { setDiagnosticsOptions: (o: unknown) => void } } }).json?.jsonDefaults ??
+            (
+                monaco as {
+                    languages?: {
+                        json?: { jsonDefaults?: { setDiagnosticsOptions: (o: unknown) => void } };
+                    };
+                }
+            ).languages?.json?.jsonDefaults;
+        if (jsonDefaults) {
+            const schemas: JsonSchemaRegistration[] = [...(opts.jsonSchemas ?? [])];
+            if (opts.jsonSchemaUrl) {
+                const loaded = await loadJsonSchema(opts.jsonSchemaUrl);
+                if (loaded) schemas.push(loaded);
+            }
+            if (seq !== mountSeq) return deadApi();
+            if (schemas.length) {
+                jsonDefaults.setDiagnosticsOptions({
+                    validate: true,
+                    allowComments: true,
+                    schemas: schemas.map((s) => ({
+                        uri: s.uri,
+                        fileMatch: s.fileMatch ?? ['*'],
+                        schema: s.schema,
+                    })),
+                });
+            }
+        }
+    }
+
+    if (seq !== mountSeq) return deadApi();
+
+    const uri = monaco.Uri.parse(`inmemory://vmz-monaco/${seq}/${language}.json`);
+    const model = monaco.editor.createModel(opts.value ?? '', language, uri);
+
     const editor = monaco.editor.create(el, {
-        value: opts.value ?? '',
-        language: opts.language ?? 'typescript',
-        theme: opts.theme ?? 'vs-dark',
+        model,
+        theme: opts.theme ?? 'vs',
         readOnly: !!opts.readOnly,
-        automaticLayout: true,
+        automaticLayout: false,
         minimap: { enabled: false },
+        scrollBeyondLastLine: false,
+        tabSize: 2,
+        editContext: false,
+        fontFamily: 'Consolas, "Courier New", Menlo, Monaco, monospace',
+        fontSize: 14,
+        lineHeight: 21,
+        letterSpacing: 0,
+        fontLigatures: false,
+        fixedOverflowWidgets: true,
+        renderLineHighlight: 'none',
+        renderValidationDecorations: 'on',
+        occurrencesHighlight: 'off',
+        selectionHighlight: false,
+        matchBrackets: 'near',
+        guides: { indentation: true, highlightActiveIndentation: false },
+        padding: { top: 4, bottom: 4 },
+        scrollbar: {
+            verticalScrollbarSize: 10,
+            horizontalScrollbarSize: 10,
+            useShadows: false,
+        },
     });
+
+    const layout = () => {
+        if (seq !== mountSeq) return;
+        try {
+            const rect = el.getBoundingClientRect();
+            editor.layout({
+                width: Math.max(0, Math.floor(rect.width)),
+                height: Math.max(0, Math.floor(rect.height)),
+            });
+        } catch {
+            /* ignore */
+        }
+    };
+
+    try {
+        monaco.editor.remeasureFonts();
+    } catch {
+        /* ignore */
+    }
+    layout();
+    requestAnimationFrame(() => {
+        try {
+            monaco.editor.remeasureFonts();
+        } catch {
+            /* ignore */
+        }
+        layout();
+    });
+    if (document.fonts?.ready) {
+        void document.fonts.ready.then(() => {
+            if (seq !== mountSeq) return;
+            try {
+                monaco.editor.remeasureFonts();
+            } catch {
+                /* ignore */
+            }
+            layout();
+        });
+    }
+
+    let ro: ResizeObserver | null = null;
+    if (typeof ResizeObserver !== 'undefined') {
+        ro = new ResizeObserver(() => layout());
+        ro.observe(el);
+    }
+
     if (typeof opts.onChange === 'function') {
         editor.onDidChangeModelContent(() => {
             opts.onChange?.(editor.getValue());
         });
     }
-    return {
+
+    const api = {
         editor,
+        monaco,
         getValue: () => editor.getValue(),
-        setValue: (v: string) => editor.setValue(v ?? ''),
-        dispose: () => editor.dispose(),
+        setValue: (v: string) => {
+            const next = v ?? '';
+            if (editor.getValue() === next) return;
+            // Full replace must NOT restore the previous selection — stale ranges
+            // paint ghost overlays (yellow bars / black bands) after content swaps.
+            editor.pushUndoStop();
+            editor.executeEdits(
+                'vmz-setValue',
+                [
+                    {
+                        range: model.getFullModelRange(),
+                        text: next,
+                        forceMoveMarkers: true,
+                    },
+                ],
+                [new monaco.Selection(1, 1, 1, 1)],
+            );
+            editor.pushUndoStop();
+            editor.revealPositionInCenterIfOutsideViewport({
+                lineNumber: 1,
+                column: 1,
+            });
+        },
+        dispose: () => {
+            try {
+                ro?.disconnect();
+            } catch {
+                /* ignore */
+            }
+            ro = null;
+            try {
+                editor.dispose();
+            } catch {
+                /* ignore */
+            }
+            try {
+                model.dispose();
+            } catch {
+                /* ignore */
+            }
+        },
     };
+    (el as HTMLElement & { __vmzMonaco?: typeof api }).__vmzMonaco = api;
+    return api;
 }