@coldsmirk/inkstone-monaco 0.15.0 → 0.16.0

package/README.md

@@ -10,6 +10,7 @@ Part of [inkstone](https://github.com/coldsmirk/inkstone). For a drop-in React c
 - **`getWorker` extension point** — plug third-party language workers (e.g. monaco-yaml) into the routing; return `undefined` to fall back to the built-in routes.
 - **`monacoLanguages`** — the sorted catalog of every built-in language id the installed Monaco registers (with the `MonacoBuiltInLanguage` union type behind it), held to the installed `monaco-editor` by an upgrade-tripwire test. These are *ids*, not display names (`proto`, `sol`, `aes`); an unknown id silently falls back to `plaintext`.
 - **`disabledKeybindings` / `installDisabledKeybindings`** — swallow the find/replace chords and the command palette's F1 for editors that opt in. Monaco's standalone keybinding service is page-global and its rules are permanent, so the install registers each chord once per monaco module's service (duplicate copies of this package share the ledger; independent monaco bundles register their own) and scopes it with a per-capability context key created on the opted-in editor; the chord table is held to the installed `monaco-editor` by an upgrade-tripwire test.
+- **`installJsxTagClosing`** — VS Code's auto-closing JSX tags: a typed `>` that completes an opening tag inserts the matching closing tag and keeps the caret between the pair. Parser-backed: the bundled TS worker subclasses monaco's stock worker to expose `getJsxClosingTagAtPosition` — a language-service call monaco never proxied (VS Code ships the feature in its TypeScript extension, outside the editor core) — so generics, comparisons, arrow functions, and already-closed elements never trigger. The keystroke handler gates itself to TypeScript/JavaScript models whose path ends in `.tsx` / `.jsx`; a `getWorker` override that routes the `typescript` label to a worker without the subclass downgrades the feature to a no-op. `<MonacoEditor>` installs it automatically.
 - **Embedded-editor fix** — works around [microsoft/monaco-editor#5177](https://github.com/microsoft/monaco-editor/issues/5177) (find-widget button tooltips landing on top of the buttons they describe) with a `width: max-content` hover-layer style tagged `data-inkstone="monaco-hover-geometry"`; deleted the moment upstream fixes it. The tooltip layer positions against the editor's container — give that container `position: relative`.
 - **`StreamingEditorController`** — stream generated text into an editor without routing every token through app state: `begin()` / `append(chunk)` / `end()` / `discard()`, `attach(editor)` / `detach(editor)` with buffered replay for late-mounting editors (and for a model swapped onto the attached editor mid-stream, including after the final chunk), and `isStreaming()` for the onChange guard. The stream locks every editor it touches read-only and `end()` / `discard()` restore each one's own setting — by handle, so an editor detached mid-stream is restored too; `discard()` puts every displaced document back into the model it came from, and `end()` does the same for every model except the one keeping the streamed text. Full-buffer writes and restorations preserve each model's UTF-8 BOM. Editors and models the app disposed mid-stream are skipped, never touched — teardown can race the stream without wedging it.
 - **`replaceInEditor(editor, old, new, all)`** — exact find-and-replace on an editor handle via `executeEdits`, preserving undo/cursor/folds; returns whether the edit landed (`false` = no editor / empty search / no match / a read-only editor refused it — e.g. one locked by a stream in progress), so a tool-call handler knows to fall back to a state write.

package/dist/index.d.ts

@@ -51,6 +51,37 @@ type MonacoModule = typeof monacoEditor;
  */
 declare function ensureMonacoHost(options?: MonacoHostOptions): Promise<MonacoModule>;
 //#endregion
+//#region src/jsx-tag-closing.d.ts
+/**
+ * The slice of a text model the install reads — a structural type, so the install is testable
+ * without evaluating the monaco module (which jsdom cannot do).
+ */
+interface JsxTagClosingTargetModel {
+  uri: monacoEditor.Uri;
+  getLanguageId: () => string;
+  getVersionId: () => number;
+  isDisposed: () => boolean;
+  getPositionAt: (offset: number) => monacoEditor.IPosition;
+}
+/**
+ * The slice of a standalone editor the install touches — structural, same rationale as
+ * {@link JsxTagClosingTargetModel}.
+ */
+interface JsxTagClosingTargetEditor {
+  getModel: () => JsxTagClosingTargetModel | null;
+  onDidChangeModelContent: (listener: (event: monacoEditor.editor.IModelContentChangedEvent) => void) => monacoEditor.IDisposable;
+  executeEdits: (source: string, edits: monacoEditor.editor.IIdentifiedSingleEditOperation[], endCursorState: monacoEditor.Selection[]) => boolean;
+}
+/**
+ * Watch `editorInstance` for tag-completing `">"` keystrokes and insert the matching JSX
+ * closing tag, keeping the cursor between the pair. Installed by `<MonacoEditor>` on every
+ * editor; the keystroke handler gates itself, so only TypeScript / JavaScript models whose
+ * path ends in `.tsx` / `.jsx` — the extensions that make the language service parse JSX —
+ * ever reach the worker. Listener lifetime follows the editor; dispose the returned
+ * subscription to detach earlier.
+ */
+declare function installJsxTagClosing(monaco: MonacoModule, editorInstance: JsxTagClosingTargetEditor): monacoEditor.IDisposable;
+//#endregion
 //#region src/keybindings.d.ts
 /**
  * A set of keybindings to swallow, plus the context key that scopes them to the editors that
@@ -279,4 +310,4 @@ declare class StreamingEditorController {
   discard(): void;
 }
 //#endregion
-export { DEFAULT_MONACO_OPTIONS, type KeybindingTargetEditor, type MonacoBuiltInLanguage, type MonacoHostOptions, type MonacoLanguage, type MonacoModule, type MonacoUiLocale, type StreamTargetEditor, StreamingEditorController, type SwallowedKeybindings, disabledKeybindings, ensureMonacoHost, installDisabledKeybindings, modelValueMatches, monacoLanguages, reconcileModelValue, registerShikiHighlighting, replaceInEditor };
+export { DEFAULT_MONACO_OPTIONS, type JsxTagClosingTargetEditor, type JsxTagClosingTargetModel, type KeybindingTargetEditor, type MonacoBuiltInLanguage, type MonacoHostOptions, type MonacoLanguage, type MonacoModule, type MonacoUiLocale, type StreamTargetEditor, StreamingEditorController, type SwallowedKeybindings, disabledKeybindings, ensureMonacoHost, installDisabledKeybindings, installJsxTagClosing, modelValueMatches, monacoLanguages, reconcileModelValue, registerShikiHighlighting, replaceInEditor };

package/dist/index.js

@@ -101,6 +101,37 @@ function ensureMonacoHost(options = {}) {
 	return attempt;
 }
 //#endregion
+//#region src/jsx-tag-closing.ts
+function installJsxTagClosing(monaco, editorInstance) {
+	return editorInstance.onDidChangeModelContent((event) => {
+		if (event.isFlush || event.isUndoing || event.isRedoing || event.changes.length !== 1) return;
+		const change = event.changes[0];
+		const model = editorInstance.getModel();
+		if (change?.text !== ">" || !model) return;
+		const { path } = model.uri;
+		if (!path.endsWith(".tsx") && !path.endsWith(".jsx")) return;
+		const language = model.getLanguageId();
+		if (language !== "typescript" && language !== "javascript") return;
+		const offset = change.rangeOffset + 1;
+		const version = model.getVersionId();
+		(async () => {
+			try {
+				const closing = await (await (language === "typescript" ? await monaco.typescript.getTypeScriptWorker() : await monaco.typescript.getJavaScriptWorker())(model.uri)).getJsxClosingTagAtPosition?.(model.uri.toString(), offset);
+				if (!closing || model.isDisposed() || model.getVersionId() !== version || editorInstance.getModel() !== model) return;
+				const position = model.getPositionAt(offset);
+				const cursor = new monaco.Selection(position.lineNumber, position.column, position.lineNumber, position.column);
+				editorInstance.executeEdits("jsx-tag-closing", [{
+					range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column),
+					text: closing.newText,
+					forceMoveMarkers: false
+				}], [cursor]);
+			} catch (error) {
+				console.error("inkstone: jsx closing-tag lookup failed", error);
+			}
+		})();
+	});
+}
+//#endregion
 //#region src/keybindings.ts
 const FIND_CONTEXT_KEY = "inkstoneFindDisabled";
 const COMMAND_PALETTE_CONTEXT_KEY = "inkstoneCommandPaletteDisabled";
@@ -475,4 +506,4 @@ var StreamingEditorController = class {
 	}
 };
 //#endregion
-export { DEFAULT_MONACO_OPTIONS, StreamingEditorController, disabledKeybindings, ensureMonacoHost, installDisabledKeybindings, modelValueMatches, monacoLanguages, reconcileModelValue, registerShikiHighlighting, replaceInEditor };
+export { DEFAULT_MONACO_OPTIONS, StreamingEditorController, disabledKeybindings, ensureMonacoHost, installDisabledKeybindings, installJsxTagClosing, modelValueMatches, monacoLanguages, reconcileModelValue, registerShikiHighlighting, replaceInEditor };

package/dist/workers/ts.worker.js

@@ -1,3 +1,25 @@
 // Worker entry: the TypeScript worker, which also serves JavaScript IntelliSense.
 // See editor.worker.js for why this indirection exists.
-import "monaco-editor/language/typescript/ts.worker.js";
+//
+// Unlike its siblings this entry is not a bare re-export: it subclasses the stock worker to
+// expose `getJsxClosingTagAtPosition` — the language-service call behind auto-closing JSX
+// tags (`installJsxTagClosing` is the editor-side half) — which monaco's own worker never
+// proxied. The host's worker proxy forwards any method name, so the subclass only has to
+// exist here; nothing on the main thread changes.
+import { initialize, TypeScriptWorker } from "monaco-editor/language/typescript/ts.worker.js";
+
+class JsxTypeScriptWorker extends TypeScriptWorker {
+  getJsxClosingTagAtPosition(fileName, position) {
+    return this.getLanguageService().getJsxClosingTagAtPosition(fileName, position);
+  }
+}
+
+// Monaco's worker handshake is two-staged (`internal/common/initialize.js`, 0.56): a first
+// message merely triggers `initialize`, whose own handler then reads the *second* message as
+// createData. The stock entry import above installed the stage-one handler for its own
+// factory; this assignment must *replace* it with one building the subclass — calling
+// `initialize` directly here instead would consume the trigger message as createData.
+// eslint-disable-next-line unicorn/no-global-object-property-assignment, unicorn/prefer-add-event-listener -- the assignment must replace the stage-one handler; addEventListener would leave both firing
+globalThis.onmessage = () => {
+  initialize((ctx, createData) => new JsxTypeScriptWorker(ctx, createData));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coldsmirk/inkstone-monaco",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "Framework-agnostic Monaco assembly: lazy offline host (all language workers bundled, no CDN), opt-in Simplified-Chinese UI via monaco's official NLS catalog, a streaming editor controller for AI-typed content, and the shared Shiki highlighting bridge.",
   "keywords": [
     "monaco",
@@ -36,7 +36,7 @@
   ],
   "dependencies": {
     "@shikijs/monaco": "^4.4.3",
-    "@coldsmirk/inkstone-core": "^0.15.0"
+    "@coldsmirk/inkstone-core": "^0.16.0"
   },
   "devDependencies": {
     "monaco-editor": "^0.56.0"