@simple-mark/codemirror 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 one-prime
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,26 @@
-# Temporary Holding Version
+# @simple-mark/codemirror
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A CodeMirror 6 Markdown editor that never hides syntax — part of
+[SimpleMark](https://github.com/one-prime/simple-mark). `# Heading` stays `# Heading`: the
+`#` is dimmed and the heading is large. The text is exactly what the user typed.
+
+```ts
+import { createEditor } from '@simple-mark/codemirror';
+
+const view = createEditor(document.getElementById('editor')!, {
+  doc: '# Hello **world**\n\n| a | b |\n|---|---|\n| 1 | 2 |\n',
+  onChange: (text) => save(text),        // in the document's own line endings
+  resolveImage: (src) => new URL(src, base).href,
+});
+```
+
+- **Tables**: Tab / Shift-Tab move between cells, Enter adds a row; each re-aligns the
+  table. Korean, Chinese and Japanese line up (drawn exactly two columns wide), and typing
+  them with an IME is safe.
+- **Images** and `$$` math preview below their source; `$inline$` math in a tooltip. Math
+  (`@simple-mark/math`) loads only when a document has math.
+- **Line endings** are kept (`\r\n`, `\r`), so an unedited file saves back byte for byte.
+- Accurate scroll heights for documents with many images and formulas.
+- `simpleMark(theme)` gives the extensions for your own `EditorState`.
+
+MIT

package/index.d.ts

@@ -0,0 +1,75 @@
+import { EditorState, Extension, Facet, StateCommand } from "@codemirror/state";
+import { DecorationSet, EditorView, ViewPlugin, ViewUpdate } from "@codemirror/view";
+import { LineLook, Theme } from "@simple-mark/model";
+//#region packages/codemirror/src/previews.d.ts
+/** Turns an image path as written in the document into a URL to load, or null if it can't. */
+type ImageResolver = (src: string) => string | null;
+/** How image paths are resolved; by default they are used as written. */
+export declare const imageResolver: Facet<ImageResolver, ImageResolver>;
+/** Image and math previews; the source text always stays visible. */
+export declare function previews(): Extension;
+//#endregion
+//#region packages/codemirror/src/decorations.d.ts
+/** The theme the editor draws with. */
+export declare const markdownTheme: Facet<Theme, Theme>;
+/** A look as an inline CSS declaration list. */
+export declare function lookCss(look: LineLook, theme: Theme): string;
+declare class MarkdownDecorations {
+  decorations: DecorationSet;
+  private theme;
+  private fixWide;
+  private cache;
+  constructor(view: EditorView);
+  update(update: ViewUpdate): void;
+  private build;
+  /** Draws runs of wide characters exactly two columns each, so table pipes line up. */
+  private wideRuns;
+  private lineDecoration;
+  private markDecoration;
+}
+/** Styles the visible Markdown from the syntax tree; never hides or replaces text. */
+export declare const markdownDecorations: ViewPlugin<MarkdownDecorations, undefined>;
+//#endregion
+//#region packages/codemirror/src/line-separator.d.ts
+/**
+ * Keeps a file's line endings. CodeMirror otherwise reads \r\n and \r as \n and writes \n,
+ * so a Windows file would not save back byte for byte. Read the text back with
+ * `state.sliceDoc()`, not `doc.toString()` (which always joins lines with \n).
+ */
+export declare function keepLineSeparator(text: string): Extension;
+//#endregion
+//#region packages/codemirror/src/table-commands.d.ts
+/** Tab: re-align and go to the next cell, adding a row after the last one. */
+export declare const nextCell: StateCommand;
+/** Shift-Tab: re-align and go to the previous cell. */
+export declare const previousCell: StateCommand;
+/**
+ * Enter: re-align and add an empty row below, cursor in its first cell. On an empty last row,
+ * remove it and leave the table: the cursor goes below a blank line, because GFM would read
+ * a line right after a table as another row.
+ */
+export declare const insertRowBelow: StateCommand;
+/** Table editing keys, ahead of the default and Markdown keymaps, and their IME counterparts. */
+export declare function tableEditing(): Extension;
+//#endregion
+//#region packages/codemirror/src/index.d.ts
+/** The SimpleMark language and styling, for hosts that build their own EditorState. */
+export declare function simpleMark(theme?: Theme): Extension;
+export interface EditorOptions {
+  doc?: string;
+  readOnly?: boolean;
+  theme?: Theme;
+  /** Line ending to read and write ("\n", "\r\n"); by default the one `doc` uses. */
+  lineSeparator?: string;
+  /** Turns an image path from the document into a URL to load (default: as written). */
+  resolveImage?: ImageResolver;
+  /** Off when the host owns undo (VS Code). */
+  history?: boolean;
+  /** Called after every change with the full text, in the original line endings. */
+  onChange?: (text: string, update: ViewUpdate) => void;
+  extensions?: Extension[];
+}
+/** A Markdown editor in `parent`. The text is kept exactly as given, line endings included. */
+export declare function createEditor(parent: HTMLElement, options?: EditorOptions): EditorView;
+//#endregion
+export type { ImageResolver };

package/index.js

@@ -0,0 +1,1001 @@
+import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
+import { commonmarkLanguage, markdown } from "@codemirror/lang-markdown";
+import { EditorState, Facet, Prec, StateEffect, StateField } from "@codemirror/state";
+import { Decoration, EditorView, ViewPlugin, WidgetType, hoverTooltip, keymap, showTooltip } from "@codemirror/view";
+import { cellAt, charWidth, defaultTheme, markdownExtensions, markdownStyles, mathSource, parseTable, previewBlocks, renderTable, resolveLineLook, resolveLook, rowLine } from "@simple-mark/model";
+import { ensureSyntaxTree, syntaxTree } from "@codemirror/language";
+//#region packages/codemirror/src/decorations.ts
+/** The theme the editor draws with. */
+const markdownTheme = Facet.define({ combine: (values) => values[0] ?? defaultTheme });
+/** A look as an inline CSS declaration list. */
+function lookCss(look, theme) {
+	const css = [];
+	if (look.fontScale !== void 0) css.push(`font-size: ${look.fontScale}em`);
+	if (look.fontWeight !== void 0) css.push(`font-weight: ${look.fontWeight}`);
+	if (look.italic !== void 0) css.push(`font-style: ${look.italic ? "italic" : "normal"}`);
+	if (look.monospace !== void 0) css.push(`font-family: ${look.monospace ? theme.monospaceFamily : theme.fontFamily}`);
+	if (look.color !== void 0) css.push(`color: ${look.color}`);
+	if (look.background !== void 0) css.push(`background-color: ${look.background}`);
+	if (look.strike !== void 0 || look.underline !== void 0) {
+		const lines = [look.strike && "line-through", look.underline && "underline"].filter(Boolean);
+		css.push(`text-decoration: ${lines.join(" ") || "none"}`);
+	}
+	if (look.lineBackground !== void 0) css.push(`background-color: ${look.lineBackground}`);
+	if (look.borderLeft !== void 0) css.push(`box-shadow: inset 3px 0 0 ${look.borderLeft}`, "padding-left: 12px");
+	return css.join("; ");
+}
+const fontChecks = /* @__PURE__ */ new Map();
+/**
+* Whether `family` draws CJK characters exactly two columns wide. When a Latin-only monospace
+* font falls back to a CJK font of another width, padded tables would not line up.
+*/
+function cjkFitsColumns(family) {
+	let fits = fontChecks.get(family);
+	if (fits === void 0) {
+		const ctx = typeof document === "undefined" ? null : document.createElement("canvas").getContext("2d");
+		if (!ctx) return true;
+		ctx.font = `20px ${family}`;
+		const column = ctx.measureText("0").width;
+		fits = [
+			"가",
+			"中",
+			"あ"
+		].every((ch) => Math.abs(ctx.measureText(ch).width - 2 * column) < .5);
+		fontChecks.set(family, fits);
+	}
+	return fits;
+}
+const headingText = Decoration.mark({ class: "sm-heading-text" });
+/** The lines holding a cursor, as a comparable string. */
+function cursorLinesKey(state) {
+	return state.selection.ranges.map((r) => state.doc.lineAt(r.head).from).join(",");
+}
+var MarkdownDecorations = class {
+	decorations;
+	theme;
+	fixWide;
+	cache = /* @__PURE__ */ new Map();
+	constructor(view) {
+		this.theme = view.state.facet(markdownTheme);
+		this.fixWide = !cjkFitsColumns(this.theme.monospaceFamily);
+		this.decorations = this.build(view);
+	}
+	update(update) {
+		const theme = update.state.facet(markdownTheme);
+		if (theme !== this.theme) {
+			this.theme = theme;
+			this.fixWide = !cjkFitsColumns(theme.monospaceFamily);
+			this.cache.clear();
+		} else if (!update.docChanged && !update.viewportChanged && syntaxTree(update.state) === syntaxTree(update.startState) && !(this.fixWide && update.selectionSet && cursorLinesKey(update.state) !== cursorLinesKey(update.startState))) return;
+		this.decorations = this.build(update.view);
+	}
+	build(view) {
+		const { doc } = view.state;
+		const { from, to } = view.viewport;
+		const { blocks, spans } = markdownStyles(syntaxTree(view.state), from, to);
+		const lines = /* @__PURE__ */ new Map();
+		for (const block of blocks) {
+			const start = Math.max(block.from, from);
+			let end = Math.min(block.to, to);
+			if (end > start && doc.lineAt(end).from === end) end--;
+			for (let pos = start; pos <= end;) {
+				const line = doc.lineAt(pos);
+				let styles = lines.get(line.from);
+				if (!styles) lines.set(line.from, styles = /* @__PURE__ */ new Set());
+				styles.add(block.style);
+				pos = line.to + 1;
+			}
+		}
+		const ranges = [];
+		for (const [lineFrom, styles] of lines) ranges.push(this.lineDecoration([...styles]).range(lineFrom));
+		for (const span of spans) ranges.push(this.markDecoration(span.styles).range(span.from, span.to));
+		for (const [lineFrom, styles] of lines) {
+			const line = doc.lineAt(lineFrom);
+			if (line.length && [...styles].some((s) => /^h[1-6]$/.test(s))) ranges.push(headingText.range(line.from, line.to));
+		}
+		if (this.fixWide) {
+			const cursorLines = new Set(view.state.selection.ranges.map((r) => doc.lineAt(r.head).from));
+			for (const [lineFrom, styles] of lines) if (styles.has("table") && !cursorLines.has(lineFrom)) this.wideRuns(doc.lineAt(lineFrom), ranges);
+		}
+		return Decoration.set(ranges, true);
+	}
+	/** Draws runs of wide characters exactly two columns each, so table pipes line up. */
+	wideRuns(line, ranges) {
+		let start = -1;
+		let columns = 0;
+		const flush = (end) => {
+			if (start < 0) return;
+			const key = `wide:${columns}`;
+			let deco = this.cache.get(key);
+			if (!deco) {
+				deco = Decoration.mark({
+					class: "sm-wide",
+					attributes: { style: `display: inline-block; width: ${columns}ch; text-align: center` }
+				});
+				this.cache.set(key, deco);
+			}
+			ranges.push(deco.range(line.from + start, line.from + end));
+			start = -1;
+			columns = 0;
+		};
+		let i = 0;
+		for (const ch of line.text) {
+			if (charWidth(ch.codePointAt(0)) === 2) {
+				if (start < 0) start = i;
+				columns += 2;
+			} else flush(i);
+			i += ch.length;
+		}
+		flush(i);
+	}
+	lineDecoration(styles) {
+		const key = `line:${styles.sort().join(" ")}`;
+		let deco = this.cache.get(key);
+		if (!deco) {
+			deco = Decoration.line({
+				class: styles.map((s) => `sm-line-${s}`).join(" "),
+				attributes: { style: lookCss(resolveLineLook(styles, this.theme), this.theme) }
+			});
+			this.cache.set(key, deco);
+		}
+		return deco;
+	}
+	markDecoration(styles) {
+		const key = `mark:${styles.join(" ")}`;
+		let deco = this.cache.get(key);
+		if (!deco) {
+			deco = Decoration.mark({
+				class: styles.map((s) => `sm-${s}`).join(" "),
+				attributes: { style: lookCss(resolveLook([], styles, this.theme), this.theme) }
+			});
+			this.cache.set(key, deco);
+		}
+		return deco;
+	}
+};
+/** Styles the visible Markdown from the syntax tree; never hides or replaces text. */
+const markdownDecorations = ViewPlugin.fromClass(MarkdownDecorations, { decorations: (plugin) => plugin.decorations });
+//#endregion
+//#region packages/codemirror/src/line-separator.ts
+/**
+* Keeps a file's line endings. CodeMirror otherwise reads \r\n and \r as \n and writes \n,
+* so a Windows file would not save back byte for byte. Read the text back with
+* `state.sliceDoc()`, not `doc.toString()` (which always joins lines with \n).
+*/
+function keepLineSeparator(text) {
+	const separator = text.includes("\r\n") ? "\r\n" : text.includes("\r") ? "\r" : null;
+	return separator ? EditorState.lineSeparator.of(separator) : [];
+}
+//#endregion
+//#region packages/codemirror/src/math-loader.ts
+let loaded;
+let loading;
+function loadMath() {
+	loading ??= import("@simple-mark/math").then((m) => loaded = m);
+	return loading;
+}
+/** The math renderer if it has loaded, for synchronous use of its cache. */
+function loadedMath() {
+	return loaded;
+}
+/** Gap between images on one line (CSS gap). */
+const IMAGE_GAP = 8;
+/** Editor facts the estimates depend on, measured by `previewLayout`. */
+const layout = {
+	contentWidth: 700,
+	exPx: 8,
+	lineHeight: 24,
+	fontSize: 15,
+	fontFamily: "sans-serif"
+};
+/** The measured editor facts (content width, line height, resolved text font). */
+function layoutFacts() {
+	return layout;
+}
+const measured = /* @__PURE__ */ new Map();
+const imageSizes = /* @__PURE__ */ new Map();
+const probing = /* @__PURE__ */ new Set();
+const mathQueue = /* @__PURE__ */ new Set();
+let mathRunning = false;
+const listeners = /* @__PURE__ */ new Set();
+let notifyScheduled = false;
+/** Tells every editor that estimates improved (batched). */
+function estimatesImproved() {
+	if (notifyScheduled) return;
+	notifyScheduled = true;
+	setTimeout(() => {
+		notifyScheduled = false;
+		for (const listener of listeners) listener();
+	}, 30);
+}
+/** Refreshes the previews so their widgets carry the current estimates. */
+const refreshEstimates = StateEffect.define();
+/** Remembers the height of a drawn preview, as the estimate for when it is off screen. */
+function rememberHeight(view, key, dom) {
+	view.requestMeasure({
+		read: () => dom.isConnected ? dom.getBoundingClientRect().height / view.scaleY : 0,
+		write: (height) => {
+			if (height > 0) measured.set(key, Math.round(height));
+		}
+	});
+}
+const sizeWaiters = /* @__PURE__ */ new Map();
+function sizeKnown(src, size) {
+	if (imageSizes.has(src)) return;
+	imageSizes.set(src, size);
+	for (const waiter of sizeWaiters.get(src) ?? []) waiter(size);
+	sizeWaiters.delete(src);
+	estimatesImproved();
+}
+/**
+* Watches an image until its size is known. The size is in the first bytes of the file, so it
+* is checked every frame while loading instead of waiting for the whole (possibly large) file.
+*/
+function watchImage(img, src) {
+	if (imageSizes.has(src)) return;
+	const natural = () => img.naturalWidth ? {
+		width: img.naturalWidth,
+		height: img.naturalHeight
+	} : {
+		width: 300,
+		height: 150
+	};
+	img.addEventListener("load", () => sizeKnown(src, natural()));
+	img.addEventListener("error", () => sizeKnown(src, null));
+	const check = () => {
+		if (imageSizes.has(src) || img.complete) return;
+		if (img.naturalWidth > 0) sizeKnown(src, natural());
+		else requestAnimationFrame(check);
+	};
+	requestAnimationFrame(check);
+}
+/** The size of an image if known: null if it failed, undefined while unknown. */
+function knownImageSize(src) {
+	return imageSizes.get(src);
+}
+/** Calls `then` once the image's size is known (someone must be watching or probing it). */
+function whenImageSized(src, then) {
+	const size = imageSizes.get(src);
+	if (size !== void 0) return then(size);
+	const waiters = sizeWaiters.get(src) ?? [];
+	waiters.push(then);
+	sizeWaiters.set(src, waiters);
+}
+/** Gives an <img> its final layout size before its pixels arrive (CSS caps it at the width). */
+function reserveImageBox(img, size) {
+	img.style.aspectRatio = `${size.width} / ${size.height}`;
+	img.style.width = `${Math.min(size.width, 320 * size.width / size.height)}px`;
+}
+function probeImage(src) {
+	if (probing.has(src) || imageSizes.has(src) || typeof Image === "undefined") return;
+	probing.add(src);
+	const img = new Image();
+	watchImage(img, src);
+	img.src = src;
+}
+/** Displayed size of one image: fits the width, at most IMAGE_MAX_HEIGHT tall, never enlarged. */
+function imageBox(src) {
+	const errorLine = {
+		width: layout.contentWidth,
+		height: layout.lineHeight
+	};
+	if (src === null) return errorLine;
+	const size = imageSizes.get(src);
+	if (size === void 0) {
+		probeImage(src);
+		return {
+			width: layout.contentWidth,
+			height: 160
+		};
+	}
+	if (size === null) return errorLine;
+	const scale = Math.min(1, layout.contentWidth / size.width, 320 / size.height);
+	return {
+		width: size.width * scale,
+		height: size.height * scale
+	};
+}
+/** Estimated height of a row of images (they wrap like the CSS flex row). */
+function imagesEstimate(key, srcs) {
+	const known = measured.get(key);
+	if (known) return known;
+	let total = 0;
+	let rowWidth = 0;
+	let rowHeight = 0;
+	for (const src of srcs) {
+		const box = imageBox(src);
+		if (rowWidth > 0 && rowWidth + IMAGE_GAP + box.width > layout.contentWidth) {
+			total += rowHeight + IMAGE_GAP;
+			rowWidth = 0;
+			rowHeight = 0;
+		}
+		rowWidth += (rowWidth > 0 ? IMAGE_GAP : 0) + box.width;
+		rowHeight = Math.max(rowHeight, box.height);
+	}
+	return Math.round(total + rowHeight + 12);
+}
+/** Renders queued formulas one at a time, so their heights are known before they are shown. */
+function renderQueuedMath() {
+	if (mathRunning) return;
+	mathRunning = true;
+	loadMath().then(async (math) => {
+		let done = 0;
+		for (const tex of mathQueue) {
+			await math.renderMath(tex, true);
+			mathQueue.delete(tex);
+			if (++done % 10 === 0) estimatesImproved();
+			await new Promise((resolve) => setTimeout(resolve, 0));
+		}
+		mathRunning = false;
+		estimatesImproved();
+		if (mathQueue.size) renderQueuedMath();
+	});
+}
+/** Estimated height of a display formula: from its rendered SVG, once known. */
+function mathEstimate(key, tex) {
+	const known = measured.get(key);
+	if (known) return known;
+	const result = loadedMath()?.cachedMath(tex, true);
+	if (result?.svg !== void 0) {
+		const height = /height="([\d.]+)ex"/.exec(result.svg);
+		if (height) return Math.round(parseFloat(height[1]) * layout.exPx + 12);
+	} else if (result?.error !== void 0) return layout.lineHeight + 12;
+	else {
+		mathQueue.add(tex);
+		renderQueuedMath();
+	}
+	return 3 * layout.lineHeight + 12;
+}
+/** Measures the editor (content width, x-height, line height) and refreshes previews on news. */
+const previewLayout = ViewPlugin.fromClass(class {
+	view;
+	constructor(view) {
+		this.view = view;
+		listeners.add(this.refresh);
+		this.measure();
+	}
+	update(update) {
+		if (update.geometryChanged) this.measure();
+	}
+	destroy() {
+		listeners.delete(this.refresh);
+	}
+	refresh = () => {
+		this.view.dispatch({ effects: refreshEstimates.of(null) });
+	};
+	measure() {
+		this.view.requestMeasure({
+			read: (view) => {
+				const style = getComputedStyle(view.contentDOM);
+				const width = view.contentDOM.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
+				const ctx = document.createElement("canvas").getContext("2d");
+				let exPx = layout.exPx;
+				if (ctx) {
+					ctx.font = `${style.fontStyle} ${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
+					exPx = ctx.measureText("x").actualBoundingBoxAscent || exPx;
+				}
+				const lineHeight = style.lineHeight.endsWith("px") ? parseFloat(style.lineHeight) : view.defaultLineHeight;
+				return {
+					contentWidth: width,
+					exPx,
+					lineHeight,
+					fontSize: parseFloat(style.fontSize),
+					fontFamily: style.fontFamily
+				};
+			},
+			write: (next) => {
+				if ((Math.abs(next.contentWidth - layout.contentWidth) > 1 || Math.abs(next.exPx - layout.exPx) > .2 || Math.abs(next.lineHeight - layout.lineHeight) > .5 || next.fontSize !== layout.fontSize || next.fontFamily !== layout.fontFamily) && next.contentWidth > 0) {
+					if (Math.abs(next.contentWidth - layout.contentWidth) > 1) measured.clear();
+					Object.assign(layout, next);
+					estimatesImproved();
+				}
+			}
+		});
+	}
+});
+//#endregion
+//#region packages/codemirror/src/line-heights.ts
+var HeightHint = class extends WidgetType {
+	height;
+	constructor(height) {
+		super();
+		this.height = height;
+	}
+	eq(other) {
+		return other.height === this.height;
+	}
+	updateDOM() {
+		return true;
+	}
+	get estimatedHeight() {
+		return this.height;
+	}
+	toDOM() {
+		const span = document.createElement("span");
+		span.className = "sm-height-hint";
+		span.style.display = "none";
+		return span;
+	}
+	ignoreEvent() {
+		return true;
+	}
+};
+let context;
+function measureContext() {
+	if (context === void 0) context = typeof document === "undefined" ? null : document.createElement("canvas").getContext("2d");
+	return context;
+}
+const HEADING = /^ {0,3}(#{1,6})(?:\s|$)/;
+/** Estimated drawn height of a line, or 0 when CodeMirror's own one-line guess is right. */
+function lineEstimate(text, theme) {
+	const heading = HEADING.exec(text);
+	if (!heading && text.length < 16) return 0;
+	const ctx = measureContext();
+	if (!ctx) return 0;
+	const facts = layoutFacts();
+	const look = heading ? theme.block[`h${heading[1].length}`] : void 0;
+	const scale = look?.fontScale ?? 1;
+	ctx.font = `${look?.fontWeight ?? 400} ${facts.fontSize * scale}px ${facts.fontFamily}`;
+	const lines = Math.max(1, Math.ceil(ctx.measureText(text).width / (facts.contentWidth * .97)));
+	const height = Math.round(lines * facts.lineHeight * scale);
+	return height > facts.lineHeight + 1 ? height : 0;
+}
+function hintAt(state, lineNumber, theme) {
+	const line = state.doc.line(lineNumber);
+	const height = lineEstimate(line.text, theme);
+	return height ? Decoration.widget({
+		widget: new HeightHint(height),
+		side: -1
+	}).range(line.from) : null;
+}
+function cursorLines(state) {
+	return new Set(state.selection.ranges.map((r) => state.doc.lineAt(r.head).number));
+}
+function allHints(state) {
+	const theme = state.facet(markdownTheme);
+	const skip = cursorLines(state);
+	const ranges = [];
+	for (let n = 1; n <= state.doc.lines; n++) {
+		if (skip.has(n)) continue;
+		const hint = hintAt(state, n, theme);
+		if (hint) ranges.push(hint);
+	}
+	return Decoration.set(ranges);
+}
+const heightHints = StateField.define({
+	create: allHints,
+	update(hints, tr) {
+		if (tr.effects.some((effect) => effect.is(refreshEstimates)) || tr.state.facet(markdownTheme) !== tr.startState.facet(markdownTheme)) return allHints(tr.state);
+		if (!tr.docChanged && !tr.selection) return hints;
+		const { state } = tr;
+		hints = hints.map(tr.changes);
+		const redo = /* @__PURE__ */ new Set();
+		tr.changes.iterChangedRanges((_fromA, _toA, fromB, toB) => {
+			for (let n = state.doc.lineAt(fromB).number; n <= state.doc.lineAt(toB).number; n++) redo.add(n);
+		});
+		for (const r of tr.startState.selection.ranges) redo.add(state.doc.lineAt(tr.changes.mapPos(r.head)).number);
+		const skip = cursorLines(state);
+		for (const n of skip) redo.add(n);
+		const theme = state.facet(markdownTheme);
+		for (const n of redo) {
+			const line = state.doc.line(n);
+			const hint = skip.has(n) ? null : hintAt(state, n, theme);
+			hints = hints.update({
+				filter: () => false,
+				filterFrom: line.from,
+				filterTo: line.from,
+				add: hint ? [hint] : []
+			});
+		}
+		return hints;
+	},
+	provide: (field) => EditorView.decorations.from(field)
+});
+/** Better height estimates for headings and wrapping lines that are not drawn yet. */
+function lineHeightHints() {
+	return heightHints;
+}
+//#endregion
+//#region packages/codemirror/src/previews.ts
+/** How image paths are resolved; by default they are used as written. */
+const imageResolver = Facet.define({ combine: (values) => values[0] ?? ((src) => src) });
+/** Fills `dom` with rendered math now if known, otherwise when it is ready. */
+function renderInto(dom, tex, display, onDone) {
+	const show = (result) => {
+		dom.textContent = "";
+		if (result.svg !== void 0) dom.innerHTML = result.svg;
+		else {
+			const error = dom.appendChild(document.createElement("span"));
+			error.className = "sm-math-error";
+			error.textContent = `Math error: ${result.error}`;
+		}
+		onDone?.();
+	};
+	const known = loadedMath()?.cachedMath(tex, display);
+	if (known) return show(known);
+	dom.textContent = "…";
+	loadMath().then((m) => m.renderMath(tex, display)).then(show, (error) => show({ error: `could not load the math renderer (${String(error)})` }));
+}
+var MathBlockWidget = class extends WidgetType {
+	tex;
+	key;
+	estimate;
+	constructor(tex) {
+		super();
+		this.tex = tex;
+		this.key = `math\n${tex}`;
+		this.estimate = mathEstimate(this.key, tex);
+	}
+	eq(other) {
+		return other.key === this.key && other.estimate === this.estimate;
+	}
+	/** Only the estimate changed: keep the drawn formula. */
+	updateDOM(dom) {
+		return dom.dataset["key"] === this.key;
+	}
+	get estimatedHeight() {
+		return this.estimate;
+	}
+	toDOM(view) {
+		const dom = document.createElement("div");
+		dom.className = "sm-math-preview";
+		dom.dataset["key"] = this.key;
+		dom.style.minHeight = `${this.estimate - 12}px`;
+		renderInto(dom, this.tex, true, () => {
+			dom.style.minHeight = "";
+			view.requestMeasure();
+			rememberHeight(view, this.key, dom);
+		});
+		return dom;
+	}
+};
+/** An image from the document with its path resolved by the host. */
+function imageRef(image, resolve) {
+	if (image.src === null) return {
+		raw: image.raw,
+		src: null,
+		alt: image.alt,
+		problem: `No definition for ${image.raw}`
+	};
+	const src = resolve(image.src);
+	return src === null ? {
+		raw: image.raw,
+		src,
+		alt: image.alt,
+		problem: `Can't load ${image.raw}`
+	} : {
+		raw: image.raw,
+		src,
+		alt: image.alt
+	};
+}
+var ImageWidget = class extends WidgetType {
+	images;
+	key;
+	estimate;
+	constructor(images) {
+		super();
+		this.images = images;
+		this.key = `images\n${JSON.stringify(images)}`;
+		this.estimate = imagesEstimate(this.key, images.map((image) => image.src));
+	}
+	eq(other) {
+		return other.key === this.key && other.estimate === this.estimate;
+	}
+	/** Only the estimate changed: keep the drawn images. */
+	updateDOM(dom) {
+		return dom.dataset["key"] === this.key;
+	}
+	get estimatedHeight() {
+		return this.estimate;
+	}
+	toDOM(view) {
+		const dom = document.createElement("div");
+		dom.className = "sm-image-preview";
+		dom.dataset["key"] = this.key;
+		let waiting = 0;
+		let unsized = 0;
+		const settled = () => {
+			view.requestMeasure();
+			if (--waiting === 0) rememberHeight(view, this.key, dom);
+		};
+		for (const image of this.images) {
+			const problem = (text) => {
+				const span = document.createElement("span");
+				span.className = "sm-image-error";
+				span.textContent = text;
+				return span;
+			};
+			if (image.src === null) {
+				dom.appendChild(problem(image.problem ?? `Can't load ${image.raw}`));
+				continue;
+			}
+			waiting++;
+			const img = dom.appendChild(document.createElement("img"));
+			const size = knownImageSize(image.src);
+			if (size) reserveImageBox(img, size);
+			else if (size === void 0) {
+				unsized++;
+				watchImage(img, image.src);
+				whenImageSized(image.src, (known) => {
+					if (known) reserveImageBox(img, known);
+					if (--unsized === 0) dom.style.minHeight = "";
+					view.requestMeasure();
+				});
+			}
+			img.decoding = "async";
+			img.src = image.src;
+			img.alt = image.alt;
+			img.title = image.raw;
+			img.onload = settled;
+			img.onerror = () => {
+				img.replaceWith(problem(`Image not found: ${image.raw}`));
+				settled();
+			};
+		}
+		if (unsized > 0) dom.style.minHeight = `${this.estimate - 12}px`;
+		if (waiting === 0) rememberHeight(view, this.key, dom);
+		return dom;
+	}
+};
+/** What to preview below which lines: the images of each line, and closed non-empty $$ blocks. */
+function blockPreviewSources(state) {
+	const resolve = state.facet(imageResolver);
+	return previewBlocks(syntaxTree(state), state.doc.toString()).map((block) => "tex" in block ? block : {
+		at: block.at,
+		images: block.images.map((image) => imageRef(image, resolve))
+	});
+}
+function blockPreviews(state) {
+	const ranges = blockPreviewSources(state).map((preview) => {
+		const widget = "tex" in preview ? new MathBlockWidget(preview.tex) : new ImageWidget(preview.images);
+		return Decoration.widget({
+			widget,
+			block: true,
+			side: 1
+		}).range(preview.at);
+	});
+	return Decoration.set(ranges, true);
+}
+/** Block widgets change line heights, so CodeMirror wants them from a state field. */
+const blockPreviewField = StateField.define({
+	create: blockPreviews,
+	update(previews, tr) {
+		return tr.docChanged || syntaxTree(tr.state) !== syntaxTree(tr.startState) || tr.state.facet(imageResolver) !== tr.startState.facet(imageResolver) || tr.effects.some((effect) => effect.is(refreshEstimates)) ? blockPreviews(tr.state) : previews;
+	},
+	provide: (field) => EditorView.decorations.from(field)
+});
+function inlineMathAt(state, pos) {
+	const tree = syntaxTree(state);
+	for (const side of [1, -1]) for (let node = tree.resolveInner(pos, side); node; node = node.parent) if (node.name === "InlineMath") return node;
+	return null;
+}
+function mathTooltip(state, pos) {
+	const node = inlineMathAt(state, pos);
+	const tex = node && mathSource(node, (from, to) => state.sliceDoc(from, to));
+	if (!node || !tex) return null;
+	const display = node.getChild("MathMark").to - node.from === 2;
+	return {
+		pos: node.from,
+		end: node.to,
+		above: true,
+		create: (view) => {
+			const dom = document.createElement("div");
+			dom.className = "sm-math-tooltip";
+			renderInto(dom, tex, display, () => view.requestMeasure());
+			return { dom };
+		}
+	};
+}
+/** The tooltip for inline math under the cursor. */
+const cursorMathTooltip = StateField.define({
+	create: (state) => state.selection.main.empty ? mathTooltip(state, state.selection.main.head) : null,
+	update(tooltip, tr) {
+		if (!tr.docChanged && !tr.selection) return tooltip;
+		const { main } = tr.state.selection;
+		const next = main.empty ? mathTooltip(tr.state, main.head) : null;
+		if (next && tooltip && !tr.docChanged && next.pos === tooltip.pos && next.end === tooltip.end) return tooltip;
+		return next;
+	},
+	provide: (field) => showTooltip.from(field)
+});
+const hoverMathTooltip = hoverTooltip((view, pos) => {
+	const cursor = view.state.field(cursorMathTooltip, false);
+	const tooltip = mathTooltip(view.state, pos);
+	return tooltip && cursor?.pos === tooltip.pos ? null : tooltip;
+});
+const previewTheme = EditorView.theme({
+	".sm-image-preview": {
+		display: "flex",
+		flexWrap: "wrap",
+		gap: "8px",
+		padding: "4px 0 8px"
+	},
+	".sm-image-preview img": {
+		maxWidth: "100%",
+		maxHeight: "320px",
+		borderRadius: "4px"
+	},
+	".sm-image-error, .sm-math-error": {
+		color: "#cf222e",
+		fontSize: "0.9em"
+	},
+	".sm-math-preview": {
+		textAlign: "center",
+		padding: "4px 0 8px",
+		overflowX: "auto",
+		overflowY: "hidden"
+	},
+	".sm-math-tooltip": { padding: "6px 10px" }
+});
+/** Image and math previews; the source text always stays visible. */
+function previews() {
+	return [
+		blockPreviewField,
+		previewLayout,
+		lineHeightHints(),
+		cursorMathTooltip,
+		hoverMathTooltip,
+		previewTheme
+	];
+}
+//#endregion
+//#region packages/codemirror/src/table-commands.ts
+/** Children of a Table node that are whole lines (the delimiter line is a TableDelimiter). */
+const ROW_NODES = /* @__PURE__ */ new Set([
+	"TableHeader",
+	"TableDelimiter",
+	"TableRow"
+]);
+function findTable(state, pos) {
+	const tree = ensureSyntaxTree(state, pos, 50) ?? syntaxTree(state);
+	for (const side of [1, -1]) for (let node = tree.resolveInner(pos, side); node; node = node.parent) if (node.name === "Table") return node;
+	return null;
+}
+/** The table under the cursor and the cell the cursor is in. */
+function tableAt(state) {
+	const pos = state.selection.main.head;
+	const node = findTable(state, pos);
+	if (!node) return null;
+	const lines = [];
+	for (let child = node.firstChild; child; child = child.nextSibling) {
+		if (!ROW_NODES.has(child.name)) continue;
+		const line = state.doc.lineAt(child.from);
+		if (lines.at(-1)?.from === line.from) continue;
+		lines.push({
+			from: line.from,
+			to: line.to,
+			prefix: state.sliceDoc(line.from, child.from),
+			contentFrom: child.from,
+			content: state.sliceDoc(child.from, line.to)
+		});
+	}
+	const index = lines.findIndex((l) => pos >= l.from && pos <= l.to);
+	if (lines.length < 2 || index === -1) return null;
+	const line = lines[index];
+	return {
+		lines,
+		table: parseTable(lines.map((l) => l.content)),
+		row: index <= 1 ? 0 : index - 1,
+		col: cellAt(line.content, Math.max(0, pos - line.contentFrom))
+	};
+}
+/**
+* Replaces the table with `table` re-aligned and puts the cursor at the end of the text of cell
+* (`row`, `col`). `after` is inserted right after the table; with `cursorAfter` the cursor goes
+* to its end instead.
+*/
+function writeTable(state, at, table, row, col, after = "", cursorAfter = false) {
+	const { lines, cells } = renderTable(table);
+	const prefix = (i) => at.lines[Math.min(i, at.lines.length - 1)].prefix;
+	const full = lines.map((line, i) => prefix(i) + line);
+	const insert = full.join(state.lineBreak) + after;
+	const from = at.lines[0].from;
+	let cursor = from + insert.length;
+	if (!cursorAfter) {
+		const target = rowLine(row);
+		cursor = from + full.slice(0, target).reduce((sum, line) => sum + line.length + state.lineBreak.length, 0) + prefix(target).length + cells[row][col].to;
+	}
+	return state.update({
+		changes: {
+			from,
+			to: at.lines.at(-1).to,
+			insert
+		},
+		selection: { anchor: cursor },
+		scrollIntoView: true,
+		userEvent: "input.table"
+	});
+}
+const emptyRow = (table) => table.aligns.map(() => "");
+/** Tab: re-align and go to the next cell, adding a row after the last one. */
+const nextCell = ({ state, dispatch }) => {
+	const at = tableAt(state);
+	if (!at) return false;
+	const { table } = at;
+	const columns = table.aligns.length;
+	let { row, col } = at;
+	if (col + 1 < columns) col++;
+	else {
+		row++;
+		col = 0;
+		if (row >= table.rows.length) table.rows.push(emptyRow(table));
+	}
+	dispatch(writeTable(state, at, table, row, col));
+	return true;
+};
+/** Shift-Tab: re-align and go to the previous cell. */
+const previousCell = ({ state, dispatch }) => {
+	const at = tableAt(state);
+	if (!at) return false;
+	let { row, col } = at;
+	if (col > 0) col = Math.min(col, at.table.aligns.length) - 1;
+	else if (row > 0) {
+		row--;
+		col = at.table.aligns.length - 1;
+	}
+	dispatch(writeTable(state, at, at.table, row, col));
+	return true;
+};
+/**
+* Enter: re-align and add an empty row below, cursor in its first cell. On an empty last row,
+* remove it and leave the table: the cursor goes below a blank line, because GFM would read
+* a line right after a table as another row.
+*/
+const insertRowBelow = ({ state, dispatch }) => {
+	const at = tableAt(state);
+	if (!at) return false;
+	const { table, row } = at;
+	if (row > 0 && row === table.rows.length - 1 && table.rows[row].every((cell) => cell === "")) {
+		table.rows.splice(row, 1);
+		dispatch(writeTable(state, at, table, 0, 0, state.lineBreak + state.lineBreak, true));
+		return true;
+	}
+	table.rows.splice(row + 1, 0, emptyRow(table));
+	dispatch(writeTable(state, at, table, row + 1, 0));
+	return true;
+};
+/**
+* A typed line break inside a table becomes "add a row below". This catches the line breaks
+* the Enter command never sees: while an IME is composing (Korean: Enter right after a
+* syllable), CodeMirror skips its keymaps and the browser inserts the break itself, sometimes
+* before the syllable still being composed. The typed text stays in its cell.
+*/
+const lineBreakToRow = EditorState.transactionFilter.of((tr) => {
+	if (!tr.docChanged || !tr.isUserEvent("input") || tr.isUserEvent("input.paste") || tr.isUserEvent("input.drop") || tr.isUserEvent("input.table")) return tr;
+	const { startState } = tr;
+	const kept = [];
+	let breakAt = null;
+	let other = false;
+	tr.changes.iterChanges((fromA, toA, _fromB, _toB, inserted) => {
+		const removedBreaks = startState.doc.lineAt(toA).number - startState.doc.lineAt(fromA).number;
+		const lines = inserted.toJSON();
+		if (removedBreaks === 0 && lines.length === 2 && !breakAt) {
+			breakAt = {
+				from: fromA,
+				offset: lines[0].length
+			};
+			kept.push({
+				from: fromA,
+				to: toA,
+				insert: lines.join("")
+			});
+		} else if (lines.length - 1 !== removedBreaks) other = true;
+		else kept.push({
+			from: fromA,
+			to: toA,
+			insert: inserted.sliceString(0, inserted.length, startState.lineBreak)
+		});
+	});
+	const at = breakAt;
+	if (!at || other) return tr;
+	const withoutBreak = startState.changes(kept);
+	const pos = withoutBreak.mapPos(at.from, -1) + at.offset;
+	const state = startState.update({
+		changes: withoutBreak,
+		selection: { anchor: pos }
+	}).state;
+	let row = null;
+	if (!insertRowBelow({
+		state,
+		dispatch: (t) => row = t
+	})) return tr;
+	const done = row;
+	return {
+		changes: withoutBreak.compose(done.changes),
+		selection: done.selection,
+		scrollIntoView: true,
+		userEvent: "input.table"
+	};
+});
+/**
+* Tab while an IME is composing: CodeMirror skips its keymaps then, and the browser would move
+* the focus out of the editor. Take the key, let the IME commit, then move to the cell.
+*/
+const tabWhileComposing = ViewPlugin.fromClass(class {
+	view;
+	constructor(view) {
+		this.view = view;
+		view.dom.addEventListener("keydown", this.onKeydown, true);
+	}
+	destroy() {
+		this.view.dom.removeEventListener("keydown", this.onKeydown, true);
+	}
+	onKeydown = (event) => {
+		const { view } = this;
+		if (event.key !== "Tab" || event.ctrlKey || event.altKey || event.metaKey) return;
+		if (!(event.isComposing || event.keyCode === 229 || view.compositionStarted) || !tableAt(view.state)) return;
+		event.preventDefault();
+		event.stopPropagation();
+		const command = event.shiftKey ? previousCell : nextCell;
+		const start = Date.now();
+		const run = () => {
+			if (!view.compositionStarted) command(view);
+			else if (Date.now() - start < 1e3) setTimeout(run, 20);
+		};
+		setTimeout(run, 0);
+	};
+});
+/** Table editing keys, ahead of the default and Markdown keymaps, and their IME counterparts. */
+function tableEditing() {
+	return [
+		Prec.high(keymap.of([{
+			key: "Tab",
+			run: nextCell,
+			shift: previousCell
+		}, {
+			key: "Enter",
+			run: insertRowBelow
+		}])),
+		lineBreakToRow,
+		tabWhileComposing
+	];
+}
+//#endregion
+//#region packages/codemirror/src/index.ts
+/** The SimpleMark language and styling, for hosts that build their own EditorState. */
+function simpleMark(theme = defaultTheme) {
+	return [
+		tableEditing(),
+		markdown({
+			base: commonmarkLanguage,
+			extensions: markdownExtensions,
+			completeHTMLTags: false
+		}),
+		markdownTheme.of(theme),
+		markdownDecorations,
+		previews(),
+		EditorView.theme({
+			"&": { color: theme.color },
+			".cm-scroller": {
+				fontFamily: theme.fontFamily,
+				lineHeight: "1.6"
+			}
+		})
+	];
+}
+/** A Markdown editor in `parent`. The text is kept exactly as given, line endings included. */
+function createEditor(parent, options = {}) {
+	const { doc = "", readOnly = false, theme = defaultTheme, resolveImage, onChange, extensions = [] } = options;
+	const useHistory = options.history ?? true;
+	return new EditorView({
+		parent,
+		state: EditorState.create({
+			doc,
+			extensions: [
+				options.lineSeparator ? EditorState.lineSeparator.of(options.lineSeparator) : keepLineSeparator(doc),
+				useHistory ? history() : [],
+				keymap.of([...defaultKeymap, ...useHistory ? historyKeymap : []]),
+				EditorView.lineWrapping,
+				simpleMark(theme),
+				resolveImage ? imageResolver.of(resolveImage) : [],
+				EditorState.readOnly.of(readOnly),
+				EditorView.editable.of(!readOnly),
+				onChange ? EditorView.updateListener.of((update) => update.docChanged && onChange(update.state.sliceDoc(), update)) : [],
+				extensions
+			]
+		})
+	});
+}
+//#endregion
+export { createEditor, imageResolver, insertRowBelow, keepLineSeparator, lookCss, markdownDecorations, markdownTheme, nextCell, previews, previousCell, simpleMark, tableEditing };

package/package.json

@@ -1,6 +1,34 @@
 {
   "name": "@simple-mark/codemirror",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "CodeMirror 6 editor that styles Markdown without hiding its syntax.",
+  "license": "MIT",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/one-prime/simple-mark.git",
+    "directory": "packages/codemirror"
+  },
+  "keywords": [
+    "markdown",
+    "wysiwyg",
+    "editor",
+    "gfm"
+  ],
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js"
+    }
+  },
+  "dependencies": {
+    "@codemirror/commands": "^6.11.1",
+    "@codemirror/lang-markdown": "^6.5.2",
+    "@codemirror/language": "^6.13.1",
+    "@codemirror/state": "^6.7.6",
+    "@codemirror/view": "^6.43.15",
+    "@lezer/common": "^1.5.3",
+    "@simple-mark/math": "^0.2.0",
+    "@simple-mark/model": "^0.2.0"
+  }
+}