autumnnote 1.0.9 → 1.1.0

package/dist/autumnnote.umd.js

@@ -28,8 +28,7 @@
 	function mergeDeep(target, source) {
 		const output = {};
 		for (const key of Object.keys(target)) output[key] = Array.isArray(target[key]) ? [...target[key]] : target[key];
-		if (isPlainObject(target) && isPlainObject(source)) for (const key of Object.keys(source)) if (isPlainObject(source[key])) if (!(key in target)) output[key] = mergeDeep({}, source[key]);
-		else output[key] = mergeDeep(target[key], source[key]);
+		if (isPlainObject(target) && isPlainObject(source)) for (const key of Object.keys(source)) if (isPlainObject(source[key])) output[key] = mergeDeep(isPlainObject(target[key]) ? target[key] : {}, source[key]);
 		else if (Array.isArray(source[key])) output[key] = [...source[key]];
 		else output[key] = source[key];
 		return output;
@@ -1162,7 +1161,21 @@
 		onCharLimitReached: null,
 		onWordLimitReached: null,
 		focusColor: null,
-		lang: "en"
+		lang: "en",
+		autoSaveRestore: false,
+		autoSaveRestoreTimeout: 7,
+		onAutoSaveRestore: null,
+		markdownShortcuts: true,
+		bubbleToolbar: false,
+		bubbleToolbarItems: [
+			"bold",
+			"italic",
+			"underline",
+			"link",
+			"foreColor",
+			"removeFormat"
+		],
+		mention: null
 	};
 	//#endregion
 	//#region src/js/i18n/en.js
@@ -5373,8 +5386,8 @@
 	* Inspired by Summernote's Toolbar module — rewritten without jQuery
 	*/
 	var _faPageLevelReady = null;
-	var _S = "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} style="display:block">${paths}</svg>`;
+	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>`;
 	var _SVG_MAP = new Map([
 		["bold", _svgWrap("<path d=\"M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z\"/><path d=\"M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z\"/>")],
 		["italic", _svgWrap("<line x1=\"19\" y1=\"4\" x2=\"10\" y2=\"4\"/><line x1=\"14\" y1=\"20\" x2=\"5\" y2=\"20\"/><line x1=\"15\" y1=\"4\" x2=\"9\" y2=\"20\"/>")],
@@ -13127,12 +13140,18 @@
 			if (!editable.contains(event.target)) return;
 			if (this.context.layoutInfo.container.classList.contains("an-disabled")) return;
 			event.preventDefault();
-			this._lastX = event.clientX;
-			this._lastY = event.clientY;
 			const winSel = window.getSelection();
 			this._savedRange = winSel && winSel.rangeCount > 0 ? winSel.getRangeAt(0).cloneRange() : null;
 			this._renderItems(this._items);
-			this.showAt(event.clientX, event.clientY);
+			let openX = event.clientX;
+			let openY = event.clientY;
+			if (this._savedRange && !this._savedRange.collapsed) try {
+				const selRect = this._savedRange.getBoundingClientRect();
+				if (selRect.width > 0 && selRect.height > 0) openY = selRect.bottom + 4;
+			} catch (_) {}
+			this._lastX = openX;
+			this._lastY = openY;
+			this.showAt(openX, openY);
 		}
 		_maybeHide(event) {
 			if (!this.el) return;
@@ -13143,28 +13162,20 @@
 			this.el.style.display = "block";
 			this._reposition(x, y);
 			this.el.setAttribute("aria-hidden", "false");
+			this.context.triggerEvent("contextMenu:show");
 		}
 		_reposition(x, y) {
 			if (!this.el) return;
 			const rx = x !== void 0 ? x : this._lastX;
 			const ry = y !== void 0 ? y : this._lastY;
-			const rect = this.el.getBoundingClientRect();
+			const w = this.el.offsetWidth;
+			const h = this.el.offsetHeight;
 			let left = rx;
 			let top = ry;
-			if (left + rect.width > window.innerWidth) left = window.innerWidth - rect.width - 8;
+			if (left + w > window.innerWidth - 8) left = window.innerWidth - w - 8;
 			if (left < 8) left = 8;
-			if (top + rect.height > window.innerHeight) top = window.innerHeight - rect.height - 8;
+			if (top + h > window.innerHeight - 8) top = window.innerHeight - h - 8;
 			if (top < 8) top = 8;
-			if (this._savedRange) try {
-				const sel = this._savedRange.getBoundingClientRect();
-				if (sel.width > 0 || sel.height > 0) {
-					if (top < sel.bottom && top + rect.height > sel.top && left < sel.right && left + rect.width > sel.left) {
-						const belowTop = sel.bottom + 6;
-						if (belowTop + rect.height <= window.innerHeight - 8) top = belowTop;
-						else top = Math.max(8, sel.top - rect.height - 6);
-					}
-				}
-			} catch (_) {}
 			this.el.style.left = `${left}px`;
 			this.el.style.top = `${top}px`;
 		}
@@ -13172,6 +13183,7 @@
 			if (!this.el) return;
 			this.el.style.display = "none";
 			this.el.setAttribute("aria-hidden", "true");
+			this.context.triggerEvent("contextMenu:hide");
 		}
 		/** Read the current selection's text or highlight color for the strip.
 		* @param {'foreColor'|'hiliteColor'} type
@@ -14286,6 +14298,771 @@
 		}
 	};
 	//#endregion
+	//#region src/js/module/AutoSaveRestore.js
+	/**
+	* AutoSaveRestore.js — Detects a previously auto-saved draft and offers the
+	* user a banner to restore or discard it.
+	*
+	* Activated when both `autoSave` and `autoSaveRestore` options are true.
+	* On initialize it checks localStorage for a draft that is within the
+	* `autoSaveRestoreTimeout` day window.  If one is found a dismissible banner
+	* is prepended to the editor container.
+	*/
+	var AutoSaveRestore = class {
+		/** @param {import('../Context.js').Context} context */
+		constructor(context) {
+			this.context = context;
+			this.options = context.options;
+			/** @type {HTMLElement|null} */
+			this._banner = null;
+		}
+		initialize() {
+			if (!this.options.autoSave || !this.options.autoSaveRestore) return this;
+			const key = this.options.autoSaveKey;
+			const metaKey = key + ":asrmeta";
+			let saved;
+			let meta;
+			try {
+				saved = localStorage.getItem(key);
+				meta = JSON.parse(localStorage.getItem(metaKey) || "{}");
+			} catch (_) {
+				return this;
+			}
+			if (!saved) return this;
+			const timeout = this.options.autoSaveRestoreTimeout;
+			if (timeout > 0) {
+				if (Date.now() - (meta.savedAt || 0) > timeout * 864e5) {
+					try {
+						localStorage.removeItem(key);
+						localStorage.removeItem(metaKey);
+					} catch (_) {}
+					return this;
+				}
+			}
+			this._showBanner(saved, meta);
+			return this;
+		}
+		destroy() {
+			this._removeBanner();
+		}
+		_showBanner(draftHtml, meta) {
+			const t = this.context.locale.autoSaveRestore || {};
+			const label = t.found || "Draft found. Restore?";
+			const restoreLabel = t.restore || "Restore";
+			const discardLabel = t.discard || "Discard";
+			const banner = document.createElement("div");
+			banner.className = "an-asr-banner";
+			banner.setAttribute("role", "alert");
+			const msg = document.createElement("span");
+			msg.className = "an-asr-msg";
+			if (meta.savedAt) {
+				const formatted = new Date(meta.savedAt).toLocaleString();
+				msg.textContent = (t.foundAt || "Draft from {date}. Restore?").replace("{date}", formatted);
+			} else msg.textContent = label;
+			const restoreBtn = document.createElement("button");
+			restoreBtn.type = "button";
+			restoreBtn.className = "an-btn an-asr-btn-restore";
+			restoreBtn.textContent = restoreLabel;
+			restoreBtn.addEventListener("click", () => this._restore(draftHtml));
+			const discardBtn = document.createElement("button");
+			discardBtn.type = "button";
+			discardBtn.className = "an-btn an-asr-btn-discard";
+			discardBtn.textContent = discardLabel;
+			discardBtn.addEventListener("click", () => this._discard());
+			banner.appendChild(msg);
+			banner.appendChild(restoreBtn);
+			banner.appendChild(discardBtn);
+			this._banner = banner;
+			const container = this.context.layoutInfo.container;
+			container.insertBefore(banner, container.firstChild);
+		}
+		_restore(draftHtml) {
+			this.context.setHTML(draftHtml);
+			this.context.clearHistory();
+			this._removeBanner();
+			if (typeof this.options.onAutoSaveRestore === "function") this.options.onAutoSaveRestore(draftHtml, this.context);
+		}
+		_discard() {
+			const key = this.options.autoSaveKey;
+			try {
+				localStorage.removeItem(key);
+				localStorage.removeItem(key + ":asrmeta");
+			} catch (_) {}
+			this._removeBanner();
+		}
+		_removeBanner() {
+			if (this._banner && this._banner.parentNode) this._banner.parentNode.removeChild(this._banner);
+			this._banner = null;
+		}
+	};
+	//#endregion
+	//#region src/js/module/MarkdownShortcuts.js
+	/**
+	* MarkdownShortcuts.js — Convert Markdown-style syntax typed directly in the
+	* editor into rich HTML elements (input rules / auto-format).
+	*
+	* Activated when `markdownShortcuts: true` (the default).
+	*
+	* Block rules — triggered by Space or Enter at the start of a line:
+	*   #[#[#]]·     → H1 / H2 / H3
+	*   >·           → blockquote
+	*   -·  or *·   → unordered list item
+	*   1.·          → ordered list item
+	*   [ ]·         → checklist item
+	*   ---          → horizontal rule  (on Enter)
+	*   ```          → code block       (on Enter)
+	*
+	* Inline rules — triggered when the closing marker is typed:
+	*   **text**     → <strong>
+	*   *text*       → <em>
+	*   ~~text~~     → <s>
+	*   `code`       → <code>
+	*/
+	var MarkdownShortcuts = class {
+		/** @param {import('../Context.js').Context} context */
+		constructor(context) {
+			this.context = context;
+			this.options = context.options;
+			this._disposers = [];
+		}
+		initialize() {
+			if (!this.options.markdownShortcuts) return this;
+			const editable = this.context.layoutInfo.editable;
+			const d1 = on(
+				editable,
+				"keydown",
+				/** @param {KeyboardEvent} e */
+				(e) => this._onKeydown(e)
+			);
+			const d2 = on(editable, "input", () => this._onInput());
+			this._disposers.push(d1, d2);
+			return this;
+		}
+		destroy() {
+			this._disposers.forEach((d) => d());
+			this._disposers = [];
+		}
+		_onKeydown(e) {
+			if (e.key === " ") {
+				if (this._applyBlockRule()) e.preventDefault();
+			} else if (e.key === "Enter") {
+				if (this._applyEnterRule()) e.preventDefault();
+			}
+		}
+		/**
+		* Returns the plain text of the line the cursor is on, up to the cursor.
+		* @returns {{ text: string, range: Range, lineNode: Node } | null}
+		*/
+		_getLineContext() {
+			const sel = window.getSelection();
+			if (!sel || !sel.rangeCount) return null;
+			const range = sel.getRangeAt(0);
+			if (!range.collapsed) return null;
+			const editable = this.context.layoutInfo.editable;
+			if (!editable.contains(range.startContainer)) return null;
+			let node = range.startContainer;
+			while (node && node !== editable && !this._isBlock(node)) node = node.parentNode;
+			if (!node || node === editable) node = range.startContainer;
+			const tmpRange = document.createRange();
+			tmpRange.setStart(node, 0);
+			tmpRange.setEnd(range.startContainer, range.startOffset);
+			return {
+				text: tmpRange.toString(),
+				range,
+				lineNode: node
+			};
+		}
+		_isBlock(node) {
+			if (node.nodeType !== Node.ELEMENT_NODE) return false;
+			const display = window.getComputedStyle(node).display;
+			return display === "block" || display === "list-item" || display === "table-cell";
+		}
+		/** Applies block rule on Space key. Returns true if a rule fired. */
+		_applyBlockRule() {
+			const ctx = this._getLineContext();
+			if (!ctx) return false;
+			const { text } = ctx;
+			const blockPatterns = [
+				{
+					re: /^(#{1,3})$/,
+					handler: (m) => this._convertToHeading(m[1].length)
+				},
+				{
+					re: /^>$/,
+					handler: () => this._convertToBlockquote()
+				},
+				{
+					re: /^[-*]$/,
+					handler: () => this._convertToList("ul")
+				},
+				{
+					re: /^1\.$/,
+					handler: () => this._convertToList("ol")
+				},
+				{
+					re: /^\[ \]$/,
+					handler: () => this._convertToChecklist()
+				}
+			];
+			for (const { re, handler } of blockPatterns) {
+				const m = text.match(re);
+				if (m) {
+					handler(m);
+					return true;
+				}
+			}
+			return false;
+		}
+		/** Applies block rule on Enter key (---, ```). Returns true if a rule fired. */
+		_applyEnterRule() {
+			const ctx = this._getLineContext();
+			if (!ctx) return false;
+			const { text } = ctx;
+			if (/^-{3,}$/.test(text)) {
+				this._convertToHr();
+				return true;
+			}
+			if (/^`{3}/.test(text)) {
+				this._convertToCodeBlock();
+				return true;
+			}
+			return false;
+		}
+		_selectLineAndDelete() {
+			const sel = window.getSelection();
+			if (!sel || !sel.rangeCount) return;
+			const range = sel.getRangeAt(0);
+			const startRange = document.createRange();
+			startRange.setStart(range.startContainer.parentNode || range.startContainer, 0);
+			startRange.setEnd(range.startContainer, range.startOffset);
+			startRange.deleteContents();
+		}
+		_convertToHeading(level) {
+			this._selectLineAndDelete();
+			document.execCommand("formatBlock", false, `h${level}`);
+			this.context.triggerEvent("change", this.context.getHTML());
+		}
+		_convertToBlockquote() {
+			this._selectLineAndDelete();
+			document.execCommand("formatBlock", false, "blockquote");
+			this.context.triggerEvent("change", this.context.getHTML());
+		}
+		_convertToList(type) {
+			this._selectLineAndDelete();
+			document.execCommand(type === "ul" ? "insertUnorderedList" : "insertOrderedList");
+			this.context.triggerEvent("change", this.context.getHTML());
+		}
+		_convertToChecklist() {
+			this._selectLineAndDelete();
+			this.context.invoke("editor.checklist");
+			this.context.triggerEvent("change", this.context.getHTML());
+		}
+		_convertToHr() {
+			this._selectLineAndDelete();
+			this.context.invoke("editor.insertHR");
+			this.context.triggerEvent("change", this.context.getHTML());
+		}
+		_convertToCodeBlock() {
+			this._selectLineAndDelete();
+			document.execCommand("formatBlock", false, "pre");
+			this.context.triggerEvent("change", this.context.getHTML());
+		}
+		_onInput() {
+			const sel = window.getSelection();
+			if (!sel || !sel.rangeCount) return;
+			const range = sel.getRangeAt(0);
+			if (!range.collapsed) return;
+			if (!this.context.layoutInfo.editable.contains(range.startContainer)) return;
+			const node = range.startContainer;
+			if (node.nodeType !== Node.TEXT_NODE) return;
+			const text = node.textContent;
+			const offset = range.startOffset;
+			const inlineRules = [
+				{
+					re: /\*\*(.+?)\*\*$/,
+					tag: "strong"
+				},
+				{
+					re: /(?<!\*)\*(?!\*)(.+?)(?<!\*)\*(?!\*)$/,
+					tag: "em"
+				},
+				{
+					re: /~~(.+?)~~$/,
+					tag: "s"
+				},
+				{
+					re: /`([^`]+)`$/,
+					tag: "code"
+				}
+			];
+			const upToCursor = text.slice(0, offset);
+			for (const { re, tag } of inlineRules) {
+				const m = upToCursor.match(re);
+				if (!m) continue;
+				const matchStart = upToCursor.length - m[0].length;
+				const matchEnd = offset;
+				const innerText = m[1];
+				const before = text.slice(0, matchStart);
+				const after = text.slice(matchEnd);
+				const el = document.createElement(tag);
+				el.textContent = innerText;
+				const beforeNode = document.createTextNode(before);
+				const afterNode = document.createTextNode("​" + after);
+				const parent = node.parentNode;
+				parent.insertBefore(beforeNode, node);
+				parent.insertBefore(el, node);
+				parent.insertBefore(afterNode, node);
+				parent.removeChild(node);
+				const newRange = document.createRange();
+				newRange.setStart(afterNode, 1);
+				newRange.collapse(true);
+				sel.removeAllRanges();
+				sel.addRange(newRange);
+				this.context.triggerEvent("change", this.context.getHTML());
+				break;
+			}
+		}
+	};
+	//#endregion
+	//#region src/js/module/BubbleToolbar.js
+	/**
+	* BubbleToolbar.js — A mini floating toolbar that appears above the current
+	* text selection, allowing quick access to common formatting actions without
+	* reaching for the main toolbar.
+	*
+	* Activated when `bubbleToolbar: true`.  The set of visible buttons is
+	* controlled by `bubbleToolbarItems` (array of button name strings).
+	*
+	* Built-in names: 'bold', 'italic', 'underline', 'strikethrough',
+	*   'link', 'foreColor', 'removeFormat', 'inlineCode'.
+	* Any name not found in the built-in map is silently ignored.
+	*/
+	var _S = "stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"";
+	var _svg = (p) => `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" ${_S} style="display:block">${p}</svg>`;
+	var _ICONS = {
+		bold: _svg("<path d=\"M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z\"/><path d=\"M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z\"/>"),
+		italic: _svg("<line x1=\"19\" y1=\"4\" x2=\"10\" y2=\"4\"/><line x1=\"14\" y1=\"20\" x2=\"5\" y2=\"20\"/><line x1=\"15\" y1=\"4\" x2=\"9\" y2=\"20\"/>"),
+		underline: _svg("<path d=\"M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3\"/><line x1=\"4\" y1=\"21\" x2=\"20\" y2=\"21\"/>"),
+		strikethrough: _svg("<path d=\"M17.3 12H6.7\"/><path d=\"M10 6.5C10 5.1 11.1 4 12.5 4c1.4 0 2.5 1.1 2.5 2.5 0 .8-.4 1.5-1 2\"/><path d=\"M14 17.5C14 19 12.9 20 11.5 20 10.1 20 9 18.9 9 17.5c0-.8.4-1.5 1-2\"/>"),
+		link: _svg("<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\"/>"),
+		foreColor: _svg("<path d=\"M4 20L12 4L20 20\"/><line x1=\"7.5\" y1=\"14\" x2=\"16.5\" y2=\"14\"/>"),
+		removeFormat: _svg("<path d=\"m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21\"/><path d=\"M22 21H7\"/><path d=\"m5 11 9 9\"/>"),
+		inlineCode: _svg("<path d=\"M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1\"/><path d=\"M16 3h1a2 2 0 0 1 2 2v5c0 1.1.9 2 2 2a2 2 0 0 1-2 2v5a2 2 0 0 1-2 2h-1\"/>")
+	};
+	var _ACTIONS = {
+		bold: (ctx) => ctx.invoke("editor.bold"),
+		italic: (ctx) => ctx.invoke("editor.italic"),
+		underline: (ctx) => ctx.invoke("editor.underline"),
+		strikethrough: (ctx) => ctx.invoke("editor.strikethrough"),
+		link: (ctx) => ctx.invoke("linkDialog.show"),
+		foreColor: (ctx) => {
+			const color = window.prompt("Text color (hex or name):", "#000000");
+			if (color) ctx.invoke("editor.foreColor", color);
+		},
+		removeFormat: (ctx) => ctx.invoke("editor.removeFormat"),
+		inlineCode: (ctx) => ctx.invoke("editor.inlineCode")
+	};
+	var _ACTIVE = {
+		bold: () => document.queryCommandState("bold"),
+		italic: () => document.queryCommandState("italic"),
+		underline: () => document.queryCommandState("underline"),
+		strikethrough: () => document.queryCommandState("strikeThrough")
+	};
+	var BubbleToolbar = class {
+		/** @param {import('../Context.js').Context} context */
+		constructor(context) {
+			this.context = context;
+			this.options = context.options;
+			/** @type {HTMLElement|null} */
+			this._el = null;
+			this._visible = false;
+			this._rafId = null;
+			this._contextMenuOpen = false;
+			this._disposers = [];
+			this._onSelectionChange = this._onSelectionChange.bind(this);
+			this._onMousedown = this._onMousedown.bind(this);
+			this._onKeydown = this._onKeydown.bind(this);
+			this._onContextMenu = this._onContextMenu.bind(this);
+		}
+		initialize() {
+			if (!this.options.bubbleToolbar) return this;
+			this._build();
+			const d1 = on(document, "selectionchange", this._onSelectionChange);
+			const d2 = on(document, "mousedown", this._onMousedown);
+			const d3 = on(document, "keydown", this._onKeydown);
+			const d4 = on(document, "contextmenu", this._onContextMenu);
+			const d5 = this.context.on("contextMenu:show", () => {
+				this._contextMenuOpen = true;
+				this._hide();
+			});
+			const d6 = this.context.on("contextMenu:hide", () => {
+				this._contextMenuOpen = false;
+			});
+			this._disposers.push(d1, d2, d3, d4, d5, d6);
+			return this;
+		}
+		destroy() {
+			if (this._el && this._el.parentNode) this._el.parentNode.removeChild(this._el);
+			this._el = null;
+			this._disposers.forEach((d) => d());
+			this._disposers = [];
+			cancelAnimationFrame(this._rafId);
+		}
+		_build() {
+			const el = document.createElement("div");
+			el.className = "an-bubble-toolbar";
+			el.setAttribute("role", "toolbar");
+			el.setAttribute("aria-label", "Formatting");
+			const items = this.options.bubbleToolbarItems || [
+				"bold",
+				"italic",
+				"underline",
+				"link",
+				"foreColor",
+				"removeFormat"
+			];
+			for (const name of items) {
+				if (!_ICONS[name] || !_ACTIONS[name]) continue;
+				const btn = document.createElement("button");
+				btn.type = "button";
+				btn.className = "an-bubble-btn";
+				btn.dataset.name = name;
+				btn.setAttribute("aria-label", name);
+				btn.innerHTML = _ICONS[name];
+				btn.addEventListener("mousedown", (e) => {
+					e.preventDefault();
+				});
+				btn.addEventListener("click", (e) => {
+					e.preventDefault();
+					e.stopPropagation();
+					this.context.invoke("editor.focus");
+					_ACTIONS[name](this.context);
+					this.context.invoke("editor.afterCommand");
+					this._syncActive();
+				});
+				el.appendChild(btn);
+			}
+			document.body.appendChild(el);
+			this._el = el;
+		}
+		_show(rect) {
+			if (!this._el) return;
+			const el = this._el;
+			el.style.visibility = "hidden";
+			el.style.display = "flex";
+			const bw = el.offsetWidth;
+			const bh = el.offsetHeight;
+			const gap = 8;
+			let left = rect.left + rect.width / 2 - bw / 2;
+			let top = rect.top - bh - gap;
+			left = Math.max(8, Math.min(left, window.innerWidth - bw - 8));
+			if (top < 8) top = rect.bottom + gap;
+			el.style.top = `${top}px`;
+			el.style.left = `${left}px`;
+			el.style.visibility = "";
+			this._syncActive();
+			this._visible = true;
+		}
+		_hide() {
+			if (!this._el) return;
+			this._el.style.display = "none";
+			this._visible = false;
+		}
+		_syncActive() {
+			if (!this._el) return;
+			this._el.querySelectorAll(".an-bubble-btn").forEach((btn) => {
+				const activeFn = _ACTIVE[btn.dataset.name];
+				btn.classList.toggle("an-active", !!(activeFn && activeFn()));
+			});
+		}
+		_onSelectionChange() {
+			cancelAnimationFrame(this._rafId);
+			this._rafId = requestAnimationFrame(() => {
+				if (this._contextMenuOpen) return;
+				const sel = window.getSelection();
+				if (!sel || sel.isCollapsed || !sel.rangeCount) {
+					this._hide();
+					return;
+				}
+				if (!this.context.layoutInfo.editable.contains(sel.anchorNode)) {
+					this._hide();
+					return;
+				}
+				if (this.context.options.readOnly) {
+					this._hide();
+					return;
+				}
+				const rect = sel.getRangeAt(0).getBoundingClientRect();
+				if (!rect || rect.width === 0) {
+					this._hide();
+					return;
+				}
+				this._show(rect);
+			});
+		}
+		_onMousedown(e) {
+			if (!this._visible) return;
+			if (this._el && this._el.contains(e.target)) return;
+			if (this.context.layoutInfo.editable.contains(e.target)) return;
+			this._hide();
+		}
+		_onKeydown(e) {
+			if (e.key === "Escape" && this._visible) this._hide();
+		}
+		_onContextMenu() {
+			this._hide();
+		}
+	};
+	//#endregion
+	//#region src/js/module/Mention.js
+	/**
+	* Mention.js — @mention autocomplete support.
+	*
+	* Activated when `mention.onSearch` option is provided.
+	*
+	* When the user types the trigger character (default `@`) followed by at least
+	* `mention.minChars` characters, `onSearch(query, callback)` is called.
+	* The callback receives an array of `{ id, label, avatar? }` items which are
+	* rendered in a floating dropdown.  Selecting an item inserts a non-editable
+	* mention chip and fires `onInsert` (if provided) to override the default HTML.
+	*
+	* Options shape (passed as `mention` option object):
+	* {
+	*   trigger:      '@',
+	*   minChars:     1,
+	*   maxResults:   8,
+	*   debounce:     200,
+	*   onSearch:     (query, callback) => void,
+	*   onInsert:     (item) => string | null,
+	*   mentionClass: 'an-mention',
+	*   allowSpaces:  false,
+	* }
+	*/
+	var Mention = class {
+		/** @param {import('../Context.js').Context} context */
+		constructor(context) {
+			this.context = context;
+			/** @type {HTMLElement|null} */
+			this._dropdown = null;
+			/** @type {string} */
+			this._query = "";
+			/** @type {number|null} */
+			this._debounceTimer = null;
+			/** @type {number} current highlighted index */
+			this._activeIndex = -1;
+			/** @type {Array<{id, label, avatar?}>} */
+			this._items = [];
+			/** @type {boolean} */
+			this._open = false;
+			/** Position of trigger character in the text node */
+			this._triggerNode = null;
+			this._triggerOffset = 0;
+			/** @type {DOMRect|null} Caret rect captured synchronously during input event */
+			this._caretRect = null;
+			this._disposers = [];
+		}
+		initialize() {
+			const cfg = this.context.options.mention;
+			if (!cfg || typeof cfg.onSearch !== "function") return this;
+			this._cfg = {
+				trigger: cfg.trigger || "@",
+				minChars: cfg.minChars ?? 0,
+				maxResults: cfg.maxResults ?? 8,
+				debounce: cfg.debounce ?? 200,
+				onSearch: cfg.onSearch,
+				onInsert: cfg.onInsert || null,
+				mentionClass: cfg.mentionClass || "an-mention",
+				allowSpaces: cfg.allowSpaces || false
+			};
+			this._buildDropdown();
+			const editable = this.context.layoutInfo.editable;
+			const d1 = on(editable, "keydown", (e) => this._onKeydown(e));
+			const d2 = on(editable, "input", () => this._onInput());
+			const d3 = on(document, "click", (e) => this._onDocClick(e));
+			this._disposers.push(d1, d2, d3);
+			return this;
+		}
+		destroy() {
+			clearTimeout(this._debounceTimer);
+			if (this._dropdown && this._dropdown.parentNode) this._dropdown.parentNode.removeChild(this._dropdown);
+			this._dropdown = null;
+			this._disposers.forEach((d) => d());
+			this._disposers = [];
+		}
+		_buildDropdown() {
+			const el = document.createElement("div");
+			el.className = "an-mention-dropdown";
+			el.setAttribute("role", "listbox");
+			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;
+			this._items.forEach((item, i) => {
+				const li = document.createElement("div");
+				li.className = "an-mention-item";
+				li.setAttribute("role", "option");
+				li.dataset.index = i;
+				if (item.avatar) {
+					const img = document.createElement("img");
+					img.src = item.avatar;
+					img.className = "an-mention-avatar";
+					img.alt = "";
+					li.appendChild(img);
+				}
+				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);
+			});
+			this._highlightItem(this._activeIndex);
+		}
+		_highlightItem(index) {
+			if (!this._dropdown) return;
+			this._dropdown.querySelectorAll(".an-mention-item").forEach((el, i) => {
+				el.classList.toggle("an-mention-active", i === index);
+			});
+			this._activeIndex = index;
+		}
+		_positionDropdown() {
+			const dd = this._dropdown;
+			const rect = this._caretRect;
+			if (!rect || rect.height === 0) return;
+			dd.style.visibility = "hidden";
+			dd.style.display = "block";
+			const ddh = dd.offsetHeight;
+			const ddw = dd.offsetWidth;
+			let top = rect.bottom + 4;
+			let left = rect.left;
+			if (rect.bottom + ddh + 8 > window.innerHeight) top = rect.top - ddh - 4;
+			left = Math.max(8, Math.min(left, window.innerWidth - ddw - 8));
+			dd.style.top = `${top}px`;
+			dd.style.left = `${left}px`;
+			dd.style.visibility = "";
+		}
+		_showDropdown() {
+			this._open = true;
+			this._positionDropdown();
+		}
+		_hideDropdown() {
+			if (this._dropdown) this._dropdown.style.display = "none";
+			this._open = false;
+			this._items = [];
+			this._activeIndex = -1;
+			this._triggerNode = null;
+			this._caretRect = null;
+			this._query = "";
+		}
+		/**
+		* Captures the caret rect synchronously during the input event.
+		* Must be called while the DOM event is still live — getClientRects() on a
+		* collapsed range is reliable at this point but often empty inside async callbacks.
+		*/
+		_captureCaretRect() {
+			if (this._triggerNode && this._triggerNode.isConnected) try {
+				const r = document.createRange();
+				const end = Math.min(this._triggerOffset + 1, this._triggerNode.textContent.length);
+				r.setStart(this._triggerNode, this._triggerOffset);
+				r.setEnd(this._triggerNode, end);
+				const candidate = r.getBoundingClientRect();
+				if (candidate.height > 0) {
+					this._caretRect = candidate;
+					return;
+				}
+			} catch (_) {}
+			const sel = window.getSelection();
+			if (!sel || !sel.rangeCount) return;
+			const rects = sel.getRangeAt(0).getClientRects();
+			if (rects.length > 0) this._caretRect = rects[rects.length - 1];
+		}
+		_getQueryAtCursor() {
+			const sel = window.getSelection();
+			if (!sel || !sel.rangeCount) return null;
+			const range = sel.getRangeAt(0);
+			if (!range.collapsed) return null;
+			const node = range.startContainer;
+			if (node.nodeType !== Node.TEXT_NODE) return null;
+			const text = node.textContent.slice(0, range.startOffset);
+			const trigger = this._cfg.trigger;
+			const triggerIdx = text.lastIndexOf(trigger);
+			if (triggerIdx === -1) return null;
+			const afterTrigger = text.slice(triggerIdx + trigger.length);
+			if (!this._cfg.allowSpaces && /\s/.test(afterTrigger)) return null;
+			if (afterTrigger.length < this._cfg.minChars) return null;
+			this._triggerNode = node;
+			this._triggerOffset = triggerIdx;
+			return afterTrigger;
+		}
+		_onInput() {
+			if (!this._cfg) return;
+			const query = this._getQueryAtCursor();
+			if (query === null) {
+				this._hideDropdown();
+				return;
+			}
+			this._captureCaretRect();
+			this._query = query;
+			clearTimeout(this._debounceTimer);
+			this._debounceTimer = setTimeout(() => {
+				this._cfg.onSearch(this._query, (items) => {
+					if (!Array.isArray(items) || items.length === 0) {
+						this._hideDropdown();
+						return;
+					}
+					this._renderItems(items);
+					this._showDropdown();
+				});
+			}, this._cfg.debounce);
+		}
+		_onKeydown(e) {
+			if (!this._cfg || !this._open) return;
+			if (e.key === "ArrowDown") {
+				e.preventDefault();
+				const next = (this._activeIndex + 1) % this._items.length;
+				this._highlightItem(next);
+			} else if (e.key === "ArrowUp") {
+				e.preventDefault();
+				const prev = (this._activeIndex - 1 + this._items.length) % this._items.length;
+				this._highlightItem(prev);
+			} else if (e.key === "Enter" || e.key === "Tab") {
+				if (this._activeIndex >= 0) {
+					e.preventDefault();
+					this._select(this._activeIndex);
+				}
+			} else if (e.key === "Escape") this._hideDropdown();
+		}
+		_onDocClick(e) {
+			if (!this._open) return;
+			if (this._dropdown && this._dropdown.contains(e.target)) return;
+			this._hideDropdown();
+		}
+		_select(index) {
+			const item = this._items[index];
+			if (!item) return;
+			if (this._triggerNode) {
+				const node = this._triggerNode;
+				node.textContent = node.textContent.slice(0, this._triggerOffset) + node.textContent.slice(this._triggerOffset + this._cfg.trigger.length + this._query.length);
+				const sel = window.getSelection();
+				const range = document.createRange();
+				range.setStart(node, this._triggerOffset);
+				range.collapse(true);
+				sel.removeAllRanges();
+				sel.addRange(range);
+			}
+			let html;
+			if (typeof this._cfg.onInsert === "function") html = this._cfg.onInsert(item);
+			if (!html) html = `<span class="${this._cfg.mentionClass}" data-mention-id="${item.id}" contenteditable="false">@${item.label}</span>`;
+			this.context.invoke("editor.insertHTML", html + "&#8203;");
+			this._hideDropdown();
+			this.context.triggerEvent("change", this.context.getHTML());
+		}
+	};
+	//#endregion
 	//#region src/js/Context.js
 	/**
 	* Context.js - Central hub for the editor instance
@@ -14364,6 +15141,10 @@
 			register("shortcutsDialog", ShortcutsDialog);
 			register("findReplace", FindReplace);
 			register("imageCropOverlay", ImageCropOverlay);
+			register("autoSaveRestore", AutoSaveRestore);
+			register("markdownShortcuts", MarkdownShortcuts);
+			register("bubbleToolbar", BubbleToolbar);
+			register("mention", Mention);
 			for (const [name, ModuleClass] of _customModules) register(name, ModuleClass);
 		}
 		/**
@@ -14395,7 +15176,9 @@
 			if (this.options.autoSave && this.options.autoSaveKey) {
 				const d4 = this.on("change", () => {
 					try {
-						localStorage.setItem(this.options.autoSaveKey, this.getHTML());
+						const key = this.options.autoSaveKey;
+						localStorage.setItem(key, this.getHTML());
+						localStorage.setItem(key + ":asrmeta", JSON.stringify({ savedAt: Date.now() }));
 					} catch (_) {}
 				});
 				this._disposers.push(d4);