autumnnote 1.5.0 → 1.6.1

package/src/js/module/Statusbar.js

@@ -109,9 +109,7 @@ export class Statusbar {
       this._dragDisposers.forEach((d) => d());
       this._dragDisposers = null;
     }
-    if (this.el && this.el.parentNode) {
-      this.el.parentNode.removeChild(this.el);
-    }
+    this.el?.remove();
     this.el = null;
   }
 
@@ -136,7 +134,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 +205,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);
   }
 
@@ -217,7 +215,7 @@ export class Statusbar {
     // 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 chars = text.replaceAll('\n', '').length;
     const maxWords = this.options.maxWords || 0;
     const maxChars = this.options.maxChars || 0;
 
@@ -249,6 +247,6 @@ export class Statusbar {
    */
   getCharCount() {
     const editable = this.context.layoutInfo.editable;
-    return ((editable.innerText || '').replace(/\n/g, '')).length;
+    return (editable.innerText || '').replaceAll('\n', '').length;
   }
 }

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,33 +196,42 @@ 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) &&
-          !(this._sizePopover && this._sizePopover.contains(to))
+          !this._sizePopover?.contains(to)
         )) {
           this._scheduleHide();
         }
       }, { 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?.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?.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(globalThis, 'scroll',  () => this._hide(), { passive: true }),
+      on(globalThis, 'resize',  () => this._hide(), { passive: true }),
     );
 
     this._initResize();
@@ -363,12 +386,16 @@ export class TableTooltip {
     this._clearTimers();
     this._disposers.forEach((d) => d());
     this._disposers = [];
-    if (this._el && this._el.parentNode) this._el.parentNode.removeChild(this._el);
+    if (this._el && this._el.parentNode) this._el.remove();
     this._el = null;
     if (this._sizePopover && this._sizePopover.parentNode) {
-      this._sizePopover.parentNode.removeChild(this._sizePopover);
+      this._sizePopover.remove();
     }
     this._sizePopover = null;
+    if (this._shadePopover && this._shadePopover.parentNode) {
+      this._shadePopover.remove();
+    }
+    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?.style.backgroundColor || 'transparent';
+  }
+
   _hide() {
     this._el.style.display = 'none';
     this._activeTable = null;
@@ -534,7 +590,7 @@ export class TableTooltip {
     let top  = rect.top - tipH - margin;
 
     if (top  < margin)                           top  = rect.bottom + margin;
-    if (left + tipW > window.innerWidth - margin) left = window.innerWidth - tipW - margin;
+    if (left + tipW > globalThis.innerWidth - margin) left = globalThis.innerWidth - tipW - margin;
     if (left < margin)                            left = margin;
 
     this._el.style.left = `${left}px`;
@@ -547,17 +603,17 @@ export class TableTooltip {
 
   _getCell() {
     // Prefer the cell under the current text cursor (most intuitive for operations)
-    const sel = window.getSelection();
+    const sel = globalThis.getSelection();
     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');
-      if (cellFromSel && this._activeTable && this._activeTable.contains(cellFromSel)) {
+      const cellFromSel = /** @type {Element} */ (container)?.closest('td, th');
+      if (cellFromSel && this._activeTable?.contains(cellFromSel)) {
         return cellFromSel;
       }
     }
     return this._activeCell
-      || (this._activeTable && this._activeTable.querySelector('td, th'));
+      || this._activeTable?.querySelector('td, th');
   }
 
   // ---------------------------------------------------------------------------
@@ -679,7 +735,7 @@ export class TableTooltip {
       const bi = allRows.indexOf(best);
       const ri = allRows.indexOf(r);
       return position === 'above' ? (ri < bi ? r : best) : (ri > bi ? r : best);
-    });
+    }, selectedRows[0]);
     const colCount = Array.from(refRow.cells).reduce((sum, c) => sum + (c.colSpan || 1), 0);
     const newRow = document.createElement('tr');
     const refCells = Array.from(refRow.cells);
@@ -730,7 +786,7 @@ export class TableTooltip {
     if (bodyRowsToDelete.length >= totalBodyRows) return;
     this._activeCell = null;
     this._clearSelection();
-    selectedRows.forEach((r) => r.parentElement?.removeChild(r));
+    selectedRows.forEach((r) => r.remove());
     requestAnimationFrame(() => this._positionNear(this._activeTable));
     this.context.invoke('editor.afterCommand');
   }
@@ -754,7 +810,7 @@ export class TableTooltip {
     });
     this._activeCell = null;
     this._clearSelection();
-    cellsToDelete.forEach((c) => c.parentElement?.removeChild(c));
+    cellsToDelete.forEach((c) => c.remove());
     requestAnimationFrame(() => this._positionNear(this._activeTable));
     this.context.invoke('editor.afterCommand');
   }
@@ -768,7 +824,7 @@ export class TableTooltip {
     // Prefer user panel-selected cells; fall back to text-selection range
     let selected = this._getSelectedCells().filter((c) => table.contains(c));
     if (selected.length < 2) {
-      const sel = window.getSelection();
+      const sel = globalThis.getSelection();
       if (!sel || sel.rangeCount === 0) return;
       const range = sel.getRangeAt(0);
       const allCells = Array.from(table.querySelectorAll('td, th'));
@@ -810,7 +866,7 @@ export class TableTooltip {
     first.rowSpan = maxR - minR + 1;
     first.style.verticalAlign = 'middle';
     first.innerHTML = rectCells.map((c) => c.innerHTML).join('');
-    rectCells.slice(1).forEach((c) => c.parentElement?.removeChild(c));
+    rectCells.slice(1).forEach((c) => c.remove());
 
     this._clearSelection();
     this.context.invoke('editor.afterCommand');
@@ -820,7 +876,7 @@ export class TableTooltip {
     const table = this._activeTable;
     if (!table) return;
     this._hide();
-    if (table.parentNode) table.parentNode.removeChild(table);
+    if (table.parentNode) table.remove();
     this.context.invoke('editor.afterCommand');
   }
 
@@ -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);
@@ -925,20 +981,22 @@ export class TableTooltip {
     this._sizeApply   = null;
 
     const d1 = on(applyBtn, 'click', () => {
-      const val = parseInt(this._sizeInputEl.value, 10);
+      const val = Number.parseInt(this._sizeInputEl.value, 10);
       if (val > 0 && typeof this._sizeApply === 'function') this._sizeApply(val);
       this._hideSizePopover();
     });
     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();
       }
     });
@@ -958,13 +1016,13 @@ export class TableTooltip {
       if (!table) return;
       const firstCell = table.querySelector('td, th');
       const currentPx = firstCell
-        ? (parseInt(firstCell.style.borderWidth, 10) ||
-           parseInt(window.getComputedStyle(firstCell).borderWidth, 10) || 1)
+        ? (Number.parseInt(firstCell.style.borderWidth, 10) ||
+           Number.parseInt(globalThis.getComputedStyle(firstCell).borderWidth, 10) || 1)
         : 1;
       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) {
@@ -1021,8 +1079,8 @@ export class TableTooltip {
       const ph = this._sizePopover.offsetHeight || 110;
       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;
+      if (left + pw > globalThis.innerWidth  - 8) left = globalThis.innerWidth  - pw - 8;
+      if (top  + ph > globalThis.innerHeight - 8) top  = tipRect.top - ph - 6;
       this._sizePopover.style.left = `${left}px`;
       this._sizePopover.style.top  = `${top}px`;
       if (this._sizeInputEl) { this._sizeInputEl.focus(); this._sizeInputEl.select(); }
@@ -1033,4 +1091,106 @@ 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; keep tooltip alive while hovering
+    this._disposers.push(
+      on(pop, 'mousedown', (e) => e.preventDefault()),
+      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?.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 > globalThis.innerWidth  - 8) left = globalThis.innerWidth  - pw - 8;
+      if (top  + ph > globalThis.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');
+  }
 }