@typbase/codemirror 0.4.0 → 0.4.2

package/dist/index.d.mts

@@ -171,6 +171,7 @@ interface TextRef {
 type TypstRequestHandler = (requests: import("@typbase/engine").TypstRequest[], spaceId: string) => Promise<boolean> | boolean;
 //#endregion
 //#region src/plugin.d.ts
+export declare const typstEditingExtensions: Extension;
 export interface TypstPluginOptions {
   /**
    * Called when Typst needs a source, file, or package that is not loaded
@@ -331,6 +332,17 @@ export declare const typstHoverTooltip: (fileId: FileId, typstState: TypstState)
 };
 //#endregion
 //#region src/keymap.d.ts
+/**
+ * Whether the editor is running vim bindings. Vim handles keys from a DOM
+ * listener that CodeMirror's keymap runs before, so Escape has to be left
+ * unhandled or it never reaches the vim plugin. Set through the same
+ * compartment as the vim extension.
+ */
+export declare const vimKeymapFacet: Facet<boolean, boolean>;
+/**
+ * The app's shortcuts dialog mirrors the common entries here. When a chord
+ * changes, update `EDITOR_SHORTCUTS` in `apps/web/src/lib/keybindings.ts` too.
+ */
 export declare const typstKeymap: import("@codemirror/state").Extension;
 //#endregion
 //#region src/language.d.ts

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { acceptCompletion, autocompletion, closeBracketsKeymap, completionKeymap, snippet, startCompletion } from "@codemirror/autocomplete";
+import { acceptCompletion, autocompletion, closeBracketsKeymap, closeCompletion, completionKeymap, snippet, startCompletion } from "@codemirror/autocomplete";
 import { indentService } from "@codemirror/language";
 import { Decoration, EditorView, ViewPlugin, WidgetType, hoverTooltip, keymap, showTooltip } from "@codemirror/view";
 import { ChangeSet, EditorSelection, EditorState, Facet, RangeSetBuilder, StateEffect, StateField, countColumn, findColumn } from "@codemirror/state";
@@ -20,15 +20,29 @@ const typstSyntaxHighlighting = (fileId, typstState) => StateField.define({
 	}
 });
 function buildDecorations$2(state, fileId, typstState) {
-	const builder = new RangeSetBuilder();
 	let tokens;
+	let equations;
 	try {
 		tokens = typstState.highlight(fileId, state.doc.toString());
+		equations = typstState.extractEquations(fileId, state.doc.toString());
 	} catch (error) {
 		console.error("[typst] highlight panicked:", error);
 		return Decoration.none;
 	}
-	for (const token of tokens) builder.add(token.range.start, token.range.end, Decoration.mark({ class: token.tag }));
+	const builder = new RangeSetBuilder();
+	const equationMark = Decoration.mark({ class: "typ-equation" });
+	let nextEquation = 0;
+	for (const token of tokens) {
+		while (nextEquation < equations.length && equations[nextEquation].from <= token.range.start) {
+			const equation = equations[nextEquation++];
+			builder.add(equation.from, equation.to, equationMark);
+		}
+		builder.add(token.range.start, token.range.end, Decoration.mark({ class: token.tag }));
+	}
+	for (; nextEquation < equations.length; nextEquation++) {
+		const equation = equations[nextEquation];
+		builder.add(equation.from, equation.to, equationMark);
+	}
 	return builder.finish();
 }
 const parseBackticks = (str, into) => {
@@ -372,8 +386,19 @@ function cursorAddVertical(view, offset) {
 }
 //#endregion
 //#region src/keymap.ts
+/**
+* Whether the editor is running vim bindings. Vim handles keys from a DOM
+* listener that CodeMirror's keymap runs before, so Escape has to be left
+* unhandled or it never reaches the vim plugin. Set through the same
+* compartment as the vim extension.
+*/
+const vimKeymapFacet = Facet.define({ combine: (values) => values.some(Boolean) });
+/**
+* The app's shortcuts dialog mirrors the common entries here. When a chord
+* changes, update `EDITOR_SHORTCUTS` in `apps/web/src/lib/keybindings.ts` too.
+*/
 const typstKeymap = keymap.of([
-	...completionKeymap,
+	...completionKeymap.filter((binding) => binding.key !== "Escape"),
 	...closeBracketsKeymap,
 	{
 		key: "Tab",
@@ -488,7 +513,13 @@ const typstKeymap = keymap.of([
 	},
 	{
 		key: "Escape",
-		run: simplifySelection
+		run: (view) => {
+			if (view.state.facet(vimKeymapFacet)) {
+				closeCompletion(view);
+				return false;
+			}
+			return closeCompletion(view) || simplifySelection(view);
+		}
 	},
 	{
 		key: "Mod-Alt-ArrowUp",
@@ -524,7 +555,7 @@ const typstKeymap = keymap.of([
 		run: selectNextOccurrence,
 		preventDefault: true
 	},
-	...standardKeymap
+	...standardKeymap.filter((binding) => binding.key !== "Escape")
 ]);
 //#endregion
 //#region src/language.ts
@@ -1593,8 +1624,9 @@ const SCROLLBAR_ALLOWANCE = 12;
 function editorRenderWidth(scrollDOM, contentDOM) {
 	const pane = scrollDOM.getBoundingClientRect();
 	const gutters = scrollDOM.querySelector(".cm-gutters");
-	const style = getComputedStyle(contentDOM);
-	return Math.max(0, pane.width - (gutters?.getBoundingClientRect().width ?? 0) - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight) - SCROLLBAR_ALLOWANCE);
+	const contentStyle = getComputedStyle(contentDOM);
+	const scrollStyle = getComputedStyle(scrollDOM);
+	return Math.max(0, pane.width - (gutters?.getBoundingClientRect().width ?? 0) - parseFloat(contentStyle.paddingLeft) - parseFloat(contentStyle.paddingRight) - parseFloat(scrollStyle.paddingLeft) - parseFloat(scrollStyle.paddingRight) - SCROLLBAR_ALLOWANCE);
 }
 const tooltipsStateEffect = StateEffect.define();
 const tooltipsStateField = StateField.define({
@@ -1952,6 +1984,37 @@ const tooltipViewPlugin = () => ViewPlugin.define((view) => ({ update(update) {
 } }));
 //#endregion
 //#region src/plugin.ts
+const bracketPairs = {
+	"(": ")",
+	"[": "]",
+	"{": "}",
+	$: "$"
+};
+const typstEditingExtensions = [EditorView.inputHandler.of((view, from, to, text) => {
+	if (text !== " " || from !== to) return false;
+	const { state } = view;
+	const { main } = state.selection;
+	if (!main.empty) return false;
+	const pos = main.head;
+	const before = state.doc.sliceString(pos - 1, pos);
+	const after = state.doc.sliceString(pos, pos + 1);
+	if (!bracketPairs[before] || after !== bracketPairs[before]) return false;
+	view.dispatch({
+		changes: {
+			from: pos,
+			to: pos,
+			insert: "  "
+		},
+		selection: { anchor: pos + 1 }
+	});
+	return true;
+}), indentService.of((ctx, pos) => {
+	const last = Math.max(0, pos - 1);
+	const prev = ctx.lineAt(last).text;
+	if (prev.endsWith("$") && prev !== "$") return 0;
+	const indent = /[{[($]\s*$/.test(prev);
+	return ctx.lineIndent(last) + (indent ? ctx.unit : 0);
+})];
 const typstPlugin = (fileId, spaceId, path, text, prelude, locked, typstState, options = {}) => {
 	const extensions = [
 		typstStateField,
@@ -1965,41 +2028,11 @@ const typstPlugin = (fileId, spaceId, path, text, prelude, locked, typstState, o
 		typstSourceSync(fileId, prelude, typstState),
 		typstSyntaxHighlighting(fileId, typstState),
 		typstHoverTooltip(fileId, typstState),
-		addSpaceBeforeClosingBracket,
-		indentService.of((ctx, pos) => {
-			const last = Math.max(0, pos - 1);
-			const prev = ctx.lineAt(last).text;
-			if (prev.endsWith("$") && prev !== "$") return 0;
-			const indent = /[{[($]\s*$/.test(prev);
-			return ctx.lineIndent(last) + (indent ? ctx.unit : 0);
-		})
+		typstEditingExtensions
 	];
 	if (options.notebook) extensions.push(notebookOptionsFacet.of(options.notebook), notebookKeymap);
 	return extensions;
 };
-const addSpaceBeforeClosingBracket = EditorView.inputHandler.of((view, from, to, text) => {
-	if (text === " ") {
-		const { state } = view;
-		const pos = from;
-		const bracketPairs = {
-			"(": ")",
-			"[": "]",
-			"{": "}",
-			$: "$"
-		};
-		const before = state.doc.sliceString(pos - 1, pos);
-		const after = state.doc.sliceString(pos, pos + 1);
-		if (bracketPairs[before] && after === bracketPairs[before]) view.dispatch({
-			changes: {
-				from: pos,
-				to: pos,
-				insert: " "
-			},
-			selection: { anchor: pos + 1 }
-		});
-	}
-	return false;
-});
 //#endregion
 //#region src/static-highlight.ts
 const KEYWORDS = /* @__PURE__ */ new Set([
@@ -2331,4 +2364,4 @@ function stringEnd(line, from) {
 	return line.length;
 }
 //#endregion
-export { NOTEBOOK_CELL_TYPES, TypstWidget, attachFrameInteractions, attributeText, autocomplete, cellIndexAt, cellStart, cellsOf, compileCache, createFrameContainer, currentCell, cursorAddVertical, cycleHeading, deleteCell, deleteCellText, duplicateCell, duplicateCellText, focusCell, frameActiveDecorations, frameIsInactive, frameSize, hasAttribute, hasOutput, hidesSource, insertAtCursor, insertCell, insertCellText, insertFontFamily, insertTabLike, installSharedDefs, mergeCell, mergeCellText, moveCell, notebookKeymap, notebookOptions, notebookOptionsFacet, notebookRefreshEffect, parseBackticks, rememberDiagnostics, rendersInPlace, setCellType, setCellTypeText, splitCell, splitCellText, stripCellAttributes, syncFrameContainer, toLintDiagnostics, toggleAroundSelection, toggleCode, toggleEmph, toggleEnum, toggleList, toggleListLike, toggleMath, toggleStrike, toggleStrong, toggleUnderline, tooltipStateField, tooltipViewPlugin, tooltipsStateEffect, tooltipsStateField, typstHoverTooltip, typstKeymap, typstLanguageData, typstLinter, typstPlugin, typstRecompileEffect, typstSourceSync, typstStateField, typstStaticHighlighting, typstSyntaxHighlighting, typstViewPlugin, wrapOrInsert };
+export { NOTEBOOK_CELL_TYPES, TypstWidget, attachFrameInteractions, attributeText, autocomplete, cellIndexAt, cellStart, cellsOf, compileCache, createFrameContainer, currentCell, cursorAddVertical, cycleHeading, deleteCell, deleteCellText, duplicateCell, duplicateCellText, focusCell, frameActiveDecorations, frameIsInactive, frameSize, hasAttribute, hasOutput, hidesSource, insertAtCursor, insertCell, insertCellText, insertFontFamily, insertTabLike, installSharedDefs, mergeCell, mergeCellText, moveCell, notebookKeymap, notebookOptions, notebookOptionsFacet, notebookRefreshEffect, parseBackticks, rememberDiagnostics, rendersInPlace, setCellType, setCellTypeText, splitCell, splitCellText, stripCellAttributes, syncFrameContainer, toLintDiagnostics, toggleAroundSelection, toggleCode, toggleEmph, toggleEnum, toggleList, toggleListLike, toggleMath, toggleStrike, toggleStrong, toggleUnderline, tooltipStateField, tooltipViewPlugin, tooltipsStateEffect, tooltipsStateField, typstEditingExtensions, typstHoverTooltip, typstKeymap, typstLanguageData, typstLinter, typstPlugin, typstRecompileEffect, typstSourceSync, typstStateField, typstStaticHighlighting, typstSyntaxHighlighting, typstViewPlugin, vimKeymapFacet, wrapOrInsert };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typbase/codemirror",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "CodeMirror 6 editing experience for Typst: WYSIWYG inline preview, highlighting, hover, autocomplete.",
   "keywords": [
     "atproto",
@@ -40,7 +40,7 @@
     "typescript": "^5.9.3"
   },
   "peerDependencies": {
-    "@typbase/engine": "^0.4.0"
+    "@typbase/engine": "^0.4.2"
   },
   "scripts": {
     "build": "tsdown",