@gjermundgaraba/pixel-paper 0.2.0 → 0.2.1

package/dist/confirm-dialog/confirm-dialog.d.ts

@@ -111,15 +111,15 @@ export declare const update: (model: Model, message: Message, context?: UpdateCo
       } | {
         readonly _tag: "GotAnimationMessage";
         readonly message: {
-          readonly _tag: "Hid";
-        } | {
-          readonly _tag: "Showed";
-        } | {
           readonly _tag: "CompletedWaitForPaint";
           readonly generation: number;
         } | {
           readonly _tag: "EndedAnimation";
           readonly generation: number;
+        } | {
+          readonly _tag: "Hid";
+        } | {
+          readonly _tag: "Showed";
         };
       } | {
         readonly _tag: "RequestedClose";
@@ -230,15 +230,15 @@ export declare const view: import("foldkit/submodel").View<{
     } | {
       readonly _tag: "GotAnimationMessage";
       readonly message: {
-        readonly _tag: "Hid";
-      } | {
-        readonly _tag: "Showed";
-      } | {
         readonly _tag: "CompletedWaitForPaint";
         readonly generation: number;
       } | {
         readonly _tag: "EndedAnimation";
         readonly generation: number;
+      } | {
+        readonly _tag: "Hid";
+      } | {
+        readonly _tag: "Showed";
       };
     } | {
       readonly _tag: "RequestedClose";

package/dist/copy-button/copy-button.d.ts

@@ -38,11 +38,11 @@ export declare const update: (model: Model, message: Message) => Readonly<{
   model: {
     readonly id: string;
     readonly state: {
+      readonly _tag: "Idle";
+    } | {
       readonly _tag: "Copied";
     } | {
       readonly _tag: "Copying";
-    } | {
-      readonly _tag: "Idle";
     };
   };
   commands?: Update.Commands<{
@@ -74,11 +74,11 @@ export type ViewInputs = Readonly<{
 export declare const view: import("foldkit/submodel").View<{
   readonly id: string;
   readonly state: {
+    readonly _tag: "Idle";
+  } | {
     readonly _tag: "Copied";
   } | {
     readonly _tag: "Copying";
-  } | {
-    readonly _tag: "Idle";
   };
 }, {
   readonly _tag: "FailedCopyText";

package/dist/dialog/dialog.d.ts

@@ -108,15 +108,15 @@ export declare const update: (model: Model, message: Message, context?: UpdateCo
     } | {
       readonly _tag: "GotAnimationMessage";
       readonly message: {
-        readonly _tag: "Hid";
-      } | {
-        readonly _tag: "Showed";
-      } | {
         readonly _tag: "CompletedWaitForPaint";
         readonly generation: number;
       } | {
         readonly _tag: "EndedAnimation";
         readonly generation: number;
+      } | {
+        readonly _tag: "Hid";
+      } | {
+        readonly _tag: "Showed";
       };
     } | {
       readonly _tag: "RequestedClose";
@@ -235,15 +235,15 @@ export declare const view: import("foldkit/submodel").View<{
   } | {
     readonly _tag: "GotAnimationMessage";
     readonly message: {
-      readonly _tag: "Hid";
-    } | {
-      readonly _tag: "Showed";
-    } | {
       readonly _tag: "CompletedWaitForPaint";
       readonly generation: number;
     } | {
       readonly _tag: "EndedAnimation";
       readonly generation: number;
+    } | {
+      readonly _tag: "Hid";
+    } | {
+      readonly _tag: "Showed";
     };
   } | {
     readonly _tag: "RequestedClose";

package/dist/key-help/key-help.d.ts

@@ -120,15 +120,15 @@ export declare const update: (model: Model, message: Message) => Readonly<{
       } | {
         readonly _tag: "GotAnimationMessage";
         readonly message: {
-          readonly _tag: "Hid";
-        } | {
-          readonly _tag: "Showed";
-        } | {
           readonly _tag: "CompletedWaitForPaint";
           readonly generation: number;
         } | {
           readonly _tag: "EndedAnimation";
           readonly generation: number;
+        } | {
+          readonly _tag: "Hid";
+        } | {
+          readonly _tag: "Showed";
         };
       } | {
         readonly _tag: "RequestedClose";
@@ -211,15 +211,15 @@ export declare const view: import("foldkit/submodel").View<{
     } | {
       readonly _tag: "GotAnimationMessage";
       readonly message: {
-        readonly _tag: "Hid";
-      } | {
-        readonly _tag: "Showed";
-      } | {
         readonly _tag: "CompletedWaitForPaint";
         readonly generation: number;
       } | {
         readonly _tag: "EndedAnimation";
         readonly generation: number;
+      } | {
+        readonly _tag: "Hid";
+      } | {
+        readonly _tag: "Showed";
       };
     } | {
       readonly _tag: "RequestedClose";

package/dist/markdown-editor/element.js

@@ -3,11 +3,7 @@ import { spec } from "./markdown-editor.js";
 import { afterEmission, afterSource } from "./reconcile.js";
 import { createEngine } from "./engine.js";
 // src/markdown-editor/element.ts
-const MIRRORED_ATTRIBUTES = [
-	"aria-describedby",
-	"aria-invalid",
-	"aria-required"
-];
+const MIRRORED_ATTRIBUTES = ["aria-describedby", "aria-invalid"];
 const MOTION_END_EVENTS = ["animationend", "transitionend"];
 const mirroredAttributes = (textarea) => __foldkitBrandViewResult((Object.fromEntries(MIRRORED_ATTRIBUTES.flatMap((name) => {
 	const value = textarea.getAttribute(name);
@@ -19,6 +15,14 @@ const namedBy = (textarea) => {
 	if (label.id === "") label.id = `${textarea.id}-label`;
 	return __foldkitBrandViewResult(({ "aria-labelledby": label.id }), "@gjermundgaraba/pixel-paper/markdown-editor/element.js#namedBy");
 };
+const createEngineOrReport = (config) => {
+	try {
+		return __foldkitBrandViewResult((createEngine(config)), "@gjermundgaraba/pixel-paper/markdown-editor/element.js#createEngineOrReport");
+	} catch (error) {
+		reportError(error);
+		return;
+	}
+};
 var MarkdownEditorElement = class extends HTMLElement {
 	static formAssociated = true;
 	#source = "";
@@ -58,7 +62,7 @@ var MarkdownEditorElement = class extends HTMLElement {
 			...namedBy(textarea),
 			...mirroredAttributes(textarea)
 		}), "@gjermundgaraba/pixel-paper/markdown-editor/element.js#accessAttributes"));
-		const engine = createEngine({
+		const engine = createEngineOrReport({
 			parent: surface,
 			doc: this.#source,
 			attributes: accessAttributes(),
@@ -68,6 +72,10 @@ var MarkdownEditorElement = class extends HTMLElement {
 				this.dispatchEvent(new CustomEvent("value-change", { detail: { value: doc } }));
 			}
 		});
+		if (engine === void 0) {
+			surface.remove();
+			return;
+		}
 		const syncAccess = () => {
 			engine.configureAccess(accessAttributes(), this.#isDisabled);
 		};

package/dist/markdown-editor/engine.js

@@ -10,6 +10,7 @@ import { EditorView, keymap } from "@codemirror/view";
 import { GFM, MarkdownParser } from "@lezer/markdown";
 // src/markdown-editor/engine.ts
 const DIFF_TIMEOUT_MS = 50;
+const historyCompartment = new Compartment();
 const language = new Language(commonmarkLanguage.data, commonmarkLanguage.parser instanceof MarkdownParser ? commonmarkLanguage.parser.configure(GFM) : commonmarkLanguage.parser, [], "markdown");
 /** Who is named by what, and whether the document may change. `readOnly` alone lets Enter and
 *  the Markdown keymap edit, so the filter refuses every change but an outside one. */
@@ -21,16 +22,18 @@ const accessExtension = (attributes, isReadOnly) => __foldkitBrandViewResult(([
 		...isReadOnly ? { "aria-disabled": "true" } : {}
 	})
 ]), "@gjermundgaraba/pixel-paper/markdown-editor/engine.js#accessExtension");
-/** The editor's state. No line separator is set, so CRLF text parses like LF text. Tab stays
-*  unbound, so it leaves the field. */
+/** The editor's state. No line separator is set, so CRLF text parses like LF text, and the
+*  first edit hands it back with LF line endings. Tab stays unbound and nothing inside the
+*  field takes focus, so Tab leaves the field. Mod-Enter only opens a link at the caret, so
+*  elsewhere it does nothing, as in a textarea. */
 const editorState = (doc, extensions = []) => __foldkitBrandViewResult((EditorState.create({
 	doc,
 	extensions: [
-		history(),
+		historyCompartment.of(history()),
 		language,
 		liveMarkdown(),
 		Prec.high(keymap.of(markdownKeymap)),
-		keymap.of([...defaultKeymap, ...historyKeymap]),
+		keymap.of([...defaultKeymap.filter(({ key }) => __foldkitBrandViewResult((key !== "Mod-Enter"), "@gjermundgaraba/pixel-paper/markdown-editor/engine.js#anonymous~2")), ...historyKeymap]),
 		EditorView.lineWrapping,
 		EditorView.contentAttributes.of({
 			spellcheck: "true",
@@ -41,20 +44,23 @@ const editorState = (doc, extensions = []) => __foldkitBrandViewResult((EditorSt
 	]
 })), "@gjermundgaraba/pixel-paper/markdown-editor/engine.js#editorState");
 /** The whole document to send up after these transactions, if one of them was a local edit. */
-const emission = (transactions, state) => __foldkitBrandViewResult((transactions.some((transaction) => __foldkitBrandViewResult((transaction.docChanged && transaction.annotation(Transaction.remote) !== true), "@gjermundgaraba/pixel-paper/markdown-editor/engine.js#anonymous~2")) ? state.doc.toString() : void 0), "@gjermundgaraba/pixel-paper/markdown-editor/engine.js#emission");
-/** A minimal edit from the document to an outside value: the caret survives it, and undo keeps
-*  to what was typed. */
-const externalChange = (state, source) => {
-	const current = state.doc.toString();
+const emission = (transactions, state) => __foldkitBrandViewResult((transactions.some((transaction) => __foldkitBrandViewResult((transaction.docChanged && transaction.annotation(Transaction.remote) !== true), "@gjermundgaraba/pixel-paper/markdown-editor/engine.js#anonymous~3")) ? state.doc.toString() : void 0), "@gjermundgaraba/pixel-paper/markdown-editor/engine.js#emission");
+/** Puts an outside value in as a minimal edit, so the caret stays on the same text, and ends
+*  the undo history. Typed edits left in it would map onto letters of the outside text, and
+*  undo would delete those. Dropping the history field and adding it back starts it empty. */
+const applyExternal = (target, source) => {
+	const current = target.state.doc.toString();
 	const next = withLfLineEndings(source);
-	return __foldkitBrandViewResult(({
+	target.dispatch(target.state.update({
 		changes: diff(current, next, { timeout: DIFF_TIMEOUT_MS }).map(({ fromA, toA, fromB, toB }) => (__foldkitBrandViewResult(({
 			from: fromA,
 			to: toA,
 			insert: next.slice(fromB, toB)
-		}), "@gjermundgaraba/pixel-paper/markdown-editor/engine.js#anonymous~3"))),
-		annotations: [Transaction.remote.of(true), Transaction.addToHistory.of(false)]
-	}), "@gjermundgaraba/pixel-paper/markdown-editor/engine.js#externalChange");
+		}), "@gjermundgaraba/pixel-paper/markdown-editor/engine.js#anonymous~4"))),
+		annotations: Transaction.remote.of(true),
+		effects: historyCompartment.reconfigure([])
+	}));
+	target.dispatch(target.state.update({ effects: historyCompartment.reconfigure(history()) }));
 };
 /** Mounts CodeMirror in `parent`, and returns what the element drives it with. */
 const createEngine = (config) => {
@@ -75,7 +81,7 @@ const createEngine = (config) => {
 			view.requestMeasure();
 		},
 		applyExternal: (source) => {
-			view.dispatch(externalChange(view.state, source));
+			applyExternal(view, source);
 		},
 		configureAccess: (attributes, isReadOnly) => {
 			view.dispatch({ effects: access.reconfigure(accessExtension(attributes, isReadOnly)) });
@@ -85,4 +91,4 @@ const createEngine = (config) => {
 		}
 	}), "@gjermundgaraba/pixel-paper/markdown-editor/engine.js#createEngine");
 };
-export { accessExtension, createEngine, editorState, emission, externalChange };
+export { accessExtension, applyExternal, createEngine, editorState, emission };

package/dist/markdown-editor/live/live.js

@@ -34,12 +34,6 @@ const spanOf = (className, text) => {
 	span.textContent = text;
 	return __foldkitBrandViewResult((span), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#spanOf");
 };
-const typographyWidget = (text, isDivider) => __foldkitBrandViewResult((new DrawnWidget({
-	key: `typography:${isDivider}:${text}`,
-	draw: () => __foldkitBrandViewResult((spanOf(isDivider ? "lmd-labeled-rule" : "", text)), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#draw"),
-	estimatedHeight: UNKNOWN_HEIGHT,
-	takesOwnEvents: false
-})), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#typographyWidget");
 const checkboxWidget = (isChecked) => __foldkitBrandViewResult((new DrawnWidget({
 	key: `checkbox:${isChecked}`,
 	draw: () => {
@@ -47,17 +41,18 @@ const checkboxWidget = (isChecked) => __foldkitBrandViewResult((new DrawnWidget(
 		box.type = "checkbox";
 		box.checked = isChecked;
 		box.className = "lmd-check";
-		return __foldkitBrandViewResult((box), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#draw~2");
+		box.tabIndex = -1;
+		return __foldkitBrandViewResult((box), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#draw");
 	},
 	estimatedHeight: UNKNOWN_HEIGHT,
 	takesOwnEvents: false
 })), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#checkboxWidget");
-const listMarkWidget = (text) => __foldkitBrandViewResult((new DrawnWidget({
-	key: `list-mark:${text}`,
-	draw: () => __foldkitBrandViewResult((spanOf("lmd-bullet", text)), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#draw~3"),
+const bulletWidget = new DrawnWidget({
+	key: "bullet",
+	draw: () => __foldkitBrandViewResult((spanOf("lmd-bullet", "•")), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#draw~2"),
 	estimatedHeight: UNKNOWN_HEIGHT,
 	takesOwnEvents: true
-})), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#listMarkWidget");
+});
 const imageWidget = (source, alt) => __foldkitBrandViewResult((new DrawnWidget({
 	key: `image:${source}\n${alt}`,
 	draw: () => {
@@ -65,48 +60,23 @@ const imageWidget = (source, alt) => __foldkitBrandViewResult((new DrawnWidget({
 		const safeSource = safeImageSource(source, document.baseURI);
 		if (safeSource === void 0) {
 			box.append(spanOf("lmd-img-note", alt === "" ? "Image not shown" : alt));
-			return __foldkitBrandViewResult((box), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#draw~4");
+			return __foldkitBrandViewResult((box), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#draw~3");
 		}
 		const image = document.createElement("img");
 		image.className = "lmd-img";
 		image.alt = alt;
+		image.referrerPolicy = "no-referrer";
 		image.addEventListener("error", () => {
 			image.replaceWith(spanOf("lmd-img-note", alt === "" ? "Image not found" : `Image not found: ${alt}`));
 		}, { once: true });
 		image.src = safeSource;
 		box.append(image);
-		return __foldkitBrandViewResult((box), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#draw~4");
+		return __foldkitBrandViewResult((box), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#draw~3");
 	},
 	estimatedHeight: IMAGE_ESTIMATED_HEIGHT,
 	takesOwnEvents: false
 })), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#imageWidget");
 const isList = (node) => __foldkitBrandViewResult((node?.name === "BulletList" || node?.name === "OrderedList"), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#isList");
-const listDepth = (item) => {
-	let depth = 0;
-	for (let node = item.parent; node !== null; node = node.parent) if (isList(node)) depth += 1;
-	return __foldkitBrandViewResult((depth), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#listDepth");
-};
-const firstMarkOf = (state, item) => {
-	const mark = item.parent?.firstChild?.getChild("ListMark");
-	return __foldkitBrandViewResult((mark === void 0 || mark === null ? void 0 : state.sliceDoc(mark.from, mark.to)), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#firstMarkOf");
-};
-const itemNumber = (state, item) => {
-	const start = Number(/^\d+/u.exec(firstMarkOf(state, item) ?? "")?.[0] ?? 1);
-	let index = 0;
-	for (let node = item.prevSibling; node !== null; node = node.prevSibling) if (node.name === "ListItem") index += 1;
-	return __foldkitBrandViewResult((start + index), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#itemNumber");
-};
-const listDelimiter = (state, item) => __foldkitBrandViewResult((/[.)]$/u.exec(firstMarkOf(state, item) ?? "")?.[0] ?? "."), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#listDelimiter");
-const outlineNumber = (state, item) => {
-	const parts = [];
-	for (let node = item; node !== null; node = node.parent) if (node.name === "ListItem" && node.parent?.name === "OrderedList") parts.unshift(itemNumber(state, node));
-	return __foldkitBrandViewResult((`${parts.join(".")}${listDelimiter(state, item)}`), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#outlineNumber");
-};
-const listMarker = (state, item) => {
-	const list = item.parent;
-	if (list?.name === "BulletList") return __foldkitBrandViewResult((Array.from({ length: listDepth(item) }, () => __foldkitBrandViewResult(("•"), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#anonymous~2")).join(" ")), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#listMarker");
-	return __foldkitBrandViewResult((list?.name === "OrderedList" ? outlineNumber(state, item) : ""), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#listMarker");
-};
 const hide = Decoration.replace({});
 const mark = (className) => __foldkitBrandViewResult((Decoration.mark({ class: className })), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#mark");
 const line = (className) => __foldkitBrandViewResult((Decoration.line({ class: className })), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#line");
@@ -123,32 +93,20 @@ const HIDDEN_MARKS = /* @__PURE__ */ new Set([
 	"LinkMark",
 	"URL"
 ]);
-const LABELED_RULE = /^ {0,3}---[ \t]+(?<title>\S(?:[^\n]*?\S)?)[ \t]+---[ \t]*$/gmu;
 const ATX_HEADING = /^ATXHeading(?<level>\d)$/u;
-const STANDALONE_DASHES = /(?<![\S\\])--(?!\S)/gu;
-const NOT_PLAIN_TEXT = /Code|Link|URL|Image|HTML|HorizontalRule|Table|Escape/u;
-const isLinkLike = (node) => __foldkitBrandViewResult((node?.name === "Link" || node?.name === "Image"), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#isLinkLike");
-const normalizedLabel = (label) => __foldkitBrandViewResult((label.trim().replaceAll(/\s+/gu, " ").toLowerCase()), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#normalizedLabel");
-const linkDefinitions = (state) => {
-	const labels = /* @__PURE__ */ new Set();
-	for (let node = syntaxTree(state).topNode.firstChild; node !== null; node = node.nextSibling) {
-		const label = node.name === "LinkReference" ? node.getChild("LinkLabel") : null;
-		if (label !== null) labels.add(normalizedLabel(state.sliceDoc(label.from + 1, label.to - 1)));
-	}
-	return __foldkitBrandViewResult((labels), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#linkDefinitions");
-};
-const bracketedText = (state, node) => {
-	const label = node.getChild("LinkLabel");
-	const text = label === null ? "" : state.sliceDoc(label.from + 1, label.to - 1);
-	const [opening, closing] = node.getChildren("LinkMark");
-	return __foldkitBrandViewResult((normalizedLabel(text) === "" && opening !== void 0 && closing !== void 0 ? state.sliceDoc(opening.to, closing.from) : text), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#bracketedText");
-};
-const isPlainBrackets = (state, node, definitions = linkDefinitions(state)) => __foldkitBrandViewResult((isLinkLike(node) && node.getChild("URL") === null && !definitions.has(normalizedLabel(bracketedText(state, node)))), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#isPlainBrackets");
-const build = (view) => {
-	const { state } = view;
+const ANGLE_BRACKETED = /^<(?<destination>.*)>$/su;
+const EMAIL = /^[^\s:@]+@[^\s:@]+$/u;
+const URL_OWNERS = /* @__PURE__ */ new Set([
+	"Link",
+	"Image",
+	"LinkReference"
+]);
+const isPlainBrackets = (node) => __foldkitBrandViewResult(((node.name === "Link" || node.name === "Image") && node.getChild("URL") === null), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#isPlainBrackets");
+const isBareUrl = (node) => __foldkitBrandViewResult((node.name === "URL" && !URL_OWNERS.has(node.parent?.name ?? "")), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#isBareUrl");
+/** The live layer's decorations over the visible ranges, as a ViewPlugin may provide them. */
+const liveDecorations = (state, visibleRanges, isFocused) => {
 	const { ranges } = state.selection;
-	const isFocused = view.hasFocus;
-	const touched = (from, to) => __foldkitBrandViewResult((isFocused && ranges.some((range) => __foldkitBrandViewResult((range.from <= to && range.to >= from), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#anonymous~3"))), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#touched");
+	const touched = (from, to) => __foldkitBrandViewResult((isFocused && ranges.some((range) => __foldkitBrandViewResult((range.from <= to && range.to >= from), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#anonymous~2"))), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#touched");
 	const activeLine = (position) => {
 		const { from, to } = state.doc.lineAt(position);
 		return __foldkitBrandViewResult((touched(from, to)), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#activeLine");
@@ -186,137 +144,108 @@ const build = (view) => {
 		}
 	};
 	const hideWithFollowingSpace = (from, to) => {
-		add(from, Math.min(to + 1, state.doc.lineAt(from).to), hide);
+		add(from, state.sliceDoc(to, to + 1) === " " ? to + 1 : to, hide);
 	};
-	const labeledRanges = [];
-	const definitions = linkDefinitions(state);
-	for (const { from, to } of view.visibleRanges) {
-		const text = state.sliceDoc(from, to);
-		syntaxTree(state).iterate({
-			from,
-			to,
-			enter: (node) => {
-				if (labeledRanges.some(([start, end]) => __foldkitBrandViewResult((node.from >= start && node.to <= end), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#anonymous~4"))) return __foldkitBrandViewResult((false), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
-				const { name } = node;
-				const { parent } = node.node;
-				if (name === "Paragraph" && parent?.name === "Document") {
-					const paragraph = state.sliceDoc(node.from, node.to);
-					for (const match of paragraph.matchAll(LABELED_RULE)) {
-						const start = node.from + match.index;
-						const end = start + match[0].length;
-						const title = match.groups?.["title"];
-						if (title !== void 0 && !activeLine(start)) {
-							labeledRanges.push([start, end]);
-							replace(start, end, typographyWidget(title, true));
-						}
-					}
-				}
-				const level = ATX_HEADING.exec(name)?.groups?.["level"];
-				if (level !== void 0) {
-					addLine(state.doc.lineAt(node.from).from, line(`lmd-h lmd-h${level}`));
-					return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
-				}
-				if (name === "HeaderMark" && parent?.name.startsWith("ATXHeading") === true) {
-					if (!activeLine(node.from)) hideWithFollowingSpace(node.from, node.to);
-					return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
-				}
-				if (isLinkLike(node.node) && isPlainBrackets(state, node.node, definitions)) return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
-				if (name === "LinkMark" && parent !== null && isPlainBrackets(state, parent, definitions)) return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
-				if (name === "Escape") {
-					if (!touched(node.from, node.to)) add(node.from, node.from + 1, hide);
-					return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
-				}
-				if (name === "Image") {
-					const url = node.node.getChild("URL");
-					if (url !== null && !touched(node.from, node.to)) {
-						const alt = state.sliceDoc(node.from + 2, Math.max(node.from + 2, url.from - 2));
-						replace(node.from, node.to, imageWidget(state.sliceDoc(url.from, url.to), alt));
-					}
-					return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
-				}
-				const inlineClass = INLINE.get(name);
-				if (inlineClass !== void 0) {
-					add(node.from, node.to, mark(inlineClass));
-					return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
-				}
-				if (name === "URL" && !isLinkLike(parent)) {
-					add(node.from, node.to, mark("lmd-link"));
-					return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
-				}
-				if (parent !== null && (HIDDEN_MARKS.has(name) || name === "CodeMark" && parent.name === "InlineCode")) {
-					if (!touched(parent.from, parent.to)) add(node.from, node.to, hide);
-					return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
-				}
-				if (name === "FencedCode" || name === "CodeBlock") {
-					addLines(node.from, node.to, "lmd-codeblock");
-					return __foldkitBrandViewResult((false), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
-				}
-				if (name === "Blockquote") {
-					addLines(node.from, node.to, "lmd-quote");
-					return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
-				}
-				if (name === "QuoteMark") {
-					if (!activeLine(node.from)) hideWithFollowingSpace(node.from, node.to);
-					return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
-				}
-				if (name === "HorizontalRule") {
-					if (!activeLine(node.from)) {
-						addLine(state.doc.lineAt(node.from).from, line("lmd-hr"));
-						add(node.from, node.to, hide);
-					}
-					return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
-				}
-				if (name === "Table") {
-					addLines(node.from, node.to, "lmd-table");
-					return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
-				}
-				if (name === "ListMark" && parent !== null && isList(parent.parent)) {
-					if (activeLine(node.from)) return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
-					if (parent.getChild("Task") === null) replace(node.from, node.to, listMarkWidget(listMarker(state, parent)));
-					else hideWithFollowingSpace(node.from, node.to);
-					return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
-				}
-				if (name === "TaskMarker" && !touched(node.from, node.to)) {
-					const isChecked = /x/iu.test(state.sliceDoc(node.from, node.to));
-					replace(node.from, node.to, checkboxWidget(isChecked));
-					if (isChecked && parent !== null) add(node.to, parent.to, mark("lmd-done"));
+	for (const { from, to } of visibleRanges) syntaxTree(state).iterate({
+		from,
+		to,
+		enter: (node) => {
+			const { name } = node;
+			const { parent } = node.node;
+			const level = ATX_HEADING.exec(name)?.groups?.["level"];
+			if (level !== void 0) {
+				addLine(state.doc.lineAt(node.from).from, line(`lmd-h lmd-h${level}`));
+				return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
+			}
+			if (name === "HeaderMark" && parent?.name.startsWith("ATXHeading") === true) {
+				if (!activeLine(node.from)) hideWithFollowingSpace(node.from, node.to);
+				return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
+			}
+			if (name === "LinkReference") return __foldkitBrandViewResult((false), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
+			if (isPlainBrackets(node.node)) return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
+			if (name === "LinkMark" && parent !== null && isPlainBrackets(parent)) return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
+			if (name === "Escape") {
+				if (!touched(node.from, node.to)) add(node.from, node.from + 1, hide);
+				return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
+			}
+			if (name === "Image") {
+				const url = node.node.getChild("URL");
+				if (url !== null && !touched(node.from, node.to)) {
+					const alt = state.sliceDoc(node.from + 2, Math.max(node.from + 2, url.from - 2));
+					replace(node.from, node.to, imageWidget(state.sliceDoc(url.from, url.to).replace(ANGLE_BRACKETED, "$<destination>"), alt));
 				}
 				return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
 			}
-		});
-		for (const match of text.matchAll(STANDALONE_DASHES)) {
-			const start = from + match.index;
-			const end = start + 2;
-			if (!touched(start, end)) {
-				let node = syntaxTree(state).resolveInner(start, 1);
-				let isPlain = true;
-				while (node !== null && isPlain) {
-					isPlain = !NOT_PLAIN_TEXT.test(node.name);
-					node = node.parent;
+			const inlineClass = INLINE.get(name);
+			if (inlineClass !== void 0) {
+				add(node.from, node.to, mark(inlineClass));
+				return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
+			}
+			if (isBareUrl(node.node)) {
+				add(node.from, node.to, mark("lmd-link"));
+				return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
+			}
+			if (parent !== null && (HIDDEN_MARKS.has(name) || name === "CodeMark" && parent.name === "InlineCode")) {
+				if (!touched(parent.from, parent.to)) add(node.from, node.to, hide);
+				return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
+			}
+			if (name === "FencedCode" || name === "CodeBlock") {
+				addLines(node.from, node.to, "lmd-codeblock");
+				return __foldkitBrandViewResult((false), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
+			}
+			if (name === "Blockquote") {
+				addLines(node.from, node.to, "lmd-quote");
+				return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
+			}
+			if (name === "QuoteMark") {
+				if (!activeLine(node.from)) hideWithFollowingSpace(node.from, node.to);
+				return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
+			}
+			if (name === "HorizontalRule") {
+				if (!activeLine(node.from)) {
+					addLine(state.doc.lineAt(node.from).from, line("lmd-hr"));
+					add(node.from, node.to, hide);
 				}
-				if (isPlain) replace(start, end, typographyWidget("—", false));
+				return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
 			}
+			if (name === "Table") {
+				addLines(node.from, node.to, "lmd-table");
+				return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
+			}
+			if (name === "ListMark" && parent !== null && isList(parent.parent)) {
+				if (activeLine(node.from)) return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
+				if (parent.getChild("Task") !== null) hideWithFollowingSpace(node.from, node.to);
+				else if (parent.parent?.name === "BulletList") replace(node.from, node.to, bulletWidget);
+				return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
+			}
+			if (name === "TaskMarker" && !touched(node.from, node.to)) {
+				const isChecked = /x/iu.test(state.sliceDoc(node.from, node.to));
+				replace(node.from, node.to, checkboxWidget(isChecked));
+				if (isChecked && parent !== null) add(node.to, parent.to, mark("lmd-done"));
+			}
+			return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
 		}
-	}
-	placed.sort((left, right) => __foldkitBrandViewResult((left.from - right.from || left.decoration.startSide - right.decoration.startSide), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#anonymous~5"));
+	});
+	placed.sort((left, right) => __foldkitBrandViewResult((left.from - right.from || left.decoration.startSide - right.decoration.startSide), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#anonymous~3"));
+	const staysOnItsLine = (from, to) => __foldkitBrandViewResult((to <= state.doc.lineAt(from).to), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#staysOnItsLine");
 	const builder = new RangeSetBuilder();
 	let lastReplaceEnd = -1;
 	for (const { from, to, decoration, isReplace } of placed) {
 		const isRangeReplace = from !== to && isReplace;
-		if (!isRangeReplace || from >= lastReplaceEnd) {
+		if (!isRangeReplace || from >= lastReplaceEnd && staysOnItsLine(from, to)) {
 			builder.add(from, to, decoration);
 			if (isRangeReplace) lastReplaceEnd = to;
 		}
 	}
-	return __foldkitBrandViewResult((builder.finish()), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#build");
+	return __foldkitBrandViewResult((builder.finish()), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#liveDecorations");
 };
 const DELIMITER_ROW = /^\s*\|?[\s:|-]+\|?\s*$/u;
-const tableCells = (row) => __foldkitBrandViewResult((row.trim().replaceAll(/^\||\|$/gu, "").split(/(?<!\\)\|/u).map((cell) => __foldkitBrandViewResult((cell.trim().replaceAll(String.raw`\|`, "|")), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#anonymous~6"))), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#tableCells");
+const tableCells = (row) => __foldkitBrandViewResult((row.trim().replaceAll(/^\||\|$/gu, "").split(/(?<!\\)\|/u).map((cell) => __foldkitBrandViewResult((cell.trim().replaceAll(String.raw`\|`, "|")), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#anonymous~4"))), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#tableCells");
 const tableOf = (source) => {
 	const table = document.createElement("table");
 	const head = table.createTHead();
 	const body = table.createTBody();
-	const rows = source.split("\n").filter((row) => __foldkitBrandViewResult((row.trim() !== ""), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#anonymous~7"));
+	const rows = source.split("\n").filter((row) => __foldkitBrandViewResult((row.trim() !== ""), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#anonymous~5"));
 	table.className = "lmd-table-view";
 	for (const [index, row] of rows.entries()) if (index !== 1 || !DELIMITER_ROW.test(row)) {
 		const tableRow = document.createElement("tr");
@@ -347,13 +276,13 @@ const tableWidget = (text) => __foldkitBrandViewResult((new DrawnWidget({
 			view.dispatch({ selection: { anchor: Math.min(target.from + 2, target.to) } });
 			view.focus();
 		});
-		return __foldkitBrandViewResult((dom), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#draw~5");
+		return __foldkitBrandViewResult((dom), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#draw~4");
 	},
 	estimatedHeight: TABLE_ROW_HEIGHT * text.split("\n").length,
 	takesOwnEvents: true
 })), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#tableWidget");
 const lastValueOf = (transaction, type, held) => {
-	const last = transaction.effects.findLast((effect) => __foldkitBrandViewResult((effect.is(type)), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#anonymous~9"));
+	const last = transaction.effects.findLast((effect) => __foldkitBrandViewResult((effect.is(type)), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#anonymous~7"));
 	return __foldkitBrandViewResult((last === void 0 ? held : last.value), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#lastValueOf");
 };
 const setFocus = StateEffect.define();
@@ -384,7 +313,7 @@ const buildTables = (state, isFocused) => {
 		if (node.name !== "Table") return __foldkitBrandViewResult((node.name === "Document" || node.name.endsWith("List") || node.name === "ListItem" || node.name === "Blockquote"), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter~2");
 		const { from } = state.doc.lineAt(node.from);
 		const { to } = state.doc.lineAt(node.to);
-		const isInside = state.selection.ranges.some((range) => __foldkitBrandViewResult((range.from <= to && range.to >= from), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#anonymous~11"));
+		const isInside = state.selection.ranges.some((range) => __foldkitBrandViewResult((range.from <= to && range.to >= from), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#anonymous~9"));
 		if (from === node.from && !(isFocused && isInside)) builder.add(from, to, Decoration.replace({
 			widget: tableWidget(state.sliceDoc(from, to)),
 			block: true
@@ -411,15 +340,16 @@ const tablesField = StateField.define({
 			decorations: buildTables(transaction.state, isFocused)
 		}), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#update~2");
 	},
-	provide: (field) => __foldkitBrandViewResult((EditorView.decorations.from(field, (value) => __foldkitBrandViewResult((value.decorations), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#anonymous~12"))), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#provide")
+	provide: (field) => __foldkitBrandViewResult((EditorView.decorations.from(field, (value) => __foldkitBrandViewResult((value.decorations), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#anonymous~10"))), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#provide")
 });
 const linkHref = (state, node) => {
 	const url = node.name === "Link" ? node.getChild("URL") : node;
 	if (url === null) return;
-	const href = state.sliceDoc(url.from, url.to);
-	return __foldkitBrandViewResult((/^www\./iu.test(href) ? `https://${href}` : href), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#linkHref");
+	const href = state.sliceDoc(url.from, url.to).replace(ANGLE_BRACKETED, "$<destination>");
+	if (/^www\./iu.test(href)) return __foldkitBrandViewResult((`https://${href}`), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#linkHref");
+	return __foldkitBrandViewResult((node.name === "URL" && EMAIL.test(href) ? `mailto:${href}` : href), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#linkHref");
 };
-const isLinkNode = (state, node) => __foldkitBrandViewResult((!isPlainBrackets(state, node) && (node.name === "Link" || node.name === "URL" && !isLinkLike(node.parent))), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#isLinkNode");
+const isLinkNode = (node) => __foldkitBrandViewResult((node.name === "Link" && !isPlainBrackets(node) || isBareUrl(node)), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#isLinkNode");
 const toggleCheckbox = (view, box) => {
 	const position = view.posAtDOM(box);
 	const text = view.state.sliceDoc(position, position + 3);
@@ -432,7 +362,7 @@ const toggleCheckbox = (view, box) => {
 	return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#toggleCheckbox");
 };
 const linkAt = (state, position, side) => {
-	for (let node = syntaxTree(state).resolveInner(position, side); node !== null; node = node.parent) if (isLinkNode(state, node)) return __foldkitBrandViewResult((linkHref(state, node)), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#linkAt");
+	for (let node = syntaxTree(state).resolveInner(position, side); node !== null; node = node.parent) if (isLinkNode(node)) return __foldkitBrandViewResult((linkHref(state, node)), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#linkAt");
 };
 const openLink = (url) => {
 	const href = safeHref(url, document.baseURI);
@@ -453,14 +383,14 @@ const liveMarkdown = () => {
 		decorations;
 		isStale = false;
 		constructor(view) {
-			this.decorations = build(view);
+			this.decorations = liveDecorations(view.state, view.visibleRanges, view.hasFocus);
 		}
 		update(update) {
 			if (update.view.composing || update.state.field(pointerDownField) && !update.docChanged) {
 				this.decorations = this.decorations.map(update.changes);
 				this.isStale = true;
 			} else if (this.isStale || update.docChanged || update.selectionSet || update.focusChanged || update.viewportChanged || syntaxTree(update.startState) !== syntaxTree(update.state)) {
-				this.decorations = build(update.view);
+				this.decorations = liveDecorations(update.state, update.view.visibleRanges, update.view.hasFocus);
 				this.isStale = false;
 			}
 		}
@@ -472,7 +402,8 @@ const liveMarkdown = () => {
 			}, 0);
 		} },
 		eventHandlers: { mousedown: (event, view) => {
-			if (event.target instanceof HTMLInputElement && event.target.classList.contains("lmd-check") && toggleCheckbox(view, event.target)) {
+			const box = event.target instanceof HTMLInputElement && event.target.classList.contains("lmd-check") ? event.target : void 0;
+			if (box !== void 0 && (event.button !== 0 || toggleCheckbox(view, box))) {
 				event.preventDefault();
 				return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#mousedown");
 			}
@@ -500,8 +431,8 @@ const liveMarkdown = () => {
 			key: "Mod-Enter",
 			run: openLinkAtCaret
 		}])),
-		EditorView.focusChangeEffect.of((_, isFocusing) => __foldkitBrandViewResult((setFocus.of(isFocusing)), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#anonymous~14")),
+		EditorView.focusChangeEffect.of((_, isFocusing) => __foldkitBrandViewResult((setFocus.of(isFocusing)), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#anonymous~12")),
 		liveMarkdownTheme
 	]), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#liveMarkdown");
 };
-export { liveMarkdown };
+export { liveDecorations, liveMarkdown };

package/dist/markdown-editor/live/theme.js

@@ -77,21 +77,6 @@ const liveMarkdownTheme = EditorView.baseTheme({
 		paddingLeft: "var(--space-m) !important",
 		color: "var(--muted)"
 	},
-	".lmd-labeled-rule": {
-		display: "inline-flex",
-		width: "100%",
-		alignItems: "center",
-		gap: "var(--space-s)",
-		color: "var(--muted)",
-		verticalAlign: "middle"
-	},
-	".lmd-labeled-rule::before, .lmd-labeled-rule::after": {
-		content: "\"\"",
-		flex: "1",
-		minWidth: "var(--space-s)",
-		height: "var(--hair)",
-		background: "var(--rule)"
-	},
 	".lmd-hr": {
 		height: "0.8em",
 		background: "linear-gradient(var(--rule), var(--rule)) center / 100% var(--hair) no-repeat"
@@ -99,10 +84,10 @@ const liveMarkdownTheme = EditorView.baseTheme({
 	".lmd-bullet": {
 		color: "var(--muted)",
 		display: "inline-block",
-		minWidth: "0.7em",
-		fontVariantNumeric: "tabular-nums"
+		minWidth: "0.7em"
 	},
 	".lmd-check": {
+		width: "auto",
 		margin: "0 var(--space-s) 0 0",
 		verticalAlign: "-2px",
 		cursor: "pointer",

package/dist/markdown-editor/markdown-editor.d.ts

@@ -2,10 +2,10 @@ import { ViewConfig as ViewConfig$1 } from "../textarea-field/textarea-field.js"
 import { Schema } from "effect";
 import { Html, HtmlBuilder } from "foldkit/html";
 /** Configuration for rendering a Markdown editor with `view`. */
-export type ViewConfig<Message> = Pick<ViewConfig$1<Message>, "id" | "label" | "value" | "onInput" | "help" | "error" | "isRequired" | "rows">;
+export type ViewConfig<Message> = Pick<ViewConfig$1<Message>, "id" | "label" | "value" | "onInput" | "help" | "error" | "rows">;
 /** A labelled Markdown field, edited in place: its marks show only around the caret, and the
- *  text it hands back is the Markdown string, untouched where nobody typed. Without
- *  `defineMarkdownEditorElement` it is a plain `TextareaField`, which is also what tests see.
- *  With it, the element takes the textarea's place and drives `onInput` itself, because a
- *  textarea cannot carry a CRLF document. */
+ *  text it hands back is the Markdown string as typed, except that the first edit turns CRLF
+ *  line endings into LF. Without `defineMarkdownEditorElement` it is a plain `TextareaField`,
+ *  which is also what tests see, and so is a field whose editor fails to mount. With it, the
+ *  element takes the textarea's place and drives `onInput` itself. */
 export declare const view: <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>) => Html;

package/dist/markdown-editor/markdown-editor.js

@@ -11,10 +11,10 @@ const spec = define({
 	events: { "value-change": Schema.Struct({ value: Schema.String }) }
 });
 /** A labelled Markdown field, edited in place: its marks show only around the caret, and the
-*  text it hands back is the Markdown string, untouched where nobody typed. Without
-*  `defineMarkdownEditorElement` it is a plain `TextareaField`, which is also what tests see.
-*  With it, the element takes the textarea's place and drives `onInput` itself, because a
-*  textarea cannot carry a CRLF document. */
+*  text it hands back is the Markdown string as typed, except that the first edit turns CRLF
+*  line endings into LF. Without `defineMarkdownEditorElement` it is a plain `TextareaField`,
+*  which is also what tests see, and so is a field whose editor fails to mount. With it, the
+*  element takes the textarea's place and drives `onInput` itself. */
 const view = (config, h) => {
 	const host = spec.withMessage(h);
 	return __foldkitBrandViewResult((host([host.Source(config.value), host.OnValueChange(({ value }) => __foldkitBrandViewResult((config.onInput(value)), "@gjermundgaraba/pixel-paper/markdown-editor/markdown-editor.js#anonymous"))], [view$1(config, h)])), "@gjermundgaraba/pixel-paper/markdown-editor/markdown-editor.js#view");

package/dist/menu/menu.d.ts

@@ -69,16 +69,16 @@ export declare const update: (model: Model, message: Message) => Readonly<{
   };
   commands?: Update.Commands<{
     readonly _tag: "CompletedFocus";
-  } | {
-    readonly _tag: "CompletedFocusEdge";
   } | {
     readonly _tag: "ClickedToggle";
+  } | {
+    readonly _tag: "PressedEscape";
+  } | {
+    readonly _tag: "CompletedFocusEdge";
   } | {
     readonly _tag: "CompletedPlaceSlip";
   } | {
     readonly _tag: "LeftSlip";
-  } | {
-    readonly _tag: "PressedEscape";
   } | {
     readonly _tag: "PressedTab";
   } | {
@@ -114,11 +114,11 @@ export declare const BindSlip: Mount.MountDefinitionWithArgs<"BindSlip", {
   isEnd: Schema.Boolean;
   edge: Schema.Literals<readonly ["First", "Last"]>;
 }, {
+  readonly _tag: "PressedEscape";
+} | {
   readonly _tag: "CompletedPlaceSlip";
 } | {
   readonly _tag: "LeftSlip";
-} | {
-  readonly _tag: "PressedEscape";
 } | {
   readonly _tag: "PressedTab";
 }>;
@@ -164,16 +164,16 @@ export declare const view: import("foldkit/submodel").View<{
   readonly edge: "First" | "Last";
 }, {
   readonly _tag: "CompletedFocus";
-} | {
-  readonly _tag: "CompletedFocusEdge";
 } | {
   readonly _tag: "ClickedToggle";
+} | {
+  readonly _tag: "PressedEscape";
+} | {
+  readonly _tag: "CompletedFocusEdge";
 } | {
   readonly _tag: "CompletedPlaceSlip";
 } | {
   readonly _tag: "LeftSlip";
-} | {
-  readonly _tag: "PressedEscape";
 } | {
   readonly _tag: "PressedTab";
 } | {

package/dist/rail/rail.d.ts

@@ -119,10 +119,6 @@ export declare const update: (model: Model, message: Message) => Readonly<{
     }>;
   };
   commands?: Update.Commands<{
-    readonly _tag: "ClickedToggle";
-  } | {
-    readonly _tag: "PressedEscape";
-  } | {
     readonly _tag: "CompletedShowRailDrawer";
   } | {
     readonly _tag: "CompletedHideRailDrawer";
@@ -136,11 +132,15 @@ export declare const update: (model: Model, message: Message) => Readonly<{
     readonly _tag: "ClickedClose";
   } | {
     readonly _tag: "ClickedOpen";
+  } | {
+    readonly _tag: "ClickedToggle";
   } | {
     readonly _tag: "ClosedDrawer";
   } | {
     readonly _tag: "MovedSplitter";
     readonly clientX: number;
+  } | {
+    readonly _tag: "PressedEscape";
   } | {
     readonly _tag: "PressedSplitter";
     readonly pointerId: number;
@@ -187,10 +187,6 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
       readonly width: number;
     }>;
   }, {
-    readonly _tag: "ClickedToggle";
-  } | {
-    readonly _tag: "PressedEscape";
-  } | {
     readonly _tag: "CompletedShowRailDrawer";
   } | {
     readonly _tag: "CompletedHideRailDrawer";
@@ -204,11 +200,15 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
     readonly _tag: "ClickedClose";
   } | {
     readonly _tag: "ClickedOpen";
+  } | {
+    readonly _tag: "ClickedToggle";
   } | {
     readonly _tag: "ClosedDrawer";
   } | {
     readonly _tag: "MovedSplitter";
     readonly clientX: number;
+  } | {
+    readonly _tag: "PressedEscape";
   } | {
     readonly _tag: "PressedSplitter";
     readonly pointerId: number;
@@ -237,10 +237,6 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
       readonly width: number;
     }>;
   }, {
-    readonly _tag: "ClickedToggle";
-  } | {
-    readonly _tag: "PressedEscape";
-  } | {
     readonly _tag: "CompletedShowRailDrawer";
   } | {
     readonly _tag: "CompletedHideRailDrawer";
@@ -254,11 +250,15 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
     readonly _tag: "ClickedClose";
   } | {
     readonly _tag: "ClickedOpen";
+  } | {
+    readonly _tag: "ClickedToggle";
   } | {
     readonly _tag: "ClosedDrawer";
   } | {
     readonly _tag: "MovedSplitter";
     readonly clientX: number;
+  } | {
+    readonly _tag: "PressedEscape";
   } | {
     readonly _tag: "PressedSplitter";
     readonly pointerId: number;
@@ -341,10 +341,6 @@ export declare const view: import("foldkit/submodel").View<{
     readonly width: number;
   }>;
 }, {
-  readonly _tag: "ClickedToggle";
-} | {
-  readonly _tag: "PressedEscape";
-} | {
   readonly _tag: "CompletedShowRailDrawer";
 } | {
   readonly _tag: "CompletedHideRailDrawer";
@@ -358,11 +354,15 @@ export declare const view: import("foldkit/submodel").View<{
   readonly _tag: "ClickedClose";
 } | {
   readonly _tag: "ClickedOpen";
+} | {
+  readonly _tag: "ClickedToggle";
 } | {
   readonly _tag: "ClosedDrawer";
 } | {
   readonly _tag: "MovedSplitter";
   readonly clientX: number;
+} | {
+  readonly _tag: "PressedEscape";
 } | {
   readonly _tag: "PressedSplitter";
   readonly pointerId: number;

package/dist/toast/toast.d.ts

@@ -315,15 +315,15 @@ export declare const update: (model: Model, message: Message) => Readonly<{
       readonly _tag: "GotAnimationMessage";
       readonly entryId: string;
       readonly message: {
+        readonly _tag: "Hid";
+      } | {
+        readonly _tag: "Showed";
+      } | {
         readonly _tag: "CompletedWaitForPaint";
         readonly generation: number;
       } | {
         readonly _tag: "EndedAnimation";
         readonly generation: number;
-      } | {
-        readonly _tag: "Hid";
-      } | {
-        readonly _tag: "Showed";
       };
     } | {
       readonly _tag: "HoveredEntry";
@@ -509,15 +509,15 @@ export declare const view: import("foldkit/submodel").View<{
     readonly _tag: "GotAnimationMessage";
     readonly entryId: string;
     readonly message: {
+      readonly _tag: "Hid";
+    } | {
+      readonly _tag: "Showed";
+    } | {
       readonly _tag: "CompletedWaitForPaint";
       readonly generation: number;
     } | {
       readonly _tag: "EndedAnimation";
       readonly generation: number;
-    } | {
-      readonly _tag: "Hid";
-    } | {
-      readonly _tag: "Showed";
     };
   } | {
     readonly _tag: "HoveredEntry";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gjermundgaraba/pixel-paper",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Printed-paper Foldkit components, tokens and stylesheet.",
   "license": "MIT",
   "repository": {

package/src/pixel-paper.css

@@ -1678,7 +1678,7 @@ pp-markdown-editor {
   position: relative;
 }
 
-pp-markdown-editor:defined textarea {
+pp-markdown-editor:has(.markdown-surface) textarea {
   position: absolute;
   width: 1px;
   height: 1px;