autumnnote 1.6.2 → 1.6.5

package/dist/autumnnote.es.js

@@ -608,7 +608,7 @@ var italic = () => execCommand("italic");
 */
 function underline() {
 	const sel = globalThis.getSelection();
-	if (!sel || !sel.rangeCount) return;
+	if (!sel?.rangeCount) return;
 	let container = sel.getRangeAt(0).commonAncestorContainer;
 	if (container.nodeType === 3) container = container.parentElement;
 	const uEl = container?.closest("u");
@@ -628,7 +628,7 @@ function underline() {
 */
 function strikethrough() {
 	const sel = globalThis.getSelection();
-	if (!sel || !sel.rangeCount) return;
+	if (!sel?.rangeCount) return;
 	let sc = sel.getRangeAt(0).startContainer;
 	if (sc.nodeType === 3) sc = sc.parentElement;
 	const sEl = sc?.closest("s") || sc?.closest("strike");
@@ -672,7 +672,7 @@ var fontName = (name) => execCommand("fontName", name);
 */
 function fontSize(size, editable = document) {
 	const sel = globalThis.getSelection();
-	const wasCollapsed = !sel || !sel.rangeCount || sel.getRangeAt(0).collapsed;
+	const wasCollapsed = !sel?.rangeCount || sel.getRangeAt(0).collapsed;
 	if (wasCollapsed && sel && sel.rangeCount > 0) {
 		try {
 			const range = sel.getRangeAt(0);
@@ -747,7 +747,7 @@ var indent = () => execCommand("indent");
 */
 function outdent() {
 	const sel = globalThis.getSelection();
-	if (sel && sel.rangeCount) {
+	if (sel?.rangeCount) {
 		let container = sel.getRangeAt(0).commonAncestorContainer;
 		if (container.nodeType === 3) container = container.parentElement;
 		const checkLi = container?.closest(".an-checklist li");
@@ -797,7 +797,7 @@ function _checklistItemToP(checkLi) {
 	try {
 		const nr = document.createRange();
 		const firstChild = p.firstChild;
-		nr.setStart(firstChild && firstChild.nodeType === 3 ? firstChild : p, 0);
+		nr.setStart(firstChild?.nodeType === 3 ? firstChild : p, 0);
 		nr.collapse(true);
 		const s = globalThis.getSelection();
 		if (s) {
@@ -876,7 +876,7 @@ function lineHeight(value) {
 */
 function toggleInlineCode(_editable) {
 	const sel = globalThis.getSelection();
-	if (!sel || !sel.rangeCount) return;
+	if (!sel?.rangeCount) return;
 	const range = sel.getRangeAt(0);
 	let container = range.commonAncestorContainer;
 	if (container.nodeType === 3) container = container.parentElement;
@@ -932,7 +932,7 @@ function toggleInlineCode(_editable) {
 */
 function isInlineCode() {
 	const sel = globalThis.getSelection();
-	if (!sel || !sel.rangeCount) return false;
+	if (!sel?.rangeCount) return false;
 	let sc = sel.getRangeAt(0).startContainer;
 	if (sc.nodeType === 3) sc = sc.parentElement;
 	const code = sc?.closest("code");
@@ -954,7 +954,7 @@ function isInlineCode() {
 */
 function toggleChecklist() {
 	const sel = globalThis.getSelection();
-	if (!sel || !sel.rangeCount) return;
+	if (!sel?.rangeCount) return;
 	const range = sel.getRangeAt(0);
 	let container = range.commonAncestorContainer;
 	if (container.nodeType === 3) container = container.parentElement;
@@ -1003,7 +1003,7 @@ function toggleChecklist() {
 			"LI"
 		]);
 		let block = container;
-		while (block && block.parentNode && !BLOCK_TAGS.has(block.tagName)) block = block.parentNode;
+		while (block?.parentNode && !BLOCK_TAGS.has(block.tagName)) block = block.parentNode;
 		const itemText = block && BLOCK_TAGS.has(block.tagName) ? Array.from(block.childNodes).map((n) => n.textContent).join("").replaceAll("\xA0", " ") : "";
 		const ul = document.createElement("ul");
 		ul.className = "an-checklist";
@@ -1090,7 +1090,7 @@ function toggleChecklist() {
 */
 function isInChecklist() {
 	const sel = globalThis.getSelection();
-	if (!sel || !sel.rangeCount) return false;
+	if (!sel?.rangeCount) return false;
 	let container = sel.getRangeAt(0).commonAncestorContainer;
 	if (container.nodeType === 3) container = container.parentElement;
 	return !!container?.closest(".an-checklist li");
@@ -1176,10 +1176,10 @@ var italicBtn = btn("italic", "italic", "Italic (Ctrl+I)", () => italic(), () =>
 var underlineBtn = btn("underline", "underline", "Underline (Ctrl+U)", () => underline(), () => {
 	if (document.queryCommandState("underline")) return true;
 	const sel = globalThis.getSelection();
-	if (!sel || !sel.rangeCount) return false;
+	if (!sel?.rangeCount) return false;
 	let sc = sel.getRangeAt(0).startContainer;
 	if (sc.nodeType === 3) sc = sc.parentElement;
-	return !!(sc && sc.closest("u"));
+	return !!sc?.closest("u");
 });
 var strikeBtn = btn("strikethrough", "strikethrough", "Strikethrough", () => strikethrough(), () => document.queryCommandState("strikeThrough"));
 var superscriptBtn = btn("superscript", "superscript", "Superscript", () => superscript(), () => document.queryCommandState("superscript"));
@@ -1239,11 +1239,11 @@ var fontSizeBtn = {
 	getValue: (ctx) => {
 		try {
 			const sel = globalThis.getSelection();
-			if (sel && sel.rangeCount) {
+			if (sel?.rangeCount) {
 				let el = sel.getRangeAt(0).startContainer;
-				if (el && el.nodeType === 3) el = el.parentElement;
-				while (el && el.nodeType === 1 && !el.style.fontSize) el = el.parentElement;
-				const size = el && el.style.fontSize ? el.style.fontSize : "";
+				if (el?.nodeType === 3) el = el.parentElement;
+				while (el?.nodeType === 1 && !el.style.fontSize) el = el.parentElement;
+				const size = el?.style.fontSize || "";
 				if (size) return size;
 			}
 			const editable = ctx?.layoutInfo?.editable;
@@ -1351,7 +1351,7 @@ var lineHeightBtn = {
 	getValue: () => {
 		try {
 			const sel = globalThis.getSelection();
-			if (!sel || !sel.rangeCount) return "";
+			if (!sel?.rangeCount) return "";
 			const BLOCKS = new Set([
 				"P",
 				"DIV",
@@ -1368,7 +1368,7 @@ var lineHeightBtn = {
 				"TH"
 			]);
 			let el = sel.getRangeAt(0).startContainer;
-			if (el && el.nodeType === 3) el = el.parentElement;
+			if (el?.nodeType === 3) el = el.parentElement;
 			while (el && !BLOCKS.has(
 				/** @type {Element} */
 				el.tagName
@@ -4906,7 +4906,7 @@ function handleKeydown(event, editable, options = {}) {
 					icon.remove();
 					textNode.remove();
 					const nr = document.createRange();
-					if (prevNode && prevNode.nodeType === Node.TEXT_NODE) nr.setStart(prevNode, prevNode.textContent.length);
+					if (prevNode?.nodeType === Node.TEXT_NODE) nr.setStart(prevNode, prevNode.textContent.length);
 					else if (prevNode) nr.setStartAfter(prevNode);
 					else if (parent) nr.setStart(parent, 0);
 					nr.collapse(true);
@@ -4978,7 +4978,7 @@ function handleKeydown(event, editable, options = {}) {
 				if (isFAIcon(next)) {
 					const after = next.nextSibling;
 					event.preventDefault();
-					if (after && after.nodeType === Node.TEXT_NODE) {
+					if (after?.nodeType === Node.TEXT_NODE) {
 						const offset = (after.textContent || "").startsWith("​") ? 1 : 0;
 						return moveCaret((nr) => nr.setStart(after, Math.min(offset, after.textContent.length)));
 					}
@@ -4988,7 +4988,7 @@ function handleKeydown(event, editable, options = {}) {
 					const icon = next.nextSibling;
 					const after = icon.nextSibling;
 					event.preventDefault();
-					if (after && after.nodeType === Node.TEXT_NODE) {
+					if (after?.nodeType === Node.TEXT_NODE) {
 						const offset = (after.textContent || "").startsWith("​") ? 1 : 0;
 						return moveCaret((nr) => nr.setStart(after, Math.min(offset, after.textContent.length)));
 					}
@@ -5090,11 +5090,11 @@ function handleKeydown(event, editable, options = {}) {
 			newLi.appendChild(cb);
 			if (afterFrag.textContent.replace(/[\u00a0\u200B]/g, "").length > 0) newLi.appendChild(afterFrag);
 			let cursorNode = newLi.childNodes[1];
-			if (!cursorNode || cursorNode.nodeType !== Node.TEXT_NODE) {
+			if (cursorNode?.nodeType !== Node.TEXT_NODE) {
 				cursorNode = document.createTextNode("​");
 				newLi.appendChild(cursorNode);
 			}
-			checkLi.insertAdjacentElement("afterend", newLi);
+			checkLi.after(newLi);
 			const nr = document.createRange();
 			nr.setStart(cursorNode, 0);
 			nr.collapse(true);
@@ -5376,7 +5376,7 @@ function _escAttr(v) {
 * @returns {string|null}
 */
 function detectLang(code) {
-	if (!code || !code.trim()) return null;
+	if (!code?.trim()) return null;
 	const s = code.trim();
 	if (/(:\s*(string|number|boolean|void|never|any|unknown)\b|interface\s+\w+\s*\{|type\s+\w+\s*[=<(]|<\w+>\s*[;,)]|readonly\s+\w|enum\s+\w+\s*\{|\?\s*:\s*\w|as\s+\w+\s*[;,)\]])/.test(s)) return "typescript";
 	if (/\bprintln!\s*\(|\bprint!\s*\(|\bfn\s+\w+\s*(<[^>]*>)?\s*\(|\blet\s+mut\s|\bpub\s+fn\s|\buse\s+std::|\bimpl\s+\w+|\bOption<|\bResult<\w+/.test(s)) return "rust";
@@ -5450,7 +5450,7 @@ var Editor = class {
 		};
 		const fixChecklistCursor = (event) => {
 			const sel = globalThis.getSelection();
-			if (!sel || !sel.rangeCount) return;
+			if (!sel?.rangeCount) return;
 			const r = sel.getRangeAt(0);
 			if (!r.collapsed) return;
 			const sc = r.startContainer;
@@ -5460,7 +5460,7 @@ var Editor = class {
 			if (!li) return;
 			const cb = li.querySelector("input[type=\"checkbox\"]");
 			if (!cb) return;
-			if (event && event.type === "mouseup") {
+			if (event?.type === "mouseup") {
 				let caret = null;
 				if (document.caretRangeFromPoint) caret = document.caretRangeFromPoint(event.clientX, event.clientY);
 				else if (document.caretPositionFromPoint) {
@@ -5504,7 +5504,7 @@ var Editor = class {
 		let _compositionSupSub = null;
 		const onCompositionStart = () => {
 			const sel = globalThis.getSelection();
-			if (!sel || !sel.rangeCount) {
+			if (!sel?.rangeCount) {
 				_compositionSupSub = null;
 				return;
 			}
@@ -5522,7 +5522,7 @@ var Editor = class {
 			_compositionSupSub = null;
 			if (!tag) return;
 			const sel = globalThis.getSelection();
-			if (!sel || !sel.rangeCount) return;
+			if (!sel?.rangeCount) return;
 			let node = sel.getRangeAt(0).startContainer;
 			if (node.nodeType === Node.TEXT_NODE) node = node.parentElement;
 			const el = node;
@@ -6316,7 +6316,7 @@ var Toolbar = class {
 		let savedRange = null;
 		const saveSelection = () => {
 			const sel = globalThis.getSelection();
-			savedRange = sel && sel.rangeCount ? sel.getRangeAt(0).cloneRange() : null;
+			savedRange = sel?.rangeCount ? sel.getRangeAt(0).cloneRange() : null;
 		};
 		const restoreSelection = () => {
 			if (!savedRange) return;
@@ -6434,7 +6434,7 @@ var Toolbar = class {
 		select.appendChild(placeholder);
 		items.forEach((item) => {
 			const value = typeof item === "object" ? item.value : item;
-			const label = typeof item === "object" ? def.name === "paragraphStyle" ? (this.context.locale.toolbar.paragraphItems || {})[item.value] || item.label : item.label : item;
+			const label = typeof item === "object" ? def.name === "paragraphStyle" ? this.context.locale.toolbar.paragraphItems?.[item.value] || item.label : item.label : item;
 			const isHeader = typeof item === "object" && !!item.disabled;
 			const attrs = { value };
 			if (isHeader) attrs.disabled = "";
@@ -6446,7 +6446,7 @@ var Toolbar = class {
 		let _savedRange = null;
 		const dMousedown = on(select, "mousedown", () => {
 			const sel = globalThis.getSelection();
-			_savedRange = sel && sel.rangeCount ? sel.getRangeAt(0).cloneRange() : null;
+			_savedRange = sel?.rangeCount ? sel.getRangeAt(0).cloneRange() : null;
 		});
 		const disposer = on(select, "change", (e) => {
 			const value = e.target.value;
@@ -7321,7 +7321,7 @@ var BaseDialog = class {
 		if (this._dialog) {
 			this._dialog.style.display = "flex";
 			this._removeTrap = trapFocus(this._dialog, () => this._close());
-			setTimeout(() => this._firstInput && this._firstInput.focus(), 50);
+			setTimeout(() => this._firstInput?.focus(), 50);
 		}
 	}
 	_close() {
@@ -7401,7 +7401,7 @@ var BaseDialog = class {
 * LinkDialog.js - Dialog for inserting / editing hyperlinks
 * Inspired by Summernote's LinkDialog — rewritten without jQuery
 */
-var ICON_SVG$2 = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>`;
+var ICON_SVG$3 = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>`;
 var LinkDialog = class extends BaseDialog {
 	/**
 	* Opens the link dialog.
@@ -7414,7 +7414,7 @@ var LinkDialog = class extends BaseDialog {
 	}
 	_buildDialog() {
 		const L = this.context.locale.linkDialog;
-		const { overlay, box } = this._buildDialogShell(L.ariaLabel, ICON_SVG$2, L.title);
+		const { overlay, box } = this._buildDialogShell(L.ariaLabel, ICON_SVG$3, L.title);
 		const urlLabel = createElement("label", { class: "an-label" });
 		urlLabel.textContent = L.url;
 		const urlInput = createElement("input", {
@@ -7517,7 +7517,7 @@ var LinkDialog = class extends BaseDialog {
 * ImageDialog.js - Dialog for inserting images (by URL or file upload)
 * Inspired by Summernote's ImageDialog — rewritten without jQuery
 */
-var ICON_SVG$1 = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>`;
+var ICON_SVG$2 = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>`;
 var ImageDialog = class extends BaseDialog {
 	show() {
 		this._saveRange();
@@ -7528,7 +7528,7 @@ var ImageDialog = class extends BaseDialog {
 	}
 	_buildDialog() {
 		const L = this.context.locale.imageDialog;
-		const { overlay, box } = this._buildDialogShell(L.ariaLabel, ICON_SVG$1, L.title);
+		const { overlay, box } = this._buildDialogShell(L.ariaLabel, ICON_SVG$2, L.title);
 		const urlLabel = createElement("label", { class: "an-label" });
 		urlLabel.textContent = L.imageUrl;
 		const urlInput = createElement("input", {
@@ -7682,7 +7682,7 @@ var ImageDialog = class extends BaseDialog {
 *   • Vimeo URLs          → <iframe> embed
 *   • Direct video URLs   → <video> element (.mp4 / .webm / .ogg)
 */
-var ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>`;
+var ICON_SVG$1 = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>`;
 var VideoDialog = class extends BaseDialog {
 	show() {
 		this._saveRange();
@@ -7693,7 +7693,7 @@ var VideoDialog = class extends BaseDialog {
 	}
 	_buildDialog() {
 		const L = this.context.locale.videoDialog;
-		const { overlay, box } = this._buildDialogShell(L.ariaLabel, ICON_SVG, L.title);
+		const { overlay, box } = this._buildDialogShell(L.ariaLabel, ICON_SVG$1, L.title);
 		const urlLabel = createElement("label", { class: "an-label" });
 		urlLabel.textContent = L.videoUrl;
 		const urlInput = createElement("input", {
@@ -7973,7 +7973,7 @@ var ImageResizer = class {
 		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;
+		if (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,
@@ -9018,7 +9018,7 @@ function getCellAfterVisualCol(row, visualIdx) {
 		vIdx += c.colSpan || 1;
 		if (vIdx > visualIdx) {
 			const next = c.nextElementSibling;
-			return next && next.tagName === "TD" || next && next.tagName === "TH" ? next : null;
+			return next?.tagName === "TD" || next?.tagName === "TH" ? next : null;
 		}
 	}
 	return null;
@@ -9308,9 +9308,9 @@ var TableTooltip = class {
 		this._disposers = [];
 		if (this._el && this._el.parentNode) this._el.remove();
 		this._el = null;
-		if (this._sizePopover && this._sizePopover.parentNode) this._sizePopover.remove();
+		if (this._sizePopover?.parentNode) this._sizePopover.remove();
 		this._sizePopover = null;
-		if (this._shadePopover && this._shadePopover.parentNode) this._shadePopover.remove();
+		if (this._shadePopover?.parentNode) this._shadePopover.remove();
 		this._shadePopover = null;
 	}
 	_buildTooltip() {
@@ -9457,7 +9457,7 @@ var TableTooltip = class {
 	}
 	_getCell() {
 		const sel = globalThis.getSelection();
-		if (sel && sel.rangeCount) {
+		if (sel?.rangeCount) {
 			let container = sel.getRangeAt(0).commonAncestorContainer;
 			if (container.nodeType === 3) container = container.parentElement;
 			const cellFromSel = container?.closest("td, th");
@@ -9494,7 +9494,7 @@ var TableTooltip = class {
 		if (!startCell) return [];
 		if (!endCell || startCell === endCell) return [startCell];
 		const table = startCell.closest("table");
-		if (!table || !table.contains(endCell)) return [startCell];
+		if (!table?.contains(endCell)) return [startCell];
 		const { gridMap, cellPos } = buildGridMap(table);
 		const sp = cellPos.get(startCell);
 		const ep = cellPos.get(endCell);
@@ -9574,8 +9574,8 @@ var TableTooltip = class {
 		for (let i = 0; i < colCount; i++) {
 			const td = createElement("td", {}, ["\xA0"]);
 			const ref = refCells[i];
-			if (ref && ref.style.width) td.style.width = ref.style.width;
-			if (ref && ref.style.minWidth) td.style.minWidth = ref.style.minWidth;
+			if (ref?.style.width) td.style.width = ref.style.width;
+			if (ref?.style.minWidth) td.style.minWidth = ref.style.minWidth;
 			newRow.appendChild(td);
 		}
 		if (position === "above") refRow.parentElement?.insertBefore(newRow, refRow);
@@ -12656,35 +12656,17 @@ var EMOJI_LIST = [
 		"symbols"
 	]
 ];
-var EmojiDialog = class {
-	/**
-	* @param {import('../Context.js').Context} context
-	*/
-	constructor(context) {
-		this.context = context;
-		/** @type {HTMLElement|null} */
-		this._dialog = null;
-		this._disposers = [];
-		this._savedRange = null;
-		this._activeCat = "all";
-	}
+var EmojiDialog = class extends BaseDialog {
+	_activeCat = "all";
 	initialize() {
 		return this;
 	}
-	destroy() {
-		this._disposers.forEach((d) => d());
-		this._disposers = [];
-		if (this._dialog && this._dialog.parentNode) this._dialog.remove();
-		this._dialog = null;
-	}
 	show() {
 		if (!this._dialog) {
 			this._dialog = this._buildDialog();
 			document.body.appendChild(this._dialog);
 		}
-		withSavedRange((range) => {
-			this._savedRange = range;
-		});
+		this._saveRange();
 		this._activeCat = "all";
 		this._searchInput.value = "";
 		this._updateCatTabs();
@@ -12753,6 +12735,7 @@ var EmojiDialog = class {
 			grid.appendChild(cell);
 		});
 		this._grid = grid;
+		this._firstInput = searchInput;
 		const btnRow = createElement("div", { class: "an-dialog-actions" });
 		const cancelBtn = createElement("button", {
 			type: "button",
@@ -12842,21 +12825,6 @@ var EmojiDialog = class {
 		editable.focus();
 		this.context.invoke("editor.afterCommand");
 	}
-	_open() {
-		if (this._dialog) {
-			this._dialog.style.display = "flex";
-			this._removeTrap = trapFocus(this._dialog, () => this._close());
-			setTimeout(() => this._searchInput?.focus(), 50);
-		}
-	}
-	_close() {
-		if (this._dialog) this._dialog.style.display = "none";
-		if (this._removeTrap) {
-			this._removeTrap();
-			this._removeTrap = null;
-		}
-		this._savedRange = null;
-	}
 };
 //#endregion
 //#region src/js/module/IconDialog.js
@@ -13114,19 +13082,9 @@ var ICON_LIST = [
 	["gift", "objects"],
 	["puzzle-piece", "objects"]
 ];
-var IconDialog = class {
-	/**
-	* @param {import('../Context.js').Context} context
-	*/
-	constructor(context) {
-		this.context = context;
-		/** @type {HTMLElement|null} */
-		this._dialog = null;
-		this._disposers = [];
-		this._savedRange = null;
-		this._selectedIcon = null;
-		this._activeCat = "all";
-	}
+var IconDialog = class extends BaseDialog {
+	_selectedIcon = null;
+	_activeCat = "all";
 	initialize() {
 		this._ensureFontAwesome();
 		return this;
@@ -13150,20 +13108,12 @@ var IconDialog = class {
 		link.referrerPolicy = "no-referrer";
 		document.head.appendChild(link);
 	}
-	destroy() {
-		this._disposers.forEach((d) => d());
-		this._disposers = [];
-		this._dialog?.remove();
-		this._dialog = null;
-	}
 	show() {
 		if (!this._dialog) {
 			this._dialog = this._buildDialog();
 			document.body.appendChild(this._dialog);
 		}
-		withSavedRange((range) => {
-			this._savedRange = range;
-		});
+		this._saveRange();
 		this._selectedIcon = null;
 		this._activeCat = "all";
 		this._searchInput.value = "";
@@ -13204,6 +13154,7 @@ var IconDialog = class {
 			autocomplete: "off"
 		});
 		this._searchInput = searchInput;
+		this._firstInput = searchInput;
 		const catBar = createElement("div", { class: "an-icon-cats" });
 		const allTab = createElement("button", {
 			type: "button",
@@ -13422,7 +13373,7 @@ var IconDialog = class {
 		}
 		range.insertNode(iconEl);
 		let caretTextNode = iconEl.nextSibling;
-		if (!caretTextNode || caretTextNode.nodeType !== Node.TEXT_NODE) {
+		if (caretTextNode?.nodeType !== Node.TEXT_NODE) {
 			caretTextNode = document.createTextNode("​");
 			iconEl.parentNode.insertBefore(caretTextNode, iconEl.nextSibling);
 		} else if (!caretTextNode.textContent) caretTextNode.textContent = "​";
@@ -13442,21 +13393,9 @@ var IconDialog = class {
 		}
 		this.context.invoke("editor.afterCommand");
 	}
-	_open() {
-		if (this._dialog) {
-			this._dialog.style.display = "flex";
-			this._removeTrap = trapFocus(this._dialog, () => this._close());
-			setTimeout(() => this._searchInput?.focus(), 50);
-		}
-	}
 	_close() {
-		if (this._dialog) this._dialog.style.display = "none";
-		if (this._removeTrap) {
-			this._removeTrap();
-			this._removeTrap = null;
-		}
-		this._savedRange = null;
 		this._selectedIcon = null;
+		super._close();
 	}
 };
 //#endregion
@@ -14197,59 +14136,25 @@ var SHORTCUTS = [
 		}]
 	}
 ];
-var ShortcutsDialog = class {
-	/** @param {import('../Context.js').Context} context */
-	constructor(context) {
-		this.context = context;
-		this._dialog = null;
-		this._closeBtn = null;
-		this._disposers = [];
-	}
-	initialize() {
-		this._dialog = this._buildDialog();
-		document.body.appendChild(this._dialog);
-		return this;
-	}
-	destroy() {
-		this._disposers.forEach((d) => d());
-		this._disposers = [];
-		this._dialog?.remove();
-		this._dialog = null;
-	}
+var ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M6 11h.01M10 11h.01M14 11h.01M18 11h.01M6 15h.01M18 15h.01M10 15h4"/><path d="M7 3l5 4 5-4"/></svg>`;
+var ShortcutsDialog = class extends BaseDialog {
 	show() {
-		if (this._dialog) {
-			this._dialog.style.display = "flex";
-			this._removeTrap = trapFocus(this._dialog, () => this._close());
-			setTimeout(() => this._closeBtn?.focus(), 50);
-		}
-	}
-	_close() {
-		if (this._dialog) this._dialog.style.display = "none";
-		if (this._removeTrap) {
-			this._removeTrap();
-			this._removeTrap = null;
-		}
+		this._open();
 	}
 	_buildDialog() {
-		const overlay = createElement("div", {
-			class: "an-dialog-overlay",
-			role: "dialog",
-			"aria-modal": "true",
-			"aria-label": this.context.locale.shortcutsDialog.ariaLabel
-		});
-		const box = createElement("div", { class: "an-dialog-box an-shortcuts-box" });
-		const titleRow = createElement("div", { class: "an-icon-title-row" });
-		const title = createElement("h3", { class: "an-dialog-title" });
-		title.textContent = this.context.locale.shortcutsDialog.title;
+		const L = this.context.locale.shortcutsDialog;
+		const { overlay, box } = this._buildDialogShell(L.ariaLabel, ICON_SVG, L.title);
+		box.classList.add("an-shortcuts-box");
 		const closeBtn = createElement("button", {
 			type: "button",
 			class: "an-icon-close",
-			"aria-label": this.context.locale.shortcutsDialog.close
+			"aria-label": L.close,
+			style: "margin-left:auto"
 		});
 		closeBtn.textContent = "×";
 		this._closeBtn = closeBtn;
-		titleRow.append(title, closeBtn);
-		box.appendChild(titleRow);
+		this._firstInput = closeBtn;
+		box.querySelector(".an-dialog-header").appendChild(closeBtn);
 		(this.context.locale.shortcutsDialog.shortcuts || SHORTCUTS).forEach(({ category, items }) => {
 			const catEl = createElement("div", { class: "an-shortcuts-cat" });
 			catEl.textContent = category;
@@ -14266,12 +14171,8 @@ var ShortcutsDialog = class {
 			});
 			box.appendChild(table);
 		});
-		overlay.appendChild(box);
 		const d1 = on(closeBtn, "click", () => this._close());
-		const d2 = on(overlay, "click", (e) => {
-			if (e.target === overlay) this._close();
-		});
-		this._disposers.push(d1, d2);
+		this._disposers.push(d1);
 		return overlay;
 	}
 };
@@ -14285,12 +14186,10 @@ var ShortcutsDialog = class {
 * for highlighting. Supports case-sensitive search, Prev/Next navigation and
 * single / replace-all replacement.
 */
-var FindReplace = class {
+var FindReplace = class extends BaseDialog {
 	/** @param {import('../Context.js').Context} context */
 	constructor(context) {
-		this.context = context;
-		/** @type {HTMLElement|null} */
-		this._dialog = null;
+		super(context);
 		/** @type {HTMLInputElement|null} */
 		this._findInput = null;
 		/** @type {HTMLInputElement|null} */
@@ -14311,23 +14210,13 @@ var FindReplace = class {
 		this._queryRegex = null;
 		this._lastQuery = null;
 		this._lastCaseSensitive = null;
-		this._disposers = [];
-		this._removeTrap = null;
 		this._focusTimer = null;
 	}
-	initialize() {
-		this._dialog = this._buildDialog();
-		document.body.appendChild(this._dialog);
-		return this;
-	}
 	destroy() {
 		clearTimeout(this._focusTimer);
 		this._focusTimer = null;
 		this._clearHighlights();
-		this._disposers.forEach((d) => d());
-		this._disposers = [];
-		if (this._dialog && this._dialog.parentNode) this._dialog.remove();
-		this._dialog = null;
+		super.destroy();
 	}
 	/**
 	* Opens the dialog in 'find' or 'replace' mode.
@@ -15007,7 +14896,7 @@ var ImageCropOverlay = class {
 		const startY = e.clientY;
 		const orig = { ...this._box };
 		const r = this._imgRect;
-		const lockAR = this._arCheck && this._arCheck.checked;
+		const lockAR = this._arCheck?.checked;
 		const aspect = orig.w / (orig.h || 1);
 		const onMove = (me) => {
 			const dx = me.clientX - startX;
@@ -15833,14 +15722,14 @@ var BubbleToolbar = class {
 		if (!this._btnCache) return;
 		this._btnCache.forEach((btn) => {
 			const activeFn = _ACTIVE[btn.dataset.name];
-			btn.classList.toggle("an-active", !!(activeFn && activeFn()));
+			btn.classList.toggle("an-active", !!activeFn?.());
 		});
 	}
 	/** Read the current selection's color and update the color-strip indicators. */
 	_syncColorStrips() {
 		if (!this._el) return;
 		const sel = globalThis.getSelection();
-		if (!sel || !sel.rangeCount) return;
+		if (!sel?.rangeCount) return;
 		let node = sel.getRangeAt(0).startContainer;
 		if (node.nodeType === Node.TEXT_NODE) node = node.parentElement;
 		if (!node) return;
@@ -16068,7 +15957,7 @@ var Mention = class {
 			}
 		} catch (_) {}
 		const sel = globalThis.getSelection();
-		if (!sel || !sel.rangeCount) return;
+		if (!sel?.rangeCount) return;
 		const rects = sel.getRangeAt(0).getClientRects();
 		if (rects.length > 0) this._caretRect = rects[rects.length - 1];
 	}
@@ -16818,7 +16707,7 @@ var AutumnNote = {
 		return this;
 	},
 	/** Library version */
-	version: "1.6.2"
+	version: "1.6.5"
 };
 /**
 * @param {string|Element|NodeList|Element[]} selector