autumnnote 1.1.1 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autumnnote",
-  "version": "1.1.1",
+  "version": "1.2.1",
   "description": "A modern, lightweight WYSIWYG editor — built with vanilla JavaScript, no jQuery required.",
   "main": "dist/autumnnote.umd.js",
   "module": "dist/autumnnote.es.js",

package/src/js/module/BubbleToolbar.js

@@ -7,12 +7,18 @@
  * 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.
  */
 
 import { on } from '../core/dom.js';
 
+const 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',
+];
+
 // Minimal SVG icon set — only what the bubble toolbar needs.
 const _S = 'stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"';
 const _svg = (p) =>
@@ -25,21 +31,26 @@ const _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"/>'),
 };
 
+// Color buttons are handled via _openColorPicker; not in _ACTIONS.
 const _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) => {
+    // editor.removeFormat does not exist — call execCommand directly
+    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'),
 };
 
@@ -50,6 +61,8 @@ const _ACTIVE = {
   strikethrough: () => document.queryCommandState('strikeThrough'),
 };
 
+const _COLOR_TYPES = { foreColor: true, hiliteColor: true };
+
 export class BubbleToolbar {
   /** @param {import('../Context.js').Context} context */
   constructor(context) {
@@ -58,6 +71,10 @@ export class BubbleToolbar {
 
     /** @type {HTMLElement|null} */
     this._el = null;
+    /** @type {HTMLElement|null} */
+    this._picker = null;
+    this._pickerType = null; // 'foreColor' | 'hiliteColor'
+    this._savedRange = null;
     this._visible = false;
     this._rafId = null;
     this._contextMenuOpen = false;
@@ -72,6 +89,7 @@ export class BubbleToolbar {
   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);
@@ -90,6 +108,8 @@ export class BubbleToolbar {
   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);
@@ -105,15 +125,30 @@ export class BubbleToolbar {
     el.setAttribute('role', 'toolbar');
     el.setAttribute('aria-label', 'Formatting');
 
-    const items = this.options.bubbleToolbarItems || ['bold', 'italic', 'underline', 'link', 'foreColor', 'removeFormat'];
+    const items = this.options.bubbleToolbarItems || ['bold', 'italic', '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]) {
+        // Color button: SVG icon stacked above a colored strip, matching ContextMenu style
+        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) => {
         // Prevent mousedown from collapsing selection before click fires
         e.preventDefault();
@@ -121,9 +156,15 @@ export class BubbleToolbar {
       btn.addEventListener('click', (e) => {
         e.preventDefault();
         e.stopPropagation();
+
+        // Color buttons: save selection and open the picker
+        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);
@@ -133,6 +174,138 @@ export class BubbleToolbar {
     this._el = el;
   }
 
+  _buildColorPicker() {
+    const picker = document.createElement('div');
+    picker.className = 'an-bubble-color-picker';
+    picker.style.display = 'none';
+
+    // Prevent any mousedown inside the picker from collapsing the editor selection
+    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);
+    });
+
+    // "No highlight" swatch — only shown for hiliteColor
+    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');
+    });
+
+    // Custom color input row
+    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';
+    // stopPropagation so the picker's mousedown-preventDefault doesn't block the native color dialog
+    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) {
+    // Save current selection before the picker might shift focus
+    const sel = window.getSelection();
+    if (sel && sel.rangeCount > 0) {
+      this._savedRange = sel.getRangeAt(0).cloneRange();
+    }
+
+    this._pickerType = type;
+
+    // Toggle "No highlight" swatch based on 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);
+    }
+
+    // Seed the custom color input
+    this._picker._colorInput.value = type === 'foreColor' ? '#000000' : '#ffff00';
+
+    // Position the picker above the bubble toolbar (not blocking the content below it).
+    // Fall back to below the toolbar if there's not enough room above.
+    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;
+
+    // Align horizontally with the clicked button, clamped to viewport
+    const btnRect = anchorBtn.getBoundingClientRect();
+    let left = btnRect.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');
+
+    // Update the color strip on the corresponding button
+    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 / hide
   // ---------------------------------------------------------------------------
@@ -164,6 +337,7 @@ export class BubbleToolbar {
     el.style.visibility = '';
 
     this._syncActive();
+    this._syncColorStrips();
     this._visible = true;
   }
 
@@ -171,6 +345,7 @@ export class BubbleToolbar {
     if (!this._el) return;
     this._el.style.display = 'none';
     this._visible = false;
+    this._closeColorPicker();
   }
 
   _syncActive() {
@@ -182,6 +357,28 @@ export class BubbleToolbar {
     });
   }
 
+  /** 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;
+    }
+  }
+
   // ---------------------------------------------------------------------------
   // Events
   // ---------------------------------------------------------------------------
@@ -190,6 +387,8 @@ export class BubbleToolbar {
     cancelAnimationFrame(this._rafId);
     this._rafId = requestAnimationFrame(() => {
       if (this._contextMenuOpen) return;
+      // Keep toolbar visible while color picker is open
+      if (this._picker && this._picker.style.display !== 'none') return;
 
       const sel = window.getSelection();
       if (!sel || sel.isCollapsed || !sel.rangeCount) {
@@ -203,7 +402,7 @@ export class BubbleToolbar {
         return;
       }
 
-      // Don't show inside code view or read-only
+      // Don't show in read-only mode
       if (this.context.options.readOnly) {
         this._hide();
         return;
@@ -221,17 +420,22 @@ export class BubbleToolbar {
   }
 
   _onMousedown(e) {
-    // Hide when clicking outside both the editable and the bubble toolbar
+    // Hide when clicking outside both the editable, the bubble toolbar, and the color picker
     if (!this._visible) return;
     if (this._el && this._el.contains(e.target)) return;
+    if (this._picker && this._picker.contains(e.target)) return;
     const editable = this.context.layoutInfo.editable;
     if (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();
+      }
     }
   }
 

package/src/js/module/Toolbar.js

@@ -237,7 +237,23 @@ export class Toolbar {
 
     const openPopup = () => {
       isOpen = true;
+      const rect = btn.getBoundingClientRect();
+
+      // Measure popup dimensions while invisible so we can set the correct
+      // position before the browser paints (matches the color-picker pattern).
+      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');
     };
 
@@ -273,10 +289,14 @@ export class Toolbar {
 
     const d5 = on(document, 'click', () => { if (isOpen) closePopup(); });
 
-    this._disposers.push(d1, d2, d3, d4, d5);
+    // Append popup to body so position:fixed is truly viewport-relative,
+    // unaffected by any ancestor transform / filter (same pattern as color picker).
+    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;
   }
 

package/src/js/settings.js

@@ -153,7 +153,7 @@ export const defaultOptions = {
 
   // Bubble toolbar: show a mini floating toolbar above text selections.
   bubbleToolbar: false,
-  bubbleToolbarItems: ['bold', 'italic', 'underline', 'link', 'foreColor', 'removeFormat'],
+  bubbleToolbarItems: ['bold', 'italic', 'underline', 'link', 'foreColor', 'hiliteColor', 'removeFormat'],
 
   // @mention support. mention.onSearch(query, callback) must be provided to activate.
   // mention.minChars defaults to 0 — dropdown opens immediately on trigger character.

package/src/styles/autumnnote.scss

@@ -108,6 +108,8 @@
   background: $an-bg-toolbar;
   border-bottom: 1px solid $an-border;
   user-select: none;
+  // Round the top corners to match the container border-radius
+  border-radius: $an-radius $an-radius 0 0;
 }
 
 .an-btn-group {
@@ -193,9 +195,7 @@
 
 .an-table-picker-popup {
   display: none;
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 0;
+  position: fixed; // top/left set dynamically by JS — escapes overflow-clipping ancestors
   background: $an-bg;
   border: 1px solid $an-border;
   border-radius: 6px;
@@ -761,6 +761,13 @@
   font-size: 11px;
   color: $an-muted;
   user-select: none;
+  // Round the bottom corners to match the container border-radius
+  border-radius: 0 0 $an-radius $an-radius;
+}
+
+// When there is no statusbar, the editable area is the last child — round its bottom corners
+.an-container > .an-editable:last-child {
+  border-radius: 0 0 $an-radius $an-radius;
 }
 
 .an-status-info {
@@ -1890,6 +1897,37 @@ $an-video-accent: #8b5cf6; // violet-500
   }
 }
 
+// =============================================================================
+// Responsive — mobile / small-viewport toolbar
+// =============================================================================
+//
+// On screens ≤ 640 px the default flex-wrap:wrap behaviour creates a multi-row
+// toolbar that pushes the editable area too far down.  We switch automatically
+// to a single horizontally-scrollable row (same as toolbarOverflow:'scroll'),
+// hide the scrollbar track, and compact the dropdown selects.
+
+@media (max-width: 640px) {
+  .an-toolbar {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    // Hide scrollbar visually — users swipe naturally on touch devices
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar { display: none; }
+  }
+
+  // Compact dropdown selects to save horizontal real-estate on small screens
+  .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; }
+}
+
 // =============================================================================
 // RTL support
 // =============================================================================
@@ -2117,6 +2155,30 @@ $an-video-accent: #8b5cf6; // violet-500
     color: $an-primary;
   }
 
+  // Color variant: SVG stacked above a thin color-indicator strip
+  &.an-bubble-btn--color {
+    flex-direction: column;
+    gap: 1px;
+    padding: 4px 0 3px;
+
+    .an-bubble-btn-svg {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      line-height: 0;
+
+      svg { display: block; }
+    }
+
+    .an-bubble-color-strip {
+      display: block;
+      width: 14px;
+      height: 3px;
+      border-radius: 1px;
+      pointer-events: none;
+    }
+  }
+
   .an-theme-dark & {
     color: #cdd6f4;
 
@@ -2131,6 +2193,23 @@ $an-video-accent: #8b5cf6; // violet-500
   }
 }
 
+// Bubble toolbar — color picker popup
+.an-bubble-color-picker {
+  position: fixed;
+  z-index: 10041;
+  background: $an-bg;
+  border: 1px solid $an-border;
+  border-radius: 8px;
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
+  padding: 4px 0;
+  min-width: 160px;
+
+  .an-theme-dark & {
+    background: #24273a;
+    border-color: #3f3f5f;
+  }
+}
+
 // =============================================================================
 // @mention dropdown + chip (#5)
 // =============================================================================