autumnnote 1.1.0 → 1.2.0

package/dist/autumnnote.umd.js

@@ -1173,6 +1173,7 @@
 			"underline",
 			"link",
 			"foreColor",
+			"hiliteColor",
 			"removeFormat"
 		],
 		mention: null
@@ -5556,12 +5557,23 @@
 			};
 			const openPopup = () => {
 				isOpen = true;
+				const rect = btn.getBoundingClientRect();
 				popup.style.display = "block";
+				const pw = popup.offsetWidth;
+				const ph = popup.offsetHeight;
+				let left = rect.left;
+				let top = rect.bottom + 4;
+				if (left + pw > window.innerWidth - 8) left = Math.max(8, window.innerWidth - pw - 8);
+				if (top + ph > window.innerHeight - 8) top = rect.top - ph - 4;
+				popup.style.left = `${left}px`;
+				popup.style.top = `${top}px`;
 				btn.setAttribute("aria-expanded", "true");
 			};
 			const closePopup = () => {
 				isOpen = false;
 				popup.style.display = "none";
+				popup.style.top = "";
+				popup.style.left = "";
 				btn.setAttribute("aria-expanded", "false");
 				setHighlight(0, 0);
 			};
@@ -12687,7 +12699,7 @@
 		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 = [
+	var COLOR_PRESETS$1 = [
 		"#000000",
 		"#434343",
 		"#666666",
@@ -12975,7 +12987,7 @@
 				}
 				if (it.colorPalette) {
 					const palette = createElement("div", { class: "an-context-color-palette" });
-					COLOR_PRESETS.forEach((color) => {
+					COLOR_PRESETS$1.forEach((color) => {
 						const sw = createElement("div", {
 							class: "an-context-color-swatch",
 							title: color,
@@ -14634,9 +14646,35 @@
 	* controlled by `bubbleToolbarItems` (array of button name strings).
 	*
 	* Built-in names: 'bold', 'italic', 'underline', 'strikethrough',
-	*   'link', 'foreColor', 'removeFormat', 'inlineCode'.
+	*   'link', 'foreColor', 'hiliteColor', 'removeFormat', 'inlineCode'.
 	* Any name not found in the built-in map is silently ignored.
 	*/
+	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"
+	];
 	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 = {
@@ -14646,6 +14684,7 @@
 		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\"/>"),
+		hiliteColor: _svg("<path d=\"M3 21v-4l9-9 4 4-9 9z\"/><path d=\"M12 8l4 4\"/><line x1=\"3\" y1=\"21\" x2=\"21\" y2=\"21\"/>"),
 		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\"/>")
 	};
@@ -14655,11 +14694,13 @@
 		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) => {
+			const editable = ctx.layoutInfo && ctx.layoutInfo.editable;
+			if (!editable) return;
+			editable.focus();
+			document.execCommand("removeFormat");
+			ctx.invoke("editor.afterCommand");
 		},
-		removeFormat: (ctx) => ctx.invoke("editor.removeFormat"),
 		inlineCode: (ctx) => ctx.invoke("editor.inlineCode")
 	};
 	var _ACTIVE = {
@@ -14668,6 +14709,10 @@
 		underline: () => document.queryCommandState("underline"),
 		strikethrough: () => document.queryCommandState("strikeThrough")
 	};
+	var _COLOR_TYPES = {
+		foreColor: true,
+		hiliteColor: true
+	};
 	var BubbleToolbar = class {
 		/** @param {import('../Context.js').Context} context */
 		constructor(context) {
@@ -14675,6 +14720,10 @@
 			this.options = context.options;
 			/** @type {HTMLElement|null} */
 			this._el = null;
+			/** @type {HTMLElement|null} */
+			this._picker = null;
+			this._pickerType = null;
+			this._savedRange = null;
 			this._visible = false;
 			this._rafId = null;
 			this._contextMenuOpen = false;
@@ -14687,6 +14736,7 @@
 		initialize() {
 			if (!this.options.bubbleToolbar) return this;
 			this._build();
+			this._buildColorPicker();
 			const d1 = on(document, "selectionchange", this._onSelectionChange);
 			const d2 = on(document, "mousedown", this._onMousedown);
 			const d3 = on(document, "keydown", this._onKeydown);
@@ -14704,6 +14754,8 @@
 		destroy() {
 			if (this._el && this._el.parentNode) this._el.parentNode.removeChild(this._el);
 			this._el = null;
+			if (this._picker && this._picker.parentNode) this._picker.parentNode.removeChild(this._picker);
+			this._picker = null;
 			this._disposers.forEach((d) => d());
 			this._disposers = [];
 			cancelAnimationFrame(this._rafId);
@@ -14719,25 +14771,41 @@
 				"underline",
 				"link",
 				"foreColor",
+				"hiliteColor",
 				"removeFormat"
 			];
 			for (const name of items) {
-				if (!_ICONS[name] || !_ACTIONS[name]) continue;
+				if (!_ICONS[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];
+				if (_COLOR_TYPES[name]) {
+					btn.className = "an-bubble-btn an-bubble-btn--color";
+					const iconWrap = document.createElement("span");
+					iconWrap.className = "an-bubble-btn-svg";
+					iconWrap.innerHTML = _ICONS[name];
+					const strip = document.createElement("span");
+					strip.className = "an-bubble-color-strip";
+					strip.style.background = name === "foreColor" ? "#000000" : "transparent";
+					btn.appendChild(iconWrap);
+					btn.appendChild(strip);
+				} else {
+					btn.className = "an-bubble-btn";
+					btn.innerHTML = _ICONS[name];
+				}
 				btn.addEventListener("mousedown", (e) => {
 					e.preventDefault();
 				});
 				btn.addEventListener("click", (e) => {
 					e.preventDefault();
 					e.stopPropagation();
+					if (_COLOR_TYPES[name]) {
+						this._openColorPicker(name, btn);
+						return;
+					}
 					this.context.invoke("editor.focus");
-					_ACTIONS[name](this.context);
-					this.context.invoke("editor.afterCommand");
+					if (_ACTIONS[name]) _ACTIONS[name](this.context);
 					this._syncActive();
 				});
 				el.appendChild(btn);
@@ -14745,6 +14813,100 @@
 			document.body.appendChild(el);
 			this._el = el;
 		}
+		_buildColorPicker() {
+			const picker = document.createElement("div");
+			picker.className = "an-bubble-color-picker";
+			picker.style.display = "none";
+			picker.addEventListener("mousedown", (e) => e.preventDefault());
+			const palette = document.createElement("div");
+			palette.className = "an-context-color-palette";
+			COLOR_PRESETS.forEach((color) => {
+				const sw = document.createElement("div");
+				sw.className = "an-context-color-swatch";
+				sw.title = color;
+				sw.style.background = color;
+				sw.setAttribute("role", "button");
+				sw.setAttribute("aria-label", color);
+				sw.addEventListener("click", (e) => {
+					e.stopPropagation();
+					this._applyColor(this._pickerType, color);
+				});
+				palette.appendChild(sw);
+			});
+			const noColorBtn = document.createElement("div");
+			noColorBtn.className = "an-context-color-swatch an-context-color-none";
+			noColorBtn.title = "No highlight";
+			noColorBtn.setAttribute("role", "button");
+			noColorBtn.setAttribute("aria-label", "No highlight");
+			noColorBtn.innerHTML = `<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>`;
+			noColorBtn.addEventListener("click", (e) => {
+				e.stopPropagation();
+				this._applyColor("hiliteColor", "transparent");
+			});
+			const customRow = document.createElement("div");
+			customRow.className = "an-context-color-custom";
+			const colorInput = document.createElement("input");
+			colorInput.type = "color";
+			colorInput.value = "#000000";
+			colorInput.title = "Custom color";
+			colorInput.addEventListener("mousedown", (e) => e.stopPropagation());
+			colorInput.addEventListener("change", () => {
+				this._applyColor(this._pickerType, colorInput.value);
+			});
+			const customLabel = document.createElement("span");
+			customLabel.textContent = "Custom…";
+			customRow.appendChild(colorInput);
+			customRow.appendChild(customLabel);
+			picker.appendChild(palette);
+			picker.appendChild(customRow);
+			document.body.appendChild(picker);
+			this._picker = picker;
+			this._picker._paletteEl = palette;
+			this._picker._noColorBtn = noColorBtn;
+			this._picker._colorInput = colorInput;
+		}
+		_openColorPicker(type, anchorBtn) {
+			const sel = window.getSelection();
+			if (sel && sel.rangeCount > 0) this._savedRange = sel.getRangeAt(0).cloneRange();
+			this._pickerType = type;
+			const palette = this._picker._paletteEl;
+			const noColorBtn = this._picker._noColorBtn;
+			if (type === "hiliteColor") {
+				if (!palette.contains(noColorBtn)) palette.appendChild(noColorBtn);
+			} else if (palette.contains(noColorBtn)) palette.removeChild(noColorBtn);
+			this._picker._colorInput.value = type === "foreColor" ? "#000000" : "#ffff00";
+			this._picker.style.display = "block";
+			const pw = this._picker.offsetWidth;
+			const ph = this._picker.offsetHeight;
+			const toolbarRect = this._el.getBoundingClientRect();
+			let top = toolbarRect.top - ph - 6;
+			if (top < 8) top = toolbarRect.bottom + 6;
+			let left = anchorBtn.getBoundingClientRect().left;
+			left = Math.max(8, Math.min(left, window.innerWidth - pw - 8));
+			this._picker.style.left = `${left}px`;
+			this._picker.style.top = `${top}px`;
+		}
+		_closeColorPicker() {
+			if (this._picker) this._picker.style.display = "none";
+			this._pickerType = null;
+		}
+		/** Restore the saved selection, apply execCommand, update the color strip, then close the picker. */
+		_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");
+			const name = type === "hiliteColor" ? "hiliteColor" : "foreColor";
+			const btn = this._el && this._el.querySelector(`[data-name="${name}"]`);
+			const strip = btn && btn.querySelector(".an-bubble-color-strip");
+			if (strip) strip.style.background = color === "transparent" ? "transparent" : color;
+			this._closeColorPicker();
+			this._syncActive();
+		}
 		_show(rect) {
 			if (!this._el) return;
 			const el = this._el;
@@ -14761,12 +14923,14 @@
 			el.style.left = `${left}px`;
 			el.style.visibility = "";
 			this._syncActive();
+			this._syncColorStrips();
 			this._visible = true;
 		}
 		_hide() {
 			if (!this._el) return;
 			this._el.style.display = "none";
 			this._visible = false;
+			this._closeColorPicker();
 		}
 		_syncActive() {
 			if (!this._el) return;
@@ -14775,10 +14939,30 @@
 				btn.classList.toggle("an-active", !!(activeFn && activeFn()));
 			});
 		}
+		/** Read the current selection's color and update the color-strip indicators. */
+		_syncColorStrips() {
+			if (!this._el) 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) return;
+			const cs = window.getComputedStyle(node);
+			const foreBtn = this._el.querySelector("[data-name=\"foreColor\"]");
+			const foreStrip = foreBtn && foreBtn.querySelector(".an-bubble-color-strip");
+			if (foreStrip) foreStrip.style.background = cs.color || "#000000";
+			const hiliteBtn = this._el.querySelector("[data-name=\"hiliteColor\"]");
+			const hiliteStrip = hiliteBtn && hiliteBtn.querySelector(".an-bubble-color-strip");
+			if (hiliteStrip) {
+				const bg = cs.backgroundColor;
+				hiliteStrip.style.background = !bg || bg === "rgba(0, 0, 0, 0)" || bg === "transparent" ? "transparent" : bg;
+			}
+		}
 		_onSelectionChange() {
 			cancelAnimationFrame(this._rafId);
 			this._rafId = requestAnimationFrame(() => {
 				if (this._contextMenuOpen) return;
+				if (this._picker && this._picker.style.display !== "none") return;
 				const sel = window.getSelection();
 				if (!sel || sel.isCollapsed || !sel.rangeCount) {
 					this._hide();
@@ -14803,11 +14987,15 @@
 		_onMousedown(e) {
 			if (!this._visible) return;
 			if (this._el && this._el.contains(e.target)) return;
+			if (this._picker && this._picker.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();
+			if (e.key === "Escape") {
+				if (this._picker && this._picker.style.display !== "none") this._closeColorPicker();
+				else if (this._visible) this._hide();
+			}
 		}
 		_onContextMenu() {
 			this._hide();
@@ -15478,7 +15666,7 @@
 		registerModule(name, ModuleClass) {
 			_customModules.set(name, ModuleClass);
 		},
-		version: "1.0.9"
+		version: "1.1.1"
 	};
 	/**
 	* @param {string|Element|NodeList|Element[]} selector