@azlib/editor 0.2.0 → 0.3.0

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import DOMPurify from "isomorphic-dompurify";
-import { Schema } from "prosemirror-model";
-import { useEffect, useMemo, useRef } from "react";
+import { DOMParser, DOMSerializer, Schema } from "prosemirror-model";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/core/errors.ts
 const createDiagnostic = (code, severity, message, location) => ({
@@ -108,8 +108,7 @@ var EditorHistory = class {
 	}
 };
 //#endregion
-//#region src/transforms/html.ts
-const stripHtml = (value) => value.replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim();
+//#region src/core/schema.ts
 const allowedStyleProperties = new Set([
 	"font-family",
 	"font-size",
@@ -140,6 +139,7 @@ const normalizeStyleValue = (property, value) => {
 	return null;
 };
 const normalizeStyleAttribute = (styleValue) => {
+	if (!styleValue) return null;
 	const entries = styleValue.split(";").map((entry) => entry.trim()).filter((entry) => entry.length > 0).map((entry) => {
 		const separator = entry.indexOf(":");
 		if (separator < 0) return null;
@@ -153,60 +153,350 @@ const normalizeStyleAttribute = (styleValue) => {
 	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;
+const editorNodeNames = {
+	doc: "doc",
+	paragraph: "paragraph",
+	heading: "heading",
+	text: "text",
+	bulletList: "bullet_list",
+	orderedList: "ordered_list",
+	listItem: "list_item",
+	hardBreak: "hard_break",
+	blockquote: "blockquote",
+	codeBlock: "code_block",
+	image: "image",
+	video: "video"
+};
+const editorMarkNames = {
+	strong: "strong",
+	em: "em",
+	underline: "underline",
+	link: "link",
+	strike: "strike",
+	code: "code",
+	style: "style",
+	formula: "formula"
+};
+const createEditorSchema = () => new Schema({
+	nodes: {
+		doc: { content: "block+" },
+		paragraph: {
+			content: "inline*",
+			group: "block",
+			attrs: {
+				style: { default: null },
+				dir: { default: null }
+			},
+			parseDOM: [{
+				tag: "p",
+				getAttrs: (dom) => {
+					if (!(dom instanceof HTMLElement)) return null;
+					return {
+						style: normalizeStyleAttribute(dom.getAttribute("style") || ""),
+						dir: dom.getAttribute("dir") || null
+					};
+				}
+			}],
+			toDOM: (node) => {
+				const attrs = {};
+				if (node.attrs.style) attrs.style = node.attrs.style;
+				if (node.attrs.dir) attrs.dir = node.attrs.dir;
+				return [
+					"p",
+					attrs,
+					0
+				];
+			}
+		},
+		heading: {
+			attrs: {
+				level: { default: 1 },
+				style: { default: null },
+				dir: { default: null }
+			},
+			content: "inline*",
+			group: "block",
+			defining: true,
+			parseDOM: [
+				{
+					tag: "h1",
+					getAttrs: (dom) => {
+						if (!(dom instanceof HTMLElement)) return { level: 1 };
+						return {
+							level: 1,
+							style: normalizeStyleAttribute(dom.getAttribute("style") || ""),
+							dir: dom.getAttribute("dir") || null
+						};
+					}
+				},
+				{
+					tag: "h2",
+					getAttrs: (dom) => {
+						if (!(dom instanceof HTMLElement)) return { level: 2 };
+						return {
+							level: 2,
+							style: normalizeStyleAttribute(dom.getAttribute("style") || ""),
+							dir: dom.getAttribute("dir") || null
+						};
+					}
+				},
+				{
+					tag: "h3",
+					getAttrs: (dom) => {
+						if (!(dom instanceof HTMLElement)) return { level: 3 };
+						return {
+							level: 3,
+							style: normalizeStyleAttribute(dom.getAttribute("style") || ""),
+							dir: dom.getAttribute("dir") || null
+						};
+					}
+				}
+			],
+			toDOM: (node) => {
+				const attrs = {};
+				if (node.attrs.style) attrs.style = node.attrs.style;
+				if (node.attrs.dir) attrs.dir = node.attrs.dir;
+				return [
+					`h${Math.max(1, Math.min(3, Number(node.attrs.level) || 1))}`,
+					attrs,
+					0
+				];
 			}
-			if (name === "href" || name === "src") {
-				if (!/^(https?:|mailto:|tel:)/i.test(valueAttr.trim())) element.removeAttribute(attribute.name);
-				return;
+		},
+		blockquote: {
+			content: "block+",
+			group: "block",
+			attrs: {
+				style: { default: null },
+				dir: { default: null }
+			},
+			parseDOM: [{
+				tag: "blockquote",
+				getAttrs: (dom) => {
+					if (!(dom instanceof HTMLElement)) return null;
+					return {
+						style: normalizeStyleAttribute(dom.getAttribute("style") || ""),
+						dir: dom.getAttribute("dir") || null
+					};
+				}
+			}],
+			toDOM: (node) => {
+				const attrs = {};
+				if (node.attrs.style) attrs.style = node.attrs.style;
+				if (node.attrs.dir) attrs.dir = node.attrs.dir;
+				return [
+					"blockquote",
+					attrs,
+					0
+				];
 			}
-			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");
+		},
+		code_block: {
+			content: "inline*",
+			group: "block",
+			code: true,
+			defining: true,
+			attrs: {
+				style: { default: null },
+				dir: { default: null }
+			},
+			parseDOM: [{
+				tag: "pre",
+				preserveWhitespace: "full",
+				getAttrs: (dom) => {
+					if (!(dom instanceof HTMLElement)) return null;
+					return {
+						style: normalizeStyleAttribute(dom.getAttribute("style") || ""),
+						dir: dom.getAttribute("dir") || null
+					};
+				}
+			}],
+			toDOM: (node) => {
+				const attrs = {};
+				if (node.attrs.style) attrs.style = node.attrs.style;
+				if (node.attrs.dir) attrs.dir = node.attrs.dir;
+				return [
+					"pre",
+					attrs,
+					["code", 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]
+		},
+		image: {
+			inline: true,
+			attrs: {
+				src: {},
+				alt: { default: null }
+			},
+			group: "inline",
+			draggable: true,
+			parseDOM: [{
+				tag: "img[src]",
+				getAttrs: (dom) => {
+					if (!(dom instanceof HTMLElement)) return null;
+					return {
+						src: dom.getAttribute("src"),
+						alt: dom.getAttribute("alt")
+					};
+				}
+			}],
+			toDOM: (node) => ["img", {
+				src: node.attrs.src,
+				alt: node.attrs.alt
+			}]
+		},
+		video: {
+			inline: true,
+			attrs: {
+				src: {},
+				controls: { default: "true" }
+			},
+			group: "inline",
+			parseDOM: [{
+				tag: "video[src]",
+				getAttrs: (dom) => {
+					if (!(dom instanceof HTMLElement)) return null;
+					return {
+						src: dom.getAttribute("src"),
+						controls: dom.getAttribute("controls") || "true"
+					};
+				}
+			}],
+			toDOM: (node) => ["video", {
+				src: node.attrs.src,
+				controls: node.attrs.controls
+			}]
+		},
+		text: { group: "inline" },
+		hard_break: {
+			inline: true,
+			group: "inline",
+			selectable: false,
+			parseDOM: [{ tag: "br" }],
+			toDOM: () => ["br"]
 		}
-		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);
+	},
+	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]
+		},
+		strike: {
+			parseDOM: [
+				{ tag: "s" },
+				{ tag: "del" },
+				{ tag: "strike" }
+			],
+			toDOM: () => ["s", 0]
+		},
+		code: {
+			parseDOM: [{ tag: "code" }],
+			toDOM: () => ["code", 0]
+		},
+		style: {
+			attrs: { style: { default: null } },
+			parseDOM: [{
+				tag: "span[style]",
+				getAttrs: (dom) => {
+					if (!(dom instanceof HTMLElement)) return null;
+					const normalized = normalizeStyleAttribute(dom.getAttribute("style") || "");
+					return normalized ? { style: normalized } : false;
+				}
+			}],
+			toDOM: (node) => [
+				"span",
+				{ style: node.attrs.style },
+				0
+			]
+		},
+		link: {
+			attrs: {
+				href: { default: null },
+				title: { default: null },
+				style: { default: null }
+			},
+			inclusive: false,
+			parseDOM: [{
+				tag: "a",
+				getAttrs: (dom) => {
+					if (!(dom instanceof HTMLElement)) return false;
+					const href = dom.getAttribute("href");
+					const style = dom.getAttribute("style");
+					if (!href && !style) return false;
+					return {
+						href: href || null,
+						title: dom.getAttribute("title") || null,
+						style: normalizeStyleAttribute(style || "")
+					};
+				}
+			}],
+			toDOM: (node) => {
+				const attrs = {};
+				if (node.attrs.href) attrs.href = node.attrs.href;
+				if (node.attrs.title) attrs.title = node.attrs.title;
+				if (node.attrs.style) attrs.style = node.attrs.style;
+				return [
+					"a",
+					attrs,
+					0
+				];
+			}
+		},
+		formula: {
+			parseDOM: [{ tag: "span[data-formula]" }],
+			toDOM: () => [
+				"span",
+				{ "data-formula": "true" },
+				0
+			]
 		}
-	});
-	const normalized = root.innerHTML.trim();
-	return normalized.length > 0 ? normalized : "<p></p>";
-};
+	}
+});
+const editorSchema = createEditorSchema();
+//#endregion
+//#region src/transforms/html.ts
 const sanitizeHtml = (payload) => DOMPurify.sanitize(payload, {
 	ALLOWED_TAGS: [
 		"p",
@@ -223,6 +513,7 @@ const sanitizeHtml = (payload) => DOMPurify.sanitize(payload, {
 		"blockquote",
 		"h1",
 		"h2",
+		"h3",
 		"ul",
 		"ol",
 		"li",
@@ -258,19 +549,29 @@ const sanitizeHtml = (payload) => DOMPurify.sanitize(payload, {
 		"select"
 	]
 });
+const normalizeHtml = (value) => {
+	if (typeof globalThis.DOMParser === "undefined") return value.trim().length > 0 ? value : "<p></p>";
+	const domDoc = new globalThis.DOMParser().parseFromString(`<body>${value}</body>`, "text/html");
+	const pmNode = DOMParser.fromSchema(editorSchema).parse(domDoc.body);
+	const fragment = DOMSerializer.fromSchema(editorSchema).serializeFragment(pmNode.content);
+	const container = document.createElement("div");
+	container.appendChild(fragment);
+	const normalized = container.innerHTML.trim();
+	return normalized.length > 0 ? normalized : "<p></p>";
+};
 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),
+		richText: 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>`);
+	return normalizeHtml(richText);
 };
 //#endregion
 //#region src/transforms/diagnostics.ts
@@ -301,26 +602,224 @@ const applyImportFallback = (input, base) => {
 //#endregion
 //#region src/transforms/markdown.ts
 const normalizeMarkdown = (value) => value.replace(/\r\n?/g, "\n");
+const escapeHtml = (text) => {
+	return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+};
+const parseInline = (text) => {
+	let html = escapeHtml(text);
+	html = html.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>");
+	html = html.replace(/__(.*?)__/g, "<strong>$1</strong>");
+	html = html.replace(/\*(.*?)\*/g, "<em>$1</em>");
+	html = html.replace(/_(.*?)_/g, "<em>$1</em>");
+	html = html.replace(/~~(.*?)~~/g, "<s>$1</s>");
+	html = html.replace(/`(.*?)`/g, "<code>$1</code>");
+	html = html.replace(/\[(.*?)\]\((.*?)\)/g, "<a href=\"$2\">$1</a>");
+	return html;
+};
+const markdownToHtml = (markdown) => {
+	const lines = normalizeMarkdown(markdown).split("\n");
+	const blocks = [];
+	let currentBlockType = null;
+	let blockLines = [];
+	const closeCurrentBlock = () => {
+		if (!currentBlockType) return;
+		if (currentBlockType === "paragraph") {
+			const content = parseInline(blockLines.join("\n"));
+			blocks.push(`<p>${content}</p>`);
+		} else if (currentBlockType === "blockquote") {
+			const content = markdownToHtml(blockLines.join("\n"));
+			blocks.push(`<blockquote>${content}</blockquote>`);
+		} else if (currentBlockType === "code_block") {
+			const content = escapeHtml(blockLines.join("\n"));
+			blocks.push(`<pre><code>${content}</code></pre>`);
+		} else if (currentBlockType === "ul" || currentBlockType === "ol") {
+			const tag = currentBlockType;
+			const itemBlocks = [];
+			let currentItemLines = [];
+			const closeItem = () => {
+				if (currentItemLines.length > 0) {
+					const innerHtml = markdownToHtml(currentItemLines.join("\n"));
+					itemBlocks.push(`<li>${innerHtml}</li>`);
+					currentItemLines = [];
+				}
+			};
+			for (const line of blockLines) {
+				const ulMatch = /^[*-+]\s+(.*)$/.exec(line.trim());
+				const olMatch = /^\d+\.\s+(.*)$/.exec(line.trim());
+				if (ulMatch) {
+					closeItem();
+					currentItemLines.push(ulMatch[1]);
+				} else if (olMatch) {
+					closeItem();
+					currentItemLines.push(olMatch[1]);
+				} else currentItemLines.push(line.trimStart());
+			}
+			closeItem();
+			blocks.push(`<${tag}>${itemBlocks.join("")}</${tag}>`);
+		}
+		blockLines = [];
+		currentBlockType = null;
+	};
+	let i = 0;
+	while (i < lines.length) {
+		const line = lines[i];
+		if (line.startsWith("```")) {
+			if (currentBlockType === "code_block") closeCurrentBlock();
+			else {
+				closeCurrentBlock();
+				currentBlockType = "code_block";
+			}
+			i++;
+			continue;
+		}
+		if (currentBlockType === "code_block") {
+			blockLines.push(line);
+			i++;
+			continue;
+		}
+		const trimmed = line.trim();
+		if (trimmed === "") {
+			closeCurrentBlock();
+			i++;
+			continue;
+		}
+		const headerMatch = /^(#{1,6})\s+(.*)$/.exec(trimmed);
+		if (headerMatch) {
+			closeCurrentBlock();
+			const level = headerMatch[1].length;
+			const content = parseInline(headerMatch[2]);
+			blocks.push(`<h${level}>${content}</h${level}>`);
+			i++;
+			continue;
+		}
+		if (trimmed.startsWith(">")) {
+			if (currentBlockType !== "blockquote") {
+				closeCurrentBlock();
+				currentBlockType = "blockquote";
+			}
+			const rest = line.startsWith("> ") ? line.slice(2) : line.slice(1);
+			blockLines.push(rest);
+			i++;
+			continue;
+		}
+		if (/^[*-+]\s+(.*)$/.exec(trimmed)) {
+			if (currentBlockType !== "ul") {
+				closeCurrentBlock();
+				currentBlockType = "ul";
+			}
+			blockLines.push(line);
+			i++;
+			continue;
+		}
+		if (/^\d+\.\s+(.*)$/.exec(trimmed)) {
+			if (currentBlockType !== "ol") {
+				closeCurrentBlock();
+				currentBlockType = "ol";
+			}
+			blockLines.push(line);
+			i++;
+			continue;
+		}
+		if (!currentBlockType) currentBlockType = "paragraph";
+		blockLines.push(line);
+		i++;
+	}
+	closeCurrentBlock();
+	return blocks.join("");
+};
+const serializeChild = (child, index, parent) => {
+	if (child.isText) {
+		let text = child.text || "";
+		child.marks.forEach((mark) => {
+			if (mark.type.name === "strong") text = `**${text}**`;
+			else if (mark.type.name === "em") text = `*${text}*`;
+			else if (mark.type.name === "strike") text = `~~${text}~~`;
+			else if (mark.type.name === "code") text = `\`${text}\``;
+			else if (mark.type.name === "link") {
+				const href = mark.attrs.href || "";
+				text = `[${text}](${href})`;
+			}
+		});
+		return text;
+	}
+	if (child.type.name === "hard_break") return "\n";
+	if (child.type.name === "image") {
+		const src = child.attrs.src || "";
+		return `![${child.attrs.alt || ""}](${src})`;
+	}
+	if (child.type.name === "video") return `[Video: ${child.attrs.src || ""}]`;
+	let inner = "";
+	child.forEach((c, idx) => {
+		inner += serializeChild(c, idx, child);
+	});
+	if (child.type.name === "paragraph") return `${inner}\n\n`;
+	if (child.type.name === "heading") return `${"#".repeat(child.attrs.level || 1)} ${inner}\n\n`;
+	if (child.type.name === "blockquote") return `${inner.trim().split("\n").map((line) => `> ${line}`).join("\n")}\n\n`;
+	if (child.type.name === "code_block") return `\`\`\`\n${inner.trim()}\n\`\`\`\n\n`;
+	if (child.type.name === "bullet_list") {
+		let listResult = "";
+		child.forEach((item) => {
+			const indented = serializeNode(item).trim().split("\n").map((line, idx) => {
+				if (idx === 0) return `* ${line}`;
+				return `  ${line}`;
+			}).join("\n");
+			listResult += `${indented}\n`;
+		});
+		return `${listResult}\n`;
+	}
+	if (child.type.name === "ordered_list") {
+		let listResult = "";
+		let count = child.attrs.order || 1;
+		child.forEach((item) => {
+			const indented = serializeNode(item).trim().split("\n").map((line, idx) => {
+				if (idx === 0) return `${count}. ${line}`;
+				return `   ${line}`;
+			}).join("\n");
+			listResult += `${indented}\n`;
+			count++;
+		});
+		return `${listResult}\n`;
+	}
+	if (child.type.name === "list_item") {
+		let itemInner = "";
+		child.forEach((c, idx) => {
+			itemInner += serializeChild(c, idx, child);
+		});
+		return itemInner;
+	}
+	return inner;
+};
+const serializeNode = (node) => {
+	let result = "";
+	node.forEach((child, index) => {
+		result += serializeChild(child, index, node);
+	});
+	return result.trim();
+};
 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,
+		richText: markdownToHtml(normalized),
 		diagnostics
 	};
 };
-const exportMarkdown = (richText) => normalizeMarkdown(richText);
+const exportMarkdown = (richText) => {
+	if (typeof globalThis.DOMParser === "undefined") return richText;
+	const domDoc = new globalThis.DOMParser().parseFromString(`<body>${richText}</body>`, "text/html");
+	return serializeNode(DOMParser.fromSchema(editorSchema).parse(domDoc.body));
+};
 //#endregion
 //#region src/transforms/representationSwitch.ts
 const importRepresentation = (input, base) => {
 	if (input.format === "rich") {
-		const normalizedHtml = normalizeHtml(exportHtml(input.payload));
+		const normalizedHtml = normalizeHtml(input.payload);
 		return {
 			document: {
 				...base,
 				content: {
-					richText: input.payload,
+					richText: normalizedHtml,
 					html: normalizedHtml
 				}
 			},
@@ -332,7 +831,10 @@ const importRepresentation = (input, base) => {
 		return {
 			document: {
 				...base,
-				content: { richText: result.richText },
+				content: {
+					richText: result.richText,
+					html: result.richText
+				},
 				metadata: {
 					...base.metadata,
 					importedFrom: "markdown"
@@ -395,6 +897,11 @@ const createEditor = (config = {}) => {
 	const history = new EditorHistory();
 	let isDestroyed = false;
 	let currentDocument = createDefaultDocument();
+	const listeners = {
+		change: /* @__PURE__ */ new Set(),
+		selectionchange: /* @__PURE__ */ new Set()
+	};
+	let activeHandler = null;
 	if (config.initialContent) {
 		const initialized = fromInput(config.initialContent, currentDocument);
 		currentDocument = initialized.document;
@@ -407,6 +914,7 @@ const createEditor = (config = {}) => {
 	};
 	const emitChange = () => {
 		config.onChange?.(currentDocument);
+		listeners.change.forEach((cb) => cb());
 	};
 	return {
 		getDocument: () => currentDocument,
@@ -416,6 +924,21 @@ const createEditor = (config = {}) => {
 				document: currentDocument,
 				diagnostics: []
 			};
+			if (!(config.commandCapabilities ? new Set(config.commandCapabilities) : new Set([
+				"bold",
+				"italic",
+				"underline",
+				"heading",
+				"list",
+				"align",
+				"link",
+				"undo",
+				"redo"
+			])).has(commandName)) return {
+				ok: false,
+				document: currentDocument,
+				diagnostics: [createUnknownCommandDiagnostic(commandName)]
+			};
 			const result = executeCommand(registry, commandName, { document: currentDocument }, params);
 			if (commandName === "undo") {
 				const next = history.undo(currentDocument);
@@ -481,141 +1004,27 @@ const createEditor = (config = {}) => {
 		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]
+			listeners.change.clear();
+			listeners.selectionchange.clear();
 		},
-		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]
+		isMarkActive: (name) => activeHandler?.isMarkActive(name) ?? false,
+		getActiveBlockType: () => activeHandler?.getActiveBlockType() ?? "paragraph",
+		on: (event, callback) => {
+			listeners[event].add(callback);
+			return () => {
+				listeners[event].delete(callback);
+			};
 		},
-		em: {
-			parseDOM: [{ tag: "em" }, {
-				tag: "i",
-				getAttrs: () => null
-			}],
-			toDOM: () => ["em", 0]
+		toolbar: config.toolbar,
+		placeholder: config.placeholder,
+		_registerActiveHandler: (handler) => {
+			activeHandler = handler;
 		},
-		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
-			]
+		_triggerSelectionChange: () => {
+			listeners.selectionchange.forEach((cb) => cb());
 		}
-	}
-});
-const editorSchema = createEditorSchema();
+	};
+};
 //#endregion
 //#region src/core/toolbarModel.ts
 const defaultToolbarActions = [
@@ -709,40 +1118,40 @@ const createToolbarIcon = (command, fallback) => {
 };
 const selectOptionLabels = {
 	font: {
-		default: "A",
-		serif: "As",
-		monospace: "Am"
+		default: "Font",
+		serif: "Serif",
+		monospace: "Monospace"
 	},
 	size: {
-		small: "S",
-		normal: "N",
-		large: "L",
-		huge: "XL"
+		normal: "Normal (16px)",
+		small: "Small (12px)",
+		large: "Large (20px)",
+		huge: "Huge (28px)"
 	},
 	header: {
-		normal: "P",
-		h1: "H1",
-		h2: "H2"
+		normal: "Normal Text",
+		h1: "Heading 1",
+		h2: "Heading 2"
 	},
 	script: {
-		normal: "x",
-		sub: "x_",
-		super: "x^"
+		normal: "Script",
+		sub: "Subscript",
+		super: "Superscript"
 	},
 	align: {
-		left: "L",
-		center: "C",
-		right: "R",
-		justify: "J"
+		left: "Align Left",
+		center: "Align Center",
+		right: "Align Right",
+		justify: "Justify"
 	},
 	list: {
-		none: "-",
-		ordered: "1.",
-		bullet: "o"
+		none: "No List",
+		ordered: "Numbered List",
+		bullet: "Bulleted List"
 	},
 	direction: {
-		ltr: "->",
-		rtl: "<-"
+		ltr: "Left-to-Right",
+		rtl: "Right-to-Left"
 	}
 };
 const safeUrl = (value) => {
@@ -1082,11 +1491,13 @@ const createSelect = (format, options, editable, onMutate) => {
 	});
 	return select;
 };
-const buildToolbar = (editable, requestEmbedValue, onMutate) => {
+const buildToolbar = (editable, requestEmbedValue, onMutate, toolbarOption) => {
+	if (toolbarOption === false) return null;
 	const toolbar = document.createElement("div");
 	toolbar.className = "az-rich-editor-toolbar";
 	toolbar.setAttribute("role", "toolbar");
 	toolbar.setAttribute("aria-label", "Rich editor toolbar");
+	const allowed = Array.isArray(toolbarOption) ? new Set(toolbarOption) : null;
 	[
 		{
 			format: "font",
@@ -1099,8 +1510,8 @@ const buildToolbar = (editable, requestEmbedValue, onMutate) => {
 		{
 			format: "size",
 			options: [
-				"small",
 				"normal",
+				"small",
 				"large",
 				"huge"
 			]
@@ -1142,7 +1553,9 @@ const buildToolbar = (editable, requestEmbedValue, onMutate) => {
 			format: "direction",
 			options: ["ltr", "rtl"]
 		}
-	].forEach((config) => toolbar.append(createSelect(config.format, config.options, editable, onMutate)));
+	].forEach((config) => {
+		if (!allowed || allowed.has(config.format)) toolbar.append(createSelect(config.format, config.options, editable, onMutate));
+	});
 	[
 		"bold",
 		"italic",
@@ -1158,10 +1571,12 @@ const buildToolbar = (editable, requestEmbedValue, onMutate) => {
 		"video",
 		"formula",
 		"clean"
-	].forEach((command) => toolbar.append(renderButton(command, editable, requestEmbedValue, onMutate)));
-	return toolbar;
+	].forEach((command) => {
+		if (!allowed || allowed.has(command)) toolbar.append(renderButton(command, editable, requestEmbedValue, onMutate));
+	});
+	return toolbar.childNodes.length > 0 ? toolbar : null;
 };
-const mountRichTextEditor = ({ host, initialHtml, disabled = false, onChange, requestEmbedValue }) => {
+const mountRichTextEditor = ({ host, initialHtml, disabled = false, onChange, requestEmbedValue, toolbar: toolbarOption, placeholder, onSelectionChange }) => {
 	host.innerHTML = "";
 	const wrapper = document.createElement("div");
 	wrapper.className = "az-rich-editor";
@@ -1171,23 +1586,161 @@ const mountRichTextEditor = ({ host, initialHtml, disabled = false, onChange, re
 	editable.setAttribute("role", "textbox");
 	editable.setAttribute("aria-multiline", "true");
 	editable.setAttribute("contenteditable", disabled ? "false" : "true");
-	editable.dataset.placeholder = "Compose an epic...";
+	editable.dataset.placeholder = placeholder ?? "Compose an epic...";
 	editable.innerHTML = initialHtml;
 	const emitChange = () => onChange(editable.innerHTML);
-	const toolbar = buildToolbar(editable, requestEmbedValue, emitChange);
+	const toolbar = buildToolbar(editable, requestEmbedValue, emitChange, toolbarOption);
 	const inputHandler = () => emitChange();
 	editable.addEventListener("input", inputHandler);
-	wrapper.append(toolbar, editable);
+	const keydownHandler = (event) => {
+		const range = getSelectionRange(editable);
+		if (!range) return;
+		if (event.metaKey || event.ctrlKey) {
+			const key = event.key.toLowerCase();
+			if (key === "b") {
+				event.preventDefault();
+				applyButtonCommand("bold", editable, requestEmbedValue);
+				emitChange();
+			} else if (key === "i") {
+				event.preventDefault();
+				applyButtonCommand("italic", editable, requestEmbedValue);
+				emitChange();
+			} else if (key === "u") {
+				event.preventDefault();
+				applyButtonCommand("underline", editable, requestEmbedValue);
+				emitChange();
+			}
+		}
+		if (event.key === "Tab") {
+			if (closestByTag(getBlockElement(range, editable), "li", editable)) {
+				event.preventDefault();
+				applyIndent(editable, range, event.shiftKey ? "-" : "+");
+				emitChange();
+			}
+		}
+	};
+	editable.addEventListener("keydown", keydownHandler);
+	const checkMarkActive = (markName) => {
+		const selection = window.getSelection();
+		if (!selection || selection.rangeCount === 0) return false;
+		const range = selection.getRangeAt(0);
+		if (!editable.contains(range.commonAncestorContainer)) return false;
+		const tags = {
+			strong: ["strong", "b"],
+			bold: ["strong", "b"],
+			em: ["em", "i"],
+			italic: ["em", "i"],
+			underline: ["u"],
+			strike: [
+				"s",
+				"del",
+				"strike"
+			],
+			code: ["code"],
+			link: ["a"]
+		}[markName];
+		if (!tags) return false;
+		let node = range.startContainer;
+		while (node && node !== editable) {
+			if (node instanceof HTMLElement) {
+				const tagName = node.tagName.toLowerCase();
+				if (tags.includes(tagName)) return true;
+				if (markName === "code" && node.style.fontFamily === "monospace") return true;
+			}
+			node = node.parentNode;
+		}
+		return false;
+	};
+	const checkActiveBlockType = () => {
+		const selection = window.getSelection();
+		if (!selection || selection.rangeCount === 0) return "paragraph";
+		const range = selection.getRangeAt(0);
+		if (!editable.contains(range.commonAncestorContainer)) return "paragraph";
+		let node = range.startContainer;
+		while (node && node !== editable) {
+			if (node instanceof HTMLElement) {
+				const tagName = node.tagName.toLowerCase();
+				if (tagName === "h1" || tagName === "h2" || tagName === "h3") return "heading";
+				if (tagName === "blockquote") return "blockquote";
+				if (tagName === "pre") return "code_block";
+				if (tagName === "ol") return "ordered_list";
+				if (tagName === "ul") return "bullet_list";
+			}
+			node = node.parentNode;
+		}
+		return "paragraph";
+	};
+	const updateToolbarStates = () => {
+		if (!toolbar) return;
+		toolbar.querySelectorAll(".az-rich-editor-toolbar-button").forEach((btn) => {
+			const command = btn.getAttribute("aria-label");
+			if (!command) return;
+			let isActive = false;
+			if (command === "Bold") isActive = checkMarkActive("strong");
+			else if (command === "Italic") isActive = checkMarkActive("em");
+			else if (command === "Underline") isActive = checkMarkActive("underline");
+			else if (command === "Strike") isActive = checkMarkActive("strike");
+			else if (command === "Inline code") isActive = checkMarkActive("code");
+			else if (command === "Blockquote") isActive = checkActiveBlockType() === "blockquote";
+			else if (command === "Code block") isActive = checkActiveBlockType() === "code_block";
+			if (isActive) {
+				btn.setAttribute("data-active", "true");
+				btn.classList.add("active");
+			} else {
+				btn.removeAttribute("data-active");
+				btn.classList.remove("active");
+			}
+		});
+		toolbar.querySelectorAll(".az-rich-editor-toolbar-select").forEach((select) => {
+			const label = select.getAttribute("aria-label");
+			if (label === "header") if (checkActiveBlockType() === "heading") {
+				const selection = window.getSelection();
+				if (selection && selection.rangeCount > 0) {
+					const level = getBlockElement(selection.getRangeAt(0), editable).tagName.toLowerCase();
+					if (level === "h1" || level === "h2" || level === "h3") select.value = level;
+					else select.value = "normal";
+				}
+			} else select.value = "normal";
+			else if (label === "align") {
+				const selection = window.getSelection();
+				if (selection && selection.rangeCount > 0) select.value = getBlockElement(selection.getRangeAt(0), editable).style.textAlign || "left";
+			} else if (label === "direction") {
+				const selection = window.getSelection();
+				if (selection && selection.rangeCount > 0) select.value = getBlockElement(selection.getRangeAt(0), editable).getAttribute("dir") || "ltr";
+			}
+		});
+	};
+	const selectionHandler = () => {
+		const selection = window.getSelection();
+		if (selection && selection.rangeCount > 0) {
+			const range = selection.getRangeAt(0);
+			if (editable.contains(range.commonAncestorContainer)) {
+				onSelectionChange?.();
+				updateToolbarStates();
+			}
+		}
+	};
+	document.addEventListener("selectionchange", selectionHandler);
+	if (toolbar) {
+		wrapper.append(toolbar);
+		updateToolbarStates();
+	}
+	wrapper.append(editable);
 	host.append(wrapper);
 	return {
 		destroy: () => {
 			editable.removeEventListener("input", inputHandler);
+			editable.removeEventListener("keydown", keydownHandler);
+			document.removeEventListener("selectionchange", selectionHandler);
 			host.innerHTML = "";
 		},
 		getHtml: () => editable.innerHTML,
 		setHtml: (html) => {
 			editable.innerHTML = html;
-		}
+			updateToolbarStates();
+		},
+		isMarkActive: (markName) => checkMarkActive(markName),
+		getActiveBlockType: () => checkActiveBlockType()
 	};
 };
 //#endregion
@@ -1195,6 +1748,7 @@ const mountRichTextEditor = ({ host, initialHtml, disabled = false, onChange, re
 const createDomAdapter = (editor) => {
 	let target = null;
 	let mountedEditor = null;
+	let unsubscribeChange = null;
 	return {
 		mount: (nextTarget) => {
 			target = nextTarget;
@@ -1204,6 +1758,11 @@ const createDomAdapter = (editor) => {
 				host: nextTarget,
 				initialHtml: editor.export("html").payload,
 				requestEmbedValue: () => null,
+				toolbar: editor.toolbar,
+				placeholder: editor.placeholder,
+				onSelectionChange: () => {
+					editor._triggerSelectionChange?.();
+				},
 				onChange: (html) => {
 					editor.import({
 						format: "html",
@@ -1211,15 +1770,30 @@ const createDomAdapter = (editor) => {
 					});
 				}
 			});
+			editor._registerActiveHandler?.({
+				isMarkActive: (name) => mountedEditor?.isMarkActive(name) ?? false,
+				getActiveBlockType: () => mountedEditor?.getActiveBlockType() ?? "paragraph"
+			});
+			unsubscribeChange = editor.on("change", () => {
+				if (!mountedEditor) return;
+				const nextHtml = editor.export("html").payload;
+				if (mountedEditor.getHtml() !== nextHtml) mountedEditor.setHtml(nextHtml);
+			});
 		},
 		unmount: () => {
 			if (!target) return;
+			unsubscribeChange?.();
+			unsubscribeChange = null;
+			editor._registerActiveHandler?.(null);
 			mountedEditor?.destroy();
 			mountedEditor = null;
 			editor.unmount();
 			target = null;
 		},
 		destroy: () => {
+			unsubscribeChange?.();
+			unsubscribeChange = null;
+			editor._registerActiveHandler?.(null);
 			mountedEditor?.destroy();
 			mountedEditor = null;
 			editor.destroy();
@@ -1229,6 +1803,40 @@ const createDomAdapter = (editor) => {
 };
 //#endregion
 //#region src/adapters/react/useEditorAdapter.tsx
+const EditorContext = createContext(null);
+const useEditor = () => {
+	return useContext(EditorContext);
+};
+const useEditorState = () => {
+	const editor = useContext(EditorContext);
+	if (!editor) throw new Error("useEditorState must be used inside an EditorProvider");
+	const [document, setDocument] = useState(() => editor.getDocument());
+	const [selectionKey, setSelectionKey] = useState(0);
+	useEffect(() => {
+		const unsubChange = editor.on("change", () => {
+			setDocument(editor.getDocument());
+		});
+		const unsubSelection = editor.on("selectionchange", () => {
+			setSelectionKey((k) => k + 1);
+		});
+		return () => {
+			unsubChange();
+			unsubSelection();
+		};
+	}, [editor]);
+	return {
+		editor,
+		document,
+		isMarkActive: useCallback((name) => editor.isMarkActive(name), [editor, selectionKey]),
+		activeBlockType: useCallback(() => editor.getActiveBlockType(), [editor, selectionKey])()
+	};
+};
+function EditorProvider({ editor, children }) {
+	return /* @__PURE__ */ jsx(EditorContext.Provider, {
+		value: editor,
+		children
+	});
+}
 const useEditorAdapter = (config) => {
 	const editor = useMemo(() => createEditor(config), [config]);
 	useEffect(() => () => {
@@ -1236,13 +1844,27 @@ const useEditorAdapter = (config) => {
 	}, [editor]);
 	return editor;
 };
-function RichEditorAdapter({ className, disabled = false, initialContent, onChange, onError, onRequestEmbedValue }) {
-	const editor = useEditorAdapter({
+function RichEditorAdapter({ className, disabled = false, initialContent, onChange, onError, onRequestEmbedValue, toolbar, placeholder, editor: propEditor }) {
+	const contextEditor = useEditor();
+	const fallbackEditor = useEditorAdapter({
 		initialContent,
 		onChange,
-		onError
+		onError,
+		toolbar,
+		placeholder
 	});
+	const editor = propEditor ?? contextEditor ?? fallbackEditor;
 	const hostRef = useRef(null);
+	const mountedRef = useRef(null);
+	useEffect(() => {
+		if (editor._registerActiveHandler) editor._registerActiveHandler({
+			isMarkActive: (name) => mountedRef.current?.isMarkActive(name) ?? false,
+			getActiveBlockType: () => mountedRef.current?.getActiveBlockType() ?? "paragraph"
+		});
+		return () => {
+			editor._registerActiveHandler?.(null);
+		};
+	}, [editor]);
 	useEffect(() => {
 		const host = hostRef.current;
 		if (!host) return;
@@ -1251,6 +1873,11 @@ function RichEditorAdapter({ className, disabled = false, initialContent, onChan
 			initialHtml: editor.export("html").payload,
 			disabled,
 			requestEmbedValue: onRequestEmbedValue,
+			toolbar: toolbar ?? editor.toolbar,
+			placeholder: placeholder ?? editor.placeholder,
+			onSelectionChange: () => {
+				editor._triggerSelectionChange?.();
+			},
 			onChange: (html) => {
 				editor.import({
 					format: "html",
@@ -1258,13 +1885,17 @@ function RichEditorAdapter({ className, disabled = false, initialContent, onChan
 				});
 			}
 		});
+		mountedRef.current = mounted;
 		return () => {
 			mounted.destroy();
+			mountedRef.current = null;
 		};
 	}, [
 		disabled,
 		editor,
-		onRequestEmbedValue
+		onRequestEmbedValue,
+		toolbar,
+		placeholder
 	]);
 	return /* @__PURE__ */ jsx("div", {
 		"aria-label": "Rich editor",
@@ -1273,6 +1904,6 @@ function RichEditorAdapter({ className, disabled = false, initialContent, onChan
 	});
 }
 //#endregion
-export { RichEditorAdapter, createDomAdapter, createEditor, createEditorSchema, defaultToolbarActions, editorMarkNames, editorNodeNames, editorSchema, exportRepresentation, importRepresentation, useEditorAdapter };
+export { EditorContext, EditorProvider, RichEditorAdapter, createDomAdapter, createEditor, createEditorSchema, defaultToolbarActions, editorMarkNames, editorNodeNames, editorSchema, exportRepresentation, importRepresentation, useEditor, useEditorAdapter, useEditorState };
 
 //# sourceMappingURL=index.mjs.map