@segnavia/markdown-editor 0.0.0-stage → 0.42.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 modstudio
+
+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/dist/editor-css.js

@@ -0,0 +1,18 @@
+//#region src/editor-css.ts
+const EDITOR_CSS = `
+:where(:host(segnavia-markdown-editor:not([unstyled]))){display:block}
+:where(:host(segnavia-markdown-editor:not([unstyled])) [part~="editor"]){display:grid;grid-template-rows:auto minmax(0,1fr);min-block-size:0}
+:where(:host(segnavia-markdown-editor:not([unstyled])) [part~="title"]){box-sizing:border-box;inline-size:100%}
+:where(:host(segnavia-markdown-editor:not([unstyled])) [part~="source"]){min-inline-size:0;min-block-size:0}
+:where(:host(segnavia-markdown-editor:not([unstyled])) [part~="source"] .cm-editor){block-size:100%}
+:where(:host(segnavia-markdown-editor:not([unstyled])) [part~="rich"]){min-inline-size:0;min-block-size:0;overflow:auto}
+:where(:host(segnavia-markdown-editor:not([unstyled])) [part~="rich"] .ProseMirror){min-block-size:100%;outline:0}
+:where(:host(segnavia-markdown-editor:not([unstyled])) [part~="rich"] table){border-collapse:collapse;inline-size:max-content;min-inline-size:100%}
+:where(:host(segnavia-markdown-editor:not([unstyled])) [part~="rich"] th),:where(:host(segnavia-markdown-editor:not([unstyled])) [part~="rich"] td){min-inline-size:1em}
+:where(:host(segnavia-markdown-editor:not([unstyled])) [part~="rich"] [data-type="taskList"]){list-style:none;padding-inline-start:0}
+:where(:host(segnavia-markdown-editor:not([unstyled])) [part~="rich"] [data-type="taskItem"]){display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--segnavia-markdown-task-gap,.5em)}
+:where(:host(segnavia-markdown-editor:not([unstyled])) [part~="locked-block"]){display:block;position:relative;min-block-size:1em}
+:where(:host(segnavia-markdown-editor:not([unstyled])) [part~="locked-block"] segnavia-page){display:block}
+`;
+//#endregion
+export { EDITOR_CSS };

package/dist/editor-style.js

@@ -0,0 +1,8 @@
+import { EDITOR_CSS } from "./editor-css.js";
+import { ensureStyle } from "@segnavia/frame";
+//#region src/editor-style.ts
+function ensureEditorStyle(element) {
+	ensureStyle(element, "markdown-editor", EDITOR_CSS);
+}
+//#endregion
+export { ensureEditorStyle };

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

@@ -0,0 +1,32 @@
+import { registerMarkdownEditorFonts } from "./markdown-editor-fonts.js";
+//#region src/markdown-editor-font-registration.ts
+var MarkdownEditorFontRegistration = class {
+	element;
+	loadController;
+	remove;
+	constructor(element) {
+		this.element = element;
+	}
+	clear() {
+		this.loadController?.abort();
+		this.loadController = void 0;
+		this.remove?.();
+		this.remove = void 0;
+	}
+	load(references, fonts) {
+		this.clear();
+		if (!this.element.isConnected || references.length === 0) return;
+		const controller = new AbortController();
+		this.loadController = controller;
+		registerMarkdownEditorFonts(this.element, references, fonts, controller.signal).then((remove) => {
+			if (!controller.signal.aborted) this.remove = remove;
+		}).catch((error) => {
+			if (!controller.signal.aborted) this.element.dispatchEvent(new ErrorEvent("error", {
+				error,
+				message: error instanceof Error ? error.message : String(error)
+			}));
+		});
+	}
+};
+//#endregion
+export { MarkdownEditorFontRegistration };

package/dist/markdown-editor-fonts.js

@@ -0,0 +1,56 @@
+import { FontRefusedError, appNames, refuseMissingFontSource, requireAppFontName, uniqueFontReferences } from "@segnavia/frame/fonts";
+//#region src/markdown-editor-fonts.ts
+function nativeFace(face) {
+	const descriptors = {};
+	if (face.weight !== void 0) descriptors.weight = String(face.weight);
+	if (face.style !== void 0) descriptors.style = face.style;
+	if (face.unicodeRange !== void 0) descriptors.unicodeRange = face.unicodeRange;
+	return new FontFace(face.family, new Uint8Array(face.data).buffer, descriptors);
+}
+async function registerMarkdownEditorFonts(element, references, fonts, signal) {
+	const unique = uniqueFontReferences(references);
+	if (!fonts) {
+		refuseMissingFontSource(unique, "markdown editor");
+		return () => void 0;
+	}
+	const app = /* @__PURE__ */ new Map();
+	const loaded = [];
+	const properties = [];
+	let cleaned = false;
+	const cleanup = () => {
+		if (cleaned) return;
+		cleaned = true;
+		for (const face of loaded) document.fonts.delete(face);
+		for (const property of properties) element.style.removeProperty(property);
+	};
+	signal.addEventListener("abort", cleanup, { once: true });
+	try {
+		for (const name of appNames(unique)) {
+			requireAppFontName(name, "markdown editor");
+			const resolved = await fonts.source.font(name, { signal });
+			signal.throwIfAborted();
+			if (!resolved) throw new FontRefusedError(`markdown editor could not establish app font ${JSON.stringify(name)}; make that font available from the source to clear this refusal.`);
+			app.set(name, resolved);
+			const property = `--segnavia-font-${name}`;
+			element.style.setProperty(property, `${JSON.stringify(resolved.family)},${resolved.generic ?? "sans-serif"}`);
+			properties.push(property);
+		}
+		for (const face of [...app.values()].flatMap((font) => font.faces).concat(fonts.local ?? [])) {
+			const native = nativeFace(face);
+			await native.load();
+			signal.throwIfAborted();
+			document.fonts.add(native);
+			loaded.push(native);
+		}
+		signal.throwIfAborted();
+	} catch (error) {
+		cleanup();
+		throw error;
+	}
+	return () => {
+		signal.removeEventListener("abort", cleanup);
+		cleanup();
+	};
+}
+//#endregion
+export { registerMarkdownEditorFonts };

package/dist/markdown-editor-link.js

@@ -0,0 +1,9 @@
+import { safeMarkdownUrl } from "@segnavia/html";
+//#region src/markdown-editor-link.ts
+function validateMarkdownLink(href, linkOrigins) {
+	if (safeMarkdownUrl("href", href, linkOrigins)) return;
+	const origins = linkOrigins === void 0 ? "" : ", or an origin in linkOrigins";
+	throw new Error(`Refused link href ${JSON.stringify(href)}; use an allowed scheme${origins} to clear this refusal.`);
+}
+//#endregion
+export { validateMarkdownLink };

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

@@ -0,0 +1,3 @@
+//#region src/markdown-editor-model.d.ts
+export type MarkdownTitleSource = 'separate' | 'leading-heading';
+//#endregion

package/dist/markdown-editor-model.js

@@ -0,0 +1,76 @@
+import { joinLeadingHeading, normalizeMarkdownTitle, retainedLeadingHeading, splitLeadingHeading } from "./markdown-title.js";
+//#region src/markdown-editor-model.ts
+function markdownEditorModel() {
+	return {
+		markdown: "",
+		title: null,
+		titleSource: "separate",
+		editable: "",
+		retained: ""
+	};
+}
+function setModelMarkdown(model, markdown) {
+	if (markdown === model.markdown) return model;
+	if (model.titleSource === "separate") return {
+		...model,
+		markdown,
+		editable: markdown
+	};
+	const split = splitLeadingHeading(markdown);
+	return {
+		...model,
+		markdown,
+		title: split.title ?? "",
+		editable: split.editable,
+		retained: split.retained
+	};
+}
+function setModelTitleSource(model, titleSource) {
+	if (titleSource === model.titleSource) return model;
+	if (titleSource === "separate") return {
+		...model,
+		titleSource,
+		editable: model.markdown,
+		retained: ""
+	};
+	const split = splitLeadingHeading(model.markdown);
+	return {
+		...model,
+		titleSource,
+		title: split.title ?? "",
+		editable: split.editable,
+		retained: split.retained
+	};
+}
+function setModelTitle(model, value) {
+	if (model.titleSource === "leading-heading" && value == null) return model;
+	const title = value == null ? null : normalizeMarkdownTitle(String(value));
+	if (title === model.title) return model;
+	if (model.titleSource === "separate") return {
+		...model,
+		title
+	};
+	const retained = retainedLeadingHeading(title, {
+		title: model.title || null,
+		editable: model.editable,
+		retained: model.retained
+	});
+	const markdown = joinLeadingHeading(model.editable, retained);
+	return {
+		...model,
+		markdown,
+		title,
+		retained
+	};
+}
+function setModelEditable(model, editable) {
+	const markdown = model.titleSource === "leading-heading" ? joinLeadingHeading(editable, model.retained) : editable;
+	if (markdown === model.markdown && editable === model.editable) return model;
+	return {
+		...model,
+		markdown,
+		editable
+	};
+}
+//#endregion
+export { markdownEditorModel, setModelEditable, setModelMarkdown, setModelTitle, setModelTitleSource };

package/dist/markdown-editor-options.js

@@ -0,0 +1,38 @@
+import { uniqueFontReferences } from "@segnavia/frame/fonts";
+//#region src/markdown-editor-options.ts
+function equalValue(left, right) {
+	if (Object.is(left, right)) return true;
+	if (ArrayBuffer.isView(left) && ArrayBuffer.isView(right)) {
+		const a = new Uint8Array(left.buffer, left.byteOffset, left.byteLength);
+		const b = new Uint8Array(right.buffer, right.byteOffset, right.byteLength);
+		return a.length === b.length && a.every((value, index) => value === b[index]);
+	}
+	if (Array.isArray(left) && Array.isArray(right)) return left.length === right.length && left.every((value, index) => equalValue(value, right[index]));
+	if (!left || !right || typeof left !== "object" || typeof right !== "object") return false;
+	const leftEntries = Object.entries(left);
+	const rightRecord = right;
+	return leftEntries.length === Object.keys(rightRecord).length && leftEntries.every(([key, value]) => Object.hasOwn(rightRecord, key) && equalValue(value, rightRecord[key]));
+}
+function normalizeLockedFences(value) {
+	return Object.fromEntries(Object.entries(value ?? {}).map(([name, label]) => [name.toLowerCase(), String(label)]));
+}
+function equalLockedFences(left, right) {
+	return equalValue(left, right);
+}
+function equalAlertLabels(left, right) {
+	return equalValue(left, right);
+}
+function normalizeAlertLabels(value) {
+	return value && Object.fromEntries(Object.entries(value).map(([kind, label]) => [kind, String(label)]));
+}
+function normalizeFontReferences(value) {
+	return uniqueFontReferences([...value ?? []]);
+}
+function equalFontReferences(left, right) {
+	return equalValue(left, right);
+}
+function equalFonts(left, right) {
+	return equalValue(left, right);
+}
+//#endregion
+export { equalAlertLabels, equalFontReferences, equalFonts, equalLockedFences, normalizeAlertLabels, normalizeFontReferences, normalizeLockedFences };

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

@@ -0,0 +1,83 @@
+//#region src/markdown-editor-policy.d.ts
+export declare const MARKDOWN_EDITOR_MODES: readonly ["rich", "source"];
+export type MarkdownEditorMode = (typeof MARKDOWN_EDITOR_MODES)[number];
+export type MarkdownEditorCommand = 'bold' | 'italic' | 'code' | 'strike' | 'paragraph' | 'heading' | 'bullet-list' | 'ordered-list' | 'task-list' | 'quote' | 'code-block' | 'link' | 'unlink' | 'insert-table' | 'add-row' | 'delete-row' | 'add-column' | 'delete-column' | 'delete-table' | 'undo' | 'redo' | 'toggle-mode' | 'edit-in-source';
+export type MarkdownEditorCommandArgs = {
+  heading: {
+    level: 1 | 2 | 3 | 4 | 5 | 6;
+  };
+  link: {
+    href: string;
+  };
+};
+export declare const MARKDOWN_EDITOR_COMMANDS: readonly [{
+  readonly name: "bold";
+  readonly key: "Mod-b";
+}, {
+  readonly name: "italic";
+  readonly key: "Mod-i";
+}, {
+  readonly name: "code";
+  readonly key: "Mod-e";
+}, {
+  readonly name: "strike";
+  readonly key: "Mod-Shift-s";
+}, {
+  readonly name: "paragraph";
+  readonly key: "Mod-Alt-0";
+}, {
+  readonly name: "heading";
+  readonly key: "Mod-Alt-1..6";
+}, {
+  readonly name: "bullet-list";
+  readonly key: "Mod-Shift-8";
+}, {
+  readonly name: "ordered-list";
+  readonly key: "Mod-Shift-7";
+}, {
+  readonly name: "task-list";
+  readonly key: "Mod-Shift-9";
+}, {
+  readonly name: "quote";
+  readonly key: "Mod-Shift-b";
+}, {
+  readonly name: "code-block";
+  readonly key: "Mod-Alt-c";
+}, {
+  readonly name: "link";
+  readonly key: "Mod-k";
+}, {
+  readonly name: "unlink";
+  readonly key: "Mod-Shift-k";
+}, {
+  readonly name: "insert-table";
+  readonly key: "Mod-Alt-Shift-t";
+}, {
+  readonly name: "add-row";
+  readonly key: "Mod-Alt-Shift-r";
+}, {
+  readonly name: "delete-row";
+  readonly key: "Mod-Alt-Shift-Backspace";
+}, {
+  readonly name: "add-column";
+  readonly key: "Mod-Alt-Shift-c";
+}, {
+  readonly name: "delete-column";
+  readonly key: "Mod-Alt-Shift-Delete";
+}, {
+  readonly name: "delete-table";
+  readonly key: "Mod-Alt-Shift-x";
+}, {
+  readonly name: "undo";
+  readonly key: "Mod-z";
+}, {
+  readonly name: "redo";
+  readonly key: "Mod-Shift-z";
+}, {
+  readonly name: "toggle-mode";
+  readonly key: "Mod-Alt-m";
+}, {
+  readonly name: "edit-in-source";
+  readonly key: "Enter";
+}];
+//#endregion

package/dist/markdown-editor-policy.js

@@ -0,0 +1,117 @@
+//#region src/markdown-editor-policy.ts
+const MARKDOWN_EDITOR_MODES = ["rich", "source"];
+const MARKDOWN_EDITOR_COMMANDS = [
+	{
+		name: "bold",
+		key: "Mod-b"
+	},
+	{
+		name: "italic",
+		key: "Mod-i"
+	},
+	{
+		name: "code",
+		key: "Mod-e"
+	},
+	{
+		name: "strike",
+		key: "Mod-Shift-s"
+	},
+	{
+		name: "paragraph",
+		key: "Mod-Alt-0"
+	},
+	{
+		name: "heading",
+		key: "Mod-Alt-1..6"
+	},
+	{
+		name: "bullet-list",
+		key: "Mod-Shift-8"
+	},
+	{
+		name: "ordered-list",
+		key: "Mod-Shift-7"
+	},
+	{
+		name: "task-list",
+		key: "Mod-Shift-9"
+	},
+	{
+		name: "quote",
+		key: "Mod-Shift-b"
+	},
+	{
+		name: "code-block",
+		key: "Mod-Alt-c"
+	},
+	{
+		name: "link",
+		key: "Mod-k"
+	},
+	{
+		name: "unlink",
+		key: "Mod-Shift-k"
+	},
+	{
+		name: "insert-table",
+		key: "Mod-Alt-Shift-t"
+	},
+	{
+		name: "add-row",
+		key: "Mod-Alt-Shift-r"
+	},
+	{
+		name: "delete-row",
+		key: "Mod-Alt-Shift-Backspace"
+	},
+	{
+		name: "add-column",
+		key: "Mod-Alt-Shift-c"
+	},
+	{
+		name: "delete-column",
+		key: "Mod-Alt-Shift-Delete"
+	},
+	{
+		name: "delete-table",
+		key: "Mod-Alt-Shift-x"
+	},
+	{
+		name: "undo",
+		key: "Mod-z"
+	},
+	{
+		name: "redo",
+		key: "Mod-Shift-z"
+	},
+	{
+		name: "toggle-mode",
+		key: "Mod-Alt-m"
+	},
+	{
+		name: "edit-in-source",
+		key: "Enter"
+	}
+];
+const MARKDOWN_EDITOR_KEYS = [{
+	key: "Mod-s",
+	action: "save"
+}, {
+	key: "Mod-Alt-m",
+	action: "toggle-mode"
+}];
+function availableMarkdownMode(requested) {
+	return MARKDOWN_EDITOR_MODES.includes(requested) ? requested : MARKDOWN_EDITOR_MODES[0];
+}
+function markdownEditorKeyAction(event) {
+	if (!(event.metaKey || event.ctrlKey) || event.shiftKey) return null;
+	const letter = event.code.startsWith("Key") ? event.code.slice(3).toLowerCase() : event.key.toLowerCase();
+	const key = `mod-${event.altKey ? "alt-" : ""}${letter}`;
+	return MARKDOWN_EDITOR_KEYS.find((binding) => binding.key.toLowerCase() === key)?.action ?? null;
+}
+function richModeCommandRefusal(command) {
+	return /* @__PURE__ */ new Error(`Cannot run ${JSON.stringify(command)} because that command needs rich mode.`);
+}
+//#endregion
+export { MARKDOWN_EDITOR_COMMANDS, MARKDOWN_EDITOR_KEYS, MARKDOWN_EDITOR_MODES, availableMarkdownMode, markdownEditorKeyAction, richModeCommandRefusal };

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

@@ -0,0 +1,28 @@
+import { MarkdownTitleSource } from "./markdown-editor-model.js";
+import { MarkdownEditorCommand, MarkdownEditorCommandArgs, MarkdownEditorMode } from "./markdown-editor-policy.js";
+import { AlertLabels } from "@segnavia/html";
+import { FontsOptions } from "@segnavia/frame/fonts";
+import { FontReference } from "@segnavia/format";
+//#region src/markdown-editor-types.d.ts
+export type MarkdownEditorStateDetail = Readonly<{
+  marks: string[];
+  nodes: string[];
+  canUndo: boolean;
+  canRedo: boolean;
+}>;
+export interface SegnaviaMarkdownEditor extends Omit<HTMLElement, 'title'> {
+  markdown: string;
+  mode: MarkdownEditorMode;
+  readonly modes: readonly ['rich', 'source'];
+  title: string | null;
+  titleSource: MarkdownTitleSource;
+  lockedFences: Record<string, string>;
+  css: string;
+  fonts: FontsOptions | undefined;
+  fontReferences: FontReference[];
+  linkOrigins: Iterable<string> | undefined;
+  alertLabels: Partial<AlertLabels> | undefined;
+  unstyled: boolean;
+  run<C extends MarkdownEditorCommand>(command: C, args?: C extends keyof MarkdownEditorCommandArgs ? MarkdownEditorCommandArgs[C] : never): boolean;
+}
+//#endregion

package/dist/markdown-editor.d.ts

@@ -0,0 +1,12 @@
+import { MarkdownTitleSource } from "./markdown-editor-model.js";
+import { MARKDOWN_EDITOR_COMMANDS, MARKDOWN_EDITOR_MODES, MarkdownEditorCommand, MarkdownEditorMode } from "./markdown-editor-policy.js";
+import { MarkdownEditorStateDetail, SegnaviaMarkdownEditor as SegnaviaMarkdownEditor$1 } from "./markdown-editor-types.js";
+import { joinLeadingHeading, normalizeMarkdownTitle, splitLeadingHeading } from "./markdown-title.js";
+import { FontsOptions } from "@segnavia/frame/fonts";
+//#region src/markdown-editor.d.ts
+export interface SegnaviaMarkdownEditor extends SegnaviaMarkdownEditor$1 {}
+export declare const SegnaviaMarkdownEditor: {
+  new (): SegnaviaMarkdownEditor;
+};
+//#endregion
+export { type FontsOptions, MARKDOWN_EDITOR_COMMANDS, MARKDOWN_EDITOR_MODES, type MarkdownEditorCommand, type MarkdownEditorMode, type MarkdownEditorStateDetail, type MarkdownTitleSource, joinLeadingHeading, normalizeMarkdownTitle, splitLeadingHeading };