@coldsmirk/inkstone-codemirror 0.8.2

package/dist/index.d.ts

@@ -0,0 +1,362 @@
+import { Extension, StateField } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+
+//#region src/context.d.ts
+/**
+ * A node in the context shape. `ref` is a lazy pointer into {@link IrSchema.defs} (deref at use).
+ */
+type IrType = {
+  readonly kind: "object";
+  readonly fields: Readonly<Record<string, IrField>>;
+} | {
+  readonly kind: "array";
+  readonly element: IrType;
+} | {
+  readonly kind: "enum";
+  readonly values: ReadonlyArray<string | number | boolean>;
+} | {
+  readonly kind: "string" | "number" | "boolean" | "null" | "any";
+} | {
+  readonly kind: "ref";
+  readonly name: string;
+};
+/**
+ * A named member of an object type. `nullable` / `required` are display metadata, not gates.
+ */
+interface IrField {
+  readonly type: IrType;
+  readonly required: boolean;
+  readonly nullable: boolean;
+  readonly doc?: string;
+}
+/**
+ * A normalized context: a root shape plus a definition table backing `ref` nodes (and cycles).
+ */
+interface IrSchema {
+  readonly root: IrType;
+  readonly defs: Readonly<Record<string, IrType>>;
+}
+/**
+ * A resolved member, offered as one completion.
+ */
+interface Member {
+  readonly name: string;
+  readonly type: IrType;
+  readonly required: boolean;
+  readonly nullable: boolean;
+  readonly doc?: string;
+}
+/**
+ * How a caller hands inkstone a context: a JSON Schema, or a representative sample value to infer
+ * the shape from. Pass a *stable* reference (memoize/hoist it) — in React a new identity each
+ * render re-normalizes and re-dispatches.
+ */
+type EditorContext = {
+  readonly schema: unknown;
+} | {
+  readonly sample: unknown;
+};
+/**
+ * Reactively set (or clear) the render-context schema an editor completes against. Dispatch this
+ * effect — `setMinijinjaContext.of(normalizeContext(...))`, or `.of(null)` to turn it off — to
+ * update completion without recreating the editor, matching the create-once discipline used
+ * throughout the toolkit. Defined here (not with the MiniJinja grammar) so it and the field stay
+ * in the always-loaded chunk, leaving the grammar lazily code-split.
+ */
+declare const setMinijinjaContext: import("@codemirror/state").StateEffectType<IrSchema | null>;
+/**
+ * Holds the normalized render-context schema that variable / member completion reads. Seed it with
+ * `minijinja({ context })`, or drive it at runtime with {@link setMinijinjaContext}. `null` (the
+ * default) means no context — variable completion stays off and only tags / filters / tests /
+ * globals are offered.
+ */
+declare const minijinjaContextField: StateField<IrSchema | null>;
+/**
+ * Normalize either input form to the internal {@link IrSchema}.
+ */
+declare function normalizeContext(input: EditorContext): IrSchema;
+/**
+ * Members reachable at `path` — `[]` yields the top-level context variables (plus any `scope`
+ * bindings), a non-empty path walks member access (`["user", "address"]` → the fields of
+ * `user.address`). The first segment may resolve against a `scope` binding (a `{% for %}` target,
+ * macro parameter, …) before falling back to the root.
+ */
+declare function resolveMembers(ir: IrSchema, path: readonly string[], scope?: ReadonlyMap<string, IrType>): Member[];
+/**
+ * The type at a declared property path, or null if the path leaves the walkable shape.
+ */
+declare function typeAtPath(ir: IrSchema, path: readonly string[]): IrType | null;
+//#endregion
+//#region src/controlled-host.d.ts
+interface ControlledEditorOptions {
+  /**
+   * The element the editor mounts into.
+   */
+  parent: HTMLElement;
+  /**
+   * Initial document text.
+   */
+  doc: string;
+  /**
+   * Called with the full document after every user edit. Not called for
+   * {@link ControlledEditorHost.setValue} reconciliations.
+   */
+  onChange: (value: string) => void;
+  /**
+   * Static extensions, fixed for the editor's lifetime.
+   */
+  extensions?: Extension[];
+  /**
+   * Extensions that change at runtime (theme, language config …), swapped in place via
+   * {@link ControlledEditorHost.reconfigure} without rebuilding the editor.
+   */
+  dynamicExtensions?: Extension[];
+}
+/**
+ * A controlled CodeMirror 6 host — the create-once plumbing every framework wrapper repeats:
+ *
+ * - **External value reconcile.** {@link setValue} diffs the incoming value against the live
+ * document and dispatches a minimal replace, so a store-driven update never resets the caret
+ * and never echoes back through `onChange`.
+ * - **In-place reconfiguration.** `dynamicExtensions` live in a {@link Compartment};
+ * {@link reconfigure} swaps them (light/dark theme, language options) without rebuilding
+ * the editor and losing its state.
+ *
+ * Framework-agnostic: a React wrapper calls `setValue` from a value effect and `reconfigure`
+ * from a theme effect (see `@coldsmirk/inkstone-react`); any other framework does the same
+ * from its own reactivity.
+ */
+declare class ControlledEditorHost {
+  private readonly compartment;
+  private silent;
+  readonly view: EditorView;
+  constructor({
+    parent,
+    doc,
+    onChange,
+    extensions,
+    dynamicExtensions
+  }: ControlledEditorOptions);
+  /**
+   * Reconcile an externally-changed value into the live document without resetting the caret.
+   * No-op when the document already matches; the write never re-enters `onChange`.
+   */
+  setValue(value: string): void;
+  /**
+   * Swap the dynamic extensions (theme, language configuration) in place.
+   */
+  reconfigure(dynamicExtensions: Extension[]): void;
+  destroy(): void;
+}
+//#endregion
+//#region src/extensions.d.ts
+/**
+ * Simplified-Chinese strings for the search / goto-line panels, as an opt-in extension —
+ * inkstone's defaults are English, so pass this through `extensions` to localize the panel
+ * (`search` must be on for the panel to exist at all).
+ */
+declare const searchPhrasesZhCn: Extension;
+interface DocumentExtensionsOptions {
+  /**
+   * Placeholder text shown while the document is empty.
+   */
+  placeholder?: string;
+  /**
+   * Soft-wrap long lines instead of scrolling horizontally.
+   *
+   * @default false
+   */
+  lineWrapping?: boolean;
+  /**
+   * Show the line-number gutter.
+   *
+   * @default false
+   */
+  showLineNumbers?: boolean;
+  /**
+   * Enable code folding — adds the fold gutter and fold keymap. Fold points come from the
+   * language, so this stays inert until a language is set.
+   *
+   * @default false
+   */
+  folding?: boolean;
+  /**
+   * Turn native browser spell-check on. CodeMirror itself keeps it off (`spellcheck="false"`
+   * on the content element), which is right for code — red squiggles under identifiers help
+   * nobody. Enable it for prose-grade documents (prompt templates, messages).
+   *
+   * @default false
+   */
+  spellcheck?: boolean;
+  /**
+   * Enable in-editor search: the standard search keymap (Ctrl/Cmd-F opens the panel, F3 /
+   * Ctrl/Cmd-G cycle matches, Ctrl/Cmd-D selects the next occurrence, Alt-G jumps to a line)
+   * plus selection-match highlighting. The panel speaks CodeMirror's stock English; add
+   * {@link searchPhrasesZhCn} to `extensions` for Simplified Chinese.
+   *
+   * @default false
+   */
+  search?: boolean;
+}
+/**
+ * The standard extension bundle for a document-grade editor — line numbers, history,
+ * selection drawing, active-line highlight, auto-indent, bracket matching/closing,
+ * completion UI, and the merged default keymap. This is the assembly every hand-built
+ * CodeMirror host repeats; language support and theming stay with the caller.
+ */
+declare function documentExtensions({
+  placeholder,
+  lineWrapping,
+  showLineNumbers,
+  folding,
+  spellcheck,
+  search
+}?: DocumentExtensionsOptions): Extension[];
+//#endregion
+//#region src/languages.d.ts
+/**
+ * Language id → lazy loader, backed by the official `@codemirror/lang-*` (Lezer) parsers.
+ * Ids follow Monaco's spelling where they overlap, but the two editors expose independent
+ * language types — {@link CodeMirrorLanguage} is exactly this set.
+ */
+declare const loaders: {
+  javascript: () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  typescript: () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  jsx: () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  tsx: () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  json: () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  html: () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  css: () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  scss: () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  sass: () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  less: () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  python: () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  java: () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  markdown: () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  xml: () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  rust: () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  php: () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  yaml: () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  go: () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  cpp: () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  c: () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  vue: () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  liquid: () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  wast: () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  sql: () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  mysql: () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  pgsql: () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  sqlite: () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  minijinja: () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  "minijinja-html": () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  "minijinja-xml": () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  "minijinja-json": () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  "minijinja-yaml": () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  "minijinja-css": () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  "minijinja-scss": () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  "minijinja-sass": () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  "minijinja-less": () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  "minijinja-markdown": () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  "minijinja-sql": () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  "minijinja-mysql": () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  "minijinja-pgsql": () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+  "minijinja-sqlite": () => Promise<{
+    extension: Extension;
+  } | readonly Extension[] | import("@codemirror/language").LanguageSupport>;
+};
+/**
+ * The language ids `<CodeMirrorEditor>` supports — exactly the keys of the loader registry.
+ */
+type CodeMirrorLanguage = keyof typeof loaders;
+/**
+ * Every supported language id, sorted.
+ */
+declare const codeMirrorLanguages: readonly CodeMirrorLanguage[];
+/**
+ * Lazily resolve a supported language id to a CodeMirror language {@link Extension}. Each
+ * language is a separate dynamic import, so the consumer's bundler code-splits it and only
+ * the requested grammar is fetched — the whole catalog is never loaded at once.
+ */
+declare function loadLanguage(language: CodeMirrorLanguage): Promise<Extension>;
+//#endregion
+export { type CodeMirrorLanguage, ControlledEditorHost, type ControlledEditorOptions, type DocumentExtensionsOptions, type EditorContext, type IrField, type IrSchema, type IrType, type Member, codeMirrorLanguages, documentExtensions, loadLanguage, minijinjaContextField, normalizeContext, resolveMembers, searchPhrasesZhCn, setMinijinjaContext, typeAtPath };

package/dist/index.js

@@ -0,0 +1,156 @@
+import { a as setMinijinjaContext, i as resolveMembers, n as minijinjaContextField, o as typeAtPath, r as normalizeContext } from "./context-Dx6bPnKq.js";
+import { Compartment, EditorState } from "@codemirror/state";
+import { EditorView, drawSelection, highlightActiveLine, keymap, lineNumbers, placeholder } from "@codemirror/view";
+import { autocompletion, closeBrackets, closeBracketsKeymap, completionKeymap } from "@codemirror/autocomplete";
+import { defaultKeymap, history, historyKeymap, indentWithTab } from "@codemirror/commands";
+import { bracketMatching, codeFolding, foldGutter, foldKeymap, indentOnInput } from "@codemirror/language";
+import { highlightSelectionMatches, searchKeymap } from "@codemirror/search";
+//#region src/controlled-host.ts
+var ControlledEditorHost = class {
+	compartment = new Compartment();
+	silent = false;
+	view;
+	constructor({ parent, doc, onChange, extensions = [], dynamicExtensions = [] }) {
+		this.view = new EditorView({
+			parent,
+			state: EditorState.create({
+				doc,
+				extensions: [
+					...extensions,
+					this.compartment.of(dynamicExtensions),
+					EditorView.updateListener.of((update) => {
+						if (update.docChanged && !this.silent) onChange(update.state.doc.toString());
+					})
+				]
+			})
+		});
+	}
+	setValue(value) {
+		const current = this.view.state.doc.toString();
+		if (value === current) return;
+		const shorter = Math.min(current.length, value.length);
+		let from = 0;
+		while (from < shorter && current.codePointAt(from) === value.codePointAt(from)) from += 1;
+		let currentEnd = current.length;
+		let valueEnd = value.length;
+		while (currentEnd > from && valueEnd > from && current.codePointAt(currentEnd - 1) === value.codePointAt(valueEnd - 1)) {
+			currentEnd -= 1;
+			valueEnd -= 1;
+		}
+		this.silent = true;
+		try {
+			this.view.dispatch({ changes: {
+				from,
+				to: currentEnd,
+				insert: value.slice(from, valueEnd)
+			} });
+		} finally {
+			this.silent = false;
+		}
+	}
+	reconfigure(dynamicExtensions) {
+		this.view.dispatch({ effects: this.compartment.reconfigure(dynamicExtensions) });
+	}
+	destroy() {
+		this.view.destroy();
+	}
+};
+const searchPhrasesZhCn = EditorState.phrases.of({
+	Find: "查找",
+	Replace: "替换",
+	next: "下一个",
+	previous: "上一个",
+	all: "全部",
+	"match case": "区分大小写",
+	regexp: "正则表达式",
+	"by word": "全字匹配",
+	replace: "替换",
+	"replace all": "全部替换",
+	close: "关闭",
+	"current match": "当前匹配",
+	"on line": "所在行",
+	"Go to line": "跳转到行",
+	go: "跳转"
+});
+function documentExtensions({ placeholder: placeholder$1, lineWrapping = false, showLineNumbers = false, folding = false, spellcheck = false, search = false } = {}) {
+	return [
+		...showLineNumbers ? [lineNumbers()] : [],
+		...folding ? [
+			codeFolding(),
+			foldGutter(),
+			keymap.of(foldKeymap)
+		] : [],
+		history(),
+		drawSelection(),
+		highlightActiveLine(),
+		indentOnInput(),
+		bracketMatching(),
+		closeBrackets(),
+		autocompletion(),
+		...lineWrapping ? [EditorView.lineWrapping] : [],
+		...search ? [highlightSelectionMatches(), keymap.of(searchKeymap)] : [],
+		keymap.of([
+			...closeBracketsKeymap,
+			...defaultKeymap,
+			...historyKeymap,
+			...completionKeymap,
+			indentWithTab
+		]),
+		placeholder(placeholder$1 ?? ""),
+		...spellcheck ? [EditorView.contentAttributes.of({ spellcheck: "true" })] : []
+	];
+}
+//#endregion
+//#region src/languages.ts
+const loaders = {
+	javascript: () => import("@codemirror/lang-javascript").then((mod) => mod.javascript()),
+	typescript: () => import("@codemirror/lang-javascript").then((mod) => mod.javascript({ typescript: true })),
+	jsx: () => import("@codemirror/lang-javascript").then((mod) => mod.javascript({ jsx: true })),
+	tsx: () => import("@codemirror/lang-javascript").then((mod) => mod.javascript({
+		jsx: true,
+		typescript: true
+	})),
+	json: () => import("@codemirror/lang-json").then((mod) => mod.json()),
+	html: () => import("@codemirror/lang-html").then((mod) => mod.html()),
+	css: () => import("@codemirror/lang-css").then((mod) => mod.css()),
+	scss: () => import("@codemirror/lang-sass").then((mod) => mod.sass()),
+	sass: () => import("@codemirror/lang-sass").then((mod) => mod.sass({ indented: true })),
+	less: () => import("@codemirror/lang-less").then((mod) => mod.less()),
+	python: () => import("@codemirror/lang-python").then((mod) => mod.python()),
+	java: () => import("@codemirror/lang-java").then((mod) => mod.java()),
+	markdown: () => import("@codemirror/lang-markdown").then((mod) => mod.markdown()),
+	xml: () => import("@codemirror/lang-xml").then((mod) => mod.xml()),
+	rust: () => import("@codemirror/lang-rust").then((mod) => mod.rust()),
+	php: () => import("@codemirror/lang-php").then((mod) => mod.php()),
+	yaml: () => import("@codemirror/lang-yaml").then((mod) => mod.yaml()),
+	go: () => import("@codemirror/lang-go").then((mod) => mod.go()),
+	cpp: () => import("@codemirror/lang-cpp").then((mod) => mod.cpp()),
+	c: () => import("@codemirror/lang-cpp").then((mod) => mod.cpp()),
+	vue: () => import("@codemirror/lang-vue").then((mod) => mod.vue()),
+	liquid: () => import("@codemirror/lang-liquid").then((mod) => mod.liquid()),
+	wast: () => import("@codemirror/lang-wast").then((mod) => mod.wast()),
+	sql: () => import("@codemirror/lang-sql").then((mod) => mod.sql()),
+	mysql: () => import("@codemirror/lang-sql").then((mod) => mod.sql({ dialect: mod.MySQL })),
+	pgsql: () => import("@codemirror/lang-sql").then((mod) => mod.sql({ dialect: mod.PostgreSQL })),
+	sqlite: () => import("@codemirror/lang-sql").then((mod) => mod.sql({ dialect: mod.SQLite })),
+	minijinja: () => import("./minijinja-HpehSBbW.js").then((mod) => mod.minijinja()),
+	"minijinja-html": () => Promise.all([import("./minijinja-HpehSBbW.js"), import("@codemirror/lang-html")]).then(([mj, mod]) => mj.minijinja({ base: mod.html() })),
+	"minijinja-xml": () => Promise.all([import("./minijinja-HpehSBbW.js"), import("@codemirror/lang-xml")]).then(([mj, mod]) => mj.minijinja({ base: mod.xml() })),
+	"minijinja-json": () => Promise.all([import("./minijinja-HpehSBbW.js"), import("@codemirror/lang-json")]).then(([mj, mod]) => mj.minijinja({ base: mod.json() })),
+	"minijinja-yaml": () => Promise.all([import("./minijinja-HpehSBbW.js"), import("@codemirror/lang-yaml")]).then(([mj, mod]) => mj.minijinja({ base: mod.yaml() })),
+	"minijinja-css": () => Promise.all([import("./minijinja-HpehSBbW.js"), import("@codemirror/lang-css")]).then(([mj, mod]) => mj.minijinja({ base: mod.css() })),
+	"minijinja-scss": () => Promise.all([import("./minijinja-HpehSBbW.js"), import("@codemirror/lang-sass")]).then(([mj, mod]) => mj.minijinja({ base: mod.sass() })),
+	"minijinja-sass": () => Promise.all([import("./minijinja-HpehSBbW.js"), import("@codemirror/lang-sass")]).then(([mj, mod]) => mj.minijinja({ base: mod.sass({ indented: true }) })),
+	"minijinja-less": () => Promise.all([import("./minijinja-HpehSBbW.js"), import("@codemirror/lang-less")]).then(([mj, mod]) => mj.minijinja({ base: mod.less() })),
+	"minijinja-markdown": () => Promise.all([import("./minijinja-HpehSBbW.js"), import("@codemirror/lang-markdown")]).then(([mj, mod]) => mj.minijinja({ base: mod.markdown() })),
+	"minijinja-sql": () => Promise.all([import("./minijinja-HpehSBbW.js"), import("@codemirror/lang-sql")]).then(([mj, mod]) => mj.minijinja({ base: mod.sql() })),
+	"minijinja-mysql": () => Promise.all([import("./minijinja-HpehSBbW.js"), import("@codemirror/lang-sql")]).then(([mj, mod]) => mj.minijinja({ base: mod.sql({ dialect: mod.MySQL }) })),
+	"minijinja-pgsql": () => Promise.all([import("./minijinja-HpehSBbW.js"), import("@codemirror/lang-sql")]).then(([mj, mod]) => mj.minijinja({ base: mod.sql({ dialect: mod.PostgreSQL }) })),
+	"minijinja-sqlite": () => Promise.all([import("./minijinja-HpehSBbW.js"), import("@codemirror/lang-sql")]).then(([mj, mod]) => mj.minijinja({ base: mod.sql({ dialect: mod.SQLite }) }))
+};
+const codeMirrorLanguages = Object.keys(loaders).toSorted();
+function loadLanguage(language) {
+	return loaders[language]();
+}
+//#endregion
+export { ControlledEditorHost, codeMirrorLanguages, documentExtensions, loadLanguage, minijinjaContextField, normalizeContext, resolveMembers, searchPhrasesZhCn, setMinijinjaContext, typeAtPath };