autumnnote 1.2.1 → 1.4.0

package/dist/autumnnote.umd.js

@@ -428,9 +428,15 @@
 		execCommand("outdent");
 	}
 	/**
-	* G.5 helper: splits a checklist at checkLi, converts it to a <p>,
-	* and keeps items before/after as separate checklists.
-	* @param {HTMLElement} checkLi
+	* Convert a checklist <li> into a paragraph and move any following items into a new checklist.
+	*
+	* Preserves inline markup from the converted item, strips zero-width space anchors,
+	* and replaces empty content with a non‑breaking space. If there are list items
+	* after the converted item they are moved into a new <ul class="an-checklist">
+	* inserted immediately after the original list. The original <li> is removed and
+	* the original list is removed if it becomes empty. Attempts to place the caret
+	* at the start of the newly created <p>.
+	* @param {HTMLElement} checkLi - The checklist `<li>` element to convert to a `<p>`.
 	*/
 	function _checklistItemToP(checkLi) {
 		const checkUl = checkLi.closest(".an-checklist");
@@ -439,7 +445,15 @@
 		const liIndex = allLis.indexOf(checkLi);
 		const afterLis = allLis.slice(liIndex + 1);
 		const p = document.createElement("p");
-		p.textContent = Array.from(checkLi.childNodes).filter((n) => !(n.nodeType === 1 && n.tagName === "INPUT")).map((n) => n.textContent).join("").replace(/\u200B/g, "").trim() || "\xA0";
+		for (const child of checkLi.childNodes) {
+			if (child.nodeType === 1 && child.tagName === "INPUT") continue;
+			p.appendChild(child.cloneNode(true));
+		}
+		p.innerHTML = p.innerHTML.replace(/\u200B/g, "");
+		if (!p.hasChildNodes() || !p.textContent.trim()) {
+			p.innerHTML = "";
+			p.appendChild(document.createTextNode("\xA0"));
+		}
 		if (afterLis.length > 0) {
 			const newUl = document.createElement("ul");
 			newUl.className = "an-checklist";
@@ -470,9 +484,12 @@
 	*/
 	var insertOrderedList = () => execCommand("insertOrderedList");
 	/**
-	* Applies a line-height value to every block-level element that intersects
-	* the current selection.
-	* @param {string} value - unitless multiplier, e.g. '1.5'
+	* Set the line-height on every block-level element that intersects the current selection.
+	*
+	* If the selection is collapsed, the nearest enclosing block element receives the style.
+	* For a non-collapsed selection, all unique block ancestors of text nodes that intersect the range are updated;
+	* if none are found, the nearest block ancestor of the range's common ancestor is updated.
+	* @param {string} value - Line-height value to apply; typically a unitless multiplier (for example, "1.5").
 	*/
 	function lineHeight(value) {
 		const sel = window.getSelection();
@@ -507,9 +524,9 @@
 			return;
 		}
 		const blocks = /* @__PURE__ */ new Set();
-		const iter = document.createNodeIterator(range.commonAncestorContainer, NodeFilter.SHOW_TEXT, null);
+		const iter = document.createTreeWalker(range.commonAncestorContainer, NodeFilter.SHOW_TEXT, { acceptNode: (node) => range.intersectsNode(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP });
 		let textNode;
-		while (textNode = iter.nextNode()) if (range.intersectsNode(textNode)) {
+		while (textNode = iter.nextNode()) {
 			const block = nearestBlock(textNode);
 			if (block) blocks.add(block);
 		}
@@ -591,9 +608,18 @@
 		return !!(code && !code.closest("pre"));
 	}
 	/**
-	* Toggles a task-list at the cursor.
-	* If inside a checklist <li>, converts it (and any other selected items) back to <p> elements.
-	* Otherwise inserts a new <ul class="an-checklist"> with one item per selected line.
+	* Toggle a checklist at the current selection or caret.
+	*
+	* When the selection is inside an existing checklist `<ul class="an-checklist">`,
+	* converts the selected `<li>` items back into `<p>` paragraphs and places the caret
+	* at the start of the first converted paragraph. Otherwise creates a checklist:
+	* - If the selection is collapsed, converts the nearest block-level ancestor (or inserts
+	*   a single checklist item at the editable root) into a checklist with one item containing
+	*   that block's text and places the caret inside the new item.
+	* - If the selection is a range, converts each intersecting block element into one checklist
+	*   item (preserving textual content) and places the caret at the end of the last item.
+	*
+	* Empty or whitespace-only selections do not create a checklist.
 	*/
 	function toggleChecklist() {
 		const sel = window.getSelection();
@@ -652,8 +678,9 @@
 			ul.appendChild(li);
 			if (block && BLOCK_TAGS.has(block.tagName)) block.parentNode.replaceChild(ul, block);
 			else {
-				document.execCommand("insertHTML", false, ul.outerHTML);
-				return;
+				const nativeRange = sel.getRangeAt(0);
+				nativeRange.deleteContents();
+				nativeRange.insertNode(ul);
 			}
 			const textNode = li.lastChild;
 			const nr = document.createRange();
@@ -776,6 +803,34 @@
 			isDisabled
 		};
 	}
+	/**
+	* Global registry for custom buttons registered via AutumnNote.registerButton()
+	* or via a plugin's `buttons` array. Toolbar resolves string names from here.
+	* @type {Map<string, object>}
+	*/
+	var _buttonRegistry = /* @__PURE__ */ new Map();
+	/**
+	* Registers a button definition in the global registry so it can be referenced
+	* by string name in toolbar configuration: `toolbar: [['myBtn', boldBtn]]`.
+	* @param {object} btnDef - Any ToolbarItemDef-compatible object with a `name` string.
+	*/
+	function registerButton(btnDef) {
+		if (!btnDef || typeof btnDef.name !== "string") {
+			console.warn("[AutumnNote] registerButton: btnDef must have a string `name` property.");
+			return;
+		}
+		if (_buttonRegistry.has(btnDef.name)) console.warn(`[AutumnNote] registerButton: overwriting existing button "${btnDef.name}".`);
+		_buttonRegistry.set(btnDef.name, btnDef);
+	}
+	/**
+	* Looks up a button definition by name from the global registry.
+	* Returns undefined when not found.
+	* @param {string} name
+	* @returns {object|undefined}
+	*/
+	function getButton(name) {
+		return _buttonRegistry.get(name);
+	}
 	var boldBtn = btn("bold", "bold", "Bold (Ctrl+B)", () => bold(), () => document.queryCommandState("bold"));
 	var italicBtn = btn("italic", "italic", "Italic (Ctrl+I)", () => italic(), () => document.queryCommandState("italic"));
 	var underlineBtn = btn("underline", "underline", "Underline (Ctrl+U)", () => underline(), () => {
@@ -1332,6 +1387,7 @@
 			replaceAriaLabel: "Replace with",
 			replaceBtn: "Replace",
 			replaceAllBtn: "Replace All",
+			noResults: "No results",
 			close: "×"
 		},
 		shortcutsDialog: {
@@ -1684,6 +1740,7 @@
 				replaceAriaLabel: "Thay thế bằng",
 				replaceBtn: "Thay thế",
 				replaceAllBtn: "Thay thế tất cả",
+				noResults: "Không có kết quả",
 				close: "×"
 			},
 			shortcutsDialog: {
@@ -2013,6 +2070,7 @@
 				replacePlaceholder: "置換後…",
 				replaceAriaLabel: "置換後のテキスト",
 				replaceBtn: "置換",
+				noResults: "結果なし",
 				replaceAllBtn: "すべて置換",
 				close: "×"
 			},
@@ -2343,6 +2401,7 @@
 				replacePlaceholder: "替换为…",
 				replaceAriaLabel: "替换为",
 				replaceBtn: "替换",
+				noResults: "没有结果",
 				replaceAllBtn: "全部替换",
 				close: "×"
 			},
@@ -2673,6 +2732,7 @@
 				replacePlaceholder: "Remplacer par…",
 				replaceAriaLabel: "Remplacer par",
 				replaceBtn: "Remplacer",
+				noResults: "Aucun résultat",
 				replaceAllBtn: "Tout remplacer",
 				close: "×"
 			},
@@ -3003,6 +3063,7 @@
 				replacePlaceholder: "Ersetzen durch…",
 				replaceAriaLabel: "Ersetzen durch",
 				replaceBtn: "Ersetzen",
+				noResults: "Keine Ergebnisse",
 				replaceAllBtn: "Alle ersetzen",
 				close: "×"
 			},
@@ -3333,6 +3394,7 @@
 				replacePlaceholder: "Reemplazar con…",
 				replaceAriaLabel: "Reemplazar con",
 				replaceBtn: "Reemplazar",
+				noResults: "Sin resultados",
 				replaceAllBtn: "Reemplazar todo",
 				close: "×"
 			},
@@ -3663,6 +3725,7 @@
 				replacePlaceholder: "바꿀 내용…",
 				replaceAriaLabel: "바꿀 내용",
 				replaceBtn: "바꾸기",
+				noResults: "결과 없음",
 				replaceAllBtn: "모두 바꾸기",
 				close: "×"
 			},
@@ -3883,8 +3946,10 @@
 		"object",
 		"embed",
 		"form",
-		"button"
+		"base"
 	];
+	/** Tags whose element wrapper is stripped but content (child nodes) is preserved. */
+	var UNWRAP_TAGS = new Set(["button"]);
 	/** Attributes whose values must be sanitised as URLs. */
 	var URL_ATTRS = [
 		"href",
@@ -3902,60 +3967,61 @@
 		"player.vimeo.com"
 	]);
 	/**
-	* Sanitises an HTML string by removing dangerous elements and attributes.
-	* Uses DOMParser so the sanitisation follows normal browser parsing rules —
-	* no regex shortcuts that can be bypassed by encoding tricks.
+	* Produce a sanitized HTML string with dangerous elements and attributes removed.
 	*
-	* - Strips PROHIBITED_TAGS (script, style, iframe, object, embed, form, button)
-	* - Allows input[type="checkbox"] only inside ul.an-checklist li; removes all other <input>
-	* - Removes all on* event-handler attributes
-	* - Rejects javascript: and vbscript: URLs in URL attributes
-	* - Rejects data: URIs everywhere except img[src] (base64 uploads)
+	* Removes disallowed tags and wrappers, strips event-handler attributes, rejects
+	* `javascript:`/`vbscript:` URLs and most `data:` URIs, restricts iframe `src`
+	* to trusted hosts when enabled, and permits only checklist checkboxes as inputs.
 	*
-	* @param {string} html
-	* @returns {string}
+	* @param {string} html - HTML fragment to sanitize.
+	* @param {Object} [options]
+	* @param {boolean} [options.allowIframes=false] - If true, `iframe` elements are not removed but their `src` is restricted to trusted hosts and `srcdoc` is removed.
+	* @returns {string} The sanitized HTML fragment.
 	*/
 	function sanitiseHTML(html, { allowIframes = false } = {}) {
 		const doc = new DOMParser().parseFromString(`<body>${html || ""}</body>`, "text/html");
-		(allowIframes ? PROHIBITED_TAGS.filter((t) => t !== "iframe") : PROHIBITED_TAGS).forEach((tag) => {
-			doc.querySelectorAll(tag).forEach((el) => el.remove());
-		});
-		doc.querySelectorAll("*").forEach((el) => {
-			Array.from(el.attributes).forEach((attr) => {
+		const allElements = Array.from(doc.querySelectorAll("*"));
+		const prohibited = new Set(allowIframes ? PROHIBITED_TAGS.filter((t) => t !== "iframe") : PROHIBITED_TAGS);
+		for (const el of allElements) {
+			const tag = el.tagName.toLowerCase();
+			if (UNWRAP_TAGS.has(tag)) {
+				el.replaceWith(...el.childNodes);
+				continue;
+			}
+			if (prohibited.has(tag)) {
+				el.remove();
+				continue;
+			}
+			for (const attr of Array.from(el.attributes)) {
 				if (attr.name.startsWith("on")) {
 					el.removeAttribute(attr.name);
-					return;
+					continue;
 				}
 				if (URL_ATTRS.includes(attr.name)) {
 					const val = attr.value.trim();
 					if (/^(javascript|vbscript):/i.test(val)) {
 						el.removeAttribute(attr.name);
-						return;
+						continue;
 					}
 					if (/^data:/i.test(val) && !(attr.name === "src" && el.tagName === "IMG")) el.removeAttribute(attr.name);
 				}
 				if (el.tagName === "IFRAME") {
 					if (attr.name === "srcdoc") {
 						el.removeAttribute(attr.name);
-						return;
-					}
-					if (attr.name === "src") {
-						if (!isTrustedIframeSrc(attr.value)) el.removeAttribute(attr.name);
-						return;
+						continue;
 					}
+					if (attr.name === "src" && !isTrustedIframeSrc(attr.value)) el.removeAttribute(attr.name);
 				}
-			});
-		});
-		doc.querySelectorAll("input").forEach((el) => {
-			if (!(el.closest("ul.an-checklist") !== null && el.closest("li") !== null) || el.getAttribute("type") !== "checkbox") el.remove();
-			else Array.from(el.attributes).forEach((attr) => {
-				if (![
+			}
+			if (tag === "input") {
+				if (!(el.closest("ul.an-checklist") !== null && el.closest("li") !== null) || el.getAttribute("type") !== "checkbox") el.remove();
+				else for (const attr of Array.from(el.attributes)) if (![
 					"type",
 					"checked",
 					"contenteditable"
 				].includes(attr.name)) el.removeAttribute(attr.name);
-			});
-		});
+			}
+		}
 		return doc.body.innerHTML;
 	}
 	/**
@@ -4156,7 +4222,18 @@
 				const sel = window.getSelection();
 				sel.removeAllRanges();
 				sel.addRange(range);
-			} catch (_) {}
+			} catch (_) {
+				try {
+					const fb = document.createRange();
+					fb.setStart(this.editable, 0);
+					fb.collapse(true);
+					const s = window.getSelection();
+					if (s) {
+						s.removeAllRanges();
+						s.addRange(fb);
+					}
+				} catch (_2) {}
+			}
 		}
 		_savePoint() {
 			if (this.stackOffset < this.stack.length - 1) this.stack = this.stack.slice(0, this.stackOffset + 1);
@@ -4183,6 +4260,10 @@
 		* @returns {{ html: string, images: Object<string,string> }}
 		*/
 		_tokenizeImages(html) {
+			if (!html.includes("data:")) return {
+				html,
+				images: {}
+			};
 			const images = {};
 			let index = 0;
 			return {
@@ -4254,11 +4335,12 @@
 	* Inspired by Summernote's table handling
 	*/
 	/**
-	* Creates a table element with the specified dimensions.
-	* @param {number} cols
-	* @param {number} rows
-	* @param {{ headerRow?: boolean }} [opts]
-	* @returns {HTMLTableElement}
+	* Build an HTML table with the given number of columns and rows, optionally including a header row.
+	* @param {number} cols - Number of columns in each row.
+	* @param {number} rows - Total number of rows to create (including header when `headerRow` is true).
+	* @param {{ headerRow?: boolean }} [opts] - Options object.
+	* @param {boolean} [opts.headerRow=false] - When true and `rows > 0`, creates a header row (`<thead>`) plus body rows for the remainder.
+	* @returns {HTMLTableElement} The constructed `<table>` element with a `<tbody>` and optional `<thead>`; each cell contains a `<br>` placeholder.
 	*/
 	function createTable(cols, rows, opts = {}) {
 		const { headerRow = false } = opts;
@@ -4267,7 +4349,7 @@
 			const thead = createElement("thead");
 			const tr = createElement("tr");
 			for (let c = 0; c < cols; c++) {
-				const th = createElement("th", {}, ["\xA0"]);
+				const th = createElement("th", {}, [document.createElement("br")]);
 				tr.appendChild(th);
 			}
 			thead.appendChild(tr);
@@ -4279,7 +4361,7 @@
 		for (let r = 0; r < bodyRows; r++) {
 			const tr = createElement("tr");
 			for (let c = 0; c < cols; c++) {
-				const td = createElement("td", {}, ["\xA0"]);
+				const td = createElement("td", {}, [document.createElement("br")]);
 				tr.appendChild(td);
 			}
 			tbody.appendChild(tr);
@@ -4287,13 +4369,52 @@
 		return table;
 	}
 	/**
-	* Inserts a table at the current cursor position.
-	* @param {number} cols
-	* @param {number} rows
-	* @param {{ headerRow?: boolean }} [opts]
+	* Insert a table at the current selection and place the caret into its first cell.
+	* @param {number} cols - Number of columns for the new table.
+	* @param {number} rows - Number of rows for the new table.
+	* @param {{ headerRow?: boolean }} [opts] - Options for table creation.
+	* @param {boolean} [opts.headerRow=false] - If true, include a header row as the first row.
 	*/
 	function insertTable(cols, rows, opts = {}) {
-		execCommand("insertHTML", createTable(cols, rows, opts).outerHTML);
+		if (cols <= 0 || rows <= 0) return;
+		const table = createTable(cols, rows, opts);
+		const sel = window.getSelection();
+		if (!sel || sel.rangeCount === 0) return;
+		const range = sel.getRangeAt(0);
+		range.deleteContents();
+		const BLOCK = new Set([
+			"P",
+			"DIV",
+			"H1",
+			"H2",
+			"H3",
+			"H4",
+			"H5",
+			"H6",
+			"BLOCKQUOTE",
+			"LI",
+			"PRE"
+		]);
+		let anchor = range.startContainer;
+		if (anchor.nodeType === 3) anchor = anchor.parentElement;
+		while (anchor && !BLOCK.has(anchor.tagName?.toUpperCase()) && anchor.parentElement) anchor = anchor.parentElement;
+		if (anchor && BLOCK.has(anchor.tagName?.toUpperCase()) && anchor.parentNode) {
+			anchor.after(table);
+			if (!table.nextElementSibling) {
+				const p = document.createElement("p");
+				p.appendChild(document.createElement("br"));
+				table.after(p);
+			}
+			if (!anchor.textContent.trim() && !anchor.querySelector("img, video, table")) anchor.remove();
+		} else range.insertNode(table);
+		const firstCell = table.querySelector("td, th");
+		if (firstCell) {
+			const nr = document.createRange();
+			nr.setStart(firstCell, 0);
+			nr.collapse(true);
+			sel.removeAllRanges();
+			sel.addRange(nr);
+		}
 	}
 	//#endregion
 	//#region src/js/core/key.js
@@ -4508,7 +4629,7 @@
 			if (para && para.nodeName.toUpperCase() === "PRE") {
 				if (event.shiftKey) return false;
 				event.preventDefault();
-				execCommand("insertText", "    ");
+				execCommand("insertText", " ".repeat(options.tabSize || 4));
 				return true;
 			}
 			if (options.tabSize) {
@@ -4601,6 +4722,11 @@
 				return true;
 			}
 			const para = closestPara(range.sc, editable);
+			if (para && para.nodeName.toUpperCase() === "PRE") {
+				event.preventDefault();
+				execCommand("insertText", "\n");
+				return true;
+			}
 			if (para && para.nodeName.toUpperCase() === "BLOCKQUOTE") {
 				const native = range.toNativeRange();
 				native.setEnd(para, para.childNodes.length);
@@ -4634,11 +4760,22 @@
 	function htmlToMarkdown(html) {
 		return _domToMd(new DOMParser().parseFromString(`<body>${html || ""}</body>`, "text/html").body).replace(/\n{3,}/g, "\n\n").trim();
 	}
-	function _domToMd(node) {
+	/**
+	* Convert a DOM node subtree into Markdown.
+	*
+	* Recursively produces a Markdown string representing the given DOM node and its descendants,
+	* handling common HTML constructs such as paragraphs, headings, lists (with nested indentation),
+	* blockquotes, fenced and inline code, links, images, tables, horizontal rules, and basic inline emphasis.
+	*
+	* @param {Node} node - The DOM node to convert.
+	* @param {number} [depth=0] - Current nesting depth used to indent nested list items.
+	* @returns {string} The Markdown representation of the node subtree.
+	*/
+	function _domToMd(node, depth = 0) {
 		if (node.nodeType === 3) return node.textContent.replace(/\s+/g, " ");
 		if (node.nodeType !== 1) return "";
 		const tag = node.nodeName.toLowerCase();
-		const inner = () => Array.from(node.childNodes).map(_domToMd).join("");
+		const inner = () => Array.from(node.childNodes).map((n) => _domToMd(n, depth)).join("");
 		switch (tag) {
 			case "p":
 			case "div": return `\n\n${inner()}\n\n`;
@@ -4678,12 +4815,16 @@
 			case "ul": {
 				const items = Array.from(node.querySelectorAll(":scope > li"));
 				if (!items.length) return inner();
-				return `\n\n${items.map((li) => `- ${_domToMd(li).trim()}`).join("\n")}\n\n`;
+				const indent = "  ".repeat(depth);
+				const lines = items.map((li) => `${indent}- ${_domToMd(li, depth + 1).trim()}`).join("\n");
+				return depth === 0 ? `\n\n${lines}\n\n` : `\n${lines}`;
 			}
 			case "ol": {
 				const items = Array.from(node.querySelectorAll(":scope > li"));
 				if (!items.length) return inner();
-				return `\n\n${items.map((li, i) => `${i + 1}. ${_domToMd(li).trim()}`).join("\n")}\n\n`;
+				const indent = "  ".repeat(depth);
+				const lines = items.map((li, i) => `${indent}${i + 1}. ${_domToMd(li, depth + 1).trim()}`).join("\n");
+				return depth === 0 ? `\n\n${lines}\n\n` : `\n${lines}`;
 			}
 			case "li": return inner();
 			case "hr": return "\n\n---\n\n";
@@ -4707,12 +4848,15 @@
 		}
 	}
 	/**
-	* Returns true if the text contains recognisable Markdown patterns.
-	* @param {string} text
-	* @returns {boolean}
+	* Detects whether a string likely contains Markdown syntax.
+	*
+	* Checks for common Markdown constructs such as ATX headings, unordered or
+	* ordered list items, blockquotes, fenced code blocks, and bold emphasis.
+	* @param {string} text - Input text to inspect for Markdown patterns.
+	* @returns {boolean} `true` if any Markdown-like pattern is present, `false` otherwise.
 	*/
 	function isMarkdown(text) {
-		return /^#{1,6} \S|^\s*[-*+] \S|^\s*\d+\. \S|^> \S|\*{2}.+?\*{2}|^```/m.test(text);
+		return /^#{1,6} \S|^\s*[-*+] \S|^\s*\d+\. \S|^> \S|^```|^\*{2}.+?\*{2}/m.test(text);
 	}
 	/**
 	* Converts a Markdown string to an HTML string.
@@ -5386,6 +5530,8 @@
 	* Toolbar.js - Builds and manages the editor toolbar UI
 	* Inspired by Summernote's Toolbar module — rewritten without jQuery
 	*/
+	/** Resolve a toolbar item: string → registry lookup, object → pass-through. */
+	var _resolveBtn = (item) => typeof item === "string" ? getButton(item) : item;
 	var _faPageLevelReady = null;
 	var _S$1 = "stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"";
 	var _svgWrap = (paths) => `<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" ${_S$1} style="display:block">${paths}</svg>`;
@@ -5475,15 +5621,19 @@
 			this._disposers = [];
 			/** @type {Array<() => void>} closers for all open color picker popups */
 			this._colorPickerClosers = [];
+			/** @type {number|null} rAF handle for debounced refresh */
+			this._refreshRaf = null;
 		}
 		initialize() {
 			this.el = createElement("div", { class: "an-toolbar" });
 			this._faReady = this._detectFontAwesome();
 			this._buildButtons();
-			this._btnMap = new Map((this.options.toolbar || []).flat().map((b) => [b.name, b]));
+			this._btnMap = new Map((this.options.toolbar || []).flat().map(_resolveBtn).filter(Boolean).map((b) => [b.name, b]));
 			return this;
 		}
 		destroy() {
+			if (this._refreshRaf) cancelAnimationFrame(this._refreshRaf);
+			this._refreshRaf = null;
 			this._disposers.forEach((d) => d());
 			this._disposers = [];
 			if (this.el && this.el.parentNode) this.el.parentNode.removeChild(this.el);
@@ -5494,7 +5644,12 @@
 			const fragment = document.createDocumentFragment();
 			toolbar.forEach((group) => {
 				const groupEl = createElement("div", { class: "an-btn-group" });
-				group.forEach((btnDef) => {
+				group.forEach((item) => {
+					const btnDef = _resolveBtn(item);
+					if (!btnDef) {
+						console.warn(`[AutumnNote] Toolbar: button "${item}" not found in registry. Skipped.`);
+						return;
+					}
 					let el;
 					if (btnDef.type === "select") el = this._createSelect(btnDef);
 					else if (btnDef.type === "grid") el = this._createGridPicker(btnDef);
@@ -5879,6 +6034,13 @@
 			return _faPageLevelReady;
 		}
 		refresh() {
+			if (this._refreshRaf) cancelAnimationFrame(this._refreshRaf);
+			this._refreshRaf = requestAnimationFrame(() => {
+				this._refreshRaf = null;
+				this._doRefresh();
+			});
+		}
+		_doRefresh() {
 			if (!this.el) return;
 			const btnMap = this._btnMap || /* @__PURE__ */ new Map();
 			this.el.querySelectorAll("button[data-btn]").forEach((btn) => {
@@ -5907,6 +6069,24 @@
 		hide() {
 			if (this.el) this.el.style.display = "none";
 		}
+		/**
+		* Tears down and re-renders the toolbar in-place.
+		* Call after registering new buttons post-create via context.use(plugin)
+		* or AutumnNote.registerButton() to make them appear in the toolbar.
+		*/
+		rebuild() {
+			if (this._refreshRaf) {
+				cancelAnimationFrame(this._refreshRaf);
+				this._refreshRaf = null;
+			}
+			this._disposers.forEach((d) => d());
+			this._disposers = [];
+			if (this.el) this.el.innerHTML = "";
+			this._faReady = this._detectFontAwesome();
+			this._buildButtons();
+			this._btnMap = new Map((this.options.toolbar || []).flat().map(_resolveBtn).filter(Boolean).map((b) => [b.name, b]));
+			this.refresh();
+		}
 	};
 	//#endregion
 	//#region src/js/module/Statusbar.js
@@ -6056,7 +6236,7 @@
 		}
 		update() {
 			if (!this._wordCountEl || !this._charCountEl) return;
-			const text = this.context.layoutInfo.editable.innerText || "";
+			const text = this.context.layoutInfo.editable.textContent || "";
 			const words = _countWords(text);
 			const chars = text.replace(/\n/g, "").length;
 			const maxWords = this.options.maxWords || 0;
@@ -6251,7 +6431,7 @@
 				event.preventDefault();
 				const raw = clipboardData.getData("text/html");
 				const isWordContent = /<[a-z]+:[a-z]/i.test(raw) || /class="Mso/i.test(raw) || /\bmso-/i.test(raw);
-				const isSocialContent = /\bdata-testid\b/.test(raw) || /class="[^"]*\b(?:x[a-z0-9]{6,}|r-[a-z0-9]{3,})\b/.test(raw);
+				const isSocialContent = /class="[^"]*\b(?:x[a-z0-9]{6,}|r-[a-z0-9]{3,})\b/.test(raw);
 				let html = raw;
 				if (isWordContent) html = this._cleanWordHtml(html);
 				else if (isSocialContent) html = this._cleanSocialHtml(html);
@@ -6353,7 +6533,7 @@
 		*/
 		_dataUrlToBlob(dataUrl) {
 			const [header, b64] = dataUrl.split(",");
-			const mime = header.match(/:(.*?);/)[1];
+			const mime = header.match(/:(.*?);/)?.[1] ?? "image/png";
 			const binary = atob(b64);
 			const arr = new Uint8Array(binary.length);
 			for (let i = 0; i < binary.length; i++) arr[i] = binary.charCodeAt(i);
@@ -7359,6 +7539,7 @@
 		_select(img) {
 			if (this._activeImg && this._activeImg !== img) this._activeImg.classList.remove("an-image-selected");
 			this._activeImg = img;
+			this._lastOverlayPos = null;
 			img.classList.add("an-image-selected");
 			this._updateOverlayPosition();
 			this._overlay.style.display = "block";
@@ -7382,6 +7563,14 @@
 			const offsetParent = this._overlay.offsetParent || this._container;
 			const containerRect = offsetParent.getBoundingClientRect();
 			const rect = this._activeImg.getBoundingClientRect();
+			const p = this._lastOverlayPos;
+			if (p && p.l === rect.left && p.t === rect.top && p.w === rect.width && p.h === rect.height) return;
+			this._lastOverlayPos = {
+				l: rect.left,
+				t: rect.top,
+				w: rect.width,
+				h: rect.height
+			};
 			const left = rect.left - containerRect.left + offsetParent.scrollLeft;
 			const top = rect.top - containerRect.top + offsetParent.scrollTop;
 			this._overlay.style.left = `${left}px`;
@@ -13080,7 +13269,7 @@
 						cells.forEach((cell) => {
 							cell.classList.toggle("active", +cell.dataset.row <= rows && +cell.dataset.col <= cols);
 						});
-						labelEl.textContent = rows && cols ? `${cols} × ${rows}` : this.context.locale.contextMenu.table || "Insert Table";
+						labelEl.textContent = rows && cols ? `${rows} × ${cols}` : this.context.locale.contextMenu.table || "Insert Table";
 					};
 					panel.appendChild(gridEl);
 					panel.appendChild(labelEl);
@@ -13720,7 +13909,6 @@
 			if (!editable) return;
 			const rawMatches = this._findRawMatches(query, editable);
 			if (rawMatches.length === 0) return;
-			this._currentIndex = 0;
 			for (let i = rawMatches.length - 1; i >= 0; i--) {
 				const { node, start, end } = rawMatches[i];
 				try {
@@ -13737,6 +13925,7 @@
 			}
 			this._matches.reverse();
 			this._matches = this._matches.filter((m) => m.mark);
+			this._currentIndex = 0;
 			if (this._matches.length === 0) return;
 			if (this._matches[0] && this._matches[0].mark) {
 				this._matches[0].mark.className = "an-highlight an-highlight-current";
@@ -13762,12 +13951,13 @@
 				this._lastCaseSensitive = this._caseSensitive;
 			}
 			const re = this._queryRegex;
+			const MAX_RESULTS = 500;
 			const walker = document.createTreeWalker(root, 4);
 			let node;
-			while (node = walker.nextNode()) {
+			while ((node = walker.nextNode()) && results.length < MAX_RESULTS) {
 				re.lastIndex = 0;
 				let m;
-				while ((m = re.exec(node.textContent)) !== null) results.push({
+				while ((m = re.exec(node.textContent)) !== null && results.length < MAX_RESULTS) results.push({
 					node,
 					start: m.index,
 					end: m.index + m[0].length
@@ -13854,7 +14044,7 @@
 			const total = this._matches.length;
 			if (total === 0) {
 				const query = this._findInput ? this._findInput.value : "";
-				this._counterEl.textContent = query ? "No results" : "";
+				this._counterEl.textContent = query ? this.context.locale.findReplace.noResults : "";
 			} else this._counterEl.textContent = `${this._currentIndex + 1} / ${total}`;
 		}
 	};
@@ -14053,17 +14243,33 @@
 					e.preventDefault();
 					e.stopPropagation();
 					this._startHandleDrag(e, id);
-				}));
+				}), on(h, "touchstart", (e) => {
+					e.preventDefault();
+					e.stopPropagation();
+					this._startHandleDrag({
+						clientX: e.touches[0].clientX,
+						clientY: e.touches[0].clientY
+					}, id);
+				}, { passive: false }));
 				this._handles[id] = h;
 				cropBox.appendChild(h);
 			});
 			this._disposers.push(on(cropBox, "mousedown", (e) => {
-				if (e.target !== cropBox && e.target !== grid && !(e.target.tagName === "DIV" && !e.target.className.includes("handle"))) return;
-				if (e.target.className && e.target.className.includes("an-crop-handle")) return;
+				if (e.target.classList.contains("an-crop-handle")) return;
+				if (e.target !== cropBox && e.target !== grid) return;
 				e.preventDefault();
 				e.stopPropagation();
 				this._startBoxMove(e);
-			}));
+			}), on(cropBox, "touchstart", (e) => {
+				if (e.target.classList.contains("an-crop-handle")) return;
+				if (e.target !== cropBox && e.target !== grid) return;
+				e.preventDefault();
+				e.stopPropagation();
+				this._startBoxMove({
+					clientX: e.touches[0].clientX,
+					clientY: e.touches[0].clientY
+				});
+			}, { passive: false }));
 			const infoEl = document.createElement("div");
 			infoEl.className = "an-crop-info";
 			infoEl.style.cssText = `
@@ -14221,15 +14427,26 @@
 		* @param {(e: MouseEvent) => void} onMove
 		*/
 		_attachDocDrag(onMove) {
+			const onTouchMove = (e) => {
+				e.preventDefault();
+				onMove({
+					clientX: e.touches[0].clientX,
+					clientY: e.touches[0].clientY
+				});
+			};
 			const cleanup = () => {
 				document.removeEventListener("mousemove", onMove);
 				document.removeEventListener("mouseup", cleanup);
+				document.removeEventListener("touchmove", onTouchMove);
+				document.removeEventListener("touchend", cleanup);
 				document.body.style.userSelect = "";
 				document.body.style.cursor = "";
 			};
 			document.body.style.userSelect = "none";
 			document.addEventListener("mousemove", onMove);
 			document.addEventListener("mouseup", cleanup, { once: true });
+			document.addEventListener("touchmove", onTouchMove, { passive: false });
+			document.addEventListener("touchend", cleanup, { once: true });
 		}
 		_bindEsc() {
 			const handler = (e) => {
@@ -14270,7 +14487,7 @@
 				height: natH
 			}, w, h);
 			if (!canvas) {
-				window.alert("Cannot crop this image: the image server does not allow cross-origin access.\nUpload the image directly to use the crop tool.");
+				this._showCropError("Cannot crop this image: the image server does not allow cross-origin access. Upload the image directly to use the crop tool.");
 				this._close(false);
 				return;
 			}
@@ -14287,6 +14504,37 @@
 			this.context.invoke("imageResizer.updateOverlay");
 		}
 		/**
+		* Show a non-blocking inline error banner appended to document.body.
+		* Auto-dismisses after 4 seconds.
+		* @param {string} msg
+		*/
+		_showCropError(msg) {
+			const banner = document.createElement("div");
+			banner.setAttribute("role", "alert");
+			banner.style.cssText = [
+				"position:fixed",
+				"bottom:24px",
+				"left:50%",
+				"transform:translateX(-50%)",
+				"z-index:10200",
+				"max-width:420px",
+				"width:max-content",
+				"background:#7f1d1d",
+				"color:#fecaca",
+				"border:1px solid #b91c1c",
+				"border-radius:8px",
+				"padding:12px 18px",
+				"font:13px/1.5 system-ui,sans-serif",
+				"box-shadow:0 4px 16px rgba(0,0,0,.4)",
+				"pointer-events:auto"
+			].join(";");
+			banner.textContent = msg;
+			document.body.appendChild(banner);
+			setTimeout(() => {
+				if (banner.parentNode) banner.parentNode.removeChild(banner);
+			}, 4e3);
+		}
+		/**
 		* Remove all overlay DOM elements and reset state.
 		* @param {boolean} _committed - reserved for future use
 		*/
@@ -14701,6 +14949,16 @@
 			if (!editable) return;
 			editable.focus();
 			document.execCommand("removeFormat");
+			const sel = window.getSelection();
+			if (sel && sel.rangeCount > 0 && !sel.getRangeAt(0).collapsed) {
+				const range = sel.getRangeAt(0);
+				const ancestor = range.commonAncestorContainer;
+				const root = ancestor.nodeType === 1 ? ancestor : ancestor.parentElement;
+				if (root) {
+					const candidates = [root, ...root.querySelectorAll("[style]")];
+					for (const el of candidates) if (el.hasAttribute("style") && range.intersectsNode(el)) el.removeAttribute("style");
+				}
+			}
 			ctx.invoke("editor.afterCommand");
 		},
 		inlineCode: (ctx) => ctx.invoke("editor.inlineCode")
@@ -14814,6 +15072,7 @@
 			}
 			document.body.appendChild(el);
 			this._el = el;
+			this._btnCache = Array.from(el.querySelectorAll(".an-bubble-btn"));
 		}
 		_buildColorPicker() {
 			const picker = document.createElement("div");
@@ -14899,8 +15158,13 @@
 			editable.focus();
 			const sel = window.getSelection();
 			sel.removeAllRanges();
-			sel.addRange(this._savedRange.cloneRange());
-			document.execCommand(type, false, color);
+			try {
+				sel.addRange(this._savedRange.cloneRange());
+			} catch (_) {
+				return;
+			}
+			const cmd = type === "hiliteColor" ? "hiliteColor" : type;
+			if (!document.execCommand(cmd, false, color) && cmd === "hiliteColor") document.execCommand("backColor", false, color);
 			this.context.invoke("editor.afterCommand");
 			const name = type === "hiliteColor" ? "hiliteColor" : "foreColor";
 			const btn = this._el && this._el.querySelector(`[data-name="${name}"]`);
@@ -14935,8 +15199,8 @@
 			this._closeColorPicker();
 		}
 		_syncActive() {
-			if (!this._el) return;
-			this._el.querySelectorAll(".an-bubble-btn").forEach((btn) => {
+			if (!this._btnCache) return;
+			this._btnCache.forEach((btn) => {
 				const activeFn = _ACTIVE[btn.dataset.name];
 				btn.classList.toggle("an-active", !!(activeFn && activeFn()));
 			});
@@ -15083,14 +15347,23 @@
 			const el = document.createElement("div");
 			el.className = "an-mention-dropdown";
 			el.setAttribute("role", "listbox");
+			el.addEventListener("mousedown", (e) => e.preventDefault());
+			el.addEventListener("click", (e) => {
+				const item = e.target.closest(".an-mention-item");
+				if (item) this._select(+item.dataset.index);
+			});
+			el.addEventListener("mousemove", (e) => {
+				const item = e.target.closest(".an-mention-item");
+				if (item) this._highlightItem(+item.dataset.index);
+			});
 			document.body.appendChild(el);
 			this._dropdown = el;
 		}
 		_renderItems(items) {
 			const dd = this._dropdown;
-			dd.innerHTML = "";
 			this._items = items.slice(0, this._cfg.maxResults);
 			this._activeIndex = this._items.length > 0 ? 0 : -1;
+			const frag = document.createDocumentFragment();
 			this._items.forEach((item, i) => {
 				const li = document.createElement("div");
 				li.className = "an-mention-item";
@@ -15106,10 +15379,10 @@
 				const label = document.createElement("span");
 				label.textContent = item.label;
 				li.appendChild(label);
-				li.addEventListener("mousedown", (e) => e.preventDefault());
-				li.addEventListener("click", () => this._select(i));
-				dd.appendChild(li);
+				frag.appendChild(li);
 			});
+			dd.innerHTML = "";
+			dd.appendChild(frag);
 			this._highlightItem(this._activeIndex);
 		}
 		_highlightItem(index) {
@@ -15261,6 +15534,8 @@
 	*/
 	/** Module registry shared across all Context instances (populated via AutumnNote.registerModule). */
 	var _customModules = /* @__PURE__ */ new Map();
+	/** Global plugin registry (populated via AutumnNote.use()). Applied to every new Context. */
+	var _globalPlugins = /* @__PURE__ */ new Map();
 	var Context = class {
 		/**
 		* @param {HTMLElement} targetEl - The element to replace with the editor
@@ -15277,6 +15552,8 @@
 			this._listeners = /* @__PURE__ */ new Map();
 			/** @type {Map<string, object>} */
 			this._modules = /* @__PURE__ */ new Map();
+			/** @type {Map<string, { plugin: object, publicApi: * }>} */
+			this._plugins = /* @__PURE__ */ new Map();
 			this._disposers = [];
 			this._alive = false;
 		}
@@ -15299,6 +15576,7 @@
 			if (this.options.focus) editable.focus();
 			this._alive = true;
 			this.invoke("toolbar.refresh");
+			this._applyGlobalPlugins();
 			if (typeof this.options.onInit === "function") this.options.onInit(this);
 			return this;
 		}
@@ -15350,6 +15628,46 @@
 			this._modules.set(name, instance);
 			return this;
 		}
+		/**
+		* Installs a plugin on this editor instance.
+		* If called after create(), buttons are registered immediately but the toolbar
+		* must be rebuilt via ctx.invoke('toolbar.rebuild') to render new buttons.
+		* @param {object} plugin - { name, version?, buttons?, install?, uninstall? }
+		* @param {object} [options] - Forwarded to plugin.install(context, options)
+		* @returns {this}
+		*/
+		use(plugin, options = {}) {
+			if (Array.isArray(plugin.buttons)) plugin.buttons.forEach((b) => registerButton(b));
+			this._installPlugin(plugin, options);
+			return this;
+		}
+		/**
+		* Returns the public API returned by plugin.install(), or null.
+		* @param {string} name
+		* @returns {*}
+		*/
+		getPlugin(name) {
+			return this._plugins.get(name)?.publicApi ?? null;
+		}
+		_installPlugin(plugin, pluginOptions = {}) {
+			const { name } = plugin;
+			if (!name || typeof name !== "string") {
+				console.warn("[AutumnNote] Plugin must have a string `name` property.");
+				return;
+			}
+			if (this._plugins.has(name)) {
+				console.warn(`[AutumnNote] Plugin "${name}" already installed on this instance. Skipping.`);
+				return;
+			}
+			const publicApi = typeof plugin.install === "function" ? plugin.install(this, pluginOptions) ?? null : null;
+			this._plugins.set(name, {
+				plugin,
+				publicApi
+			});
+		}
+		_applyGlobalPlugins() {
+			for (const { plugin, options } of _globalPlugins.values()) this._installPlugin(plugin, options);
+		}
 		_bindEditorEvents(editable) {
 			const d0 = on(editable, "input", () => this._syncToTarget());
 			const d1 = on(editable, "focus", () => {
@@ -15600,6 +15918,10 @@
 				if (typeof module.destroy === "function") module.destroy();
 			});
 			this._modules.clear();
+			for (const { plugin } of this._plugins.values()) if (typeof plugin.uninstall === "function") try {
+				plugin.uninstall(this);
+			} catch (_) {}
+			this._plugins.clear();
 			this._disposers.forEach((d) => d());
 			this._disposers = [];
 			const container = this.layoutInfo.container;
@@ -15668,7 +15990,27 @@
 		registerModule(name, ModuleClass) {
 			_customModules.set(name, ModuleClass);
 		},
-		version: "1.1.1"
+		use(plugin, options = {}) {
+			if (!plugin || typeof plugin.name !== "string") throw new TypeError("[AutumnNote] AutumnNote.use: plugin must have a string `name` property.");
+			if (_globalPlugins.has(plugin.name)) {
+				console.warn(`[AutumnNote] Plugin "${plugin.name}" already registered globally. Skipping.`);
+				return this;
+			}
+			if (Array.isArray(plugin.buttons)) plugin.buttons.forEach((b) => registerButton(b));
+			_globalPlugins.set(plugin.name, {
+				plugin,
+				options
+			});
+			return this;
+		},
+		hasPlugin(name) {
+			return _globalPlugins.has(name);
+		},
+		registerButton(btnDef) {
+			registerButton(btnDef);
+			return this;
+		},
+		version: "1.4.0"
 	};
 	/**
 	* @param {string|Element|NodeList|Element[]} selector