autumnnote 1.6.1 → 1.6.3

package/dist/autumnnote.umd.js

@@ -6978,15 +6978,13 @@
 		}
 	};
 	//#endregion
-	//#region src/js/module/LinkDialog.js
+	//#region src/js/module/BaseDialog.js
 	/**
-	* LinkDialog.js - Dialog for inserting / editing hyperlinks
-	* Inspired by Summernote's LinkDialog — rewritten without jQuery
+	* Shared lifecycle and shell-building logic for all modal dialogs.
+	* Subclasses implement _buildDialog() for their specific form fields.
 	*/
-	var LinkDialog = class {
-		/**
-		* @param {import('../Context.js').Context} context
-		*/
+	var BaseDialog = class {
+		/** @param {import('../Context.js').Context} context */
 		constructor(context) {
 			this.context = context;
 			this.options = context.options;
@@ -6994,6 +6992,9 @@
 			this._dialog = null;
 			this._disposers = [];
 			this._savedRange = null;
+			/** @type {HTMLElement|null} First focusable input; set by subclass in _buildDialog(). */
+			this._firstInput = null;
+			this._removeTrap = null;
 		}
 		initialize() {
 			this._dialog = this._buildDialog();
@@ -7003,36 +7004,113 @@
 		destroy() {
 			this._disposers.forEach((d) => d());
 			this._disposers = [];
-			if (this._dialog && this._dialog.parentNode) this._dialog.remove();
+			if (this._dialog?.parentNode) this._dialog.remove();
 			this._dialog = null;
 		}
-		/**
-		* Opens the link dialog.
-		* Pre-fills with the currently selected link if present.
-		*/
-		show() {
+		/** Saves the current selection range before opening the dialog. */
+		_saveRange() {
 			withSavedRange((range) => {
 				this._savedRange = range;
 			});
-			this._prefill();
-			this._open();
 		}
-		_buildDialog() {
-			const L = this.context.locale.linkDialog;
+		_open() {
+			if (this._dialog) {
+				this._dialog.style.display = "flex";
+				this._removeTrap = trapFocus(this._dialog, () => this._close());
+				setTimeout(() => this._firstInput && this._firstInput.focus(), 50);
+			}
+		}
+		_close() {
+			if (this._dialog) this._dialog.style.display = "none";
+			if (this._removeTrap) {
+				this._removeTrap();
+				this._removeTrap = null;
+			}
+			this._savedRange = null;
+		}
+		/**
+		* Builds the overlay + box + header shell common to all dialogs.
+		* Also wires up draggable and overlay-click-to-close.
+		* @param {string} ariaLabel
+		* @param {string} iconHtml  Raw SVG string for the dialog icon
+		* @param {string} titleText
+		* @returns {{ overlay: HTMLElement, box: HTMLElement }}
+		*/
+		_buildDialogShell(ariaLabel, iconHtml, titleText) {
 			const overlay = createElement("div", {
 				class: "an-dialog-overlay",
 				role: "dialog",
 				"aria-modal": "true",
-				"aria-label": L.ariaLabel
+				"aria-label": ariaLabel
 			});
 			const box = createElement("div", { class: "an-dialog-box" });
 			const header = createElement("div", { class: "an-dialog-header" });
 			const iconEl = createElement("span", { class: "an-dialog-icon" });
-			iconEl.innerHTML = `<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>`;
-			const title = createElement("h3", { class: "an-dialog-title" });
-			title.textContent = L.title;
+			iconEl.innerHTML = iconHtml;
+			const titleEl = createElement("h3", { class: "an-dialog-title" });
+			titleEl.textContent = titleText;
 			header.appendChild(iconEl);
-			header.appendChild(title);
+			header.appendChild(titleEl);
+			box.appendChild(header);
+			overlay.appendChild(box);
+			makeDraggable(header, box);
+			const d = on(overlay, "click", (e) => {
+				if (e.target === overlay) this._close();
+			});
+			this._disposers.push(d);
+			return {
+				overlay,
+				box
+			};
+		}
+		/**
+		* Builds an action button row with a primary insert button and a cancel button.
+		* Disposers are registered automatically.
+		* @param {string} insertLabel
+		* @param {string} cancelLabel
+		* @param {() => void} onInsert
+		* @returns {HTMLElement}
+		*/
+		_buildButtonRow(insertLabel, cancelLabel, onInsert) {
+			const btnRow = createElement("div", { class: "an-dialog-actions" });
+			const insertBtn = createElement("button", {
+				type: "button",
+				class: "an-btn an-btn-primary"
+			});
+			insertBtn.textContent = insertLabel;
+			const cancelBtn = createElement("button", {
+				type: "button",
+				class: "an-btn"
+			});
+			cancelBtn.textContent = cancelLabel;
+			btnRow.appendChild(insertBtn);
+			btnRow.appendChild(cancelBtn);
+			const d1 = on(insertBtn, "click", onInsert);
+			const d2 = on(cancelBtn, "click", () => this._close());
+			this._disposers.push(d1, d2);
+			return btnRow;
+		}
+	};
+	//#endregion
+	//#region src/js/module/LinkDialog.js
+	/**
+	* LinkDialog.js - Dialog for inserting / editing hyperlinks
+	* Inspired by Summernote's LinkDialog — rewritten without jQuery
+	*/
+	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.
+		* Pre-fills with the currently selected link if present.
+		*/
+		show() {
+			this._saveRange();
+			this._prefill();
+			this._open();
+		}
+		_buildDialog() {
+			const L = this.context.locale.linkDialog;
+			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", {
@@ -7044,6 +7122,7 @@
 				autocomplete: "off"
 			});
 			this._urlInput = urlInput;
+			this._firstInput = urlInput;
 			const textLabel = createElement("label", { class: "an-label" });
 			textLabel.textContent = L.displayText;
 			const textInput = createElement("input", {
@@ -7064,27 +7143,8 @@
 			this._tabCheckbox = tabCheckbox;
 			tabLabel.appendChild(tabCheckbox);
 			tabLabel.appendChild(document.createTextNode(" " + L.openInNewTab));
-			const btnRow = createElement("div", { class: "an-dialog-actions" });
-			const insertBtn = createElement("button", {
-				type: "button",
-				class: "an-btn an-btn-primary"
-			});
-			insertBtn.textContent = L.insertBtn;
-			const cancelBtn = createElement("button", {
-				type: "button",
-				class: "an-btn"
-			});
-			cancelBtn.textContent = L.cancelBtn;
-			btnRow.appendChild(insertBtn);
-			btnRow.appendChild(cancelBtn);
-			box.append(header, urlLabel, urlInput, textLabel, textInput, tabLabel, btnRow);
-			overlay.appendChild(box);
-			makeDraggable(header, box);
-			const d1 = on(insertBtn, "click", () => this._onInsert());
-			const d2 = on(cancelBtn, "click", () => this._close());
-			const d3 = on(overlay, "click", (e) => {
-				if (e.target === overlay) this._close();
-			});
+			const btnRow = this._buildButtonRow(L.insertBtn, L.cancelBtn, () => this._onInsert());
+			box.append(urlLabel, urlInput, textLabel, textInput, tabLabel, btnRow);
 			const d4 = on(urlInput, "keydown", (e) => {
 				if (e.key === "Enter") {
 					e.preventDefault();
@@ -7097,7 +7157,7 @@
 					this._onInsert();
 				}
 			});
-			this._disposers.push(d1, d2, d3, d4, d5);
+			this._disposers.push(d4, d5);
 			return overlay;
 		}
 		_prefill() {
@@ -7146,21 +7206,6 @@
 			this.context.invoke("editor.insertLink", url, text, newTab);
 			this._close();
 		}
-		_open() {
-			if (this._dialog) {
-				this._dialog.style.display = "flex";
-				this._removeTrap = trapFocus(this._dialog, () => this._close());
-				setTimeout(() => this._urlInput && this._urlInput.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/ImageDialog.js
@@ -7168,33 +7213,10 @@
 	* ImageDialog.js - Dialog for inserting images (by URL or file upload)
 	* Inspired by Summernote's ImageDialog — rewritten without jQuery
 	*/
-	var ImageDialog = class {
-		/**
-		* @param {import('../Context.js').Context} context
-		*/
-		constructor(context) {
-			this.context = context;
-			this.options = context.options;
-			/** @type {HTMLElement|null} */
-			this._dialog = null;
-			this._disposers = [];
-			this._savedRange = null;
-		}
-		initialize() {
-			this._dialog = this._buildDialog();
-			document.body.appendChild(this._dialog);
-			return this;
-		}
-		destroy() {
-			this._disposers.forEach((d) => d());
-			this._disposers = [];
-			if (this._dialog && this._dialog.parentNode) this._dialog.remove();
-			this._dialog = null;
-		}
+	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() {
-			withSavedRange((range) => {
-				this._savedRange = range;
-			});
+			this._saveRange();
 			this._urlInput.value = "";
 			this._altInput.value = "";
 			if (this._fileInput) this._fileInput.value = "";
@@ -7202,20 +7224,7 @@
 		}
 		_buildDialog() {
 			const L = this.context.locale.imageDialog;
-			const overlay = createElement("div", {
-				class: "an-dialog-overlay",
-				role: "dialog",
-				"aria-modal": "true",
-				"aria-label": L.ariaLabel
-			});
-			const box = createElement("div", { class: "an-dialog-box" });
-			const header = createElement("div", { class: "an-dialog-header" });
-			const iconEl = createElement("span", { class: "an-dialog-icon" });
-			iconEl.innerHTML = `<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>`;
-			const title = createElement("h3", { class: "an-dialog-title" });
-			title.textContent = L.title;
-			header.appendChild(iconEl);
-			header.appendChild(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", {
@@ -7225,6 +7234,7 @@
 				autocomplete: "off"
 			});
 			this._urlInput = urlInput;
+			this._firstInput = urlInput;
 			const altLabel = createElement("label", { class: "an-label" });
 			altLabel.textContent = L.altText;
 			const altInput = createElement("input", {
@@ -7234,7 +7244,7 @@
 				autocomplete: "off"
 			});
 			this._altInput = altInput;
-			box.append(header, urlLabel, urlInput, altLabel, altInput);
+			box.append(urlLabel, urlInput, altLabel, altInput);
 			const alignLabel = createElement("label", { class: "an-label" });
 			alignLabel.textContent = L.alignment;
 			const alignRow = createElement("div", { class: "an-align-row" });
@@ -7288,27 +7298,8 @@
 				this._disposers.push(d);
 				box.append(fileLabel, fileInput, fileHint);
 			}
-			const btnRow = createElement("div", { class: "an-dialog-actions" });
-			const insertBtn = createElement("button", {
-				type: "button",
-				class: "an-btn an-btn-primary"
-			});
-			insertBtn.textContent = L.insertBtn;
-			const cancelBtn = createElement("button", {
-				type: "button",
-				class: "an-btn"
-			});
-			cancelBtn.textContent = L.cancelBtn;
-			btnRow.appendChild(insertBtn);
-			btnRow.appendChild(cancelBtn);
+			const btnRow = this._buildButtonRow(L.insertBtn, L.cancelBtn, () => this._onInsert());
 			box.append(btnRow);
-			overlay.appendChild(box);
-			makeDraggable(header, box);
-			const d1 = on(insertBtn, "click", () => this._onInsert());
-			const d2 = on(cancelBtn, "click", () => this._close());
-			const d3 = on(overlay, "click", (e) => {
-				if (e.target === overlay) this._close();
-			});
 			const d4 = on(urlInput, "keydown", (e) => {
 				if (e.key === "Enter") {
 					e.preventDefault();
@@ -7321,7 +7312,7 @@
 					this._onInsert();
 				}
 			});
-			this._disposers.push(d1, d2, d3, d4, d5);
+			this._disposers.push(d4, d5);
 			return overlay;
 		}
 		_onFileChange() {
@@ -7376,21 +7367,6 @@
 			this.context.invoke("editor.insertImage", src, alt, align);
 			this._close();
 		}
-		_open() {
-			if (this._dialog) {
-				this._dialog.style.display = "flex";
-				this._removeTrap = trapFocus(this._dialog, () => this._close());
-				setTimeout(() => this._urlInput && this._urlInput.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/VideoDialog.js
@@ -7402,31 +7378,10 @@
 	*   • Vimeo URLs          → <iframe> embed
 	*   • Direct video URLs   → <video> element (.mp4 / .webm / .ogg)
 	*/
-	var VideoDialog = class {
-		/** @param {import('../Context.js').Context} context */
-		constructor(context) {
-			this.context = context;
-			this.options = context.options;
-			/** @type {HTMLElement|null} */
-			this._dialog = null;
-			this._disposers = [];
-			this._savedRange = null;
-		}
-		initialize() {
-			this._dialog = this._buildDialog();
-			document.body.appendChild(this._dialog);
-			return this;
-		}
-		destroy() {
-			this._disposers.forEach((d) => d());
-			this._disposers = [];
-			if (this._dialog && this._dialog.parentNode) this._dialog.remove();
-			this._dialog = null;
-		}
+	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() {
-			withSavedRange((range) => {
-				this._savedRange = range;
-			});
+			this._saveRange();
 			this._urlInput.value = "";
 			this._widthInput.value = "560";
 			this._hintEl.textContent = "";
@@ -7434,20 +7389,7 @@
 		}
 		_buildDialog() {
 			const L = this.context.locale.videoDialog;
-			const overlay = createElement("div", {
-				class: "an-dialog-overlay",
-				role: "dialog",
-				"aria-modal": "true",
-				"aria-label": L.ariaLabel
-			});
-			const box = createElement("div", { class: "an-dialog-box" });
-			const header = createElement("div", { class: "an-dialog-header" });
-			const iconEl = createElement("span", { class: "an-dialog-icon" });
-			iconEl.innerHTML = `<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>`;
-			const title = createElement("h3", { class: "an-dialog-title" });
-			title.textContent = L.title;
-			header.appendChild(iconEl);
-			header.appendChild(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", {
@@ -7457,6 +7399,7 @@
 				autocomplete: "off"
 			});
 			this._urlInput = urlInput;
+			this._firstInput = urlInput;
 			const hintEl = createElement("p", { class: "an-dialog-hint" });
 			this._hintEl = hintEl;
 			const widthLabel = createElement("label", { class: "an-label" });
@@ -7470,38 +7413,19 @@
 				value: "560"
 			});
 			this._widthInput = widthInput;
-			const btnRow = createElement("div", { class: "an-dialog-actions" });
-			const insertBtn = createElement("button", {
-				type: "button",
-				class: "an-btn an-btn-primary"
-			});
-			insertBtn.textContent = L.insertBtn;
-			const cancelBtn = createElement("button", {
-				type: "button",
-				class: "an-btn"
-			});
-			cancelBtn.textContent = L.cancelBtn;
-			btnRow.appendChild(insertBtn);
-			btnRow.appendChild(cancelBtn);
-			box.append(header, urlLabel, urlInput, hintEl, widthLabel, widthInput, btnRow);
-			overlay.appendChild(box);
-			makeDraggable(header, box);
+			const btnRow = this._buildButtonRow(L.insertBtn, L.cancelBtn, () => this._onInsert());
+			box.append(urlLabel, urlInput, hintEl, widthLabel, widthInput, btnRow);
 			const d0 = on(urlInput, "input", () => {
 				const info = this._parseVideoUrl(urlInput.value.trim());
 				hintEl.textContent = info ? this.context.locale.videoDialog.detected(info.type) : urlInput.value ? this.context.locale.videoDialog.unknownFormat : "";
 			});
-			const d1 = on(insertBtn, "click", () => this._onInsert());
-			const d2 = on(cancelBtn, "click", () => this._close());
-			const d3 = on(overlay, "click", (e) => {
-				if (e.target === overlay) this._close();
-			});
 			const d4 = on(urlInput, "keydown", (e) => {
 				if (e.key === "Enter") {
 					e.preventDefault();
 					this._onInsert();
 				}
 			});
-			this._disposers.push(d0, d1, d2, d3, d4);
+			this._disposers.push(d0, d4);
 			return overlay;
 		}
 		_onInsert() {
@@ -7521,21 +7445,6 @@
 			this.context.invoke("editor.insertVideo", html);
 			this._close();
 		}
-		_open() {
-			if (this._dialog) {
-				this._dialog.style.display = "flex";
-				this._removeTrap = trapFocus(this._dialog, () => this._close());
-				setTimeout(() => this._urlInput && this._urlInput.focus(), 50);
-			}
-		}
-		_close() {
-			if (this._dialog) this._dialog.style.display = "none";
-			if (this._removeTrap) {
-				this._removeTrap();
-				this._removeTrap = null;
-			}
-			this._savedRange = null;
-		}
 		/**
 		* Parses a video URL and returns { type, embedUrl } or null.
 		* @param {string} url
@@ -12443,35 +12352,17 @@
 			"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();
@@ -12540,6 +12431,7 @@
 				grid.appendChild(cell);
 			});
 			this._grid = grid;
+			this._firstInput = searchInput;
 			const btnRow = createElement("div", { class: "an-dialog-actions" });
 			const cancelBtn = createElement("button", {
 				type: "button",
@@ -12629,21 +12521,6 @@
 			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
@@ -12901,19 +12778,9 @@
 		["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;
@@ -12937,20 +12804,12 @@
 			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 = "";
@@ -12991,6 +12850,7 @@
 				autocomplete: "off"
 			});
 			this._searchInput = searchInput;
+			this._firstInput = searchInput;
 			const catBar = createElement("div", { class: "an-icon-cats" });
 			const allTab = createElement("button", {
 				type: "button",
@@ -13229,21 +13089,9 @@
 			}
 			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
@@ -13984,59 +13832,25 @@
 			}]
 		}
 	];
-	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;
@@ -14053,12 +13867,8 @@
 				});
 				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;
 		}
 	};
@@ -14072,12 +13882,10 @@
 	* 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} */
@@ -14098,23 +13906,13 @@
 			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.
@@ -16029,7 +15827,7 @@
 			register("markdownShortcuts", MarkdownShortcuts);
 			register("bubbleToolbar", BubbleToolbar);
 			register("mention", Mention);
-			for (const [name, ModuleClass] of _customModules) register(name, ModuleClass);
+			if (_customModules.size > 0) for (const [name, ModuleClass] of _customModules) register(name, ModuleClass);
 		}
 		/**
 		* Registers and initialises a custom module on this instance.
@@ -16082,6 +15880,7 @@
 			});
 		}
 		_applyGlobalPlugins() {
+			if (_globalPlugins.size === 0) return;
 			for (const { plugin, options } of _globalPlugins.values()) this._installPlugin(plugin, options);
 		}
 		_bindEditorEvents(editable) {
@@ -16478,7 +16277,7 @@
 			return this;
 		},
 		/** Library version */
-		version: "1.5.0"
+		version: "1.6.3"
 	};
 	/**
 	* @param {string|Element|NodeList|Element[]} selector