@segnavia/markdown-editor 0.44.0 → 0.46.0

package/dist/markdown-rich-source-forms.js

@@ -0,0 +1,368 @@
+import { meaningfulAttributes } from "./markdown-rich-source-attrs.js";
+import { renderNestedMarkdownContent } from "@tiptap/core";
+//#region src/markdown-rich-source-forms.ts
+const hidden = (defaultValue = null) => ({
+	default: defaultValue,
+	renderHTML: () => ({})
+});
+function withAttrs(value, attrs) {
+	if (!value || Array.isArray(value) || typeof value !== "object") return value;
+	const node = value;
+	return {
+		...node,
+		attrs: {
+			...node.attrs,
+			...attrs
+		}
+	};
+}
+function sourceFormAttrs(names) {
+	return Object.fromEntries(names.map((name) => [name, hidden()]));
+}
+function emphasisMarker(token) {
+	const first = token.raw?.[0];
+	return first === "_" || first === "*" ? first : null;
+}
+function titleQuote(raw) {
+	if (!raw) return null;
+	const match = /\s(["'(])(?=[\s\S]*(?:"|'|\))\)$)/g;
+	let quote = null;
+	for (const hit of raw.matchAll(match)) quote = hit[1] ?? null;
+	return quote;
+}
+function safeTitleQuote(value, quote) {
+	if (typeof value !== "string" || !value) return "";
+	if (quote === "'" && !value.includes("'")) return "'";
+	if (quote === "(" && !value.includes(")")) return "(";
+	return "\"";
+}
+function fenceCloseRegex(fence, flags = "") {
+	const character = fence[0] === "~" ? "~" : "`";
+	return new RegExp(`^ {0,3}${character}{${fence.length},}[ \\t]*$`, flags);
+}
+function fenceAttrs(token) {
+	const lines = (token.raw ?? "").replace(/\n$/, "").split("\n");
+	const opening = /^ {0,3}(`{3,}|~{3,})([^\n]*)/.exec(lines[0] ?? "");
+	if (!opening) return {};
+	const fence = opening[1] ?? "";
+	const suffix = opening[2] ?? "";
+	const language = token.lang ?? "";
+	const at = language ? suffix.indexOf(language) : -1;
+	const infoBefore = at >= 0 ? suffix.slice(0, at) : suffix;
+	const infoAfter = at >= 0 ? suffix.slice(at + language.length) : "";
+	return {
+		sourceFence: fence,
+		sourceClosingFence: fenceCloseRegex(fence).test(lines.at(-1) ?? "") ? lines.at(-1)?.trim() ?? fence : fence,
+		sourceInfoBefore: infoBefore,
+		sourceInfoAfter: infoAfter
+	};
+}
+function fenceIsSafe(content, fence) {
+	const character = fence[0];
+	if (character !== "`" && character !== "~" || fence.length < 3) return false;
+	return !fenceCloseRegex(fence, "m").test(content);
+}
+function longestFenceRun(content, character) {
+	let longest = 0;
+	const pattern = new RegExp(`^ {0,3}(${character === "~" ? "~" : "`"}+)`, "gm");
+	for (const match of content.matchAll(pattern)) longest = Math.max(longest, match[1]?.length ?? 0);
+	return longest;
+}
+function safeFallbackFence(content, recorded) {
+	const firstCharacter = recorded[0] === "~" ? "~" : "`";
+	for (const character of [firstCharacter, firstCharacter === "~" ? "`" : "~"]) {
+		const fence = character.repeat(Math.max(3, longestFenceRun(content, character) + 1));
+		if (fenceIsSafe(content, fence)) return fence;
+	}
+	throw new Error("Unable to choose a safe Markdown code fence.");
+}
+const stable = (value) => meaningfulAttributes(value, {
+	keepEmptyArrays: true,
+	omitDefaultTableSpans: true
+});
+const rowSignature = (row) => JSON.stringify(stable(row));
+function rowCells(line) {
+	const pipes = [];
+	for (let index = 0; index < line.length; index++) {
+		if (line[index] !== "|") continue;
+		let escapes = 0;
+		for (let before = index - 1; before >= 0 && line[before] === "\\"; before--) escapes++;
+		if (escapes % 2 === 0) pipes.push(index);
+	}
+	const bounds = [
+		-1,
+		...pipes,
+		line.length
+	];
+	const cells = bounds.slice(0, -1).map((left, index) => ({
+		start: left + 1,
+		end: bounds[index + 1] ?? line.length
+	}));
+	if (cells[0] && !line.slice(cells[0].start, cells[0].end).trim()) cells.shift();
+	if (cells.at(-1) && !line.slice(cells.at(-1)?.start, cells.at(-1)?.end).trim()) cells.pop();
+	return cells;
+}
+function changedRow(source, normalized, signature, row) {
+	let old;
+	try {
+		old = JSON.parse(signature);
+	} catch {
+		return normalized;
+	}
+	const sourceCells = rowCells(source);
+	const normalizedCells = rowCells(normalized);
+	if (sourceCells.length !== row.content?.length || normalizedCells.length !== row.content.length) return normalized;
+	let output = source;
+	for (let index = sourceCells.length - 1; index >= 0; index--) {
+		if (JSON.stringify(stable(old.content?.[index])) === JSON.stringify(stable(row.content?.[index]))) continue;
+		const target = sourceCells[index];
+		const replacement = normalizedCells[index];
+		if (!target || !replacement) return normalized;
+		const original = source.slice(target.start, target.end);
+		const leading = /^\s*/.exec(original)?.[0] ?? "";
+		const trailing = /\s*$/.exec(original)?.[0] ?? "";
+		const content = normalized.slice(replacement.start, replacement.end).trim();
+		output = `${output.slice(0, target.start)}${leading}${content}${trailing}${output.slice(target.end)}`;
+	}
+	return output;
+}
+function tableLines(raw) {
+	const lines = raw.replace(/\n$/, "").split("\n");
+	const delimiter = lines[1] ?? "";
+	const columns = delimiter.replace(/^\s*\|/, "").replace(/\|\s*$/, "").split("|").length;
+	return {
+		rows: [lines[0] ?? "", ...lines.slice(2)],
+		delimiter,
+		columns
+	};
+}
+function extendInlineForm(extension) {
+	if (extension.name !== "italic" && extension.name !== "bold") return extension;
+	const attrName = extension.name === "italic" ? "sourceEmphasisDelimiter" : "sourceStrongDelimiter";
+	return extension.extend({
+		addAttributes() {
+			return {
+				...this.parent?.(),
+				...sourceFormAttrs([attrName])
+			};
+		},
+		parseMarkdown(token, helpers) {
+			const parsed = this.parent?.(token, helpers);
+			return withAttrs(parsed, { [attrName]: emphasisMarker(token) });
+		},
+		renderMarkdown(node, helpers) {
+			const count = extension.name === "bold" ? 2 : 1;
+			const recorded = node.attrs?.[attrName];
+			const marker = recorded === "_" || recorded === "*" ? recorded.repeat(count) : "*".repeat(count);
+			return `${marker}${helpers.renderChildren(node)}${marker}`;
+		}
+	});
+}
+function extendHeading(extension) {
+	if (extension.name !== "heading") return extension;
+	return extension.extend({
+		addAttributes() {
+			return {
+				...this.parent?.(),
+				...sourceFormAttrs(["sourceHeadingStyle", "sourceSetextUnderline"])
+			};
+		},
+		parseMarkdown(token, helpers) {
+			const parsed = this.parent?.(token, helpers);
+			const lines = token.raw?.replace(/\n$/, "").split("\n") ?? [];
+			const underline = lines.length > 1 && /^ {0,3}(?:=+|-+)[ \t]*$/.test(lines.at(-1) ?? "") ? lines.at(-1) : null;
+			return withAttrs(parsed, {
+				sourceHeadingStyle: underline ? "setext" : "atx",
+				sourceSetextUnderline: underline
+			});
+		},
+		renderMarkdown(node, helpers) {
+			const content = helpers.renderChildren(node.content ?? []);
+			if (node.attrs?.sourceHeadingStyle === "setext" && typeof node.attrs.sourceSetextUnderline === "string") return `${content}\n${node.attrs.sourceSetextUnderline}`;
+			const level = typeof node.attrs?.level === "number" ? node.attrs.level : 1;
+			return `${"#".repeat(level)} ${content}`;
+		}
+	});
+}
+function extendHardBreak(extension) {
+	if (extension.name !== "hardBreak") return extension;
+	return extension.extend({
+		addAttributes() {
+			return {
+				...this.parent?.(),
+				...sourceFormAttrs(["sourceHardBreak"])
+			};
+		},
+		parseMarkdown(token) {
+			return {
+				type: "hardBreak",
+				attrs: { sourceHardBreak: token.raw?.slice(0, -1) ?? null }
+			};
+		},
+		renderMarkdown(node) {
+			const form = node.attrs?.sourceHardBreak;
+			return `${form === "\\" || typeof form === "string" && /^ {2,}$/.test(form) ? form : "  "}\n`;
+		}
+	});
+}
+function extendCodeBlock(extension) {
+	if (extension.name !== "codeBlock") return extension;
+	return extension.extend({
+		addAttributes() {
+			return {
+				...this.parent?.(),
+				...sourceFormAttrs([
+					"sourceFence",
+					"sourceClosingFence",
+					"sourceInfoBefore",
+					"sourceInfoAfter"
+				])
+			};
+		},
+		parseMarkdown(token, helpers) {
+			return withAttrs(this.parent?.(token, helpers), fenceAttrs(token));
+		},
+		renderMarkdown(node, helpers) {
+			const content = helpers.renderChildren(node.content ?? []);
+			const recorded = typeof node.attrs?.sourceFence === "string" ? node.attrs.sourceFence : "";
+			const fence = fenceIsSafe(content, recorded) ? recorded : safeFallbackFence(content, recorded);
+			const closing = fence === recorded && typeof node.attrs?.sourceClosingFence === "string" ? node.attrs.sourceClosingFence : fence;
+			const language = typeof node.attrs?.language === "string" ? node.attrs.language : "";
+			const before = fence === recorded && typeof node.attrs?.sourceInfoBefore === "string" ? node.attrs.sourceInfoBefore : "";
+			const after = fence === recorded && typeof node.attrs?.sourceInfoAfter === "string" ? node.attrs.sourceInfoAfter : "";
+			return `${fence}${language ? `${before}${language}${after}` : ""}\n${content}\n${closing}`;
+		}
+	});
+}
+function extendLink(extension) {
+	if (extension.name !== "link") return extension;
+	return extension.extend({
+		addAttributes() {
+			return {
+				...this.parent?.(),
+				...sourceFormAttrs(["sourceTitleQuote"])
+			};
+		},
+		parseMarkdown(token, helpers) {
+			return withAttrs(this.parent?.(token, helpers), { sourceTitleQuote: titleQuote(token.raw) });
+		},
+		renderMarkdown(node, helpers) {
+			const href = node.attrs?.href ?? "";
+			const title = node.attrs?.title;
+			const content = helpers.renderChildren(node);
+			if (typeof title !== "string" || !title) return `[${content}](${href})`;
+			const quote = safeTitleQuote(title, node.attrs?.sourceTitleQuote);
+			return `[${content}](${href} ${quote}${title}${quote === "(" ? ")" : quote})`;
+		}
+	});
+}
+function orderedMarker(attrs, index) {
+	const orderedDelimiter = attrs?.sourceOrderedDelimiter === ")" ? ")" : ".";
+	const written = attrs?.sourceNumber;
+	const start = typeof attrs?.start === "number" ? attrs.start : 1;
+	return `${attrs?.sourceKeepWrittenNumbers && typeof written === "string" && /^\d{1,9}$/.test(written) ? written : String(start + index)}${orderedDelimiter} `;
+}
+function extendListItem(extension) {
+	if (extension.name !== "listItem") return extension;
+	return extension.extend({
+		addAttributes() {
+			return {
+				...this.parent?.(),
+				...sourceFormAttrs(["sourceNumber"])
+			};
+		},
+		parseMarkdown(token, helpers) {
+			const parsed = this.parent?.(token, helpers);
+			return withAttrs(parsed, { sourceNumber: /^\s*(\d+)[.)]/.exec(token.raw ?? "")?.[1] ?? null });
+		},
+		renderMarkdown(node, helpers, context) {
+			return renderNestedMarkdownContent(node, helpers, () => {
+				if (context.parentType === "bulletList") return `${context.meta?.parentAttrs?.sourceBulletMarker ?? "-"} `;
+				if (context.parentType === "orderedList") return orderedMarker({
+					...context.meta?.parentAttrs,
+					...node.attrs
+				}, context.index ?? 0);
+				return "- ";
+			}, context, { alignNestedToPrefix: context.parentType === "orderedList" });
+		}
+	});
+}
+function sourceFormStarterExtensions(extensions) {
+	return extensions.map((extension) => {
+		return extendListItem(extendLink(extendCodeBlock(extendHardBreak(extendHeading(extendInlineForm(extension))))));
+	});
+}
+function sourceListAttrs(raw, ordered = false) {
+	const marker = /^\s*([-+*]|\d+([.)]))/.exec(raw);
+	if (!ordered) return { sourceBulletMarker: marker?.[1] && /^[-+*]$/.test(marker[1]) ? marker[1] : null };
+	const first = /^(\s*)(\d+)[.)](?:\s|$)/.exec(raw);
+	const sourceOrderedNumbers = raw.split("\n").map((line) => /^(\s*)(\d+)[.)](?:\s|$)/.exec(line)).filter((match) => match?.[1] === first?.[1]).map((match) => match?.[2]);
+	return {
+		sourceOrderedDelimiter: marker?.[2] ?? null,
+		sourceOrderedNumbers
+	};
+}
+const listSourceAttributes = {
+	sourceBulletMarker: hidden(),
+	sourceOrderedDelimiter: hidden(),
+	sourceOrderedNumbers: hidden()
+};
+function taskItemSourceExtension(extension) {
+	return extension.extend({ renderMarkdown(node, helpers, context) {
+		const checked = node.attrs?.checked ? "x" : " ";
+		const marker = context.meta?.parentAttrs?.sourceBulletMarker ?? "-";
+		return renderNestedMarkdownContent(node, helpers, `${marker} [${checked}] `);
+	} });
+}
+function tableSourceExtension(extension) {
+	if (extension.name !== "table") return extension;
+	return extension.extend({
+		addAttributes() {
+			return {
+				...this.parent?.(),
+				...sourceFormAttrs(["sourceDelimiter", "sourceColumns"])
+			};
+		},
+		parseMarkdown(token, helpers) {
+			const parsed = this.parent?.(token, helpers);
+			const source = tableLines(token.raw ?? "");
+			const content = parsed.content?.map((row, index) => ({
+				...row,
+				attrs: {
+					...row.attrs,
+					sourceRow: source.rows[index] ?? null,
+					sourceSignature: rowSignature(row)
+				}
+			}));
+			return {
+				...parsed,
+				attrs: {
+					...parsed.attrs,
+					sourceDelimiter: source.delimiter,
+					sourceColumns: source.columns
+				},
+				content
+			};
+		},
+		renderMarkdown(node, helpers, context) {
+			const lines = (this.parent?.(node, helpers, context) ?? "").trim().split("\n");
+			const rows = node.content ?? [];
+			const bodyLines = [lines[0] ?? "", ...lines.slice(2)];
+			for (const [index, row] of rows.entries()) if (typeof row.attrs?.sourceRow === "string" && row.attrs.sourceSignature === rowSignature(row)) bodyLines[index] = row.attrs.sourceRow;
+			else if (typeof row.attrs?.sourceRow === "string" && typeof row.attrs.sourceSignature === "string") bodyLines[index] = changedRow(row.attrs.sourceRow, bodyLines[index] ?? "", row.attrs.sourceSignature, row);
+			const columns = rows[0]?.content?.length ?? 0;
+			const delimiter = node.attrs?.sourceColumns === columns && typeof node.attrs.sourceDelimiter === "string" ? node.attrs.sourceDelimiter : lines[1] ?? "";
+			return [
+				bodyLines[0] ?? "",
+				delimiter,
+				...bodyLines.slice(1)
+			].join("\n");
+		}
+	});
+}
+const tableRowSourceAttributes = {
+	sourceRow: hidden(),
+	sourceSignature: hidden()
+};
+//#endregion
+export { listSourceAttributes, sourceFormStarterExtensions, sourceListAttrs, tableRowSourceAttributes, tableSourceExtension, taskItemSourceExtension };

package/dist/vue.d.ts

@@ -1,6 +1,7 @@
 import { MarkdownEditorMode } from "./markdown-editor-policy.js";
 import { MarkdownEditorStateDetail } from "./markdown-editor-types.js";
 import { MARKDOWN_EDITOR_PROPERTIES } from "./element-properties.js";
+import { RawInlineIndicationDetail } from "./markdown-raw-inline-indication.js";
 import { SegnaviaMarkdownEditor } from "./markdown-editor.js";
 import { EventProps } from "@segnavia/frame/vue-types";
 import { DefineComponent } from "vue";
@@ -20,6 +21,7 @@ export interface MarkdownEditorVueEventDetails {
   'segnavia-link-request': {
     href: string | null;
   };
+  'segnavia-raw-inline-indicate': RawInlineIndicationDetail | null;
 }
 type MarkdownEditorComponent = Partial<Pick<SegnaviaMarkdownEditor, (typeof MARKDOWN_EDITOR_PROPERTIES.properties)[number]>> & EventProps<typeof MARKDOWN_EDITOR_PROPERTIES.events, MarkdownEditorVueEventDetails>;
 type MarkdownEditorGlobalComponents = { [Tag in typeof MARKDOWN_EDITOR_PROPERTIES.tag]: DefineComponent<MarkdownEditorComponent>; };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@segnavia/markdown-editor",
-  "version": "0.44.0",
+  "version": "0.46.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -36,9 +36,9 @@
     }
   },
   "dependencies": {
-    "@segnavia/format": "0.44.0",
-    "@segnavia/frame": "0.44.0",
-    "@segnavia/html": "0.44.0"
+    "@segnavia/format": "0.46.0",
+    "@segnavia/frame": "0.46.0",
+    "@segnavia/html": "0.46.0"
   },
   "peerDependencies": {
     "@codemirror/commands": "^6.11.1",
@@ -56,7 +56,8 @@
     "@tiptap/markdown": "^3.32.0",
     "@tiptap/pm": "^3.32.0",
     "@tiptap/starter-kit": "^3.32.0",
-    "codemirror-lang-mermaid": "^0.5.0"
+    "codemirror-lang-mermaid": "^0.5.0",
+    "marked": "^17.0.1"
   },
   "devDependencies": {
     "@codemirror/commands": "6.11.1",
@@ -74,6 +75,7 @@
     "@tiptap/markdown": "3.32.0",
     "@tiptap/pm": "3.32.0",
     "@tiptap/starter-kit": "3.32.0",
-    "codemirror-lang-mermaid": "0.5.0"
+    "codemirror-lang-mermaid": "0.5.0",
+    "marked": "17.0.6"
   }
 }