autumnnote 1.5.0 → 1.6.0

package/src/js/module/ImageTooltip.js

@@ -39,24 +39,28 @@ export class ImageTooltip {
     this._disposers.push(
       on(editable, 'mouseover', (e) => {
         if (this.context.layoutInfo.container.classList.contains('an-disabled')) return;
-        const img = e.target.closest('img');
+        const img = /** @type {Element} */ (e.target)?.closest('img');
         // Skip when the image is inside a link — LinkTooltip takes priority there
         if (img && editable.contains(img) && !img.closest('a[href]')) {
           this._scheduleShow(img);
         }
       }, { passive: true }),
       on(editable, 'mouseout', (e) => {
-        const to = e.relatedTarget;
+        const to = /** @type {Node|null} */ (/** @type {MouseEvent} */ (e).relatedTarget);
         if (!to || (!editable.contains(to) && !this._el.contains(to))) {
           this._scheduleHide();
         }
       }, { passive: true }),
       // Hide when image is deselected by clicking elsewhere
       on(document, 'click', (e) => {
-        if (this._activeImg && !this._activeImg.contains(e.target) && !this._el.contains(e.target)) {
+        const et = /** @type {Node} */ (e.target);
+        if (this._activeImg && !this._activeImg.contains(et) && !this._el.contains(et)) {
           this._hide();
         }
       }),
+      // Hide when the page scrolls or resizes — the tooltip position becomes stale
+      on(window, 'scroll', () => this._hide(), { passive: true }),
+      on(window, 'resize', () => this._hide(), { passive: true }),
     );
 
     return this;
@@ -181,7 +185,7 @@ export class ImageTooltip {
     this._hideTimer = setTimeout(() => this._hide(), HIDE_DELAY);
   }
 
-  _show(img) {
+  _show(_img) {
     this._el.style.display = 'flex';
     // Defer positioning: offsetWidth on a newly-visible element forces layout
     requestAnimationFrame(() => {

package/src/js/module/LinkDialog.js

@@ -3,7 +3,7 @@
  * Inspired by Summernote's LinkDialog — rewritten without jQuery
  */
 
-import { createElement, on, trapFocus } from '../core/dom.js';
+import { createElement, on, trapFocus, makeDraggable } from '../core/dom.js';
 import { withSavedRange } from '../core/range.js';
 
 export class LinkDialog {
@@ -63,42 +63,47 @@ export class LinkDialog {
     const overlay = createElement('div', { class: 'an-dialog-overlay', role: 'dialog', 'aria-modal': 'true', 'aria-label': L.ariaLabel });
     const box = createElement('div', { class: 'an-dialog-box' });
 
+    const header = createElement('div', { class: 'an-dialog-header' });
+    const iconEl = createElement('span', { class: 'an-dialog-icon' });
+    iconEl.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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"/></svg>`;
     const title = createElement('h3', { class: 'an-dialog-title' });
     title.textContent = L.title;
+    header.appendChild(iconEl);
+    header.appendChild(title);
 
     // URL field
     const urlLabel = createElement('label', { class: 'an-label' });
     urlLabel.textContent = L.url;
-    const urlInput = createElement('input', {
+    const urlInput = /** @type {HTMLInputElement} */ (createElement('input', {
       type: 'url',
       class: 'an-input',
       placeholder: L.urlPlaceholder,
       id: 'an-link-url',
       name: 'url',
       autocomplete: 'off',
-    });
+    }));
     this._urlInput = urlInput;
 
     // Text field
     const textLabel = createElement('label', { class: 'an-label' });
     textLabel.textContent = L.displayText;
-    const textInput = createElement('input', {
+    const textInput = /** @type {HTMLInputElement} */ (createElement('input', {
       type: 'text',
       class: 'an-input',
       placeholder: L.textPlaceholder,
       id: 'an-link-text',
       name: 'linkText',
       autocomplete: 'off',
-    });
+    }));
     this._textInput = textInput;
 
     // Open in new tab
     const tabLabel = createElement('label', { class: 'an-label an-label-inline' });
-    const tabCheckbox = createElement('input', {
+    const tabCheckbox = /** @type {HTMLInputElement} */ (createElement('input', {
       type: 'checkbox',
       id: 'an-link-newtab',
       name: 'openInNewTab',
-    });
+    }));
     this._tabCheckbox = tabCheckbox;
     tabLabel.appendChild(tabCheckbox);
     tabLabel.appendChild(document.createTextNode(' ' + L.openInNewTab));
@@ -112,15 +117,16 @@ export class LinkDialog {
     btnRow.appendChild(insertBtn);
     btnRow.appendChild(cancelBtn);
 
-    box.append(title, urlLabel, urlInput, textLabel, textInput, tabLabel, btnRow);
+    box.append(header, urlLabel, urlInput, textLabel, textInput, tabLabel, btnRow);
     overlay.appendChild(box);
+    makeDraggable(header, box);
 
     // Events
     const d1 = on(insertBtn, 'click', () => this._onInsert());
     const d2 = on(cancelBtn, 'click', () => this._close());
     const d3 = on(overlay, 'click', (e) => { if (e.target === overlay) this._close(); });
-    const d4 = on(urlInput,  'keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); this._onInsert(); } });
-    const d5 = on(textInput, 'keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); this._onInsert(); } });
+    const d4 = on(urlInput,  'keydown', (e) => { if (/** @type {KeyboardEvent} */ (e).key === 'Enter') { e.preventDefault(); this._onInsert(); } });
+    const d5 = on(textInput, 'keydown', (e) => { if (/** @type {KeyboardEvent} */ (e).key === 'Enter') { e.preventDefault(); this._onInsert(); } });
     this._disposers.push(d1, d2, d3, d4, d5);
 
     return overlay;
@@ -142,9 +148,9 @@ export class LinkDialog {
       }
     }
     if (anchor) {
-      this._urlInput.value = anchor.getAttribute('href') || '';
+      this._urlInput.value = /** @type {Element} */ (anchor).getAttribute('href') || '';
       this._textInput.value = anchor.textContent || '';
-      this._tabCheckbox.checked = anchor.getAttribute('target') === '_blank';
+      this._tabCheckbox.checked = /** @type {Element} */ (anchor).getAttribute('target') === '_blank';
     } else {
       this._urlInput.value = '';
       this._textInput.value = sel ? sel.toString() : '';

package/src/js/module/LinkTooltip.js

@@ -33,18 +33,21 @@ export class LinkTooltip {
     this._disposers.push(
       // Detect when pointer enters a link
       on(editable, 'mouseover', (e) => {
-        const anchor = e.target.closest('a[href]');
+        const anchor = /** @type {Element} */ (e.target)?.closest('a[href]');
         if (anchor && editable.contains(anchor)) {
           this._scheduleShow(anchor);
         }
       }),
       // Detect when pointer leaves the editable area entirely
       on(editable, 'mouseout', (e) => {
-        const to = e.relatedTarget;
+        const to = /** @type {Node|null} */ (/** @type {MouseEvent} */ (e).relatedTarget);
         if (!to || (!editable.contains(to) && !this._el.contains(to))) {
           this._scheduleHide();
         }
       }),
+      // Hide when the page scrolls or resizes — the tooltip position becomes stale
+      on(window, 'scroll', () => this._hide(), { passive: true }),
+      on(window, 'resize', () => this._hide(), { passive: true }),
     );
 
     return this;

package/src/js/module/Mention.js

@@ -96,11 +96,11 @@ export class Mention {
     // 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');
+      const item = /** @type {HTMLElement} */ (/** @type {Element} */ (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');
+      const item = /** @type {HTMLElement} */ (/** @type {Element} */ (e.target)?.closest('.an-mention-item'));
       if (item) this._highlightItem(+item.dataset.index);
     });
 
@@ -119,7 +119,7 @@ export class Mention {
       const li = document.createElement('div');
       li.className = 'an-mention-item';
       li.setAttribute('role', 'option');
-      li.dataset.index = i;
+      li.dataset.index = String(i);
       if (item.avatar) {
         const img = document.createElement('img');
         img.src = item.avatar;

package/src/js/module/Statusbar.js

@@ -136,7 +136,7 @@ export class Statusbar {
       const MIN_EDITABLE = 40;
       const fixedH = Array.from(containerEl.children)
         .filter(child => !child.classList.contains('an-editable'))
-        .reduce((sum, child) => sum + child.offsetHeight, 0);
+        .reduce((sum, child) => sum + /** @type {HTMLElement} */ (child).offsetHeight, 0);
       const trueMin = Math.max(this.options.minHeight || 100, fixedH + MIN_EDITABLE);
       containerEl.style.height = `${Math.max(trueMin, startH + delta)}px`;
     };
@@ -207,7 +207,7 @@ export class Statusbar {
   _bindContentEvents() {
     const editable = this.context.layoutInfo.editable;
     const updateDebounced = debounce(() => this.update(), 200);
-    const d = on(editable, 'input', updateDebounced);
+    const d = on(editable, 'input', /** @type {EventListener} */ (updateDebounced));
     this._disposers.push(d);
   }
 

package/src/js/module/TableTooltip.js

@@ -58,7 +58,7 @@ function getCellAfterVisualCol(row, visualIdx) {
     if (vIdx > visualIdx) {
       // next cell after the one that starts at / spans visualIdx
       const next = c.nextElementSibling;
-      return (next && next.tagName === 'TD' || next && next.tagName === 'TH') ? next : null;
+      return (next && next.tagName === 'TD' || next && next.tagName === 'TH') ? /** @type {HTMLTableCellElement} */ (next) : null;
     }
   }
   return null;
@@ -115,8 +115,15 @@ const ICONS = {
   tableBorder: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6" stroke-width="1"/><line x1="3" y1="13" x2="21" y2="13" stroke-width="2"/><line x1="3" y1="20" x2="21" y2="20" stroke-width="3"/></svg>`,
   deleteTable: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" 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"/><line x1="16" y1="16" x2="22" y2="22" stroke="#ef4444"/><line x1="22" y1="16" x2="16" y2="22" stroke="#ef4444"/></svg>`,
   selectCells: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4 L4 20 L9 15 L12 21 L14 20 L11 14 L17 14 Z" fill="currentColor" opacity="0.15"/><path d="M4 4 L4 20 L9 15 L12 21 L14 20 L11 14 L17 14 Z"/></svg>`,
+  cellShade:   `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 11L8.93 3.36a1 1 0 0 0-1.29.08L3.22 7.8a1 1 0 0 0-.07 1.29L11 20"/><path d="m5 14 5-5"/><path d="M22 22a2 2 0 0 1-2 2h-3a2 2 0 0 1-2-2c0-1.5 2.5-5 3.5-5s3.5 3.5 3.5 5z"/></svg>`,
 };
 
+const SHADE_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',
+];
+
 export class TableTooltip {
   /** @param {import('../Context.js').Context} context */
   constructor(context) {
@@ -131,6 +138,10 @@ export class TableTooltip {
     this._sizeApply = null;
     this._sizeTitleEl = null;
     this._sizeInputEl = null;
+    // Cell shade popover
+    this._shadePopover = null;
+    this._shadeTitleEl = null;
+    this._shadeColorStrip = null;
     // Cell selection
     this._selectMode = false;
     this._selectedCells = [];
@@ -147,6 +158,9 @@ export class TableTooltip {
     this._sizePopover = this._buildSizePopover();
     document.body.appendChild(this._sizePopover);
 
+    this._shadePopover = this._buildCellShadePopover();
+    document.body.appendChild(this._shadePopover);
+
     const editable = this.context.layoutInfo.editable;
     this._editable = editable;
 
@@ -182,16 +196,19 @@ export class TableTooltip {
     this._disposers.push(
       on(editable, 'mouseover', (e) => {
         if (this.context.layoutInfo.container.classList.contains('an-disabled')) return;
-        const table = e.target.closest('table');
+        const table = /** @type {Element} */ (e.target)?.closest('table');
         if (table && editable.contains(table)) {
-          const cell = e.target.closest('td, th');
-          if (cell) this._activeCell = cell;
+          const cell = /** @type {Element} */ (e.target)?.closest('td, th');
+          if (cell) {
+            this._activeCell = cell;
+            this._syncShadeStrip();
+          }
           this._scheduleShow(table);
         }
       }, { passive: true }),
       on(editable, 'mouseout', (e) => {
         if (this._selectMode) return; // keep tooltip alive during cell selection
-        const to = e.relatedTarget;
+        const to = /** @type {Node|null} */ (/** @type {MouseEvent} */ (e).relatedTarget);
         if (!to || (
           !editable.contains(to) &&
           !this._el.contains(to) &&
@@ -201,14 +218,20 @@ export class TableTooltip {
         }
       }, { passive: true }),
       on(document, 'click', (e) => {
-        if (this._selectMode && this._activeTable && this._activeTable.contains(e.target)) return;
+        const et = /** @type {Node} */ (e.target);
+        if (this._selectMode && this._activeTable && this._activeTable.contains(et)) return;
         if (this._activeTable &&
-          !this._activeTable.contains(e.target) &&
-          !this._el.contains(e.target) &&
-          !(this._sizePopover && this._sizePopover.contains(e.target))) {
+          !this._activeTable.contains(et) &&
+          !this._el.contains(et) &&
+          !(this._sizePopover && this._sizePopover.contains(et))) {
           this._hide();
         }
       }),
+      // Sync shade strip whenever selection moves to a different cell
+      on(document, 'selectionchange', () => this._syncShadeStrip()),
+      // Hide when the page scrolls or resizes — the tooltip position becomes stale
+      on(window, 'scroll',  () => this._hide(), { passive: true }),
+      on(window, 'resize',  () => this._hide(), { passive: true }),
     );
 
     this._initResize();
@@ -369,6 +392,10 @@ export class TableTooltip {
       this._sizePopover.parentNode.removeChild(this._sizePopover);
     }
     this._sizePopover = null;
+    if (this._shadePopover && this._shadePopover.parentNode) {
+      this._shadePopover.parentNode.removeChild(this._shadePopover);
+    }
+    this._shadePopover = null;
   }
 
   // ---------------------------------------------------------------------------
@@ -417,6 +444,27 @@ export class TableTooltip {
 
     el.appendChild(this._sep());
 
+    // Cell background shading — uses color-strip variant like foreColor/hiliteColor buttons
+    const shadeBtn = createElement('button', {
+      type: 'button',
+      class: 'an-link-tooltip-btn an-link-tooltip-btn--shade',
+      title: L.cellBackground,
+    });
+    const shadeSvgWrap = createElement('span', { class: 'an-bubble-btn-svg' });
+    shadeSvgWrap.innerHTML = ICONS.cellShade;
+    const shadeStrip = createElement('span', { class: 'an-link-tooltip-color-strip' });
+    shadeBtn.appendChild(shadeSvgWrap);
+    shadeBtn.appendChild(shadeStrip);
+    this._shadeColorStrip = shadeStrip;
+    this._disposers.push(on(shadeBtn, 'click', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this._openCellShadePopover();
+    }));
+    el.appendChild(shadeBtn);
+
+    el.appendChild(this._sep());
+
     // Resize
     el.appendChild(this._makeBtn(ICONS.colWidth,   L.columnWidth,      () => this._openSizePopover('col')));
     el.appendChild(this._makeBtn(ICONS.rowHeight,  L.rowHeight,        () => this._openSizePopover('row')));
@@ -434,7 +482,8 @@ export class TableTooltip {
       on(el, 'mouseenter', () => this._clearTimers()),
       on(el, 'mouseleave', () => {
         if (this._selectMode) return; // keep tooltip alive during cell selection
-        if (this._sizePopover && this._sizePopover.style.display !== 'none') return;
+        if (this._sizePopover  && this._sizePopover.style.display  !== 'none') return;
+        if (this._shadePopover && this._shadePopover.style.display !== 'none') return;
         this._scheduleHide();
       }),
     );
@@ -494,12 +543,19 @@ export class TableTooltip {
   _show() {
     if (!this._activeTable) return;
     this._el.style.display = 'flex';
+    this._syncShadeStrip();
     // Defer: offsetWidth on a newly-visible element forces layout synchronously
     requestAnimationFrame(() => {
       if (this._activeTable) this._positionNear(this._activeTable);
     });
   }
 
+  _syncShadeStrip() {
+    if (!this._shadeColorStrip || !this._el || this._el.style.display === 'none') return;
+    const cell = this._getCell();
+    this._shadeColorStrip.style.background = (cell && cell.style.backgroundColor) || 'transparent';
+  }
+
   _hide() {
     this._el.style.display = 'none';
     this._activeTable = null;
@@ -551,7 +607,7 @@ export class TableTooltip {
     if (sel && sel.rangeCount) {
       let container = sel.getRangeAt(0).commonAncestorContainer;
       if (container.nodeType === 3) container = container.parentElement;
-      const cellFromSel = container && container.closest && container.closest('td, th');
+      const cellFromSel = container && /** @type {Element} */ (container).closest('td, th');
       if (cellFromSel && this._activeTable && this._activeTable.contains(cellFromSel)) {
         return cellFromSel;
       }
@@ -901,9 +957,9 @@ export class TableTooltip {
 
     const titleEl = createElement('div', { class: 'an-size-popover-title' });
     const body    = createElement('div', { class: 'an-size-popover-body' });
-    const inputEl = createElement('input', {
+    const inputEl = /** @type {HTMLInputElement} */ (createElement('input', {
       type: 'number', class: 'an-size-input', min: '1', max: '2000', step: '1',
-    });
+    }));
     const unitEl = createElement('span', { class: 'an-size-unit' }, ['px']);
     body.appendChild(inputEl);
     body.appendChild(unitEl);
@@ -931,14 +987,16 @@ export class TableTooltip {
     });
     const d2 = on(cancelBtn, 'click', () => this._hideSizePopover());
     const d3 = on(inputEl, 'keydown', (e) => {
-      if (e.key === 'Enter')  { e.preventDefault(); applyBtn.click(); }
-      if (e.key === 'Escape') this._hideSizePopover();
+      const ke = /** @type {KeyboardEvent} */ (e);
+      if (ke.key === 'Enter')  { e.preventDefault(); applyBtn.click(); }
+      if (ke.key === 'Escape') this._hideSizePopover();
     });
     const d4 = on(document, 'click', (e) => {
+      const et = /** @type {Node} */ (e.target);
       if (this._sizePopover &&
           this._sizePopover.style.display !== 'none' &&
-          !this._sizePopover.contains(e.target) &&
-          !this._el.contains(e.target)) {
+          !this._sizePopover.contains(et) &&
+          !this._el.contains(et)) {
         this._hideSizePopover();
       }
     });
@@ -964,7 +1022,7 @@ export class TableTooltip {
       this._sizeTitleEl.textContent = this.context.locale.tooltips.table.tableBorderWidthPx;
       this._sizeInputEl.min   = '0';
       this._sizeInputEl.max   = '10';
-      this._sizeInputEl.value = currentPx;
+      this._sizeInputEl.value = String(currentPx);
       this._sizeApply = (val) => {
         const cells = Array.from(table.querySelectorAll('td, th'));
         if (val === 0) {
@@ -1033,4 +1091,108 @@ export class TableTooltip {
     if (this._sizePopover) this._sizePopover.style.display = 'none';
     this._sizeApply = null;
   }
+
+  // ---------------------------------------------------------------------------
+  // Cell background shade popover
+  // ---------------------------------------------------------------------------
+
+  _buildCellShadePopover() {
+    const pop = createElement('div', { class: 'an-cell-shade-popover' });
+    pop.style.display = 'none';
+
+    const title = createElement('div', { class: 'an-size-popover-title' });
+    pop.appendChild(title);
+    this._shadeTitleEl = title;
+
+    // 24-color palette — reuse existing CSS classes
+    const palette = createElement('div', { class: 'an-context-color-palette' });
+    SHADE_PRESETS.forEach((color) => {
+      const sw = createElement('div', { class: 'an-context-color-swatch', title: color });
+      sw.style.background = color;
+      this._disposers.push(on(sw, 'click', (e) => {
+        e.stopPropagation();
+        this._applyCellShade(color);
+      }));
+      palette.appendChild(sw);
+    });
+    pop.appendChild(palette);
+
+    // "No shading" row — clears background color
+    const noShadeRow = createElement('div', { class: 'an-context-color-custom' });
+    const noShadeBtn = createElement('button', { type: 'button', class: 'an-shade-no-color' });
+    this._disposers.push(on(noShadeBtn, 'click', () => this._applyCellShade('')));
+    noShadeRow.appendChild(noShadeBtn);
+    pop.appendChild(noShadeRow);
+    this._shadeNoBtn = noShadeBtn;
+
+    // Custom color input
+    const customRow = createElement('div', { class: 'an-context-color-custom' });
+    const colorInput = /** @type {HTMLInputElement} */ (createElement('input', { type: 'color', class: 'an-shade-color-input', value: '#ffffff' }));
+    const customLabel = createElement('span');
+    customLabel.textContent = 'Custom…';
+    this._disposers.push(on(colorInput, 'change', () => this._applyCellShade(colorInput.value)));
+    customRow.appendChild(colorInput);
+    customRow.appendChild(customLabel);
+    pop.appendChild(customRow);
+
+    // Prevent mousedown from collapsing editor selection
+    this._disposers.push(on(pop, 'mousedown', (e) => e.preventDefault()));
+
+    // Keep tooltip alive while hovering popover
+    this._disposers.push(
+      on(pop, 'mouseenter', () => this._clearTimers()),
+      on(pop, 'mouseleave', () => this._scheduleHide()),
+    );
+
+    // Close on outside click
+    this._disposers.push(on(document, 'click', (e) => {
+      const et = /** @type {Node} */ (e.target);
+      if (this._shadePopover &&
+          this._shadePopover.style.display !== 'none' &&
+          !this._shadePopover.contains(et) &&
+          !(this._el && this._el.contains(et))) {
+        this._hideCellShadePopover();
+      }
+    }));
+
+    return pop;
+  }
+
+  _openCellShadePopover() {
+    if (!this._shadePopover) return;
+    const L = this.context.locale.tooltips.table;
+    if (this._shadeTitleEl) this._shadeTitleEl.textContent = L.cellBackground;
+    if (this._shadeNoBtn)   this._shadeNoBtn.textContent  = L.noShading;
+
+    this._shadePopover.style.display = 'block';
+    requestAnimationFrame(() => {
+      if (!this._shadePopover || !this._el) return;
+      const pw = this._shadePopover.offsetWidth  || 170;
+      const ph = this._shadePopover.offsetHeight || 120;
+      const tipRect = this._el.getBoundingClientRect();
+      let left = tipRect.left;
+      let top  = tipRect.bottom + 6;
+      if (left + pw > window.innerWidth  - 8) left = window.innerWidth  - pw - 8;
+      if (top  + ph > window.innerHeight - 8) top  = tipRect.top - ph - 6;
+      this._shadePopover.style.left = `${Math.max(8, left)}px`;
+      this._shadePopover.style.top  = `${Math.max(8, top)}px`;
+    });
+  }
+
+  _hideCellShadePopover() {
+    if (this._shadePopover) this._shadePopover.style.display = 'none';
+  }
+
+  _applyCellShade(color) {
+    const cells = this._selectMode ? this._selectedCells : [this._getCell()];
+    cells.forEach((cell) => {
+      if (cell) cell.style.backgroundColor = color;
+    });
+    // Update the color strip on the shade button to reflect the applied color
+    if (this._shadeColorStrip) {
+      this._shadeColorStrip.style.background = color || 'transparent';
+    }
+    this._hideCellShadePopover();
+    this.context.invoke('editor.afterCommand');
+  }
 }

package/src/js/module/Toolbar.js

@@ -286,7 +286,7 @@ export class Toolbar {
     });
 
     const d2 = on(grid, 'mouseover', (e) => {
-      const cell = e.target.closest('.an-table-cell');
+      const cell = /** @type {Element} */ (e.target)?.closest('.an-table-cell');
       if (!cell) return;
       setHighlight(+cell.getAttribute('data-row'), +cell.getAttribute('data-col'));
     });
@@ -294,7 +294,7 @@ export class Toolbar {
     const d3 = on(grid, 'mouseleave', () => setHighlight(0, 0));
 
     const d4 = on(grid, 'click', (e) => {
-      const cell = e.target.closest('.an-table-cell');
+      const cell = /** @type {Element} */ (e.target)?.closest('.an-table-cell');
       if (!cell) return;
       const rows = +cell.getAttribute('data-row');
       const cols = +cell.getAttribute('data-col');
@@ -313,7 +313,7 @@ export class Toolbar {
 
     wrap.appendChild(btn);
     document.body.appendChild(popup);
-    return wrap;
+    return /** @type {HTMLDivElement} */ (wrap);
   }
 
   /**
@@ -384,7 +384,7 @@ export class Toolbar {
     });
 
     const customRow = createElement('div', { class: 'an-color-custom' });
-    const colorInput = createElement('input', { type: 'color', value: currentColor, title: this.context.locale.toolbar.customColor || 'Custom color' });
+    const colorInput = /** @type {HTMLInputElement} */ (createElement('input', { type: 'color', value: currentColor, title: this.context.locale.toolbar.customColor || 'Custom color' }));
     const customLabel = createElement('span', {}, [this.context.locale.toolbar.customColor || 'Custom color']);
     customRow.appendChild(colorInput);
     customRow.appendChild(customLabel);
@@ -472,17 +472,17 @@ export class Toolbar {
     });
 
     const d3b = on(swatches, 'click', (e) => {
-      const sw = e.target.closest('.an-color-swatch');
-      if (sw) applyColor(sw.dataset.color);
+      const sw = /** @type {Element} */ (e.target)?.closest('.an-color-swatch');
+      if (sw) applyColor(/** @type {HTMLElement} */ (sw).dataset.color);
     });
 
     const d4 = on(colorInput, 'change', (e) => {
-      applyColor(e.target.value);
+      applyColor(/** @type {HTMLInputElement} */ (e.target).value);
     });
 
     const d5 = on(document, 'click', (e) => {
       // popup is in document.body, not inside wrap — check both
-      if (isOpen && !wrap.contains(e.target) && !popup.contains(e.target)) closePopup();
+      if (isOpen && !wrap.contains(/** @type {Node} */ (e.target)) && !popup.contains(/** @type {Node} */ (e.target))) closePopup();
     });
 
     const d6 = on(popup, 'click', (e) => e.stopPropagation());
@@ -513,7 +513,7 @@ export class Toolbar {
     wrap.appendChild(applyBtn);
     wrap.appendChild(arrowBtn);
     document.body.appendChild(popup);
-    return wrap;
+    return /** @type {HTMLDivElement} */ (wrap);
   }
 
   /**
@@ -583,7 +583,7 @@ export class Toolbar {
     });
 
     this._disposers.push(dMousedown, disposer);
-    return select;
+    return /** @type {HTMLSelectElement} */ (select);
   }
 
   /**
@@ -638,7 +638,7 @@ export class Toolbar {
     });
 
     this._disposers.push(disposer);
-    return btn;
+    return /** @type {HTMLButtonElement} */ (btn);
   }
 
   // ---------------------------------------------------------------------------
@@ -659,7 +659,7 @@ export class Toolbar {
     // count as "the host page loaded FA" for toolbar icon rendering purposes.
     const links = Array.from(document.querySelectorAll('link[rel="stylesheet"]'))
       .filter((l) => l.id !== 'an-fontawesome-css')
-      .map((l) => l.href || '').join(' ');
+      .map((l) => /** @type {HTMLLinkElement} */ (l).href || '').join(' ');
     _faPageLevelReady = /fontawesome|font-awesome|use\.fontawesome|all\.css/.test(links);
     return _faPageLevelReady;
   }
@@ -689,7 +689,7 @@ export class Toolbar {
         btn.classList.toggle('active', !!def.isActive(this.context));
       }
       if (def && typeof def.isDisabled === 'function') {
-        btn.disabled = !!def.isDisabled(this.context);
+        /** @type {HTMLButtonElement} */ (btn).disabled = !!def.isDisabled(this.context);
       }
     });
 
@@ -706,10 +706,11 @@ export class Toolbar {
           || '';
       }
       // Try to match against available options (case-insensitive)
-      const matched = Array.from(select.options).find(
+      const sel = /** @type {HTMLSelectElement} */ (select);
+      const matched = Array.from(sel.options).find(
         (opt) => opt.value && opt.value.toLowerCase() === raw.toLowerCase()
       );
-      select.value = matched ? matched.value : '';
+      sel.value = matched ? matched.value : '';
     });
   }