@segnavia/markdown-editor 0.0.0-stage → 0.42.0

package/dist/markdown-rich-locked.js

@@ -0,0 +1,97 @@
+import { isDiagramFence, isGithubAlertBlock } from "@segnavia/html";
+import { Node } from "@tiptap/core";
+//#region src/markdown-rich-locked.ts
+const LOCKED_BLOCK_NAME = "lockedBlock";
+function lockedFenceLabel(lockedFences, language) {
+	return lockedFences[language?.toLowerCase() ?? ""];
+}
+function matchFrontmatter(src) {
+	return /^---[ \t]*\n[\s\S]*?\n---[ \t]*(?:\n|$)/.exec(src)?.[0];
+}
+function matchDirectiveContainer(src) {
+	const firstNl = src.indexOf("\n");
+	if (firstNl < 0) return void 0;
+	const open = /^(:{3,})[^\n]*$/.exec(src.slice(0, firstNl));
+	if (!open) return void 0;
+	const fenceLen = open[1]?.length ?? 0;
+	let pos = firstNl + 1;
+	while (pos <= src.length) {
+		const nextNl = src.indexOf("\n", pos);
+		const lineEnd = nextNl < 0 ? src.length : nextNl;
+		if ((/^(:{3,})[ \t]*$/.exec(src.slice(pos, lineEnd))?.[1]?.length ?? 0) >= fenceLen) return src.slice(0, nextNl < 0 ? src.length : nextNl + 1);
+		if (nextNl < 0) return void 0;
+		pos = nextNl + 1;
+	}
+}
+function isHtmlComment(raw) {
+	return /^<!--[\s\S]*-->$/.test(raw.replace(/\n+$/, ""));
+}
+function isLockedToken(token, lockedFences = {}) {
+	if (token.type === "frontmatter" || token.type === "directive") return true;
+	if (token.type === "code" && (isDiagramFence(token.lang) || Boolean(lockedFenceLabel(lockedFences, token.lang)))) return true;
+	if (token.type === "blockquote" && isGithubAlertBlock(token.raw)) return true;
+	return token.type === "html" && !isHtmlComment(token.raw);
+}
+function isSilentToken(token) {
+	return token.type === "def" || token.type === "html" && isHtmlComment(token.raw);
+}
+function lockedNode(source, label) {
+	return {
+		type: LOCKED_BLOCK_NAME,
+		attrs: {
+			source,
+			label: label ?? null,
+			dir: "auto"
+		}
+	};
+}
+const LockedBlock = Node.create({
+	name: LOCKED_BLOCK_NAME,
+	group: "block",
+	atom: true,
+	selectable: true,
+	draggable: false,
+	addAttributes() {
+		return {
+			source: { default: "" },
+			label: { default: null },
+			dir: { default: "auto" }
+		};
+	},
+	parseHTML() {
+		return [{ tag: "div[data-locked-block]" }];
+	},
+	renderHTML({ HTMLAttributes }) {
+		return ["div", {
+			...HTMLAttributes,
+			"data-locked-block": "",
+			dir: "auto"
+		}];
+	},
+	renderMarkdown(node) {
+		return typeof node.attrs?.source === "string" ? node.attrs.source : "";
+	},
+	markdownTokenizer: {
+		name: "lockedFence",
+		level: "block",
+		start(src) {
+			return src.startsWith("---") || src.startsWith(":::") ? 0 : -1;
+		},
+		tokenize(src, tokens) {
+			if (tokens.length === 0) {
+				const frontmatter = matchFrontmatter(src);
+				if (frontmatter) return {
+					type: "frontmatter",
+					raw: frontmatter
+				};
+			}
+			const directive = matchDirectiveContainer(src);
+			return directive ? {
+				type: "directive",
+				raw: directive
+			} : void 0;
+		}
+	}
+});
+//#endregion
+export { LOCKED_BLOCK_NAME, LockedBlock, isLockedToken, isSilentToken, lockedFenceLabel, lockedNode };

package/dist/markdown-rich-save.js

@@ -0,0 +1,182 @@
+import { isLockedToken, isSilentToken, lockedFenceLabel, lockedNode } from "./markdown-rich-locked.js";
+import { richMarkdownManager, richSchema } from "./markdown-rich-extensions.js";
+import { Node } from "@tiptap/pm/model";
+//#region src/markdown-rich-save.ts
+let cachedOriginal;
+const objectKeys = /* @__PURE__ */ new WeakMap();
+function isRecord(value) {
+	return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function keptAttrs(attrs) {
+	const kept = Object.fromEntries(Object.entries(attrs).filter(([, value]) => value !== null && value !== void 0 && (!Array.isArray(value) || value.length > 0)));
+	return Object.keys(kept).length ? kept : void 0;
+}
+function canonical(node) {
+	const next = { type: node.type };
+	if (typeof node.text === "string") next.text = node.text;
+	const attrs = node.attrs && isRecord(node.attrs) ? keptAttrs(node.attrs) : void 0;
+	if (attrs) next.attrs = attrs;
+	if (node.marks?.length) next.marks = node.marks.map((mark) => canonical(mark));
+	if (node.content?.length) next.content = node.content.map(canonical);
+	return next;
+}
+function asJson(node) {
+	return node instanceof Node ? node.toJSON() : node;
+}
+function nodeKey(node) {
+	const cached = objectKeys.get(node);
+	if (cached !== void 0) return cached;
+	const key = JSON.stringify(canonical(asJson(node)));
+	objectKeys.set(node, key);
+	return key;
+}
+const isEmptyParagraph = (node) => {
+	const json = asJson(node);
+	return json.type === "paragraph" && !json.content?.length && !json.text;
+};
+const dropTrailingEmptyParagraph = (nodes) => {
+	const last = nodes.at(-1);
+	return last && isEmptyParagraph(last) ? nodes.slice(0, -1) : nodes;
+};
+const restoreAmpersands = (markdown) => markdown.replace(/&(?![a-zA-Z][a-zA-Z0-9]*;)/g, "&");
+function parseBlock(token, raw, lockedFences) {
+	if (isSilentToken(token)) return [];
+	if (isLockedToken(token, lockedFences)) return [lockedNode(raw, lockedFenceLabel(lockedFences, token.lang))];
+	const parsed = richMarkdownManager().parse(raw);
+	return Node.fromJSON(richSchema(), parsed).toJSON().content ?? [];
+}
+function blocks(markdown, lockedFences = {}) {
+	const out = [];
+	const tokens = richMarkdownManager().instance.lexer(markdown);
+	let at = 0;
+	let prevEnd = 0;
+	for (const token of tokens) {
+		const start = at;
+		at += token.raw.length;
+		if (token.type === "space") continue;
+		const raw = token.raw.replace(/\n+$/, "");
+		const nodes = parseBlock(token, raw, lockedFences);
+		out.push({
+			raw,
+			sep: markdown.slice(prevEnd, start),
+			nodes,
+			keys: nodes.map(nodeKey)
+		});
+		prevEnd = start + raw.length;
+	}
+	return out;
+}
+function fencesKey(lockedFences) {
+	return JSON.stringify(Object.entries(lockedFences ?? {}).sort(([left], [right]) => left.localeCompare(right)));
+}
+function originalEntry(original, options) {
+	const nextFencesKey = fencesKey(options.lockedFences);
+	if (cachedOriginal?.original === original && cachedOriginal.fencesKey === nextFencesKey && cachedOriginal.bodyTransform === options.bodyTransform) return cachedOriginal;
+	const split = options.bodyTransform?.split(original);
+	const editableBlocks = blocks(split?.editable ?? original, options.lockedFences);
+	const nodes = editableBlocks.flatMap((block) => block.nodes);
+	const keys = editableBlocks.flatMap((block) => block.keys);
+	const indicesByFirstKey = /* @__PURE__ */ new Map();
+	for (const [index, block] of editableBlocks.entries()) {
+		const first = block.keys[0];
+		if (first === void 0) continue;
+		const indices = indicesByFirstKey.get(first) ?? [];
+		indices.push(index);
+		indicesByFirstKey.set(first, indices);
+	}
+	cachedOriginal = {
+		original,
+		fencesKey: nextFencesKey,
+		bodyTransform: options.bodyTransform,
+		split,
+		blocks: editableBlocks,
+		nodes,
+		keys,
+		indicesByFirstKey
+	};
+	return cachedOriginal;
+}
+function firstAtOrAfter(indices, minimum) {
+	let low = 0;
+	let high = indices.length;
+	while (low < high) {
+		const middle = low + high >>> 1;
+		if ((indices[middle] ?? Number.POSITIVE_INFINITY) < minimum) low = middle + 1;
+		else high = middle;
+	}
+	return indices[low] ?? -1;
+}
+function serializeNodes(nodes) {
+	return restoreAmpersands(richMarkdownManager().serialize({
+		type: "doc",
+		content: nodes.map(asJson)
+	}).trim());
+}
+function matchingBlockIndex(entry, keys, keyIndex, blockIndex) {
+	const currentKey = keys[keyIndex];
+	if (currentKey === void 0) return -1;
+	const candidates = entry.indicesByFirstKey.get(currentKey) ?? [];
+	let hit = firstAtOrAfter(candidates, blockIndex);
+	let block = entry.blocks[hit];
+	while (hit >= 0 && !block?.keys.every((key, offset) => keys[keyIndex + offset] === key)) {
+		hit = firstAtOrAfter(candidates, hit + 1);
+		block = entry.blocks[hit];
+	}
+	return hit;
+}
+function stitch(entry, edited, keys) {
+	const bs = entry.blocks;
+	let out = "";
+	let last = -1;
+	let blockIndex = 0;
+	let keyIndex = 0;
+	const pending = [];
+	const emitNew = () => {
+		if (!pending.length) return;
+		out += (out ? "\n\n" : bs[blockIndex]?.sep ?? "") + serializeNodes(pending.splice(0));
+		last = -1;
+	};
+	const emitOld = (hit) => {
+		const block = bs[hit];
+		if (!block) throw new Error(`Cannot stitch missing rich Markdown block ${hit}.`);
+		out += out ? last === hit - 1 ? block.sep : "\n\n" : block.sep;
+		out += block.raw;
+		last = hit;
+	};
+	const emitReplacement = (end) => {
+		let firstEditable = blockIndex;
+		while (firstEditable < end && bs[firstEditable]?.nodes.length === 0) {
+			emitOld(firstEditable);
+			firstEditable++;
+		}
+		emitNew();
+		for (let index = firstEditable; index < end; index++) if (bs[index]?.nodes.length === 0) emitOld(index);
+	};
+	while (keyIndex < keys.length) {
+		const hit = matchingBlockIndex(entry, keys, keyIndex, blockIndex);
+		if (hit < 0) {
+			const node = edited[keyIndex++];
+			if (node) pending.push(node);
+			continue;
+		}
+		emitReplacement(hit);
+		emitOld(hit);
+		keyIndex += bs[hit]?.nodes.length ?? 0;
+		blockIndex = hit + 1;
+	}
+	emitReplacement(bs.length);
+	return `${out.replace(/\n+$/, "")}\n`;
+}
+function parseRichDocument(markdown, options = {}) {
+	return dropTrailingEmptyParagraph(originalEntry(markdown, options).nodes);
+}
+function saveRichDocument(original, edited, options = {}) {
+	const prepared = dropTrailingEmptyParagraph(edited);
+	const entry = originalEntry(original, options);
+	const keys = prepared.map(nodeKey);
+	if (entry.keys.length === keys.length && entry.keys.every((key, index) => key === keys[index])) return original;
+	const saved = stitch(entry, prepared, keys);
+	return entry.split && options.bodyTransform ? options.bodyTransform.join(saved, entry.split.retained) : saved;
+}
+//#endregion
+export { parseRichDocument, saveRichDocument };

package/dist/markdown-source.js

@@ -0,0 +1,119 @@
+import { MARKDOWN_EDITOR_KEYS } from "./markdown-editor-policy.js";
+import { defaultKeymap, history, historyKeymap, redoDepth, undoDepth } from "@codemirror/commands";
+import { Decoration, EditorView, keymap } from "@codemirror/view";
+import { markdown } from "@codemirror/lang-markdown";
+import { HighlightStyle, LanguageDescription, syntaxHighlighting } from "@codemirror/language";
+import { languages } from "@codemirror/language-data";
+import { EditorState, Prec } from "@codemirror/state";
+import { Tag, styleTags, tags } from "@lezer/highlight";
+import { GFM } from "@lezer/markdown";
+//#region src/markdown-source.ts
+const mermaidLanguage = LanguageDescription.of({
+	name: "Mermaid",
+	alias: ["mermaid"],
+	load: () => import("codemirror-lang-mermaid").then((module) => module.mermaid())
+});
+function codeLanguage(info) {
+	if (info.toLowerCase() === "mermaid") return mermaidLanguage;
+	return LanguageDescription.matchLanguageName(languages, info, true);
+}
+const inlineCode = Tag.define(tags.monospace);
+const autoDirectionLine = Decoration.line({ attributes: { dir: "auto" } });
+const lineDirections = EditorView.decorations.of((view) => {
+	const ranges = [];
+	let previous = -1;
+	for (const visible of view.visibleRanges) for (let position = visible.from; position <= visible.to;) {
+		const line = view.state.doc.lineAt(position);
+		if (line.from !== previous) ranges.push(autoDirectionLine.range(line.from));
+		previous = line.from;
+		position = line.to + 1;
+	}
+	return Decoration.set(ranges);
+});
+const highlight = HighlightStyle.define([
+	{
+		tag: tags.comment,
+		color: "var(--segnavia-markdown-comment,inherit)"
+	},
+	{
+		tag: [
+			tags.keyword,
+			tags.processingInstruction,
+			tags.meta
+		],
+		color: "var(--segnavia-markdown-keyword,inherit)"
+	},
+	{
+		tag: [tags.string, tags.regexp],
+		color: "var(--segnavia-markdown-string,inherit)"
+	},
+	{
+		tag: [
+			tags.number,
+			tags.bool,
+			tags.atom
+		],
+		color: "var(--segnavia-markdown-literal,inherit)"
+	},
+	{
+		tag: [tags.heading, tags.strong],
+		color: "var(--segnavia-markdown-heading,inherit)"
+	},
+	{
+		tag: [tags.link, tags.url],
+		color: "var(--segnavia-markdown-link,inherit)"
+	},
+	{
+		tag: [inlineCode, tags.monospace],
+		color: "var(--segnavia-markdown-code,inherit)"
+	},
+	{
+		tag: [
+			tags.punctuation,
+			tags.bracket,
+			tags.labelName,
+			tags.contentSeparator
+		],
+		color: "var(--segnavia-markdown-mark,inherit)"
+	},
+	{
+		tag: tags.invalid,
+		color: "var(--segnavia-markdown-invalid,inherit)"
+	}
+]);
+function markdownSourceState(doc, callbacks) {
+	const actions = {
+		save: callbacks.save,
+		"toggle-mode": callbacks.toggleMode
+	};
+	return EditorState.create({
+		doc,
+		extensions: [
+			history(),
+			Prec.highest(keymap.of(MARKDOWN_EDITOR_KEYS.map((binding) => ({
+				key: binding.key,
+				preventDefault: true,
+				run: () => {
+					actions[binding.action]();
+					return true;
+				}
+			})))),
+			keymap.of([...defaultKeymap, ...historyKeymap]),
+			EditorView.lineWrapping,
+			lineDirections,
+			EditorView.perLineTextDirection.of(true),
+			markdown({
+				extensions: [GFM, { props: [styleTags({ InlineCode: inlineCode })] }],
+				codeLanguages: codeLanguage
+			}),
+			syntaxHighlighting(highlight),
+			EditorView.updateListener.of((update) => {
+				if (update.docChanged) callbacks.change(update.state.doc.toString());
+				if (update.transactions.length) callbacks.state(undoDepth(update.state) > 0, redoDepth(update.state) > 0);
+			}),
+			EditorView.contentAttributes.of({ "aria-label": "Markdown body" })
+		]
+	});
+}
+//#endregion
+export { markdownSourceState };

package/dist/markdown-title.d.ts

@@ -0,0 +1,13 @@
+//#region src/markdown-title.d.ts
+export type LeadingHeadingSplit = Readonly<{
+  title: string | null;
+  editable: string;
+  retained: string;
+}>;
+/** Splits the first nonblank level-one ATX heading from the editable body. */
+export declare function splitLeadingHeading(markdown: string): LeadingHeadingSplit;
+/** Joins an editable body to the exact leading-heading source retained by the split. */
+export declare function joinLeadingHeading(editable: string, retained: string): string;
+/** A title field is always one line, including pasted text. */
+export declare function normalizeMarkdownTitle(value: string): string;
+//#endregion

package/dist/markdown-title.js

@@ -0,0 +1,43 @@
+//#region src/markdown-title.ts
+const LEADING_HEADING = /^#(?!#)[ \t]+(.*?)(?:[ \t]+#+)?[ \t]*$/;
+/** Splits the first nonblank level-one ATX heading from the editable body. */
+function splitLeadingHeading(markdown) {
+	const lines = markdown.split("\n");
+	let index = 0;
+	while (index < lines.length && lines[index]?.trim() === "") index++;
+	const line = lines[index];
+	const title = (line === void 0 ? null : LEADING_HEADING.exec(line))?.[1] || null;
+	if (!title) return {
+		title: null,
+		editable: markdown,
+		retained: ""
+	};
+	const heading = lines.slice(0, index + 1).join("\n");
+	const retained = markdown[heading.length] === "\n" ? `${heading}\n` : heading;
+	return {
+		title,
+		editable: markdown.slice(retained.length),
+		retained
+	};
+}
+/** Joins an editable body to the exact leading-heading source retained by the split. */
+function joinLeadingHeading(editable, retained) {
+	return `${retained}${retained && editable && !retained.endsWith("\n") ? "\n" : ""}${editable}`;
+}
+/** Replaces the retained heading while preserving blank lines before it and its line break. */
+function retainedLeadingHeading(title, previous) {
+	if (title === null || title === "") return "";
+	if (!previous.retained) {
+		if (!previous.editable) return `# ${title}`;
+		return `# ${title}${previous.editable.startsWith("\n") ? "\n" : "\n\n"}`;
+	}
+	const retainedWithoutBreak = previous.retained.endsWith("\n") ? previous.retained.slice(0, -1) : previous.retained;
+	const headingStart = retainedWithoutBreak.lastIndexOf("\n") + 1;
+	return `${retainedWithoutBreak.slice(0, headingStart)}# ${title}${previous.retained.endsWith("\n") ? "\n" : ""}`;
+}
+/** A title field is always one line, including pasted text. */
+function normalizeMarkdownTitle(value) {
+	return value.replace(/[\r\n]+/g, " ");
+}
+//#endregion
+export { joinLeadingHeading, normalizeMarkdownTitle, retainedLeadingHeading, splitLeadingHeading };

package/package.json

@@ -1,6 +1,74 @@
 {
   "name": "@segnavia/markdown-editor",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.42.0",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/modstudio/segnavia.git",
+    "directory": "packages/markdown-editor"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "./src/markdown-editor.ts",
+    "./dist/markdown-editor.js",
+    "./src/markdown-rich-editor.ts",
+    "./dist/markdown-rich-editor.js"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "@segnavia/source": "./src/markdown-editor.ts",
+      "types": "./dist/markdown-editor.d.ts",
+      "default": "./dist/markdown-editor.js"
+    }
+  },
+  "dependencies": {
+    "@segnavia/format": "0.42.0",
+    "@segnavia/frame": "0.42.0",
+    "@segnavia/html": "0.42.0"
+  },
+  "peerDependencies": {
+    "@codemirror/commands": "^6.11.1",
+    "@codemirror/lang-markdown": "^6.5.2",
+    "@codemirror/language": "^6.13.1",
+    "@codemirror/language-data": "^6.5.2",
+    "@codemirror/state": "^6.7.6",
+    "@codemirror/view": "^6.43.15",
+    "@lezer/highlight": "^1.2.5",
+    "@lezer/markdown": "^1.8.1",
+    "@tiptap/core": "^3.32.0",
+    "@tiptap/extension-image": "^3.32.0",
+    "@tiptap/extension-list": "^3.32.0",
+    "@tiptap/extension-table": "^3.32.0",
+    "@tiptap/markdown": "^3.32.0",
+    "@tiptap/pm": "^3.32.0",
+    "@tiptap/starter-kit": "^3.32.0",
+    "codemirror-lang-mermaid": "^0.5.0"
+  },
+  "devDependencies": {
+    "@codemirror/commands": "6.11.1",
+    "@codemirror/lang-markdown": "6.5.2",
+    "@codemirror/language": "6.13.1",
+    "@codemirror/language-data": "6.5.2",
+    "@codemirror/state": "6.7.6",
+    "@codemirror/view": "6.43.15",
+    "@lezer/highlight": "1.2.5",
+    "@lezer/markdown": "1.8.1",
+    "@tiptap/core": "3.32.0",
+    "@tiptap/extension-image": "3.32.0",
+    "@tiptap/extension-list": "3.32.0",
+    "@tiptap/extension-table": "3.32.0",
+    "@tiptap/markdown": "3.32.0",
+    "@tiptap/pm": "3.32.0",
+    "@tiptap/starter-kit": "3.32.0",
+    "codemirror-lang-mermaid": "0.5.0"
+  }
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-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.