autumnnote 1.0.9 → 1.1.0

package/dist/autumnnote.es.js

@@ -96,8 +96,7 @@ function isFunction(val) {
 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;
@@ -1444,7 +1443,21 @@ var defaultOptions = {
 	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
@@ -5655,8 +5668,8 @@ var Editor = class {
 * 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\"/>")],
@@ -13409,12 +13422,18 @@ var ContextMenu = class {
 		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;
@@ -13425,28 +13444,20 @@ var ContextMenu = class {
 		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`;
 	}
@@ -13454,6 +13465,7 @@ var ContextMenu = class {
 		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
@@ -14568,6 +14580,771 @@ var ImageCropOverlay = class {
 	}
 };
 //#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
@@ -14646,6 +15423,10 @@ var Context = class {
 		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);
 	}
 	/**
@@ -14677,7 +15458,9 @@ var Context = class {
 		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);