autumnnote 1.2.0 → 1.3.0

package/src/js/module/BubbleToolbar.js

@@ -44,11 +44,25 @@ const _ACTIONS = {
   strikethrough: (ctx) => ctx.invoke('editor.strikethrough'),
   link:          (ctx) => ctx.invoke('linkDialog.show'),
   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');
+    // Also strip inline style attributes which execCommand('removeFormat') misses
+    const sel = window.getSelection();
+    if (sel && sel.rangeCount > 0 && !sel.getRangeAt(0).collapsed) {
+      const range = sel.getRangeAt(0);
+      const ancestor = range.commonAncestorContainer;
+      const root = ancestor.nodeType === 1 ? ancestor : ancestor.parentElement;
+      if (root) {
+        const candidates = [root, ...root.querySelectorAll('[style]')];
+        for (const el of candidates) {
+          if (el.hasAttribute('style') && range.intersectsNode(el)) {
+            el.removeAttribute('style');
+          }
+        }
+      }
+    }
     ctx.invoke('editor.afterCommand');
   },
   inlineCode:    (ctx) => ctx.invoke('editor.inlineCode'),
@@ -172,6 +186,8 @@ export class BubbleToolbar {
 
     document.body.appendChild(el);
     this._el = el;
+    // Cache button references once — avoids querySelectorAll on every selectionchange
+    this._btnCache = Array.from(el.querySelectorAll('.an-bubble-btn'));
   }
 
   _buildColorPicker() {
@@ -291,9 +307,13 @@ export class BubbleToolbar {
     editable.focus();
     const sel = window.getSelection();
     sel.removeAllRanges();
-    sel.addRange(this._savedRange.cloneRange());
+    try { sel.addRange(this._savedRange.cloneRange()); } catch (_) { return; }
 
-    document.execCommand(type, false, color);
+    // Firefox does not support 'hiliteColor'; fall back to 'backColor'
+    const cmd = type === 'hiliteColor' ? 'hiliteColor' : type;
+    if (!document.execCommand(cmd, false, color) && cmd === 'hiliteColor') {
+      document.execCommand('backColor', false, color);
+    }
     this.context.invoke('editor.afterCommand');
 
     // Update the color strip on the corresponding button
@@ -349,10 +369,9 @@ export class BubbleToolbar {
   }
 
   _syncActive() {
-    if (!this._el) return;
-    this._el.querySelectorAll('.an-bubble-btn').forEach((btn) => {
-      const name = btn.dataset.name;
-      const activeFn = _ACTIVE[name];
+    if (!this._btnCache) return;
+    this._btnCache.forEach((btn) => {
+      const activeFn = _ACTIVE[btn.dataset.name];
       btn.classList.toggle('an-active', !!(activeFn && activeFn()));
     });
   }

package/src/js/module/Clipboard.js

@@ -239,7 +239,7 @@ export class Clipboard {
       const raw = clipboardData.getData('text/html');
       // Detect source type and apply appropriate pre-cleaner
       const isWordContent = /<[a-z]+:[a-z]/i.test(raw) || /class="Mso/i.test(raw) || /\bmso-/i.test(raw);
-      const isSocialContent = /\bdata-testid\b/.test(raw) || /class="[^"]*\b(?:x[a-z0-9]{6,}|r-[a-z0-9]{3,})\b/.test(raw);
+      const isSocialContent = /class="[^"]*\b(?:x[a-z0-9]{6,}|r-[a-z0-9]{3,})\b/.test(raw);
       let html = raw;
       if (isWordContent) html = this._cleanWordHtml(html);
       else if (isSocialContent) html = this._cleanSocialHtml(html);
@@ -351,7 +351,7 @@ export class Clipboard {
    */
   _dataUrlToBlob(dataUrl) {
     const [header, b64] = dataUrl.split(',');
-    const mime = header.match(/:(.*?);/)[1];
+    const mime = header.match(/:(.*?);/)?.[1] ?? 'image/png';
     const binary = atob(b64);
     const arr = new Uint8Array(binary.length);
     for (let i = 0; i < binary.length; i++) arr[i] = binary.charCodeAt(i);

package/src/js/module/ContextMenu.js

@@ -307,7 +307,7 @@ export class ContextMenu {
           cells.forEach((cell) => {
             cell.classList.toggle('active', +cell.dataset.row <= rows && +cell.dataset.col <= cols);
           });
-          labelEl.textContent = (rows && cols) ? `${cols} × ${rows}` : (this.context.locale.contextMenu.table || 'Insert Table');
+          labelEl.textContent = (rows && cols) ? `${rows} × ${cols}` : (this.context.locale.contextMenu.table || 'Insert Table');
         };
 
         panel.appendChild(gridEl);

package/src/js/module/FindReplace.js

@@ -271,8 +271,6 @@ export class FindReplace {
     const rawMatches = this._findRawMatches(query, editable);
     if (rawMatches.length === 0) return;
 
-    this._currentIndex = 0;
-
     // Wrap matches in reverse order so earlier text offsets stay valid when
     // later sections of the same text node are split by surroundContents().
     // Use push() instead of unshift() to avoid O(n²) shifting on every insert;
@@ -297,6 +295,7 @@ export class FindReplace {
 
     // Drop entries where wrapping failed so the counter and navigation are accurate
     this._matches = this._matches.filter((m) => m.mark);
+    this._currentIndex = 0;
     if (this._matches.length === 0) return;
 
     // Highlight the first (current) match
@@ -324,12 +323,14 @@ export class FindReplace {
     }
     const re = this._queryRegex;
 
+    // Cap results to prevent blocking the main thread on very large documents
+    const MAX_RESULTS = 500;
     const walker = document.createTreeWalker(root, 0x4 /* NodeFilter.SHOW_TEXT */);
     let node;
-    while ((node = walker.nextNode())) {
+    while ((node = walker.nextNode()) && results.length < MAX_RESULTS) {
       re.lastIndex = 0;
       let m;
-      while ((m = re.exec(node.textContent)) !== null) {
+      while ((m = re.exec(node.textContent)) !== null && results.length < MAX_RESULTS) {
         results.push({ node, start: m.index, end: m.index + m[0].length });
       }
     }
@@ -447,7 +448,7 @@ export class FindReplace {
     const total = this._matches.length;
     if (total === 0) {
       const query = this._findInput ? this._findInput.value : '';
-      this._counterEl.textContent = query ? 'No results' : '';
+      this._counterEl.textContent = query ? this.context.locale.findReplace.noResults : '';
     } else {
       this._counterEl.textContent = `${this._currentIndex + 1} / ${total}`;
     }

package/src/js/module/ImageCropOverlay.js

@@ -227,6 +227,11 @@ export class ImageCropOverlay {
           e.stopPropagation();
           this._startHandleDrag(e, id);
         }),
+        on(h, 'touchstart', (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          this._startHandleDrag({ clientX: e.touches[0].clientX, clientY: e.touches[0].clientY }, id);
+        }, { passive: false }),
       );
       this._handles[id] = h;
       cropBox.appendChild(h);
@@ -235,16 +240,19 @@ export class ImageCropOverlay {
     /* ---- crop move drag ---- */
     this._disposers.push(
       on(cropBox, 'mousedown', (e) => {
-        // Only directly on the box surface (not on a handle)
-        if (e.target !== cropBox && e.target !== grid && !(e.target.tagName === 'DIV' && !e.target.className.includes('handle'))) {
-          // Let handle mousedown handle it
-          return;
-        }
-        if (e.target.className && e.target.className.includes('an-crop-handle')) return;
+        if (e.target.classList.contains('an-crop-handle')) return;
+        if (e.target !== cropBox && e.target !== grid) return;
         e.preventDefault();
         e.stopPropagation();
         this._startBoxMove(e);
       }),
+      on(cropBox, 'touchstart', (e) => {
+        if (e.target.classList.contains('an-crop-handle')) return;
+        if (e.target !== cropBox && e.target !== grid) return;
+        e.preventDefault();
+        e.stopPropagation();
+        this._startBoxMove({ clientX: e.touches[0].clientX, clientY: e.touches[0].clientY });
+      }, { passive: false }),
     );
 
     /* ---- info label ---- */
@@ -434,15 +442,23 @@ export class ImageCropOverlay {
    * @param {(e: MouseEvent) => void} onMove
    */
   _attachDocDrag(onMove) {
+    const onTouchMove = (e) => {
+      e.preventDefault();
+      onMove({ clientX: e.touches[0].clientX, clientY: e.touches[0].clientY });
+    };
     const cleanup = () => {
       document.removeEventListener('mousemove', onMove);
       document.removeEventListener('mouseup',   cleanup);
+      document.removeEventListener('touchmove', onTouchMove);
+      document.removeEventListener('touchend',  cleanup);
       document.body.style.userSelect = '';
       document.body.style.cursor     = '';
     };
     document.body.style.userSelect = 'none';
     document.addEventListener('mousemove', onMove);
     document.addEventListener('mouseup',   cleanup, { once: true });
+    document.addEventListener('touchmove', onTouchMove, { passive: false });
+    document.addEventListener('touchend',  cleanup, { once: true });
   }
 
   // ---------------------------------------------------------------------------
@@ -489,8 +505,8 @@ export class ImageCropOverlay {
 
     if (!canvas) {
       // Cross-origin failure — inform user and abort
-      window.alert(
-        'Cannot crop this image: the image server does not allow cross-origin access.\n' +
+      this._showCropError(
+        'Cannot crop this image: the image server does not allow cross-origin access. ' +
         'Upload the image directly to use the crop tool.',
       );
       this._close(false);
@@ -516,6 +532,28 @@ export class ImageCropOverlay {
     this.context.invoke('imageResizer.updateOverlay');
   }
 
+  /**
+   * Show a non-blocking inline error banner appended to document.body.
+   * Auto-dismisses after 4 seconds.
+   * @param {string} msg
+   */
+  _showCropError(msg) {
+    const banner = document.createElement('div');
+    banner.setAttribute('role', 'alert');
+    banner.style.cssText = [
+      'position:fixed', 'bottom:24px', 'left:50%', 'transform:translateX(-50%)',
+      'z-index:10200', 'max-width:420px', 'width:max-content',
+      'background:#7f1d1d', 'color:#fecaca', 'border:1px solid #b91c1c',
+      'border-radius:8px', 'padding:12px 18px',
+      'font:13px/1.5 system-ui,sans-serif',
+      'box-shadow:0 4px 16px rgba(0,0,0,.4)',
+      'pointer-events:auto',
+    ].join(';');
+    banner.textContent = msg;
+    document.body.appendChild(banner);
+    setTimeout(() => { if (banner.parentNode) banner.parentNode.removeChild(banner); }, 4000);
+  }
+
   /**
    * Remove all overlay DOM elements and reset state.
    * @param {boolean} _committed - reserved for future use

package/src/js/module/ImageResizer.js

@@ -151,6 +151,7 @@ export class ImageResizer {
       this._activeImg.classList.remove('an-image-selected');
     }
     this._activeImg = img;
+    this._lastOverlayPos = null; // invalidate position cache on new selection
     img.classList.add('an-image-selected');
     this._updateOverlayPosition();
     this._overlay.style.display = 'block';
@@ -177,6 +178,12 @@ export class ImageResizer {
     const offsetParent = this._overlay.offsetParent || this._container;
     const containerRect = offsetParent.getBoundingClientRect();
     const rect = this._activeImg.getBoundingClientRect();
+
+    // Skip DOM writes when position hasn't changed (common during non-scroll rAF ticks)
+    const p = this._lastOverlayPos;
+    if (p && p.l === rect.left && p.t === rect.top && p.w === rect.width && p.h === rect.height) return;
+    this._lastOverlayPos = { l: rect.left, t: rect.top, w: rect.width, h: rect.height };
+
     const left = rect.left - containerRect.left + offsetParent.scrollLeft;
     const top = rect.top - containerRect.top + offsetParent.scrollTop;
     this._overlay.style.left   = `${left}px`;

package/src/js/module/Mention.js

@@ -92,16 +92,29 @@ export class Mention {
     const el = document.createElement('div');
     el.className = 'an-mention-dropdown';
     el.setAttribute('role', 'listbox');
+
+    // Event delegation: single listeners on the container instead of per-item
+    el.addEventListener('mousedown', (e) => e.preventDefault());
+    el.addEventListener('click', (e) => {
+      const item = e.target.closest('.an-mention-item');
+      if (item) this._select(+item.dataset.index);
+    });
+    el.addEventListener('mousemove', (e) => {
+      const item = e.target.closest('.an-mention-item');
+      if (item) this._highlightItem(+item.dataset.index);
+    });
+
     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;
 
+    // Build all items in a DocumentFragment — one batch DOM insertion
+    const frag = document.createDocumentFragment();
     this._items.forEach((item, i) => {
       const li = document.createElement('div');
       li.className = 'an-mention-item';
@@ -117,11 +130,12 @@ export class Mention {
       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);
+      frag.appendChild(li);
     });
 
+    dd.innerHTML = '';        // one clear
+    dd.appendChild(frag);    // one batch insert
+
     this._highlightItem(this._activeIndex);
   }
 

package/src/js/module/Statusbar.js

@@ -214,7 +214,8 @@ export class Statusbar {
   update() {
     if (!this._wordCountEl || !this._charCountEl) return;
     const editable = this.context.layoutInfo.editable;
-    const text = editable.innerText || '';
+    // textContent is faster than innerText (no layout flush, no CSS visibility check)
+    const text = editable.textContent || '';
     const words = _countWords(text);
     const chars = text.replace(/\n/g, '').length;
     const maxWords = this.options.maxWords || 0;

package/src/js/module/Toolbar.js

@@ -115,6 +115,8 @@ export class Toolbar {
     this._disposers = [];
     /** @type {Array<() => void>} closers for all open color picker popups */
     this._colorPickerClosers = [];
+    /** @type {number|null} rAF handle for debounced refresh */
+    this._refreshRaf = null;
   }
 
   // ---------------------------------------------------------------------------
@@ -132,6 +134,8 @@ export class Toolbar {
   }
 
   destroy() {
+    if (this._refreshRaf) cancelAnimationFrame(this._refreshRaf);
+    this._refreshRaf = null;
     this._disposers.forEach((d) => d());
     this._disposers = [];
     if (this.el && this.el.parentNode) {
@@ -237,26 +241,29 @@ export class Toolbar {
 
     const openPopup = () => {
       isOpen = true;
-      // Use fixed positioning to escape overflow-clipping ancestors
-      // (toolbar scroll mode and mobile overflow-x:auto both clip position:absolute)
       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;
+      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 = () => {
       isOpen = false;
       popup.style.display = 'none';
-      popup.style.top  = '';
-      popup.style.left = '';
       btn.setAttribute('aria-expanded', 'false');
       setHighlight(0, 0);
     };
@@ -286,10 +293,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;
   }
 
@@ -646,6 +657,16 @@ export class Toolbar {
   // ---------------------------------------------------------------------------
 
   refresh() {
+    // Debounce via rAF — multiple rapid calls (e.g. afterCommand + button click)
+    // collapse into a single update per animation frame.
+    if (this._refreshRaf) cancelAnimationFrame(this._refreshRaf);
+    this._refreshRaf = requestAnimationFrame(() => {
+      this._refreshRaf = null;
+      this._doRefresh();
+    });
+  }
+
+  _doRefresh() {
     if (!this.el) return;
     const btnMap = this._btnMap || new Map();