autumnnote 1.0.6 → 1.0.7

package/dist/autumnnote.umd.js

@@ -325,14 +325,42 @@
 	* @param {HTMLElement} [editable] - scoping element to avoid touching nodes outside this editor
 	*/
 	function fontSize(size, editable = document) {
+		const sel = window.getSelection();
+		const wasCollapsed = !sel || !sel.rangeCount || sel.getRangeAt(0).collapsed;
 		execCommand("fontSize", "7");
-		editable.querySelectorAll("font[size=\"7\"]").forEach((el) => {
+		const scope = editable instanceof HTMLElement ? editable : document;
+		const newSpans = [];
+		scope.querySelectorAll("font[size=\"7\"]").forEach((el) => {
 			const span = document.createElement("span");
 			span.style.fontSize = size;
 			el.parentNode.insertBefore(span, el);
 			while (el.firstChild) span.appendChild(el.firstChild);
 			el.parentNode.removeChild(el);
+			newSpans.push(span);
 		});
+		if (sel && newSpans.length > 0) {
+			const first = newSpans[0];
+			const last = newSpans[newSpans.length - 1];
+			try {
+				if (wasCollapsed) {
+					if (!first.firstChild) first.appendChild(document.createTextNode("​"));
+					const nr = document.createRange();
+					const anchor = first.firstChild;
+					nr.setStart(anchor, anchor.textContent.length);
+					nr.collapse(true);
+					sel.removeAllRanges();
+					sel.addRange(nr);
+				} else {
+					const nr = document.createRange();
+					const startNode = first.firstChild || first;
+					const endNode = last.lastChild || last;
+					nr.setStart(startNode, 0);
+					nr.setEnd(endNode, endNode.nodeType === Node.TEXT_NODE ? endNode.textContent.length : endNode.childNodes.length);
+					sel.removeAllRanges();
+					sel.addRange(nr);
+				}
+			} catch (_) {}
+		}
 	}
 	/**
 	* Wraps the selection in the given block tag (p, h1-h6, blockquote, pre).
@@ -437,9 +465,24 @@
 		const codeEl = container && container.closest ? container.closest("code") : null;
 		if (codeEl && !codeEl.closest("pre")) {
 			const parent = codeEl.parentNode;
+			const prevSibling = codeEl.previousSibling;
+			const movedChildren = Array.from(codeEl.childNodes);
 			while (codeEl.firstChild) parent.insertBefore(codeEl.firstChild, codeEl);
 			parent.removeChild(codeEl);
-			if (editable) editable.normalize();
+			if (parent && parent.normalize) parent.normalize();
+			if (movedChildren.length > 0) try {
+				const firstMoved = movedChildren[0];
+				const lastMoved = movedChildren[movedChildren.length - 1];
+				const nr = document.createRange();
+				const anchorNode = firstMoved.parentNode === parent ? firstMoved : prevSibling ? prevSibling.nextSibling : parent.firstChild;
+				if (anchorNode) {
+					nr.setStart(anchorNode, 0);
+					const endAnchor = lastMoved.parentNode === parent ? lastMoved : anchorNode;
+					nr.setEnd(endAnchor, endAnchor.nodeType === Node.TEXT_NODE ? endAnchor.textContent.length : endAnchor.childNodes.length);
+					sel.removeAllRanges();
+					sel.addRange(nr);
+				}
+			} catch (_) {}
 		} else {
 			if (range.collapsed) return;
 			try {
@@ -464,14 +507,17 @@
 	/**
 	* Returns true when the cursor / selection is inside an inline <code>
 	* (not nested in a <pre>).
+	* Uses startContainer for reliable cross-browser detection regardless of
+	* whether the selection is collapsed or a range (commonAncestorContainer
+	* can behave inconsistently for range selections on some browsers).
 	* @returns {boolean}
 	*/
 	function isInlineCode() {
 		const sel = window.getSelection();
 		if (!sel || !sel.rangeCount) return false;
-		let container = sel.getRangeAt(0).commonAncestorContainer;
-		if (container.nodeType === 3) container = container.parentElement;
-		const code = container && container.closest ? container.closest("code") : null;
+		let sc = sel.getRangeAt(0).startContainer;
+		if (sc.nodeType === 3) sc = sc.parentElement;
+		const code = sc && sc.closest ? sc.closest("code") : null;
 		return !!(code && !code.closest("pre"));
 	}
 	/**
@@ -482,7 +528,8 @@
 	function toggleChecklist() {
 		const sel = window.getSelection();
 		if (!sel || !sel.rangeCount) return;
-		let container = sel.getRangeAt(0).commonAncestorContainer;
+		const range = sel.getRangeAt(0);
+		let container = range.commonAncestorContainer;
 		if (container.nodeType === 3) container = container.parentElement;
 		const ul = container.closest && container.closest(".an-checklist");
 		if (ul) {
@@ -508,6 +555,45 @@
 				return;
 			}
 		}
+		if (range.collapsed) {
+			const BLOCK_TAGS = new Set([
+				"P",
+				"DIV",
+				"H1",
+				"H2",
+				"H3",
+				"H4",
+				"H5",
+				"H6",
+				"BLOCKQUOTE",
+				"LI"
+			]);
+			let block = container;
+			while (block && block.parentNode && !BLOCK_TAGS.has(block.tagName)) block = block.parentNode;
+			const itemText = block && BLOCK_TAGS.has(block.tagName) ? Array.from(block.childNodes).map((n) => n.textContent).join("").replace(/\u00a0/g, " ") : "";
+			const ul = document.createElement("ul");
+			ul.className = "an-checklist";
+			const li = document.createElement("li");
+			const checkbox = document.createElement("input");
+			checkbox.type = "checkbox";
+			checkbox.contentEditable = "false";
+			li.appendChild(checkbox);
+			li.appendChild(document.createTextNode(itemText || "​"));
+			ul.appendChild(li);
+			if (block && BLOCK_TAGS.has(block.tagName)) block.parentNode.replaceChild(ul, block);
+			else {
+				document.execCommand("insertHTML", false, ul.outerHTML);
+				return;
+			}
+			const textNode = li.lastChild;
+			const nr = document.createRange();
+			const offset = textNode.nodeType === Node.TEXT_NODE ? textNode.textContent.length : 0;
+			nr.setStart(textNode, offset);
+			nr.collapse(true);
+			sel.removeAllRanges();
+			sel.addRange(nr);
+			return;
+		}
 		const lines = sel.toString().split(/\r?\n/).filter((l) => l.trim().length > 0);
 		if (lines.length === 0) return;
 		const items = lines.map((l) => `<li><input type="checkbox" contenteditable="false">${l || "​"}</li>`).join("");
@@ -576,9 +662,9 @@
 		if (document.queryCommandState("underline")) return true;
 		const sel = window.getSelection();
 		if (!sel || !sel.rangeCount) return false;
-		let container = sel.getRangeAt(0).commonAncestorContainer;
-		if (container.nodeType === 3) container = container.parentElement;
-		return !!(container && container.closest && container.closest("u"));
+		let sc = sel.getRangeAt(0).startContainer;
+		if (sc.nodeType === 3) sc = sc.parentElement;
+		return !!(sc && sc.closest && sc.closest("u"));
 	});
 	var strikeBtn = btn("strikethrough", "strikethrough", "Strikethrough", () => strikethrough(), () => document.queryCommandState("strikeThrough"));
 	var superscriptBtn = btn("superscript", "superscript", "Superscript", () => superscript(), () => document.queryCommandState("superscript"));
@@ -972,7 +1058,6 @@
 		"object",
 		"embed",
 		"form",
-		"input",
 		"button"
 	];
 	/** Attributes whose values must be sanitised as URLs. */
@@ -996,7 +1081,8 @@
 	* Uses DOMParser so the sanitisation follows normal browser parsing rules —
 	* no regex shortcuts that can be bypassed by encoding tricks.
 	*
-	* - Strips PROHIBITED_TAGS (script, style, iframe, object, embed, form, input, button)
+	* - Strips PROHIBITED_TAGS (script, style, iframe, object, embed, form, button)
+	* - Allows input[type="checkbox"] only inside ul.an-checklist li; removes all other <input>
 	* - Removes all on* event-handler attributes
 	* - Rejects javascript: and vbscript: URLs in URL attributes
 	* - Rejects data: URIs everywhere except img[src] (base64 uploads)
@@ -1035,6 +1121,16 @@
 				}
 			});
 		});
+		doc.querySelectorAll("input").forEach((el) => {
+			if (!(el.closest("ul.an-checklist") !== null && el.closest("li") !== null) || el.getAttribute("type") !== "checkbox") el.remove();
+			else Array.from(el.attributes).forEach((attr) => {
+				if (![
+					"type",
+					"checked",
+					"contenteditable"
+				].includes(attr.name)) el.removeAttribute(attr.name);
+			});
+		});
 		return doc.body.innerHTML;
 	}
 	/**
@@ -1115,7 +1211,12 @@
 		if (options.maxHeight) editable.style.maxHeight = `${options.maxHeight}px`;
 		container.appendChild(editable);
 		if (options.theme === "dark") container.classList.add("an-theme-dark");
-		if (options.readOnly) container.classList.add("an-disabled");
+		if (options.readOnly) {
+			container.classList.add("an-disabled");
+			editable.querySelectorAll("ul.an-checklist input[type=\"checkbox\"]").forEach((cb) => {
+				cb.setAttribute("disabled", "");
+			});
+		}
 		if (options.direction === "rtl") {
 			editable.setAttribute("dir", "rtl");
 			container.classList.add("an-dir-rtl");
@@ -1994,7 +2095,37 @@
 				sel.removeAllRanges();
 				sel.addRange(nr);
 			};
-			this._disposers.push(on(editable, "keydown", onKeydown), on(editable, "beforeinput", onBeforeInput), on(editable, "input", onInput), on(document, "selectionchange", onSelChange), on(editable, "click", onCheckboxClick), on(editable, "mouseup", fixChecklistCursor), on(editable, "keyup", fixChecklistCursor));
+			const isReadOnly = () => this.context.layoutInfo.container.classList.contains("an-disabled");
+			this._disposers.push(on(editable, "keydown", onKeydown), on(editable, "beforeinput", onBeforeInput), on(editable, "input", onInput), on(document, "selectionchange", onSelChange), on(editable, "click", onCheckboxClick), on(editable, "mouseup", fixChecklistCursor), on(editable, "keyup", fixChecklistCursor), on(editable, "dragstart", (e) => {
+				if (isReadOnly()) e.preventDefault();
+			}), on(editable, "drop", (e) => {
+				if (isReadOnly()) e.preventDefault();
+			}));
+			/** @type {string|null} 'superscript' | 'subscript' | null */
+			let _compositionSupSub = null;
+			const onCompositionStart = () => {
+				const sel = window.getSelection();
+				if (!sel || !sel.rangeCount) {
+					_compositionSupSub = null;
+					return;
+				}
+				let node = sel.getRangeAt(0).startContainer;
+				if (node.nodeType === Node.TEXT_NODE) node = node.parentElement;
+				if (node && node.closest) if (node.closest("sup")) _compositionSupSub = "superscript";
+				else if (node.closest("sub")) _compositionSupSub = "subscript";
+				else _compositionSupSub = null;
+			};
+			const onCompositionEnd = () => {
+				const tag = _compositionSupSub;
+				_compositionSupSub = null;
+				if (!tag) return;
+				const sel = window.getSelection();
+				if (!sel || !sel.rangeCount) return;
+				let node = sel.getRangeAt(0).startContainer;
+				if (node.nodeType === Node.TEXT_NODE) node = node.parentElement;
+				if (!(node && node.closest && (tag === "superscript" ? node.closest("sup") : node.closest("sub")))) document.execCommand(tag);
+			};
+			this._disposers.push(on(editable, "compositionstart", onCompositionStart), on(editable, "compositionend", onCompositionEnd));
 		}
 		_onKeydown(event) {
 			const editable = this.context.layoutInfo.editable;
@@ -2080,6 +2211,7 @@
 			}
 		}
 		afterCommand() {
+			this._cleanOrphanedFigures();
 			this.context.invoke("toolbar.refresh");
 			this.context.invoke("statusbar.update");
 			this._scheduleSnapshot();
@@ -2096,6 +2228,16 @@
 				this.context.triggerEvent("change", this.getHTML());
 			}, 400);
 		}
+		/**
+		* C4: Removes figure.an-figure elements that no longer contain an <img>.
+		* This happens when a user selects only the image (not the whole figure)
+		* and deletes or replaces it, leaving a dangling figcaption.
+		*/
+		_cleanOrphanedFigures() {
+			this.context.layoutInfo.editable.querySelectorAll("figure.an-figure").forEach((fig) => {
+				if (!fig.querySelector("img")) fig.parentNode.removeChild(fig);
+			});
+		}
 		focus() {
 			this.context.layoutInfo.editable.focus();
 		}
@@ -2827,15 +2969,28 @@
 				if (def.name === "fontFamily" && !isHeader) opt.style.fontFamily = value;
 				select.appendChild(opt);
 			});
+			/** @type {Range|null} */
+			let _savedRange = null;
+			const dMousedown = on(select, "mousedown", () => {
+				const sel = window.getSelection();
+				_savedRange = sel && sel.rangeCount ? sel.getRangeAt(0).cloneRange() : null;
+			});
 			const disposer = on(select, "change", (e) => {
 				const value = e.target.value;
 				const selectedOpt = e.target.options[e.target.selectedIndex];
 				if (!value || selectedOpt.disabled) return;
 				this.context.invoke("editor.focus");
+				if (_savedRange) try {
+					const sel = window.getSelection();
+					if (sel) {
+						sel.removeAllRanges();
+						sel.addRange(_savedRange);
+					}
+				} catch (_) {}
 				def.action(this.context, value);
 				this.context.invoke("editor.afterCommand");
 			});
-			this._disposers.push(disposer);
+			this._disposers.push(dMousedown, disposer);
 			return select;
 		}
 		/**
@@ -3292,9 +3447,25 @@
 				this.options.onImageUpload(files);
 				return;
 			}
+			const UNSUPPORTED = [
+				"image/tiff",
+				"image/x-tiff",
+				"image/bmp",
+				"image/x-bmp",
+				"image/x-ms-bmp"
+			];
 			const maxBytes = (this.options.maxImageSize || 5) * 1024 * 1024;
 			files.forEach((file) => {
 				if (!file || !file.type.startsWith("image/")) return;
+				if (UNSUPPORTED.includes(file.type)) {
+					const message = `Image format "${file.type}" is not supported for display in web browsers. Please convert to PNG, JPEG, or WebP first.`;
+					this.context.triggerEvent("imageError", {
+						file,
+						message
+					});
+					console.warn("[AutumnNote]", message);
+					return;
+				}
 				if (file.size > maxBytes) {
 					const message = `Image "${file.name}" exceeds the ${this.options.maxImageSize || 5} MB size limit.`;
 					this.context.triggerEvent("imageError", {
@@ -3458,7 +3629,7 @@
 		_update() {
 			const editable = this.context.layoutInfo.editable;
 			const isFocused = document.activeElement === editable;
-			const isEmpty = !editable.textContent.trim() && !editable.querySelector("img, table, hr");
+			const isEmpty = !editable.textContent.trim() && !editable.querySelector("img, table, hr, .an-video-wrapper");
 			editable.classList.toggle("an-placeholder", isEmpty && !isFocused);
 		}
 	};
@@ -3896,9 +4067,11 @@
 					accept: "image/*"
 				});
 				this._fileInput = fileInput;
+				const fileHint = createElement("p", { class: "an-dialog-hint" });
+				this._fileHint = fileHint;
 				const d = on(fileInput, "change", () => this._onFileChange());
 				this._disposers.push(d);
-				box.append(fileLabel, fileInput);
+				box.append(fileLabel, fileInput, fileHint);
 			}
 			const btnRow = createElement("div", { class: "an-dialog-actions" });
 			const insertBtn = createElement("button", {
@@ -3938,9 +4111,27 @@
 		_onFileChange() {
 			const file = this._fileInput && this._fileInput.files && this._fileInput.files[0];
 			if (!file || !file.type.startsWith("image/")) return;
+			if ([
+				"image/tiff",
+				"image/x-tiff",
+				"image/bmp",
+				"image/x-bmp",
+				"image/x-ms-bmp"
+			].includes(file.type)) {
+				const message = `Format "${file.type}" is not supported for display in web browsers. Please convert to PNG, JPEG, or WebP first.`;
+				if (this._fileHint) this._fileHint.textContent = message;
+				this.context.triggerEvent("imageError", {
+					file,
+					message
+				});
+				this._fileInput.value = "";
+				return;
+			}
+			if (this._fileHint) this._fileHint.textContent = "";
 			const maxSize = (this.options.maxImageSize || 5) * 1024 * 1024;
 			if (file.size > maxSize) {
 				const message = `Image file is too large. Maximum allowed size is ${this.options.maxImageSize || 5} MB.`;
+				if (this._fileHint) this._fileHint.textContent = message;
 				console.warn("[AutumnNote] ImageDialog:", message);
 				this.context.triggerEvent("imageError", {
 					file,
@@ -4252,6 +4443,7 @@
 				_resizeDebounce = setTimeout(() => this._updateOverlayPosition(), 100);
 			};
 			this._disposers.push(on(editable, "click", (e) => this._onEditorClick(e)), on(editable, "contextmenu", (e) => {
+				if (this.context.layoutInfo.container.classList.contains("an-disabled")) return;
 				const img = e.target.closest("img");
 				if (img) this._select(img);
 			}), on(document, "click", (e) => this._onDocClick(e)), on(window, "scroll", () => this._updateOverlayPosition(), { passive: true }), on(window, "resize", onWindowResize, { passive: true }), on(editable, "scroll", () => this._updateOverlayPosition(), { passive: true }));
@@ -4302,6 +4494,7 @@
 			return overlay;
 		}
 		_onEditorClick(e) {
+			if (this.context.layoutInfo.container.classList.contains("an-disabled")) return;
 			const img = e.target.closest("img");
 			if (img) {
 				e.preventDefault();
@@ -4458,9 +4651,12 @@
 				_resizeDebounce = setTimeout(() => this._updateOverlayPosition(), 100);
 			};
 			this._disposers.push(on(editable, "click", (e) => this._onEditorClick(e)), on(editable, "contextmenu", (e) => {
+				if (this.context.layoutInfo.container.classList.contains("an-disabled")) return;
 				const wrapper = this._findWrapper(e.target);
 				if (wrapper) this._select(wrapper);
-			}), on(document, "click", (e) => this._onDocClick(e)), on(window, "scroll", () => this._updateOverlayPosition(), { passive: true }), on(window, "resize", onWindowResize), on(editable, "scroll", () => this._updateOverlayPosition(), { passive: true }));
+			}), on(document, "click", (e) => this._onDocClick(e)), on(window, "scroll", () => this._updateOverlayPosition(), { passive: true }), on(window, "resize", onWindowResize), on(editable, "scroll", () => this._updateOverlayPosition(), { passive: true }), on(editable, "dragstart", (e) => {
+				if (e.target instanceof Element && e.target.closest(".an-video-wrapper")) e.preventDefault();
+			}));
 			return this;
 		}
 		destroy() {
@@ -4519,6 +4715,7 @@
 			return overlay;
 		}
 		_onEditorClick(e) {
+			if (this.context.layoutInfo.container.classList.contains("an-disabled")) return;
 			const wrapper = this._findWrapper(e.target);
 			if (wrapper) {
 				e.preventDefault();
@@ -4717,9 +4914,12 @@
 			}, HIDE_DELAY$4);
 		}
 		_show(anchor) {
+			const isReadOnly = this.context.layoutInfo.container.classList.contains("an-disabled");
 			const url = anchor.getAttribute("href") || "";
 			this._urlLabel.textContent = this._truncateUrl(url);
 			this._urlLabel.title = url;
+			this._editBtn.style.display = isReadOnly ? "none" : "";
+			this._unlinkBtn.style.display = isReadOnly ? "none" : "";
 			this._el.style.display = "flex";
 			this._positionNear(anchor);
 		}
@@ -4833,6 +5033,7 @@
 			document.body.appendChild(this._el);
 			const editable = this.context.layoutInfo.editable;
 			this._disposers.push(on(editable, "mouseover", (e) => {
+				if (this.context.layoutInfo.container.classList.contains("an-disabled")) return;
 				const img = e.target.closest("img");
 				if (img && editable.contains(img) && !img.closest("a[href]")) this._scheduleShow(img);
 			}, { passive: true }), on(editable, "mouseout", (e) => {
@@ -4959,6 +5160,7 @@
 			const target = img.closest("figure.an-figure") || img;
 			target.style.float = value;
 			target.style.display = "";
+			if (target !== img) target.style.width = "";
 			target.style.marginLeft = value === "right" ? "12px" : "";
 			target.style.marginRight = value === "left" ? "12px" : "";
 			this.context.invoke("editor.afterCommand");
@@ -4973,6 +5175,7 @@
 			const target = img.closest("figure.an-figure") || img;
 			target.style.float = "";
 			target.style.display = "block";
+			if (target !== img) target.style.width = "fit-content";
 			target.style.marginLeft = "auto";
 			target.style.marginRight = "auto";
 			this.context.invoke("editor.afterCommand");
@@ -5057,6 +5260,7 @@
 				img.style.marginRight = "";
 			} else if (img.style.display === "block" && img.style.marginLeft === "auto") {
 				figure.style.display = "block";
+				figure.style.width = "fit-content";
 				figure.style.marginLeft = "auto";
 				figure.style.marginRight = "auto";
 				img.style.display = "";
@@ -5111,6 +5315,7 @@
 			document.body.appendChild(this._el);
 			const editable = this.context.layoutInfo.editable;
 			this._disposers.push(on(editable, "mouseover", (e) => {
+				if (this.context.layoutInfo.container.classList.contains("an-disabled")) return;
 				const wrapper = e.target.closest(".an-video-wrapper");
 				if (wrapper && editable.contains(wrapper)) this._scheduleShow(wrapper);
 			}, { passive: true }), on(editable, "mouseout", (e) => {
@@ -5402,6 +5607,7 @@
 			document.body.appendChild(this._sizePopover);
 			const editable = this.context.layoutInfo.editable;
 			this._disposers.push(on(editable, "mouseover", (e) => {
+				if (this.context.layoutInfo.container.classList.contains("an-disabled")) return;
 				const table = e.target.closest("table");
 				if (table && editable.contains(table)) {
 					const cell = e.target.closest("td, th");
@@ -5443,6 +5649,10 @@
 			};
 			const onEditorMove = (e) => {
 				if (_resizing) return;
+				if (this.context.layoutInfo.container.classList.contains("an-disabled")) {
+					clearHover();
+					return;
+				}
 				if (_rafEditorMove !== null) return;
 				const target = e.target;
 				const clientX = e.clientX;
@@ -5470,6 +5680,7 @@
 				});
 			};
 			const onEditorDown = (e) => {
+				if (this.context.layoutInfo.container.classList.contains("an-disabled")) return;
 				if (!_nearCell || !_nearEdge) return;
 				_resizing = true;
 				_edge = _nearEdge;
@@ -5919,6 +6130,7 @@
 			this._ensurePrism();
 			const editable = this.context.layoutInfo.editable;
 			this._disposers.push(on(editable, "mouseover", (e) => {
+				if (this.context.layoutInfo.container.classList.contains("an-disabled")) return;
 				const pre = e.target.closest("pre");
 				if (pre && editable.contains(pre)) this._scheduleShow(pre);
 			}), on(editable, "mouseout", (e) => {
@@ -9349,22 +9561,50 @@
 		copyFormat: `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>`,
 		pasteFormat: `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><rect x="8" y="2" width="8" height="4" rx="1"/><path d="m9 14 2 2 4-4"/></svg>`,
 		removeFormat: `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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"/></svg>`,
-		table: `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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="1"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="15" x2="21" y2="15"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="15" y1="3" x2="15" y2="21"/></svg>`
+		table: `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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="1"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="15" x2="21" y2="15"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="15" y1="3" x2="15" y2="21"/></svg>`,
+		textColor: `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20L12 4L20 20"/><line x1="7.5" y1="14" x2="16.5" y2="14"/></svg>`,
+		highlightColor: `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21v-4l9-9 4 4-9 9z"/><path d="M12 8l4 4"/><line x1="3" y1="21" x2="21" y2="21"/></svg>`,
+		noColor: `<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="4" y1="4" x2="20" y2="20"/><line x1="20" y1="4" x2="4" y2="20"/></svg>`,
+		back: `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>`
 	};
+	var COLOR_PRESETS = [
+		"#000000",
+		"#434343",
+		"#666666",
+		"#999999",
+		"#b7b7b7",
+		"#cccccc",
+		"#efefef",
+		"#ffffff",
+		"#ff0000",
+		"#ff9900",
+		"#ffff00",
+		"#00ff00",
+		"#00ffff",
+		"#4a86e8",
+		"#9900ff",
+		"#ff00ff",
+		"#f4cccc",
+		"#fce5cd",
+		"#fff2cc",
+		"#d9ead3",
+		"#d0e0e3",
+		"#c9daf8",
+		"#d9d2e9",
+		"#ead1dc"
+	];
+	function makeColorSubItems(colorType) {
+		const label = colorType === "foreColor" ? "Text Color" : "Highlight Color";
+		return () => [{
+			back: true,
+			label,
+			navigate: () => defaultItems
+		}, {
+			colorPalette: true,
+			colorType
+		}];
+	}
 	var defaultItems = [
-		{
-			name: "undo",
-			label: "Undo",
-			icon: ICONS.undo,
-			action: (ctx) => ctx.invoke("editor.undo")
-		},
-		{
-			name: "redo",
-			label: "Redo",
-			icon: ICONS.redo,
-			action: (ctx) => ctx.invoke("editor.redo")
-		},
-		{ separator: true },
 		{
 			name: "cut",
 			label: "Cut",
@@ -9425,6 +9665,21 @@
 			action: (ctx) => ctx.invoke("editor.underline")
 		},
 		{ separator: true },
+		{
+			name: "textColor",
+			label: "Text Color",
+			icon: ICONS.textColor,
+			colorStrip: "foreColor",
+			navigate: makeColorSubItems("foreColor")
+		},
+		{
+			name: "highlightColor",
+			label: "Highlight Color",
+			icon: ICONS.highlightColor,
+			colorStrip: "hiliteColor",
+			navigate: makeColorSubItems("hiliteColor")
+		},
+		{ separator: true },
 		{
 			name: "copyFormat",
 			label: "Copy Format",
@@ -9542,8 +9797,10 @@
 					backBtn.appendChild(createElement("span", { class: "an-context-label" }, [it.label || "Back"]));
 					const off = on(backBtn, "click", (e) => {
 						e.stopPropagation();
+						const curLeft = parseFloat(this.el.style.left);
+						const curTop = parseFloat(this.el.style.top);
 						this._renderItems(it.navigate());
-						this._reposition();
+						this._reposition(curLeft, curTop);
 					});
 					this._menuDisposers.push(off);
 					this.el.appendChild(backBtn);
@@ -9555,7 +9812,19 @@
 						class: "an-context-item an-context-submenu",
 						"data-name": it.name || ""
 					});
-					if (it.icon) {
+					if (it.icon) if (it.colorStrip) {
+						const iconWrap = createElement("span", {
+							class: "an-context-icon an-context-icon--color",
+							"aria-hidden": "true"
+						});
+						const svgSpan = createElement("span", { class: "an-context-icon-svg" });
+						svgSpan.innerHTML = it.icon;
+						const strip = createElement("span", { class: "an-context-color-strip" });
+						strip.style.background = this._getSelectionColor(it.colorStrip);
+						iconWrap.appendChild(svgSpan);
+						iconWrap.appendChild(strip);
+						btn.appendChild(iconWrap);
+					} else {
 						const iconSpan = createElement("span", {
 							class: "an-context-icon",
 							"aria-hidden": "true"
@@ -9572,13 +9841,63 @@
 					btn.appendChild(chevron);
 					const off = on(btn, "click", (e) => {
 						e.stopPropagation();
+						const curLeft = parseFloat(this.el.style.left);
+						const curTop = parseFloat(this.el.style.top);
 						this._renderItems(it.navigate());
-						this._reposition();
+						this._reposition(curLeft, curTop);
 					});
 					this._menuDisposers.push(off);
 					this.el.appendChild(btn);
 					return;
 				}
+				if (it.colorPalette) {
+					const palette = createElement("div", { class: "an-context-color-palette" });
+					COLOR_PRESETS.forEach((color) => {
+						const sw = createElement("div", {
+							class: "an-context-color-swatch",
+							title: color,
+							role: "button",
+							"aria-label": color
+						});
+						sw.style.background = color;
+						const offSw = on(sw, "click", (e) => {
+							e.stopPropagation();
+							this._applyColor(it.colorType, color);
+						});
+						this._menuDisposers.push(offSw);
+						palette.appendChild(sw);
+					});
+					if (it.colorType === "hiliteColor") {
+						const noColor = createElement("div", {
+							class: "an-context-color-swatch an-context-color-none",
+							title: "No highlight",
+							role: "button",
+							"aria-label": "No highlight"
+						});
+						noColor.innerHTML = ICONS.noColor;
+						const offNo = on(noColor, "click", (e) => {
+							e.stopPropagation();
+							this._applyColor("hiliteColor", "transparent");
+						});
+						this._menuDisposers.push(offNo);
+						palette.appendChild(noColor);
+					}
+					this.el.appendChild(palette);
+					const customRow = createElement("div", { class: "an-context-color-custom" });
+					const colorInput = createElement("input", {
+						type: "color",
+						value: it.colorType === "foreColor" ? "#000000" : "#ffff00",
+						title: "Custom color",
+						"aria-label": "Custom color"
+					});
+					const customLabel = createElement("span", {}, ["Custom…"]);
+					const offCustom = on(colorInput, "change", () => this._applyColor(it.colorType, colorInput.value));
+					this._menuDisposers.push(offCustom);
+					customRow.appendChild(colorInput);
+					customRow.appendChild(customLabel);
+					this.el.appendChild(customRow);
+					return;
+				}
 				if (it.tableGrid) {
 					const GRID_ROWS = 8, GRID_COLS = 8;
 					const wrapper = createElement("div", { class: "an-context-table-wrap" });
@@ -9696,6 +10015,7 @@
 			const editable = this.context.layoutInfo && this.context.layoutInfo.editable;
 			if (!editable) return;
 			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;
@@ -9722,7 +10042,19 @@
 			let left = rx;
 			let top = ry;
 			if (left + rect.width > window.innerWidth) left = window.innerWidth - rect.width - 8;
+			if (left < 8) left = 8;
 			if (top + rect.height > window.innerHeight) top = window.innerHeight - rect.height - 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`;
 		}
@@ -9731,6 +10063,33 @@
 			this.el.style.display = "none";
 			this.el.setAttribute("aria-hidden", "true");
 		}
+		/** Read the current selection's text or highlight color for the strip.
+		* @param {'foreColor'|'hiliteColor'} type
+		* @returns {string} CSS color string
+		*/
+		_getSelectionColor(type) {
+			const range = this._savedRange;
+			if (!range) return type === "foreColor" ? "#000000" : "transparent";
+			let node = range.startContainer;
+			if (node.nodeType === Node.TEXT_NODE) node = node.parentElement;
+			if (!node) return type === "foreColor" ? "#000000" : "transparent";
+			const cs = window.getComputedStyle(node);
+			if (type === "foreColor") return cs.color || "#000000";
+			const bg = cs.backgroundColor;
+			return !bg || bg === "rgba(0, 0, 0, 0)" || bg === "transparent" ? "transparent" : bg;
+		}
+		/** Restore selection, apply a color command, then hide the menu. */
+		_applyColor(type, color) {
+			const editable = this.context.layoutInfo && this.context.layoutInfo.editable;
+			if (!editable || !this._savedRange) return;
+			editable.focus();
+			const sel = window.getSelection();
+			sel.removeAllRanges();
+			sel.addRange(this._savedRange.cloneRange());
+			document.execCommand(type, false, color);
+			this.context.invoke("editor.afterCommand");
+			this.hide();
+		}
 		/** Returns true if a format has been copied — used to disable Paste Format. */
 		hasCopiedFormat() {
 			return !!this._copiedFormat;
@@ -10398,7 +10757,7 @@
 					resolve(null);
 				}
 			};
-			if (img.src.startsWith("data:") || img.src.startsWith("blob:") || img.src.startsWith(location.origin)) {
+			if (img.src.startsWith("data:") || img.src.startsWith("blob:") || img.src.startsWith(window.location.origin)) {
 				tryDraw(img);
 				return;
 			}
@@ -10774,7 +11133,7 @@
 				height: natH
 			}, w, h);
 			if (!canvas) {
-				alert("Cannot crop this image: the image server does not allow cross-origin access.\nUpload the image directly to use the crop tool.");
+				window.alert("Cannot crop this image: the image server does not allow cross-origin access.\nUpload the image directly to use the crop tool.");
 				this._close(false);
 				return;
 			}
@@ -11135,9 +11494,15 @@
 			if (disabled) {
 				editable.setAttribute("contenteditable", "false");
 				this.layoutInfo.container.classList.add("an-disabled");
+				editable.querySelectorAll("ul.an-checklist input[type=\"checkbox\"]").forEach((cb) => {
+					cb.setAttribute("disabled", "");
+				});
 			} else {
 				editable.setAttribute("contenteditable", "true");
 				this.layoutInfo.container.classList.remove("an-disabled");
+				editable.querySelectorAll("ul.an-checklist input[type=\"checkbox\"]").forEach((cb) => {
+					cb.removeAttribute("disabled");
+				});
 			}
 		}
 		/**