@azlib/editor 0.2.0

package/dist/index.mjs

@@ -0,0 +1,1278 @@
+import DOMPurify from "isomorphic-dompurify";
+import { Schema } from "prosemirror-model";
+import { useEffect, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/core/errors.ts
+const createDiagnostic = (code, severity, message, location) => ({
+	code,
+	severity,
+	message,
+	location
+});
+const createRecoverableError = (code, message, details) => ({
+	code,
+	message,
+	severity: "warning",
+	recoverable: true,
+	details
+});
+//#endregion
+//#region src/core/commandDiagnostics.ts
+const createUnknownCommandDiagnostic = (commandName) => createDiagnostic("UNKNOWN_COMMAND", "warning", `Command '${commandName}' is not available in current editor capabilities.`);
+const createNoHistoryDiagnostic = (type) => createDiagnostic("NO_HISTORY", "info", `No ${type} history entry is available for this editor session.`);
+//#endregion
+//#region src/core/formattingCommands.ts
+const withCommandMetadata = (commandName) => ({ document }) => ({ document: {
+	...document,
+	revision: document.revision + 1,
+	metadata: {
+		...document.metadata,
+		lastCommand: commandName
+	}
+} });
+const createFormattingCommandHandlers = () => ({
+	bold: withCommandMetadata("bold"),
+	italic: withCommandMetadata("italic"),
+	underline: withCommandMetadata("underline"),
+	heading: withCommandMetadata("heading"),
+	list: withCommandMetadata("list"),
+	align: withCommandMetadata("align"),
+	link: withCommandMetadata("link")
+});
+//#endregion
+//#region src/core/commands.ts
+const createCommandRegistry = (capabilities) => {
+	const allowed = new Set(capabilities && capabilities.length > 0 ? capabilities : [
+		"bold",
+		"italic",
+		"underline",
+		"heading",
+		"list",
+		"align",
+		"link",
+		"undo",
+		"redo"
+	]);
+	const registry = /* @__PURE__ */ new Map();
+	const formattingHandlers = createFormattingCommandHandlers();
+	const registerIfAllowed = (name, handler) => {
+		if (allowed.has(name)) registry.set(name, handler);
+	};
+	Object.entries(formattingHandlers).forEach(([commandName, handler]) => {
+		registerIfAllowed(commandName, handler);
+	});
+	return registry;
+};
+const executeCommand = (registry, commandName, context, params) => {
+	const handler = registry.get(commandName);
+	if (!handler) return {
+		document: context.document,
+		diagnostics: [createUnknownCommandDiagnostic(commandName)]
+	};
+	return handler(context, params);
+};
+//#endregion
+//#region src/core/history.ts
+var EditorHistory = class {
+	undoStack = [];
+	redoStack = [];
+	record(snapshot) {
+		this.undoStack.push(snapshot);
+		this.redoStack.length = 0;
+	}
+	undo(current) {
+		const previous = this.undoStack.pop();
+		if (!previous) return current;
+		this.redoStack.push(current);
+		return {
+			...previous,
+			revision: current.revision + 1,
+			metadata: {
+				...previous.metadata,
+				lastCommand: "undo"
+			}
+		};
+	}
+	redo(current) {
+		const next = this.redoStack.pop();
+		if (!next) return current;
+		this.undoStack.push(current);
+		return {
+			...next,
+			revision: current.revision + 1,
+			metadata: {
+				...next.metadata,
+				lastCommand: "redo"
+			}
+		};
+	}
+};
+//#endregion
+//#region src/transforms/html.ts
+const stripHtml = (value) => value.replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim();
+const allowedStyleProperties = new Set([
+	"font-family",
+	"font-size",
+	"text-align",
+	"margin-left"
+]);
+const normalizeStyleValue = (property, value) => {
+	const next = value.trim().toLowerCase();
+	if (property === "font-family") return next === "serif" || next === "monospace" ? next : null;
+	if (property === "font-size") return [
+		"12px",
+		"16px",
+		"20px",
+		"28px"
+	].includes(next) ? next : null;
+	if (property === "text-align") return [
+		"left",
+		"center",
+		"right",
+		"justify"
+	].includes(next) ? next : null;
+	if (property === "margin-left") {
+		const match = /^([0-9]{1,3})px$/.exec(next);
+		if (!match) return null;
+		const amount = Number.parseInt(match[1], 10);
+		return amount >= 0 && amount % 24 === 0 ? `${amount}px` : null;
+	}
+	return null;
+};
+const normalizeStyleAttribute = (styleValue) => {
+	const entries = styleValue.split(";").map((entry) => entry.trim()).filter((entry) => entry.length > 0).map((entry) => {
+		const separator = entry.indexOf(":");
+		if (separator < 0) return null;
+		const property = entry.slice(0, separator).trim().toLowerCase();
+		const value = entry.slice(separator + 1).trim();
+		if (!allowedStyleProperties.has(property)) return null;
+		const normalized = normalizeStyleValue(property, value);
+		if (!normalized) return null;
+		return `${property}:${normalized}`;
+	}).filter((entry) => Boolean(entry));
+	if (entries.length === 0) return null;
+	return entries.join(";");
+};
+const normalizeHtml = (value) => {
+	if (typeof DOMParser === "undefined") return value.trim().length > 0 ? value : "<p></p>";
+	const doc = new DOMParser().parseFromString(`<div>${value}</div>`, "text/html");
+	const root = doc.body.firstElementChild;
+	if (!root) return "<p></p>";
+	root.querySelectorAll("b").forEach((element) => {
+		const replacement = doc.createElement("strong");
+		replacement.innerHTML = element.innerHTML;
+		element.replaceWith(replacement);
+	});
+	root.querySelectorAll("i").forEach((element) => {
+		const replacement = doc.createElement("em");
+		replacement.innerHTML = element.innerHTML;
+		element.replaceWith(replacement);
+	});
+	root.querySelectorAll("strike").forEach((element) => {
+		const replacement = doc.createElement("s");
+		replacement.innerHTML = element.innerHTML;
+		element.replaceWith(replacement);
+	});
+	root.querySelectorAll("*").forEach((element) => {
+		const tag = element.tagName.toLowerCase();
+		Array.from(element.attributes).forEach((attribute) => {
+			const name = attribute.name.toLowerCase();
+			const valueAttr = attribute.value;
+			if (name === "style") {
+				const normalized = normalizeStyleAttribute(valueAttr);
+				if (normalized) element.setAttribute("style", normalized);
+				else element.removeAttribute("style");
+				return;
+			}
+			if (name === "href" || name === "src") {
+				if (!/^(https?:|mailto:|tel:)/i.test(valueAttr.trim())) element.removeAttribute(attribute.name);
+				return;
+			}
+			if (name === "target" || name === "rel" || name === "alt" || name === "data-formula" || name === "controls" || name === "dir") return;
+			element.removeAttribute(attribute.name);
+		});
+		if (tag === "a") {
+			element.setAttribute("rel", "noopener noreferrer");
+			element.setAttribute("target", "_blank");
+		}
+		if (tag === "video") element.setAttribute("controls", "true");
+	});
+	Array.from(root.childNodes).forEach((node) => {
+		if (node.nodeType === Node.TEXT_NODE && (node.textContent?.trim().length ?? 0) > 0) {
+			const paragraph = doc.createElement("p");
+			paragraph.textContent = node.textContent ?? "";
+			root.replaceChild(paragraph, node);
+		}
+	});
+	const normalized = root.innerHTML.trim();
+	return normalized.length > 0 ? normalized : "<p></p>";
+};
+const sanitizeHtml = (payload) => DOMPurify.sanitize(payload, {
+	ALLOWED_TAGS: [
+		"p",
+		"br",
+		"b",
+		"i",
+		"strike",
+		"strong",
+		"em",
+		"u",
+		"s",
+		"code",
+		"pre",
+		"blockquote",
+		"h1",
+		"h2",
+		"ul",
+		"ol",
+		"li",
+		"a",
+		"img",
+		"video",
+		"span",
+		"sub",
+		"sup",
+		"div"
+	],
+	ALLOWED_ATTR: [
+		"href",
+		"src",
+		"alt",
+		"target",
+		"rel",
+		"style",
+		"data-formula",
+		"controls",
+		"dir"
+	],
+	FORBID_TAGS: [
+		"script",
+		"style",
+		"iframe",
+		"object",
+		"embed",
+		"form",
+		"input",
+		"button",
+		"textarea",
+		"select"
+	]
+});
+const importHtml = (payload) => {
+	const diagnostics = [];
+	const normalized = normalizeHtml(sanitizeHtml(payload));
+	if (normalized !== payload) diagnostics.push(createDiagnostic("SANITIZED_CONTENT", "warning", "Input HTML was sanitized to remove unsupported or unsafe markup."));
+	if (normalized.trim().length === 0) diagnostics.push(createDiagnostic("EMPTY_HTML", "info", "The provided HTML content is empty after normalization."));
+	return {
+		richText: stripHtml(normalized),
+		sanitizedHtml: normalized,
+		diagnostics
+	};
+};
+const exportHtml = (richText) => {
+	return normalizeHtml(`<p>${richText.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\n/g, "<br>")}</p>`);
+};
+//#endregion
+//#region src/transforms/diagnostics.ts
+const createUnsupportedMarkupDiagnostic = (details) => createDiagnostic("UNSUPPORTED_MARKUP", "warning", details ?? "Some markup could not be fully represented and was normalized.");
+const createRecoverableParseDiagnostic = (format, details) => createDiagnostic("RECOVERABLE_PARSE", "warning", details ?? `Some ${format.toUpperCase()} content was partially recovered during import.`);
+//#endregion
+//#region src/transforms/importFallback.ts
+const applyImportFallback = (input, base) => {
+	const payload = input.payload.trim();
+	const diagnostics = [createRecoverableParseDiagnostic(input.format === "html" ? "html" : "markdown")];
+	const stripped = input.format === "html" ? payload.replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim() : payload;
+	if (stripped.length === 0) diagnostics.push(createUnsupportedMarkupDiagnostic("Input produced no recoverable text content after normalization."));
+	return {
+		document: {
+			...base,
+			content: {
+				richText: stripped,
+				html: input.format === "html" ? payload : base.content.html
+			},
+			metadata: {
+				...base.metadata,
+				importFallback: true
+			}
+		},
+		diagnostics
+	};
+};
+//#endregion
+//#region src/transforms/markdown.ts
+const normalizeMarkdown = (value) => value.replace(/\r\n?/g, "\n");
+const importMarkdown = (payload) => {
+	const diagnostics = [];
+	const normalized = normalizeMarkdown(payload);
+	if (normalized.trim().length === 0) diagnostics.push(createDiagnostic("EMPTY_MARKDOWN", "info", "The provided markdown content is empty."));
+	return {
+		richText: normalized,
+		diagnostics
+	};
+};
+const exportMarkdown = (richText) => normalizeMarkdown(richText);
+//#endregion
+//#region src/transforms/representationSwitch.ts
+const importRepresentation = (input, base) => {
+	if (input.format === "rich") {
+		const normalizedHtml = normalizeHtml(exportHtml(input.payload));
+		return {
+			document: {
+				...base,
+				content: {
+					richText: input.payload,
+					html: normalizedHtml
+				}
+			},
+			diagnostics: []
+		};
+	}
+	if (input.format === "markdown") try {
+		const result = importMarkdown(input.payload);
+		return {
+			document: {
+				...base,
+				content: { richText: result.richText },
+				metadata: {
+					...base.metadata,
+					importedFrom: "markdown"
+				}
+			},
+			diagnostics: result.diagnostics
+		};
+	} catch {
+		return applyImportFallback(input, base);
+	}
+	try {
+		const result = importHtml(input.payload);
+		return {
+			document: {
+				...base,
+				content: {
+					richText: result.richText,
+					html: result.sanitizedHtml
+				},
+				metadata: {
+					...base.metadata,
+					importedFrom: "html"
+				}
+			},
+			diagnostics: result.diagnostics
+		};
+	} catch {
+		return applyImportFallback(input, base);
+	}
+};
+const exportRepresentation = (document, format) => {
+	if (format === "rich") return {
+		format,
+		payload: document.content.richText,
+		diagnostics: []
+	};
+	if (format === "markdown") return {
+		format,
+		payload: exportMarkdown(document.content.richText),
+		diagnostics: []
+	};
+	return {
+		format,
+		payload: document.content.html ? normalizeHtml(document.content.html) : normalizeHtml(exportHtml(document.content.richText)),
+		diagnostics: []
+	};
+};
+//#endregion
+//#region src/core/createEditor.ts
+const createDefaultDocument = () => ({
+	id: crypto.randomUUID(),
+	content: { richText: "" },
+	metadata: {},
+	revision: 0
+});
+const fromInput = (input, base) => importRepresentation(input, base);
+const toExport = (document, format) => exportRepresentation(document, format);
+const createEditor = (config = {}) => {
+	const registry = createCommandRegistry(config.commandCapabilities);
+	const history = new EditorHistory();
+	let isDestroyed = false;
+	let currentDocument = createDefaultDocument();
+	if (config.initialContent) {
+		const initialized = fromInput(config.initialContent, currentDocument);
+		currentDocument = initialized.document;
+		if (initialized.diagnostics.length > 0) config.onError?.(createRecoverableError("INITIAL_CONTENT_DIAGNOSTIC", "Initial content was normalized during editor initialization.", { diagnostics: initialized.diagnostics }));
+	}
+	const ensureActive = () => {
+		if (!isDestroyed) return true;
+		config.onError?.(createRecoverableError("EDITOR_DESTROYED", "This editor instance has already been destroyed."));
+		return false;
+	};
+	const emitChange = () => {
+		config.onChange?.(currentDocument);
+	};
+	return {
+		getDocument: () => currentDocument,
+		execute: (commandName, params) => {
+			if (!ensureActive()) return {
+				ok: false,
+				document: currentDocument,
+				diagnostics: []
+			};
+			const result = executeCommand(registry, commandName, { document: currentDocument }, params);
+			if (commandName === "undo") {
+				const next = history.undo(currentDocument);
+				if (next === currentDocument) return {
+					ok: false,
+					document: currentDocument,
+					diagnostics: [createNoHistoryDiagnostic("undo")]
+				};
+				currentDocument = next;
+				emitChange();
+				return {
+					ok: true,
+					document: currentDocument,
+					diagnostics: []
+				};
+			}
+			if (commandName === "redo") {
+				const next = history.redo(currentDocument);
+				if (next === currentDocument) return {
+					ok: false,
+					document: currentDocument,
+					diagnostics: [createNoHistoryDiagnostic("redo")]
+				};
+				currentDocument = next;
+				emitChange();
+				return {
+					ok: true,
+					document: currentDocument,
+					diagnostics: []
+				};
+			}
+			history.record(currentDocument);
+			currentDocument = result.document;
+			emitChange();
+			return {
+				ok: (result.diagnostics?.length ?? 0) === 0,
+				document: currentDocument,
+				diagnostics: result.diagnostics ?? []
+			};
+		},
+		export: (format) => toExport(currentDocument, format),
+		import: (input) => {
+			if (!ensureActive()) return {
+				ok: false,
+				document: currentDocument,
+				diagnostics: []
+			};
+			const result = fromInput(input, {
+				...currentDocument,
+				revision: currentDocument.revision + 1
+			});
+			currentDocument = result.document;
+			emitChange();
+			return {
+				ok: result.diagnostics.length === 0,
+				document: currentDocument,
+				diagnostics: result.diagnostics
+			};
+		},
+		mount: (target) => {
+			if (!ensureActive()) return;
+		},
+		unmount: () => {},
+		destroy: () => {
+			isDestroyed = true;
+		}
+	};
+};
+//#endregion
+//#region src/core/schema.ts
+const editorNodeNames = {
+	doc: "doc",
+	paragraph: "paragraph",
+	heading: "heading",
+	text: "text",
+	bulletList: "bullet_list",
+	orderedList: "ordered_list",
+	listItem: "list_item",
+	hardBreak: "hard_break"
+};
+const editorMarkNames = {
+	strong: "strong",
+	em: "em",
+	underline: "underline",
+	link: "link"
+};
+const createEditorSchema = () => new Schema({
+	nodes: {
+		doc: { content: "block+" },
+		paragraph: {
+			content: "inline*",
+			group: "block",
+			parseDOM: [{ tag: "p" }],
+			toDOM: () => ["p", 0]
+		},
+		heading: {
+			attrs: { level: { default: 1 } },
+			content: "inline*",
+			group: "block",
+			defining: true,
+			parseDOM: [
+				{
+					tag: "h1",
+					attrs: { level: 1 }
+				},
+				{
+					tag: "h2",
+					attrs: { level: 2 }
+				},
+				{
+					tag: "h3",
+					attrs: { level: 3 }
+				}
+			],
+			toDOM: (node) => [`h${Math.max(1, Math.min(3, Number(node.attrs.level) || 1))}`, 0]
+		},
+		bullet_list: {
+			content: "list_item+",
+			group: "block",
+			parseDOM: [{ tag: "ul" }],
+			toDOM: () => ["ul", 0]
+		},
+		ordered_list: {
+			attrs: { order: { default: 1 } },
+			content: "list_item+",
+			group: "block",
+			parseDOM: [{
+				tag: "ol",
+				getAttrs: (dom) => {
+					if (!(dom instanceof HTMLOListElement)) return { order: 1 };
+					return { order: dom.start || 1 };
+				}
+			}],
+			toDOM: (node) => [
+				"ol",
+				{ start: node.attrs.order || 1 },
+				0
+			]
+		},
+		list_item: {
+			content: "paragraph block*",
+			parseDOM: [{ tag: "li" }],
+			toDOM: () => ["li", 0]
+		},
+		text: { group: "inline" },
+		hard_break: {
+			inline: true,
+			group: "inline",
+			selectable: false,
+			parseDOM: [{ tag: "br" }],
+			toDOM: () => ["br"]
+		}
+	},
+	marks: {
+		strong: {
+			parseDOM: [{ tag: "strong" }, {
+				tag: "b",
+				getAttrs: () => null
+			}],
+			toDOM: () => ["strong", 0]
+		},
+		em: {
+			parseDOM: [{ tag: "em" }, {
+				tag: "i",
+				getAttrs: () => null
+			}],
+			toDOM: () => ["em", 0]
+		},
+		underline: {
+			parseDOM: [{ tag: "u" }],
+			toDOM: () => ["u", 0]
+		},
+		link: {
+			attrs: {
+				href: {},
+				title: { default: null }
+			},
+			inclusive: false,
+			parseDOM: [{
+				tag: "a[href]",
+				getAttrs: (dom) => {
+					if (!(dom instanceof HTMLAnchorElement)) return false;
+					return {
+						href: dom.getAttribute("href"),
+						title: dom.getAttribute("title")
+					};
+				}
+			}],
+			toDOM: (node) => [
+				"a",
+				{
+					href: node.attrs.href,
+					title: node.attrs.title
+				},
+				0
+			]
+		}
+	}
+});
+const editorSchema = createEditorSchema();
+//#endregion
+//#region src/core/toolbarModel.ts
+const defaultToolbarActions = [
+	{
+		command: "bold",
+		label: "Bold",
+		group: "inline"
+	},
+	{
+		command: "italic",
+		label: "Italic",
+		group: "inline"
+	},
+	{
+		command: "underline",
+		label: "Underline",
+		group: "inline"
+	},
+	{
+		command: "heading",
+		label: "Heading",
+		group: "block"
+	},
+	{
+		command: "list",
+		label: "List",
+		group: "block"
+	},
+	{
+		command: "align",
+		label: "Align",
+		group: "block"
+	},
+	{
+		command: "link",
+		label: "Link",
+		group: "inline"
+	},
+	{
+		command: "undo",
+		label: "Undo",
+		group: "history"
+	},
+	{
+		command: "redo",
+		label: "Redo",
+		group: "history"
+	}
+];
+//#endregion
+//#region src/rich-text/mountEditor.ts
+const commandLabels = {
+	bold: "Bold",
+	italic: "Italic",
+	underline: "Underline",
+	strike: "Strike",
+	code: "Inline code",
+	blockquote: "Blockquote",
+	"code-block": "Code block",
+	"indent-": "Outdent",
+	"indent+": "Indent",
+	link: "Link",
+	image: "Image",
+	video: "Video",
+	formula: "Formula",
+	clean: "Remove formatting"
+};
+const commandIconSvg = {
+	bold: "<svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 2.5h4.5a2.5 2.5 0 010 5H4z\"/><path d=\"M4 7.5h5a3 3 0 010 6H4z\"/></svg>",
+	italic: "<svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\"><path d=\"M9.8 2.5H5.5\"/><path d=\"M10.5 13.5H6.2\"/><path d=\"M9.3 2.5 6.7 13.5\"/></svg>",
+	underline: "<svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"><path d=\"M4 2.5v4.2a4 4 0 008 0V2.5\"/><path d=\"M3 13.5h10\"/></svg>",
+	strike: "<svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"><path d=\"M4 4.5c.8-1.2 2-1.9 3.7-1.9 2 0 3.3 1 3.3 2.5 0 3-6.5 1.8-6.5 4.6 0 1.5 1.3 2.3 3.4 2.3 1.6 0 2.9-.6 3.8-1.7\"/><path d=\"M2.5 8h11\"/></svg>",
+	code: "<svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 4 2.5 8 6 12\"/><path d=\"M10 4 13.5 8 10 12\"/><path d=\"M8.7 2.8 7.3 13.2\"/></svg>",
+	blockquote: "<svg viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M3 3h4v4H4.8c.1 1.8-.7 3.2-1.8 4L2 10c1-.7 1.5-1.7 1.4-3H3zM9 3h4v4h-2.2c.1 1.8-.7 3.2-1.8 4L8 10c1-.7 1.5-1.7 1.4-3H9z\"/></svg>",
+	"code-block": "<svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2.5\" y=\"2.5\" width=\"11\" height=\"11\" rx=\"1.8\"/><path d=\"M6.2 6 4.5 8l1.7 2\"/><path d=\"M9.8 6 11.5 8l-1.7 2\"/><path d=\"M8.6 5.5 7.4 10.5\"/></svg>",
+	"indent-": "<svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 4h4\"/><path d=\"M9 8h4\"/><path d=\"M9 12h4\"/><path d=\"M7 5.5 4 8l3 2.5\"/></svg>",
+	"indent+": "<svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 4h4\"/><path d=\"M3 8h4\"/><path d=\"M3 12h4\"/><path d=\"M9 5.5 12 8l-3 2.5\"/></svg>",
+	link: "<svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"><path d=\"M6.3 9.7 4.9 11a2.4 2.4 0 103.4 3.4l1.5-1.4\"/><path d=\"M9.7 6.3 11 4.9a2.4 2.4 0 10-3.4-3.4L6.1 2.9\"/><path d=\"M5.9 10.1 10.1 5.9\"/></svg>",
+	image: "<svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2.3\" y=\"2.5\" width=\"11.4\" height=\"11\" rx=\"1.8\"/><circle cx=\"6\" cy=\"6\" r=\"1.2\" fill=\"currentColor\" stroke=\"none\"/><path d=\"m3.8 11 2.8-2.8 2.2 2.2 1.6-1.6 1.8 2.2\"/></svg>",
+	video: "<svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2.2\" y=\"3\" width=\"8.8\" height=\"10\" rx=\"1.6\"/><path d=\"M11 6.2 13.8 4.8v6.4L11 9.8z\"/><path d=\"M6.2 6.4v3.2l2.7-1.6z\" fill=\"currentColor\" stroke=\"none\"/></svg>",
+	formula: "<svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 4h5\"/><path d=\"M3 12h5\"/><path d=\"M8 4 5 8l3 4\"/><path d=\"M10.3 5.8v4.4\"/><path d=\"M12.5 8h-4.4\"/></svg>",
+	clean: "<svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2.8 12.5h6.8\"/><path d=\"m4.2 3.3 6 6\"/><path d=\"m10.2 2.7 3 3-2 2-3-3z\"/><path d=\"M6.2 11.2 4.1 13.3\"/></svg>"
+};
+const createToolbarIcon = (command, fallback) => {
+	const icon = document.createElement("span");
+	icon.className = "az-rich-editor-toolbar-icon";
+	const svgMarkup = commandIconSvg[command];
+	if (svgMarkup) icon.innerHTML = svgMarkup;
+	else icon.textContent = fallback;
+	return icon;
+};
+const selectOptionLabels = {
+	font: {
+		default: "A",
+		serif: "As",
+		monospace: "Am"
+	},
+	size: {
+		small: "S",
+		normal: "N",
+		large: "L",
+		huge: "XL"
+	},
+	header: {
+		normal: "P",
+		h1: "H1",
+		h2: "H2"
+	},
+	script: {
+		normal: "x",
+		sub: "x_",
+		super: "x^"
+	},
+	align: {
+		left: "L",
+		center: "C",
+		right: "R",
+		justify: "J"
+	},
+	list: {
+		none: "-",
+		ordered: "1.",
+		bullet: "o"
+	},
+	direction: {
+		ltr: "->",
+		rtl: "<-"
+	}
+};
+const safeUrl = (value) => {
+	const trimmed = value.trim();
+	if (!trimmed) return null;
+	if (/^(https?:|mailto:|tel:)/i.test(trimmed)) return trimmed;
+	return null;
+};
+const closestElement = (node, root) => {
+	let current = node;
+	while (current && current !== root) {
+		if (current instanceof HTMLElement) return current;
+		current = current.parentNode;
+	}
+	return null;
+};
+const closestByTag = (node, tagName, root) => {
+	const desired = tagName.toLowerCase();
+	let current = node;
+	while (current && current !== root) {
+		if (current instanceof HTMLElement && current.tagName.toLowerCase() === desired) return current;
+		current = current.parentNode;
+	}
+	return null;
+};
+const unwrapElement = (element) => {
+	const parent = element.parentNode;
+	if (!parent) return;
+	while (element.firstChild) parent.insertBefore(element.firstChild, element);
+	parent.removeChild(element);
+};
+const placeCaretInside = (element) => {
+	const selection = window.getSelection();
+	if (!selection) return;
+	const range = document.createRange();
+	range.selectNodeContents(element);
+	range.collapse(false);
+	selection.removeAllRanges();
+	selection.addRange(range);
+};
+const getSelectionRange = (root) => {
+	const selection = window.getSelection();
+	if (!selection || selection.rangeCount === 0) return null;
+	const range = selection.getRangeAt(0);
+	if (!root.contains(range.commonAncestorContainer)) return null;
+	return range;
+};
+const wrapRange = (range, tagName, attrs) => {
+	const wrapper = document.createElement(tagName);
+	if (attrs) Object.entries(attrs).forEach(([key, value]) => wrapper.setAttribute(key, value));
+	if (range.collapsed) {
+		wrapper.append(document.createTextNode("​"));
+		range.insertNode(wrapper);
+		placeCaretInside(wrapper);
+		return wrapper;
+	}
+	const fragment = range.extractContents();
+	wrapper.append(fragment);
+	range.insertNode(wrapper);
+	const selection = window.getSelection();
+	if (selection) {
+		const nextRange = document.createRange();
+		nextRange.selectNodeContents(wrapper);
+		selection.removeAllRanges();
+		selection.addRange(nextRange);
+	}
+	return wrapper;
+};
+const blockTags = new Set([
+	"p",
+	"div",
+	"h1",
+	"h2",
+	"blockquote",
+	"pre",
+	"li"
+]);
+const getBlockElement = (range, root) => {
+	const start = closestElement(range.startContainer, root);
+	if (!start) return root;
+	let current = start;
+	while (current && current !== root) {
+		if (blockTags.has(current.tagName.toLowerCase())) return current;
+		current = current.parentElement;
+	}
+	return root;
+};
+const replaceBlockTag = (block, tagName) => {
+	if (block.tagName.toLowerCase() === tagName.toLowerCase()) return block;
+	const replacement = document.createElement(tagName);
+	while (block.firstChild) replacement.append(block.firstChild);
+	Array.from(block.attributes).forEach((attribute) => {
+		if (attribute.name === "style" || attribute.name === "dir") replacement.setAttribute(attribute.name, attribute.value);
+	});
+	block.parentNode?.replaceChild(replacement, block);
+	return replacement;
+};
+const applyInlineTag = (tagName, root, range) => {
+	const existing = closestByTag(range.commonAncestorContainer, tagName, root);
+	if (existing) {
+		unwrapElement(existing);
+		return;
+	}
+	wrapRange(range, tagName);
+};
+const applyScript = (value, root, range) => {
+	const sub = closestByTag(range.commonAncestorContainer, "sub", root);
+	const sup = closestByTag(range.commonAncestorContainer, "sup", root);
+	if (sub) unwrapElement(sub);
+	if (sup) unwrapElement(sup);
+	if (value === "sub") wrapRange(range, "sub");
+	if (value === "super") wrapRange(range, "sup");
+};
+const applyHeader = (value, root, range) => {
+	const block = getBlockElement(range, root);
+	if (value === "h1" || value === "h2") {
+		replaceBlockTag(block, value);
+		return;
+	}
+	replaceBlockTag(block, "p");
+};
+const toggleBlockTag = (tagName, root, range) => {
+	const block = getBlockElement(range, root);
+	if (block.tagName.toLowerCase() === tagName) {
+		replaceBlockTag(block, "p");
+		return;
+	}
+	replaceBlockTag(block, tagName);
+};
+const ensureList = (tagName, root, range, remove) => {
+	const block = getBlockElement(range, root);
+	const li = closestByTag(block, "li", root);
+	if (li) {
+		const list = li.parentElement;
+		if (!list) return;
+		if (remove || list.tagName.toLowerCase() === tagName) {
+			const paragraph = document.createElement("p");
+			paragraph.textContent = li.textContent ?? "";
+			list.parentNode?.insertBefore(paragraph, list);
+			li.remove();
+			if (!list.querySelector("li")) list.remove();
+			return;
+		}
+		const nextList = document.createElement(tagName);
+		const nextLi = document.createElement("li");
+		nextLi.textContent = li.textContent ?? "";
+		nextList.append(nextLi);
+		list.parentNode?.insertBefore(nextList, list.nextSibling);
+		li.remove();
+		if (!list.querySelector("li")) list.remove();
+		return;
+	}
+	if (remove) return;
+	const list = document.createElement(tagName);
+	const listItem = document.createElement("li");
+	listItem.innerHTML = block.innerHTML;
+	list.append(listItem);
+	block.parentNode?.replaceChild(list, block);
+};
+const applyIndent = (root, range, direction) => {
+	const block = getBlockElement(range, root);
+	const current = Number.parseInt(block.style.marginLeft || "0", 10) || 0;
+	const next = direction === "+" ? current + 24 : Math.max(0, current - 24);
+	block.style.marginLeft = next === 0 ? "" : `${next}px`;
+};
+const applyAlign = (root, range, align) => {
+	const block = getBlockElement(range, root);
+	block.style.textAlign = align;
+};
+const applyDirection = (root, range, value) => {
+	getBlockElement(range, root).setAttribute("dir", value);
+};
+const clearFormatting = (root, range) => {
+	if (range.collapsed) {
+		const block = getBlockElement(range, root);
+		const text = block.textContent ?? "";
+		block.replaceChildren(document.createTextNode(text));
+		return;
+	}
+	const selectedText = range.toString();
+	range.deleteContents();
+	range.insertNode(document.createTextNode(selectedText));
+};
+const insertNodeAtRange = (range, node) => {
+	range.deleteContents();
+	range.insertNode(node);
+	const selection = window.getSelection();
+	if (selection) {
+		const after = document.createRange();
+		after.setStartAfter(node);
+		after.collapse(true);
+		selection.removeAllRanges();
+		selection.addRange(after);
+	}
+};
+const applyEmbed = async (type, range, requestEmbedValue) => {
+	const value = await Promise.resolve(requestEmbedValue?.(type) ?? null);
+	if (!value || value.trim().length === 0) return;
+	if (type === "formula") {
+		const formula = document.createElement("span");
+		formula.setAttribute("data-formula", "true");
+		formula.textContent = value.trim();
+		insertNodeAtRange(range, formula);
+		return;
+	}
+	const url = safeUrl(value);
+	if (!url) return;
+	if (type === "link") {
+		const selected = range.toString().trim();
+		const anchor = document.createElement("a");
+		anchor.href = url;
+		anchor.rel = "noopener noreferrer";
+		anchor.target = "_blank";
+		anchor.textContent = selected.length > 0 ? selected : url;
+		insertNodeAtRange(range, anchor);
+		return;
+	}
+	if (type === "image") {
+		const image = document.createElement("img");
+		image.src = url;
+		image.alt = "embedded image";
+		insertNodeAtRange(range, image);
+		return;
+	}
+	const video = document.createElement("video");
+	video.setAttribute("controls", "true");
+	video.src = url;
+	insertNodeAtRange(range, video);
+};
+const applyButtonCommand = async (command, editable, requestEmbedValue) => {
+	editable.focus();
+	const range = getSelectionRange(editable);
+	if (!range) return;
+	switch (command) {
+		case "bold":
+			applyInlineTag("strong", editable, range);
+			break;
+		case "italic":
+			applyInlineTag("em", editable, range);
+			break;
+		case "underline":
+			applyInlineTag("u", editable, range);
+			break;
+		case "strike":
+			applyInlineTag("s", editable, range);
+			break;
+		case "code":
+			applyInlineTag("code", editable, range);
+			break;
+		case "blockquote":
+			toggleBlockTag("blockquote", editable, range);
+			break;
+		case "code-block":
+			toggleBlockTag("pre", editable, range);
+			break;
+		case "indent-":
+			applyIndent(editable, range, "-");
+			break;
+		case "indent+":
+			applyIndent(editable, range, "+");
+			break;
+		case "link":
+			await applyEmbed("link", range, requestEmbedValue);
+			break;
+		case "image":
+			await applyEmbed("image", range, requestEmbedValue);
+			break;
+		case "video":
+			await applyEmbed("video", range, requestEmbedValue);
+			break;
+		case "formula":
+			await applyEmbed("formula", range, requestEmbedValue);
+			break;
+		case "clean":
+			clearFormatting(editable, range);
+			break;
+		default: break;
+	}
+};
+const applySelectCommand = (command, value, editable) => {
+	editable.focus();
+	const range = getSelectionRange(editable);
+	if (!range) return;
+	switch (command) {
+		case "font":
+			if (value === "default") clearFormatting(editable, range);
+			else wrapRange(range, "span", { style: `font-family:${value === "serif" ? "serif" : "monospace"}` });
+			break;
+		case "size":
+			wrapRange(range, "span", { style: value === "small" ? "font-size:12px" : value === "large" ? "font-size:20px" : value === "huge" ? "font-size:28px" : "font-size:16px" });
+			break;
+		case "header":
+			applyHeader(value, editable, range);
+			break;
+		case "script":
+			applyScript(value, editable, range);
+			break;
+		case "align":
+			applyAlign(editable, range, value);
+			break;
+		case "list":
+			ensureList(value === "ordered" ? "ol" : "ul", editable, range, value === "none");
+			break;
+		case "direction":
+			applyDirection(editable, range, value === "rtl" ? "rtl" : "ltr");
+			break;
+		default: break;
+	}
+};
+const renderButton = (command, editable, requestEmbedValue, onMutate) => {
+	const button = document.createElement("button");
+	button.type = "button";
+	button.className = "az-rich-editor-toolbar-button";
+	button.setAttribute("aria-label", commandLabels[command] ?? command);
+	button.title = commandLabels[command] ?? command;
+	button.append(createToolbarIcon(command, command));
+	button.addEventListener("click", async () => {
+		await applyButtonCommand(command, editable, requestEmbedValue);
+		onMutate();
+	});
+	return button;
+};
+const createSelect = (format, options, editable, onMutate) => {
+	const select = document.createElement("select");
+	select.className = "az-rich-editor-toolbar-select";
+	select.setAttribute("aria-label", format);
+	options.forEach((optionValue) => {
+		const option = document.createElement("option");
+		option.value = optionValue;
+		option.textContent = selectOptionLabels[format]?.[optionValue] ?? optionValue;
+		option.title = optionValue;
+		select.append(option);
+	});
+	select.addEventListener("change", () => {
+		applySelectCommand(format, select.value, editable);
+		onMutate();
+	});
+	return select;
+};
+const buildToolbar = (editable, requestEmbedValue, onMutate) => {
+	const toolbar = document.createElement("div");
+	toolbar.className = "az-rich-editor-toolbar";
+	toolbar.setAttribute("role", "toolbar");
+	toolbar.setAttribute("aria-label", "Rich editor toolbar");
+	[
+		{
+			format: "font",
+			options: [
+				"default",
+				"serif",
+				"monospace"
+			]
+		},
+		{
+			format: "size",
+			options: [
+				"small",
+				"normal",
+				"large",
+				"huge"
+			]
+		},
+		{
+			format: "header",
+			options: [
+				"normal",
+				"h1",
+				"h2"
+			]
+		},
+		{
+			format: "script",
+			options: [
+				"normal",
+				"sub",
+				"super"
+			]
+		},
+		{
+			format: "align",
+			options: [
+				"left",
+				"center",
+				"right",
+				"justify"
+			]
+		},
+		{
+			format: "list",
+			options: [
+				"none",
+				"ordered",
+				"bullet"
+			]
+		},
+		{
+			format: "direction",
+			options: ["ltr", "rtl"]
+		}
+	].forEach((config) => toolbar.append(createSelect(config.format, config.options, editable, onMutate)));
+	[
+		"bold",
+		"italic",
+		"underline",
+		"strike",
+		"code",
+		"blockquote",
+		"code-block",
+		"indent-",
+		"indent+",
+		"link",
+		"image",
+		"video",
+		"formula",
+		"clean"
+	].forEach((command) => toolbar.append(renderButton(command, editable, requestEmbedValue, onMutate)));
+	return toolbar;
+};
+const mountRichTextEditor = ({ host, initialHtml, disabled = false, onChange, requestEmbedValue }) => {
+	host.innerHTML = "";
+	const wrapper = document.createElement("div");
+	wrapper.className = "az-rich-editor";
+	const editable = document.createElement("div");
+	editable.className = "az-rich-editor-input";
+	editable.setAttribute("aria-label", "Rich editor input");
+	editable.setAttribute("role", "textbox");
+	editable.setAttribute("aria-multiline", "true");
+	editable.setAttribute("contenteditable", disabled ? "false" : "true");
+	editable.dataset.placeholder = "Compose an epic...";
+	editable.innerHTML = initialHtml;
+	const emitChange = () => onChange(editable.innerHTML);
+	const toolbar = buildToolbar(editable, requestEmbedValue, emitChange);
+	const inputHandler = () => emitChange();
+	editable.addEventListener("input", inputHandler);
+	wrapper.append(toolbar, editable);
+	host.append(wrapper);
+	return {
+		destroy: () => {
+			editable.removeEventListener("input", inputHandler);
+			host.innerHTML = "";
+		},
+		getHtml: () => editable.innerHTML,
+		setHtml: (html) => {
+			editable.innerHTML = html;
+		}
+	};
+};
+//#endregion
+//#region src/adapters/dom/createDomAdapter.ts
+const createDomAdapter = (editor) => {
+	let target = null;
+	let mountedEditor = null;
+	return {
+		mount: (nextTarget) => {
+			target = nextTarget;
+			editor.mount(nextTarget);
+			if (!(nextTarget instanceof HTMLElement)) return;
+			mountedEditor = mountRichTextEditor({
+				host: nextTarget,
+				initialHtml: editor.export("html").payload,
+				requestEmbedValue: () => null,
+				onChange: (html) => {
+					editor.import({
+						format: "html",
+						payload: html
+					});
+				}
+			});
+		},
+		unmount: () => {
+			if (!target) return;
+			mountedEditor?.destroy();
+			mountedEditor = null;
+			editor.unmount();
+			target = null;
+		},
+		destroy: () => {
+			mountedEditor?.destroy();
+			mountedEditor = null;
+			editor.destroy();
+			target = null;
+		}
+	};
+};
+//#endregion
+//#region src/adapters/react/useEditorAdapter.tsx
+const useEditorAdapter = (config) => {
+	const editor = useMemo(() => createEditor(config), [config]);
+	useEffect(() => () => {
+		editor.destroy();
+	}, [editor]);
+	return editor;
+};
+function RichEditorAdapter({ className, disabled = false, initialContent, onChange, onError, onRequestEmbedValue }) {
+	const editor = useEditorAdapter({
+		initialContent,
+		onChange,
+		onError
+	});
+	const hostRef = useRef(null);
+	useEffect(() => {
+		const host = hostRef.current;
+		if (!host) return;
+		const mounted = mountRichTextEditor({
+			host,
+			initialHtml: editor.export("html").payload,
+			disabled,
+			requestEmbedValue: onRequestEmbedValue,
+			onChange: (html) => {
+				editor.import({
+					format: "html",
+					payload: html
+				});
+			}
+		});
+		return () => {
+			mounted.destroy();
+		};
+	}, [
+		disabled,
+		editor,
+		onRequestEmbedValue
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		"aria-label": "Rich editor",
+		className,
+		ref: hostRef
+	});
+}
+//#endregion
+export { RichEditorAdapter, createDomAdapter, createEditor, createEditorSchema, defaultToolbarActions, editorMarkNames, editorNodeNames, editorSchema, exportRepresentation, importRepresentation, useEditorAdapter };
+
+//# sourceMappingURL=index.mjs.map