autumnnote 1.1.1 → 1.2.1

package/README.md

@@ -1,6 +1,6 @@
 # Autumn Note
 
-<p align="center"><img src="image/banner.png" width="120" alt="AutumnNote Banner"/></p>
+<p align="center"><img src="public/image/banner.png" width="120" alt="AutumnNote Banner"/></p>
 
 [![npm](https://img.shields.io/npm/v/autumnnote?label=version&color=blue&logo=npm)](https://www.npmjs.com/package/autumnnote)
 [![npm downloads](https://img.shields.io/npm/dw/autumnnote?label=downloads%2Fweek&logo=npm&color=cb3837)](https://www.npmjs.com/package/autumnnote)
@@ -88,7 +88,7 @@ Right-click inside the editor opens a context menu with: **Undo**, **Redo**, **C
 - **Auto-fallback** — unknown codes or missing keys fall back to English
 
 ### UI
-- **Toolbar** — fully configurable button groups; overflow strategy: `wrap` (default) or `scroll`; FontAwesome icons with built-in SVG fallback
+- **Toolbar** — fully configurable button groups; overflow strategy: `wrap` (default) or `scroll`; on viewports ≤ 640 px the toolbar automatically switches to a single horizontally-scrollable row regardless of the `toolbarOverflow` setting; FontAwesome icons with built-in SVG fallback
 - **Sticky toolbar** — `stickyToolbar: true` pins the toolbar to the viewport top; configurable offset for fixed nav bars
 - **Dark / light theme** — `theme: 'dark'` or `theme: 'light'` (default); full SCSS variable coverage
 - **Image resizer** — drag handle on selected image to resize proportionally
@@ -100,7 +100,7 @@ Right-click inside the editor opens a context menu with: **Undo**, **Redo**, **C
 - **Read-only mode** — `readOnly: true` renders a non-editable preview with toolbar hidden; toggle at runtime via `editor.setDisabled()`
 - **Auto-save** — `autoSave: true` persists content to `localStorage` on every change; key configurable via `autoSaveKey`
 - **Auto-save restore** — when `autoSave` and `autoSaveRestore` are both `true`, a dismissible banner prompts the user to restore or discard a previously saved draft on load; configurable age window via `autoSaveRestoreTimeout`
-- **Bubble toolbar** — `bubbleToolbar: true` shows a compact floating toolbar above selected text with quick-access buttons (bold, italic, underline, strikethrough, link, text colour, remove format, inline code); button set configurable via `bubbleToolbarItems`
+- **Bubble toolbar** — `bubbleToolbar: true` shows a compact floating toolbar above selected text; default buttons: bold, italic, underline, strikethrough, link, **text colour**, **highlight colour**, remove format, inline code; each colour button displays a live colour-strip indicator and opens an inline colour palette (matching the context menu); button set configurable via `bubbleToolbarItems`
 - **Markdown shortcuts** — `markdownShortcuts: true` (default) converts Markdown syntax typed in the editor into HTML in real time: `# ` → H1–H3, `> ` → blockquote, `- ` / `* ` → unordered list, `1. ` → ordered list, `[ ] ` → checklist, `---` → HR, ` ``` ` → code block; inline: `**bold**`, `*italic*`, `~~strikethrough~~`, `` `code` ``
 - **Custom focus ring** — `focusColor` accepts any CSS colour string to override the default blue focus ring
 - **Spellcheck** — browser spellcheck enabled by default (`spellcheck: true`)

package/dist/autumnnote.css

@@ -68,6 +68,7 @@
   background: #f9fafb;
   border-bottom: 1px solid #d1d5db;
   user-select: none;
+  border-radius: 6px 6px 0 0;
 }
 
 .an-btn-group {
@@ -140,9 +141,7 @@
 
 .an-table-picker-popup {
   display: none;
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 0;
+  position: fixed;
   background: #ffffff;
   border: 1px solid #d1d5db;
   border-radius: 6px;
@@ -654,6 +653,11 @@
   font-size: 11px;
   color: #6b7280;
   user-select: none;
+  border-radius: 0 0 6px 6px;
+}
+
+.an-container > .an-editable:last-child {
+  border-radius: 0 0 6px 6px;
 }
 
 .an-status-info {
@@ -1725,6 +1729,30 @@
   border-radius: 2px;
 }
 
+@media (max-width: 640px) {
+  .an-toolbar {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+  .an-toolbar::-webkit-scrollbar {
+    display: none;
+  }
+  .an-select {
+    min-width: 72px;
+    max-width: 90px;
+    font-size: 11px;
+  }
+  .an-select-style {
+    min-width: 62px;
+    max-width: 76px;
+  }
+  .an-select-narrow {
+    min-width: 50px;
+    max-width: 66px;
+  }
+}
 .an-dir-rtl .an-toolbar {
   direction: rtl;
 }
@@ -1910,6 +1938,27 @@
   background: #dbeafe;
   color: #3b82f6;
 }
+.an-bubble-btn.an-bubble-btn--color {
+  flex-direction: column;
+  gap: 1px;
+  padding: 4px 0 3px;
+}
+.an-bubble-btn.an-bubble-btn--color .an-bubble-btn-svg {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+.an-bubble-btn.an-bubble-btn--color .an-bubble-btn-svg svg {
+  display: block;
+}
+.an-bubble-btn.an-bubble-btn--color .an-bubble-color-strip {
+  display: block;
+  width: 14px;
+  height: 3px;
+  border-radius: 1px;
+  pointer-events: none;
+}
 .an-theme-dark .an-bubble-btn {
   color: #cdd6f4;
 }
@@ -1921,6 +1970,21 @@
   color: #93c5fd;
 }
 
+.an-bubble-color-picker {
+  position: fixed;
+  z-index: 10041;
+  background: #ffffff;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
+  padding: 4px 0;
+  min-width: 160px;
+}
+.an-theme-dark .an-bubble-color-picker {
+  background: #24273a;
+  border-color: #3f3f5f;
+}
+
 .an-mention-dropdown {
   display: none;
   position: fixed;

package/dist/autumnnote.es.js

@@ -1455,6 +1455,7 @@ var defaultOptions = {
 		"underline",
 		"link",
 		"foreColor",
+		"hiliteColor",
 		"removeFormat"
 	],
 	mention: null
@@ -5838,7 +5839,18 @@ var Toolbar = class {
 		};
 		const openPopup = () => {
 			isOpen = true;
+			const rect = btn.getBoundingClientRect();
+			popup.style.visibility = "hidden";
 			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`;
+			popup.style.visibility = "";
 			btn.setAttribute("aria-expanded", "true");
 		};
 		const closePopup = () => {
@@ -5870,9 +5882,11 @@ var Toolbar = class {
 		const d5 = on(document, "click", () => {
 			if (isOpen) closePopup();
 		});
-		this._disposers.push(d1, d2, d3, d4, d5);
+		this._disposers.push(d1, d2, d3, d4, d5, () => {
+			if (popup.parentNode) popup.parentNode.removeChild(popup);
+		});
 		wrap.appendChild(btn);
-		wrap.appendChild(popup);
+		document.body.appendChild(popup);
 		return wrap;
 	}
 	/**
@@ -12969,7 +12983,7 @@ var ICONS = {
 	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",
@@ -13257,7 +13271,7 @@ var ContextMenu = class {
 			}
 			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,
@@ -14916,9 +14930,35 @@ var MarkdownShortcuts = class {
 * 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 = {
@@ -14928,6 +14968,7 @@ var _ICONS = {
 	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\"/>")
 };
@@ -14937,11 +14978,13 @@ var _ACTIONS = {
 	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 = {
@@ -14950,6 +14993,10 @@ var _ACTIVE = {
 	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) {
@@ -14957,6 +15004,10 @@ var BubbleToolbar = class {
 		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;
@@ -14969,6 +15020,7 @@ var BubbleToolbar = class {
 	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);
@@ -14986,6 +15038,8 @@ var BubbleToolbar = class {
 	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);
@@ -15001,25 +15055,41 @@ var BubbleToolbar = class {
 			"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);
@@ -15027,6 +15097,100 @@ var BubbleToolbar = class {
 		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;
@@ -15043,12 +15207,14 @@ var BubbleToolbar = class {
 		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;
@@ -15057,10 +15223,30 @@ var BubbleToolbar = class {
 			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();
@@ -15085,11 +15271,15 @@ var BubbleToolbar = class {
 	_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();