autumnnote 2.1.0 → 2.3.0

package/src/js/module/TableTooltip.js

@@ -1,1392 +0,0 @@
-// TableTooltip.js - Hover tooltip for tables inside the editor
-// Shows a horizontal action bar above (or below) the hovered table,
-// similar in appearance and interaction to ImageTooltip / VideoTooltip.
-import { createElement, on } from '../core/dom.js';
-import { ICONS } from './table-icons.js';
-import {
-  getVisualColIndex,
-  getCellAtVisualCol,
-  getCellAfterVisualCol,
-  buildGridMap,
-} from './table-grid.js';
-
-const SHOW_DELAY = 120;
-const HIDE_DELAY = 200;
-
-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) {
-    this.context = context;
-    this._el = null;
-    this._activeTable = null;
-    this._activeCell = null;  // last hovered td/th
-    this._showTimer = null;
-    this._hideTimer = null;
-    this._disposers = [];
-    this._sizePopover = null;
-    this._sizeApply = null;
-    this._sizeTitleEl = null;
-    this._sizeInputEl = null;
-    // Cell shade popover
-    this._shadePopover = null;
-    this._shadeTitleEl = null;
-    this._shadeColorStrip = null;
-    // Border color popover
-    this._borderColorPopover = null;
-    this._borderColorTitleEl = null;
-    this._borderColorStrip = null;
-    this._borderColorNoBtn = null;
-    // Cell selection
-    this._selectMode = false;
-    this._selectedCells = [];
-    this._selectStart = null;
-    this._selectDragging = false;
-    this._selectBtn = null;
-    this._editable = null;
-  }
-
-  initialize() {
-    this._el = this._buildTooltip();
-    document.body.appendChild(this._el);
-
-    this._sizePopover = this._buildSizePopover();
-    document.body.appendChild(this._sizePopover);
-
-    this._shadePopover = this._buildCellShadePopover();
-    document.body.appendChild(this._shadePopover);
-
-    this._borderColorPopover = this._buildBorderColorPopover();
-    document.body.appendChild(this._borderColorPopover);
-
-    const editable = this.context.layoutInfo.editable;
-    this._editable = editable;
-
-    // ── Cell selection drag ──────────────────────────────────────────────────
-    const onSelMousedown = (e) => {
-      if (!this._selectMode) return;
-      const cell = e.target.closest('td, th');
-      if (!cell || !editable.contains(cell)) return;
-      // Don't interfere with col/row resize (inline cursor is set by resize logic)
-      if (cell.style.cursor === 'col-resize' || cell.style.cursor === 'row-resize') return;
-      e.preventDefault(); // suppress text-cursor placement while selecting cells
-      this._activeTable = cell.closest('table');
-      this._selectStart = cell;
-      this._selectDragging = true;
-      this._setSelection([cell]);
-    };
-    const onSelMousemove = (e) => {
-      if (!this._selectMode || !this._selectDragging || !this._selectStart) return;
-      const cell = e.target.closest('td, th');
-      if (!cell || !editable.contains(cell)) return;
-      if (cell.closest('table') !== this._activeTable) return;
-      this._setSelection(this._getRectCells(this._selectStart, cell));
-    };
-    const onSelMouseup = () => { this._selectDragging = false; };
-
-    this._disposers.push(
-      on(editable, 'mousedown', onSelMousedown),
-      on(editable, 'mousemove', onSelMousemove),
-      on(document, 'mouseup',   onSelMouseup),
-      // ──────────────────────────────────────────────────────────────────────
-      on(editable, 'mouseover', (e) => {
-        if (this.context.layoutInfo.container.classList.contains('an-disabled')) return;
-        const table = /** @type {Element} */ (e.target)?.closest('table');
-        if (table && editable.contains(table)) {
-          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 = /** @type {Node|null} */ (/** @type {MouseEvent} */ (e).relatedTarget);
-        if (!to || (
-          !editable.contains(to) &&
-          !this._el.contains(to) &&
-          !this._sizePopover?.contains(to)
-        )) {
-          this._scheduleHide();
-        }
-      }, { passive: true }),
-      on(document, 'click', (e) => {
-        const et = /** @type {Node} */ (e.target);
-        if (this._selectMode && this._activeTable?.contains(et)) return;
-        if (this._activeTable &&
-          !this._activeTable.contains(et) &&
-          !this._el.contains(et) &&
-          !this._sizePopover?.contains(et) &&
-          !this._shadePopover?.contains(et) &&
-          !this._borderColorPopover?.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();
-    return this;
-  }
-
-  // ---------------------------------------------------------------------------
-  // Column & row drag-resize
-  // ---------------------------------------------------------------------------
-
-  _initResize() {
-    const editable = this.context.layoutInfo.editable;
-    const HIT = 6; // px proximity threshold
-
-    // Shared hover state
-    let _nearCell = null;
-    let _nearEdge = null; // 'col' | 'row' | null
-
-    // Active drag state
-    let _resizing = false;
-    let _edge     = null; // 'col' | 'row'
-    let _startX   = 0;
-    let _startY   = 0;
-    let _startW   = 0;
-    let _startH   = 0;
-    let _colIdx   = -1;
-    let _colCells = null; // cells cached at drag-start — avoids querySelectorAll every frame
-    let _row      = null;
-    let _table    = null;
-    let _rafDocMove    = null; // pending rAF handle for resize drag
-    let _rafEditorMove = null; // pending rAF handle for cursor detection
-
-    const clearHover = () => {
-      if (_nearCell) { _nearCell.style.cursor = ''; _nearCell = null; }
-      _nearEdge = null;
-    };
-
-    const onEditorMove = (e) => {
-      if (_resizing) return;
-      if (this.context.layoutInfo.container.classList.contains('an-disabled')) {
-        clearHover();
-        return;
-      }
-      // Throttle to one check per animation frame — getBoundingClientRect forces reflow
-      if (_rafEditorMove !== null) return;
-      const target  = e.target;
-      const clientX = e.clientX;
-      const clientY = e.clientY;
-      _rafEditorMove = requestAnimationFrame(() => {
-        _rafEditorMove = null;
-        const cell = target.closest('td, th');
-        if (!cell || !editable.contains(cell)) { clearHover(); return; }
-        if (_nearCell && _nearCell !== cell) _nearCell.style.cursor = '';
-        const rect     = cell.getBoundingClientRect();
-        const onRight  = Math.abs(clientX - rect.right)  < HIT;
-        const onBottom = Math.abs(clientY - rect.bottom) < HIT;
-        if (onRight) {
-          cell.style.cursor = 'col-resize';
-          _nearCell = cell; _nearEdge = 'col';
-        } else if (onBottom) {
-          cell.style.cursor = 'row-resize';
-          _nearCell = cell; _nearEdge = 'row';
-        } else {
-          clearHover();
-        }
-      });
-    };
-
-    const onEditorDown = (e) => {
-      if (this.context.layoutInfo.container.classList.contains('an-disabled')) return;
-      if (!_nearCell || !_nearEdge) return;
-      _resizing = true;
-      _edge     = _nearEdge;
-      _startX   = e.clientX;
-      _startY   = e.clientY;
-      _table    = _nearCell.closest('table');
-      if (_edge === 'col') {
-        // Right edge of a merged cell = last spanned column, not the start column
-        _colIdx = getVisualColIndex(_nearCell) + (_nearCell.colSpan || 1) - 1;
-        // Cache non-merged cells at that column — merged cells cannot be individually
-        // resized per column (F-1: colSpan > 1 distributes width across all spanned cols)
-        _colCells = _colIdx >= 0
-          ? Array.from(_table.querySelectorAll('tr'))
-              .map(r => getCellAtVisualCol(r, _colIdx))
-              .filter(Boolean)
-              .filter(c => (c.colSpan || 1) === 1)
-          : [];
-        // Use the actual column width from a non-merged cell; fall back to per-column estimate
-        _startW = _colCells.length > 0
-          ? _colCells[0].offsetWidth
-          : Math.max(30, Math.round(_nearCell.offsetWidth / (_nearCell.colSpan || 1)));
-        document.body.style.cursor = 'col-resize';
-      } else {
-        // Bottom edge of a merged cell = last spanned row, not the cell's own <tr>
-        const tr = _nearCell.closest('tr');
-        const rowStart = tr ? Array.from(_table.rows).indexOf(tr) : 0;
-        const lastRowIdx = rowStart + (_nearCell.rowSpan || 1) - 1;
-        _row    = _table.rows[lastRowIdx] || tr;
-        _startH = _row ? _row.offsetHeight : 40;
-        document.body.style.cursor = 'row-resize';
-      }
-      document.body.style.userSelect = 'none';
-      e.preventDefault();
-      e.stopPropagation();
-    };
-
-    const onDocMove = (e) => {
-      if (!_resizing) return;
-      // Skip if a frame is already scheduled — avoids per-pixel style thrashing
-      if (_rafDocMove !== null) return;
-      const clientX = e.clientX;
-      const clientY = e.clientY;
-      _rafDocMove = requestAnimationFrame(() => {
-        _rafDocMove = null;
-        if (_edge === 'col') {
-          const newW = Math.max(30, _startW + (clientX - _startX));
-          for (const c of _colCells) {
-            c.style.width    = `${newW}px`;
-            c.style.minWidth = `${newW}px`;
-          }
-        } else {
-          const newH = Math.max(20, _startH + (clientY - _startY));
-          if (_row) {
-            for (const c of _row.cells) {
-              c.style.height    = `${newH}px`;
-              c.style.minHeight = `${newH}px`;
-            }
-          }
-        }
-      });
-    };
-
-    const onDocUp = () => {
-      if (!_resizing) return;
-      // Cancel any in-flight rAF so stale writes don't land after mouseup
-      if (_rafDocMove !== null) { cancelAnimationFrame(_rafDocMove); _rafDocMove = null; }
-      _resizing = false;
-      document.body.style.userSelect = '';
-      document.body.style.cursor     = '';
-      _edge     = null;
-      _table    = null;
-      _row      = null;
-      _colIdx   = -1;
-      _colCells = null;
-      this.context.invoke('editor.afterCommand');
-    };
-
-    this._disposers.push(
-      on(editable, 'mousemove', onEditorMove),
-      on(editable, 'mousedown', onEditorDown),
-      on(document, 'mousemove', onDocMove),
-      on(document, 'mouseup',   onDocUp),
-    );
-  }
-
-  destroy() {
-    this._clearTimers();
-    this._disposers.forEach((d) => d());
-    this._disposers = [];
-    if (this._el?.parentNode) this._el.remove();
-    this._el = null;
-    if (this._sizePopover?.parentNode) {
-      this._sizePopover.remove();
-    }
-    this._sizePopover = null;
-    if (this._shadePopover?.parentNode) {
-      this._shadePopover.remove();
-    }
-    this._shadePopover = null;
-    if (this._borderColorPopover?.parentNode) {
-      this._borderColorPopover.remove();
-    }
-    this._borderColorPopover = null;
-  }
-
-  // ---------------------------------------------------------------------------
-  // Build tooltip bar
-  // ---------------------------------------------------------------------------
-
-  _buildTooltip() {
-    const L = this.context.locale.tooltips.table;
-    const el = createElement('div', {
-      class: 'an-link-tooltip an-table-tooltip',
-      role: 'toolbar',
-      'aria-label': L.ariaLabel,
-    });
-    el.style.display = 'none';
-
-    // Label
-    this._label = createElement('span', { class: 'an-link-tooltip-url' });
-    this._label.textContent = L.label;
-    el.appendChild(this._label);
-
-    el.appendChild(this._sep());
-
-    // Select-cells toggle
-    this._selectBtn = this._makeBtn(ICONS.selectCells, L.selectCells, () => this._toggleSelectMode());
-    el.appendChild(this._selectBtn);
-
-    el.appendChild(this._sep());
-
-    // Row operations
-    el.appendChild(this._makeBtn(ICONS.rowAbove, L.addRowAbove, () => this._addRow('above')));
-    el.appendChild(this._makeBtn(ICONS.rowBelow, L.addRowBelow, () => this._addRow('below')));
-    el.appendChild(this._makeBtn(ICONS.deleteRow, L.deleteRow,  () => this._deleteRow()));
-
-    el.appendChild(this._sep());
-
-    // Column operations
-    el.appendChild(this._makeBtn(ICONS.colLeft,   L.addColumnLeft,   () => this._addColumn('left')));
-    el.appendChild(this._makeBtn(ICONS.colRight,  L.addColumnRight,  () => this._addColumn('right')));
-    el.appendChild(this._makeBtn(ICONS.deleteCol, L.deleteColumn,    () => this._deleteColumn()));
-    el.appendChild(this._makeBtn(ICONS.sortAsc,  L.sortAsc,  () => this._sortColumn('asc')));
-    el.appendChild(this._makeBtn(ICONS.sortDesc, L.sortDesc, () => this._sortColumn('desc')));
-
-    el.appendChild(this._sep());
-
-    // Merge cells
-    el.appendChild(this._makeBtn(ICONS.mergeCells,   L.mergeCells,   () => this._mergeCells()));
-    el.appendChild(this._makeBtn(ICONS.unmergeCells, L.unmergeCells, () => this._unmergeCells()));
-
-    el.appendChild(this._sep());
-
-    // Cell text alignment
-    el.appendChild(this._makeBtn(ICONS.alignLeft,    L.cellAlignLeft,    () => this._applyCellAlign('left')));
-    el.appendChild(this._makeBtn(ICONS.alignCenter,  L.cellAlignCenter,  () => this._applyCellAlign('center')));
-    el.appendChild(this._makeBtn(ICONS.alignRight,   L.cellAlignRight,   () => this._applyCellAlign('right')));
-    el.appendChild(this._makeBtn(ICONS.alignJustify, L.cellAlignJustify, () => this._applyCellAlign('justify')));
-    el.appendChild(this._makeBtn(ICONS.headerRow,    L.toggleHeaderRow,  () => this._toggleHeaderRow()));
-
-    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')));
-    el.appendChild(this._makeBtn(ICONS.tableBorder,L.tableBorderWidth, () => this._openSizePopover('border')));
-    el.appendChild(this._makeBtn(ICONS.cellPadding, L.cellPadding, () => this._openSizePopover('cellPadding')));
-
-    // Table border color button — color-strip variant like shade button
-    const borderColorBtn = createElement('button', {
-      type: 'button',
-      class: 'an-link-tooltip-btn an-link-tooltip-btn--shade',
-      title: L.tableBorderColor,
-    });
-    const borderColorSvgWrap = createElement('span', { class: 'an-bubble-btn-svg' });
-    borderColorSvgWrap.innerHTML = ICONS.borderColor;
-    const borderColorStrip = createElement('span', { class: 'an-link-tooltip-color-strip' });
-    borderColorBtn.appendChild(borderColorSvgWrap);
-    borderColorBtn.appendChild(borderColorStrip);
-    this._borderColorStrip = borderColorStrip;
-    this._disposers.push(on(borderColorBtn, 'click', (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      this._openBorderColorPopover();
-    }));
-    el.appendChild(borderColorBtn);
-
-    el.appendChild(this._sep());
-
-    // Delete table (danger)
-    el.appendChild(this._makeBtn(ICONS.deleteTable, L.deleteTable, () => this._deleteTable(), true));
-
-    el.appendChild(this._sep());
-    el.appendChild(this._makeBtn(ICONS.exportCSV, L.exportCSV, () => this._exportTableCSV()));
-
-    // Keep tooltip alive while hovering.
-    // Don't schedule hide on mouseleave when the size popover is open —
-    // the user is moving the mouse toward it.
-    this._disposers.push(
-      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._shadePopover && this._shadePopover.style.display !== 'none') return;
-        if (this._borderColorPopover && this._borderColorPopover.style.display !== 'none') return;
-        this._scheduleHide();
-      }),
-    );
-
-    return el;
-  }
-
-  _sep() {
-    return createElement('div', { class: 'an-link-tooltip-sep' });
-  }
-
-  /**
-   * @param {string} icon
-   * @param {string} title
-   * @param {Function} handler
-   * @param {boolean} [isDanger]
-   */
-  _makeBtn(icon, title, handler, isDanger = false) {
-    const btn = createElement('button', {
-      type: 'button',
-      class: isDanger
-        ? 'an-link-tooltip-btn an-link-tooltip-btn--danger'
-        : 'an-link-tooltip-btn',
-      title,
-    });
-    btn.innerHTML = icon;
-    this._disposers.push(on(btn, 'click', (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      handler();
-    }));
-    return btn;
-  }
-
-  // ---------------------------------------------------------------------------
-  // Show / Hide
-  // ---------------------------------------------------------------------------
-
-  _scheduleShow(table) {
-    if (this._activeTable === table && this._el.style.display !== 'none') return;
-    clearTimeout(this._hideTimer);
-    this._hideTimer = null;
-    clearTimeout(this._showTimer);
-    this._showTimer = setTimeout(() => {
-      this._activeTable = table;
-      this._show();
-    }, SHOW_DELAY);
-  }
-
-  _scheduleHide() {
-    clearTimeout(this._showTimer);
-    this._showTimer = null;
-    if (this._hideTimer) return;
-    this._hideTimer = setTimeout(() => this._hide(), HIDE_DELAY);
-  }
-
-  _show() {
-    if (!this._activeTable) return;
-    this._el.style.display = 'flex';
-    this._syncShadeStrip();
-    this._syncBorderColorStrip();
-    // 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;
-    this._activeCell = null;
-    // Reset select mode
-    if (this._selectMode) {
-      this._selectMode = false;
-      if (this._selectBtn) this._selectBtn.classList.remove('an-link-tooltip-btn--active');
-      if (this._editable) this._editable.classList.remove('an-table-select-mode');
-    }
-    this._clearSelection();
-    this._clearTimers();
-    this._hideSizePopover();
-    this._hideBorderColorPopover();
-  }
-
-  _clearTimers() {
-    clearTimeout(this._showTimer);
-    clearTimeout(this._hideTimer);
-    this._showTimer = null;
-    this._hideTimer = null;
-  }
-
-  _positionNear(table) {
-    if (!table) return;
-    const rect   = table.getBoundingClientRect();
-    const tipW   = this._el.offsetWidth  || 400;
-    const tipH   = this._el.offsetHeight || 30;
-    const margin = 6;
-
-    // Center horizontally over the table; prefer above it
-    let left = rect.left + (rect.width - tipW) / 2;
-    let top  = rect.top - tipH - margin;
-
-    if (top  < margin)                           top  = rect.bottom + margin;
-    if (left + tipW > globalThis.innerWidth - margin) left = globalThis.innerWidth - tipW - margin;
-    if (left < margin)                            left = margin;
-
-    this._el.style.left = `${left}px`;
-    this._el.style.top  = `${top}px`;
-  }
-
-  // ---------------------------------------------------------------------------
-  // Helper: get active cell (fallback to first td/th in table)
-  // ---------------------------------------------------------------------------
-
-  _getCell() {
-    // Prefer the cell under the current text cursor (most intuitive for operations)
-    const sel = globalThis.getSelection();
-    if (sel?.rangeCount) {
-      let container = sel.getRangeAt(0).commonAncestorContainer;
-      if (container.nodeType === 3) container = container.parentElement;
-      const cellFromSel = /** @type {Element} */ (container)?.closest('td, th');
-      if (cellFromSel && this._activeTable?.contains(cellFromSel)) {
-        return cellFromSel;
-      }
-    }
-    return this._activeCell
-      || this._activeTable?.querySelector('td, th');
-  }
-
-  // ---------------------------------------------------------------------------
-  // Cell selection helpers
-  // ---------------------------------------------------------------------------
-
-  _toggleSelectMode() {
-    this._selectMode = !this._selectMode;
-    if (this._selectBtn) {
-      this._selectBtn.classList.toggle('an-link-tooltip-btn--active', this._selectMode);
-    }
-    if (this._editable) {
-      this._editable.classList.toggle('an-table-select-mode', this._selectMode);
-    }
-    if (!this._selectMode) {
-      this._clearSelection();
-    }
-  }
-
-  _clearSelection() {
-    this._selectedCells.forEach((c) => c.classList.remove('an-cell-selected'));
-    this._selectedCells = [];
-    this._selectStart = null;
-  }
-
-  _setSelection(cells) {
-    // Remove highlight from cells no longer in selection
-    this._selectedCells.forEach((c) => {
-      if (!cells.includes(c)) c.classList.remove('an-cell-selected');
-    });
-    this._selectedCells = cells;
-    cells.forEach((c) => c.classList.add('an-cell-selected'));
-  }
-
-  /**
-   * Returns all cells in the rectangular area between startCell and endCell,
-   * correctly handling rowspan/colspan by using the grid map.
-   * The rect is expanded iteratively until it is stable — this ensures any
-   * merged cell that starts outside the initial rect but spans into it is
-   * fully included.
-   */
-  _getRectCells(startCell, endCell) {
-    if (!startCell) return [];
-    if (!endCell || startCell === endCell) return [startCell];
-    const table = startCell.closest('table');
-    if (!table?.contains(endCell)) return [startCell];
-
-    const { gridMap, cellPos } = buildGridMap(table);
-    const sp = cellPos.get(startCell);
-    const ep = cellPos.get(endCell);
-    if (!sp || !ep) return [startCell];
-
-    let minR = Math.min(sp.r, ep.r);
-    let maxR = Math.max(sp.r + sp.rs - 1, ep.r + ep.rs - 1);
-    let minC = Math.min(sp.c, ep.c);
-    let maxC = Math.max(sp.c + sp.cs - 1, ep.c + ep.cs - 1);
-
-    // Iteratively expand until stable — handles spans that exceed the current rect
-    let changed = true;
-    while (changed) {
-      changed = false;
-      for (let r = minR; r <= maxR; r++) {
-        const rowMap = gridMap[r];
-        if (!rowMap) continue;
-        for (let c = minC; c <= maxC; c++) {
-          const cell = rowMap[c];
-          if (!cell) continue;
-          const pos = cellPos.get(cell);
-          if (!pos) continue;
-          if (pos.r < minR)              { minR = pos.r;               changed = true; }
-          if (pos.r + pos.rs - 1 > maxR) { maxR = pos.r + pos.rs - 1; changed = true; }
-          if (pos.c < minC)              { minC = pos.c;               changed = true; }
-          if (pos.c + pos.cs - 1 > maxC) { maxC = pos.c + pos.cs - 1; changed = true; }
-        }
-      }
-    }
-
-    // Collect unique cells in document order
-    const seen = new Set();
-    const result = [];
-    for (let r = minR; r <= maxR; r++) {
-      const rowMap = gridMap[r];
-      if (!rowMap) continue;
-      for (let c = minC; c <= maxC; c++) {
-        const cell = rowMap[c];
-        if (cell && !seen.has(cell)) {
-          seen.add(cell);
-          result.push(cell);
-        }
-      }
-    }
-    return result.length > 0 ? result : [startCell];
-  }
-
-  /**
-   * Returns the active cell set: user-selected cells when available,
-   * otherwise the single active/cursor cell.
-   * @returns {HTMLTableCellElement[]}
-   */
-  _getSelectedCells() {
-    return this._selectedCells.length > 0
-      ? this._selectedCells
-      : [this._getCell()].filter(Boolean);
-  }
-
-  // ---------------------------------------------------------------------------
-  // Table operations
-  // ---------------------------------------------------------------------------
-
-  _addRow(position) {
-    const cells = this._getSelectedCells();
-    if (!cells.length) return;
-    const table = cells[0].closest('table');
-    if (!table) return;
-    const allRows = Array.from(table.querySelectorAll('tr'));
-    const selectedRows = [...new Set(cells.map((c) => c.closest('tr')).filter(Boolean))];
-    // Reference row: topmost for 'above', bottommost for 'below'
-    const refRow = selectedRows.reduce((best, r) => {
-      const bi = allRows.indexOf(best);
-      const ri = allRows.indexOf(r);
-      if (position === 'above') return ri < bi ? r : best;
-      return 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);
-    for (let i = 0; i < colCount; i++) {
-      const td = createElement('td', {}, ['\u00a0']);
-      const ref = refCells[i];
-      if (ref?.style.width)    td.style.width    = ref.style.width;
-      if (ref?.style.minWidth) td.style.minWidth = ref.style.minWidth;
-      newRow.appendChild(td);
-    }
-    if (position === 'above') refRow.parentElement?.insertBefore(newRow, refRow);
-    else refRow.after(newRow);
-    requestAnimationFrame(() => this._positionNear(this._activeTable));
-    this.context.invoke('editor.afterCommand');
-  }
-
-  _addColumn(position) {
-    const cells = this._getSelectedCells();
-    if (!cells.length) return;
-    const table = cells[0].closest('table');
-    if (!table) return;
-    const colIndices = cells.map((c) => getVisualColIndex(c));
-    const targetColIdx = position === 'left' ? Math.min(...colIndices) : Math.max(...colIndices);
-    const rows = Array.from(table.querySelectorAll('tr'));
-    const refs      = rows.map((r) => position === 'left'
-      ? getCellAtVisualCol(r, targetColIdx)
-      : getCellAfterVisualCol(r, targetColIdx));
-    const isHeaders = rows.map((r) => r.closest('thead') !== null);
-    rows.forEach((r, i) => {
-      r.insertBefore(createElement(isHeaders[i] ? 'th' : 'td', {}, ['\u00a0']), refs[i]);
-    });
-    requestAnimationFrame(() => this._positionNear(this._activeTable));
-    this.context.invoke('editor.afterCommand');
-  }
-
-  _deleteRow() {
-    const cells = this._getSelectedCells();
-    if (!cells.length) return;
-    const table = cells[0].closest('table');
-    if (!table) return;
-    const tbody = table.querySelector('tbody');
-    const totalBodyRows = tbody
-      ? tbody.querySelectorAll('tr').length
-      : table.querySelectorAll('tr').length;
-    const selectedRows = [...new Set(cells.map((c) => c.closest('tr')).filter(Boolean))];
-    const bodyRowsToDelete = selectedRows.filter((r) => r.closest('tbody'));
-    // Guard: keep at least one body row
-    if (bodyRowsToDelete.length >= totalBodyRows) return;
-    this._activeCell = null;
-    this._clearSelection();
-    selectedRows.forEach((r) => r.remove());
-    requestAnimationFrame(() => this._positionNear(this._activeTable));
-    this.context.invoke('editor.afterCommand');
-  }
-
-  _deleteColumn() {
-    const cells = this._getSelectedCells();
-    if (!cells.length) return;
-    const table = cells[0].closest('table');
-    if (!table) return;
-    const tableRows = Array.from(table.querySelectorAll('tr'));
-    if (tableRows[0] && tableRows[0].cells.length <= 1) return; // guard: keep ≥1 col
-    const colIndices = [...new Set(cells.map((c) => getVisualColIndex(c)))];
-    if (colIndices.length >= (tableRows[0]?.cells.length ?? 1)) return;
-    // Collect all cell references upfront before any removal (avoids stale visual indices)
-    const cellsToDelete = [];
-    colIndices.forEach((colIdx) => {
-      tableRows.forEach((r) => {
-        const c = getCellAtVisualCol(r, colIdx);
-        if (c) cellsToDelete.push(c);
-      });
-    });
-    this._activeCell = null;
-    this._clearSelection();
-    cellsToDelete.forEach((c) => c.remove());
-    requestAnimationFrame(() => this._positionNear(this._activeTable));
-    this.context.invoke('editor.afterCommand');
-  }
-
-  _mergeCells() {
-    const cell = this._getCell();
-    if (!cell) return;
-    const table = cell.closest('table');
-    if (!table) return;
-
-    // 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 = globalThis.getSelection();
-      if (!sel || sel.rangeCount === 0) return;
-      const range = sel.getRangeAt(0);
-      const allCells = Array.from(table.querySelectorAll('td, th'));
-      selected = allCells.filter((c) => {
-        try { return range.intersectsNode(c); } catch { return false; }
-      });
-      if (selected.length < 2) return;
-    }
-
-    const { gridMap, cellPos } = buildGridMap(table);
-
-    // Bounding rect that encompasses every selected cell's full span
-    let minR = Infinity, maxR = -Infinity, minC = Infinity, maxC = -Infinity;
-    selected.forEach((c) => {
-      const pos = cellPos.get(c);
-      if (!pos) return;
-      if (pos.r < minR)              minR = pos.r;
-      if (pos.r + pos.rs - 1 > maxR) maxR = pos.r + pos.rs - 1;
-      if (pos.c < minC)              minC = pos.c;
-      if (pos.c + pos.cs - 1 > maxC) maxC = pos.c + pos.cs - 1;
-    });
-    if (minR === Infinity) return;
-
-    // Collect every unique cell in the bounding rect
-    const seen = new Set();
-    const rectCells = [];
-    for (let r = minR; r <= maxR; r++) {
-      const rowMap = gridMap[r];
-      if (!rowMap) continue;
-      for (let c = minC; c <= maxC; c++) {
-        const tc = rowMap[c];
-        if (tc && !seen.has(tc)) { seen.add(tc); rectCells.push(tc); }
-      }
-    }
-    if (rectCells.length < 2) return;
-
-    const first = rectCells[0];
-    first.colSpan = maxC - minC + 1;
-    first.rowSpan = maxR - minR + 1;
-    first.style.verticalAlign = 'middle';
-    first.style.height = '';
-    first.style.minHeight = '';
-
-    // Merge content: collect non-empty inner HTML, join with <br> separator
-    const parts = rectCells
-      .map((c) => c.innerHTML.replace(/^(<br\s*\/?>|\s)+$/i, '').trim())
-      .filter((h) => h !== '');
-    first.innerHTML = parts.length ? parts.join('<br>') : '<br>';
-
-    rectCells.slice(1).forEach((c) => {
-      const row = c.parentElement;
-      c.remove();
-      // Remove the parent <tr> if it is now completely empty
-      if (row && row.cells.length === 0) row.remove();
-    });
-
-    this._clearSelection();
-    this.context.invoke('editor.afterCommand');
-  }
-
-  _deleteTable() {
-    const table = this._activeTable;
-    if (!table) return;
-    this._hide();
-    if (table.parentNode) table.remove();
-    this.context.invoke('editor.afterCommand');
-  }
-
-  _unmergeCells() {
-    const cells = this._getSelectedCells();
-    if (!cells.length) return;
-    const table = cells[0].closest('table');
-    if (!table) return;
-    const mergedCells = cells.filter(
-      (c) => table.contains(c) && ((c.colSpan || 1) > 1 || (c.rowSpan || 1) > 1)
-    );
-    if (!mergedCells.length) return;
-    mergedCells.forEach((cell) => {
-      if (table.contains(cell)) this._unmergeOne(cell, table);
-    });
-    this._clearSelection();
-    requestAnimationFrame(() => this._positionNear(this._activeTable));
-    this.context.invoke('editor.afterCommand');
-  }
-
-  /**
-   * Split a single merged cell (colspan/rowspan > 1) back into individual cells.
-   * New cells are empty (&nbsp;); the original cell retains its content.
-   * @param {HTMLTableCellElement} cell
-   * @param {HTMLTableElement} table
-   */
-  _unmergeOne(cell, table) {
-    const cs = cell.colSpan || 1;
-    const rs = cell.rowSpan || 1;
-    if (cs === 1 && rs === 1) return;
-
-    // Build grid map from current DOM state (before any mutation)
-    const { cellPos } = buildGridMap(table);
-    const pos = cellPos.get(cell);
-    if (!pos) return;
-
-    const { r, c } = pos;
-    const tableRows = Array.from(table.rows);
-    const tag = cell.tagName.toLowerCase(); // preserve td / th
-
-    // Reset the original cell
-    cell.rowSpan = 1;
-    cell.colSpan = 1;
-    cell.style.verticalAlign = '';
-
-    // Same row: insert (cs - 1) sibling cells after the original cell
-    if (cs > 1) {
-      const insertRef = cell.nextElementSibling;
-      for (let dc = 1; dc < cs; dc++) {
-        tableRows[r].insertBefore(createElement(tag, {}, ['\u00a0']), insertRef);
-      }
-    }
-
-    // Rows below: insert cs cells at the correct visual column position (for rowspan)
-    for (let dr = 1; dr < rs; dr++) {
-      const targetRow = tableRows[r + dr];
-      if (!targetRow) continue;
-      // Find the first cell in this row whose visual-col origin is beyond c
-      // (using cellPos built before mutations — valid for these untouched rows)
-      let ref = null;
-      for (const tc of targetRow.cells) {
-        const tp = cellPos.get(tc);
-        if (tp?.c > c) { ref = tc; break; }
-      }
-      for (let dc = 0; dc < cs; dc++) {
-        targetRow.insertBefore(createElement(tag, {}, ['\u00a0']), ref);
-      }
-    }
-  }
-
-  // ---------------------------------------------------------------------------
-  // Size popover (column width / row height)
-  // ---------------------------------------------------------------------------
-
-  _buildSizePopover() {
-    const popover = createElement('div', { class: 'an-size-popover' });
-    popover.style.display = 'none';
-
-    const titleEl = createElement('div', { class: 'an-size-popover-title' });
-    const body    = createElement('div', { class: 'an-size-popover-body' });
-    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);
-
-    const actionsEl  = createElement('div', { class: 'an-size-popover-actions' });
-    const cancelBtn  = createElement('button', { type: 'button', class: 'an-btn' });
-    cancelBtn.textContent = this.context.locale.tooltips.table.cancelBtn;
-    const applyBtn   = createElement('button', { type: 'button', class: 'an-btn an-btn-primary' });
-    applyBtn.textContent = this.context.locale.tooltips.table.applyBtn;
-    actionsEl.appendChild(cancelBtn);
-    actionsEl.appendChild(applyBtn);
-
-    popover.appendChild(titleEl);
-    popover.appendChild(body);
-    popover.appendChild(actionsEl);
-
-    this._sizeTitleEl = titleEl;
-    this._sizeInputEl = inputEl;
-    this._sizeApply   = null;
-
-    const d1 = on(applyBtn, 'click', () => {
-      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) => {
-      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(et) &&
-          !this._el.contains(et)) {
-        this._hideSizePopover();
-      }
-    });
-    // Keep the tooltip/popover alive while the mouse is over the popover.
-    const d5 = on(popover, 'mouseenter', () => this._clearTimers());
-    const d6 = on(popover, 'mouseleave', () => this._scheduleHide());
-    this._disposers.push(d1, d2, d3, d4, d5, d6);
-    return popover;
-  }
-
-  _openSizePopover(type) {
-    const cell = this._getCell();
-    if (!cell || !this._sizePopover) return;
-
-    if (type === 'border') {
-      const table = cell.closest('table');
-      if (!table) return;
-      const firstCell = table.querySelector('td, th');
-      const currentPx = firstCell
-        ? (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 = String(currentPx);
-      this._sizeApply = (val) => {
-        const cells = Array.from(table.querySelectorAll('td, th'));
-        if (val === 0) {
-          cells.forEach((c) => { c.style.borderWidth = '0'; c.style.borderStyle = 'none'; });
-        } else {
-          cells.forEach((c) => { c.style.borderWidth = `${val}px`; c.style.borderStyle = 'solid'; });
-        }
-        this.context.invoke('editor.afterCommand');
-      };
-    } else if (type === 'cellPadding') {
-      const cells = this._getSelectedCells();
-      const firstCell = cells[0] || this._getCell();
-      const currentPad = firstCell
-        ? (Number.parseInt(firstCell.style.padding, 10) ||
-           Number.parseInt(firstCell.style.paddingTop, 10) || 4)
-        : 4;
-      this._sizeTitleEl.textContent = this.context.locale.tooltips.table.cellPaddingPx;
-      this._sizeInputEl.min   = '0';
-      this._sizeInputEl.max   = '40';
-      this._sizeInputEl.value = String(currentPad);
-      this._sizeApply = (val) => {
-        const activeCells = this._getSelectedCells();
-        activeCells.forEach((c) => { if (c) c.style.padding = `${val}px`; });
-        this.context.invoke('editor.afterCommand');
-      };
-    } else {
-      const isCol = type === 'col';
-      const activeCells = this._getSelectedCells().filter((c) => {
-        const t = c.closest('table');
-        return t && t === cell.closest('table');
-      });
-      this._sizeTitleEl.textContent = isCol
-        ? this.context.locale.tooltips.table.columnWidthPx
-        : this.context.locale.tooltips.table.rowHeightPx;
-      this._sizeInputEl.min   = '1';
-      this._sizeInputEl.max   = '2000';
-      if (isCol) {
-        this._sizeInputEl.value = cell.offsetWidth || 120;
-      } else {
-        const refRow = cell.closest('tr');
-        this._sizeInputEl.value = refRow ? (refRow.offsetHeight || 40) : 40;
-      }
-      this._sizeApply = (val) => {
-        const table = cell.closest('table');
-        if (!table) return;
-        if (isCol) {
-          // Apply to all selected columns (or just the current column)
-          const colIndices = [...new Set(activeCells.map((c) => getVisualColIndex(c)))];
-          const tableRows  = Array.from(table.querySelectorAll('tr'));
-          colIndices.forEach((colIdx) => {
-            tableRows.forEach((r) => {
-              const c = getCellAtVisualCol(r, colIdx);
-              // F-1: skip merged cells — same reason as drag-resize _colCells.
-              if (c && (c.colSpan || 1) === 1) { c.style.width = `${val}px`; c.style.minWidth = `${val}px`; }
-            });
-          });
-        } else {
-          // Apply to all selected rows (or just the current row)
-          const selectedRows = [...new Set(activeCells.map((c) => c.closest('tr')).filter(Boolean))];
-          selectedRows.forEach((row) => {
-            for (const c of row.cells) { c.style.height = `${val}px`; c.style.minHeight = `${val}px`; }
-          });
-        }
-        this.context.invoke('editor.afterCommand');
-      };
-    }
-
-    this._sizePopover.style.display = 'block';
-    requestAnimationFrame(() => {
-      if (!this._sizePopover || !this._el) return;
-      const tipRect = this._el.getBoundingClientRect();
-      const pw = this._sizePopover.offsetWidth  || 220;
-      const ph = this._sizePopover.offsetHeight || 110;
-      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._sizePopover.style.left = `${left}px`;
-      this._sizePopover.style.top  = `${top}px`;
-      if (this._sizeInputEl) { this._sizeInputEl.focus(); this._sizeInputEl.select(); }
-    });
-  }
-
-  _hideSizePopover() {
-    if (this._sizePopover) this._sizePopover.style.display = 'none';
-    this._sizeApply = null;
-  }
-
-  // ---------------------------------------------------------------------------
-  // Colour popovers (cell shading + table border colour)
-  // ---------------------------------------------------------------------------
-
-  /**
-   * Builds one of the two colour popovers. Both are the same widget — a preset
-   * palette, a "no colour" reset row, and a custom `<input type="color">` — and
-   * they were previously two near-identical 55-line methods, so a fix applied
-   * to one silently missed the other. They differ only in the swatch the custom
-   * input starts on and in what the chosen colour is applied to.
-   *
-   * `getPopover` is read lazily rather than closed over: `destroy()` nulls the
-   * field, and the deferred handlers must see that instead of holding the
-   * detached element alive.
-   *
-   * @param {object} config
-   * @param {string} config.defaultColor - initial value of the custom input
-   * @param {(color: string) => void} config.apply - called with '' to clear
-   * @param {() => HTMLElement|null} config.getPopover
-   * @param {() => void} config.hide
-   * @returns {{ el: HTMLElement, titleEl: HTMLElement, noColorBtn: HTMLElement }}
-   */
-  _buildColorPopover({ defaultColor, apply, getPopover, hide }) {
-    const pop = createElement('div', { class: 'an-cell-shade-popover' });
-    pop.style.display = 'none';
-
-    const titleEl = createElement('div', { class: 'an-size-popover-title' });
-    pop.appendChild(titleEl);
-
-    // 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();
-        apply(color);
-      }));
-      palette.appendChild(sw);
-    });
-    pop.appendChild(palette);
-
-    // Reset row — clears the colour
-    const noColorRow = createElement('div', { class: 'an-context-color-custom' });
-    const noColorBtn = createElement('button', { type: 'button', class: 'an-shade-no-color' });
-    this._disposers.push(on(noColorBtn, 'click', () => apply('')));
-    noColorRow.appendChild(noColorBtn);
-    pop.appendChild(noColorRow);
-
-    // 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: defaultColor }));
-    const customLabel = createElement('span');
-    customLabel.textContent = this.context.locale.contextMenu.customColorLabel;
-    this._disposers.push(on(colorInput, 'change', () => apply(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
-      on(document, 'click', (e) => {
-        const et = /** @type {Node} */ (e.target);
-        const current = getPopover();
-        if (current &&
-            current.style.display !== 'none' &&
-            !current.contains(et) &&
-            !this._el?.contains(et)) {
-          hide();
-        }
-      }),
-    );
-
-    return { el: pop, titleEl, noColorBtn };
-  }
-
-  /**
-   * Shows a colour popover under the tooltip, flipping above it when there is
-   * no room below. Measurement has to wait a frame because the popover is
-   * display:none until now and would otherwise report zero size.
-   * @param {() => HTMLElement|null} getPopover
-   */
-  _showColorPopover(getPopover) {
-    const pop = getPopover();
-    if (!pop) return;
-    pop.style.display = 'block';
-    requestAnimationFrame(() => {
-      const current = getPopover();
-      if (!current || !this._el) return;
-      const pw = current.offsetWidth  || 170;
-      const ph = current.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;
-      current.style.left = `${Math.max(8, left)}px`;
-      current.style.top  = `${Math.max(8, top)}px`;
-    });
-  }
-
-  // --- Cell background shade ---
-
-  _buildCellShadePopover() {
-    const { el, titleEl, noColorBtn } = this._buildColorPopover({
-      defaultColor: '#ffffff',
-      apply: (color) => this._applyCellShade(color),
-      getPopover: () => this._shadePopover,
-      hide: () => this._hideCellShadePopover(),
-    });
-    this._shadeTitleEl = titleEl;
-    this._shadeNoBtn = noColorBtn;
-    return el;
-  }
-
-  _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._showColorPopover(() => this._shadePopover);
-  }
-
-  _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');
-  }
-
-  // --- Table border colour ---
-
-  _buildBorderColorPopover() {
-    const { el, titleEl, noColorBtn } = this._buildColorPopover({
-      defaultColor: '#000000',
-      apply: (color) => this._applyBorderColor(color),
-      getPopover: () => this._borderColorPopover,
-      hide: () => this._hideBorderColorPopover(),
-    });
-    this._borderColorTitleEl = titleEl;
-    this._borderColorNoBtn = noColorBtn;
-    return el;
-  }
-
-  _openBorderColorPopover() {
-    if (!this._borderColorPopover) return;
-    const L = this.context.locale.tooltips.table;
-    if (this._borderColorTitleEl) this._borderColorTitleEl.textContent = L.tableBorderColor;
-    if (this._borderColorNoBtn)   this._borderColorNoBtn.textContent  = L.noBorderColor;
-    this._showColorPopover(() => this._borderColorPopover);
-  }
-
-  _hideBorderColorPopover() {
-    if (this._borderColorPopover) this._borderColorPopover.style.display = 'none';
-  }
-
-  _applyBorderColor(color) {
-    const table = this._activeTable;
-    if (!table) return;
-    Array.from(table.querySelectorAll('td, th')).forEach((c) => { c.style.borderColor = color; });
-    if (this._borderColorStrip) {
-      this._borderColorStrip.style.background = color || 'transparent';
-    }
-    this._hideBorderColorPopover();
-    this.context.invoke('editor.afterCommand');
-  }
-
-  _syncBorderColorStrip() {
-    if (!this._borderColorStrip || !this._el || this._el.style.display === 'none') return;
-    const firstCell = this._activeTable?.querySelector('td, th');
-    this._borderColorStrip.style.background = firstCell?.style.borderColor || 'transparent';
-  }
-
-  // ---------------------------------------------------------------------------
-  // Cell text alignment
-  // ---------------------------------------------------------------------------
-
-  _applyCellAlign(align) {
-    const cells = this._getSelectedCells();
-    cells.forEach((c) => { if (c) c.style.textAlign = align; });
-    this.context.invoke('editor.afterCommand');
-  }
-
-  // ---------------------------------------------------------------------------
-  // Toggle header row
-  // ---------------------------------------------------------------------------
-
-  _toggleHeaderRow() {
-    const table = this._activeTable;
-    if (!table) return;
-    const firstRow = table.querySelector('tr');
-    if (!firstRow) return;
-
-    const isInThead = firstRow.closest('thead') !== null;
-
-    if (isInThead) {
-      // Convert th → td and move row to tbody
-      let tbody = table.querySelector('tbody');
-      if (!tbody) {
-        tbody = document.createElement('tbody');
-        table.appendChild(tbody);
-      }
-      Array.from(firstRow.cells).forEach((cell) => {
-        const td = document.createElement('td');
-        td.innerHTML = cell.innerHTML;
-        td.style.cssText = cell.style.cssText;
-        firstRow.replaceChild(td, cell);
-      });
-      tbody.insertBefore(firstRow, tbody.firstChild);
-      const thead = table.querySelector('thead');
-      if (thead && thead.rows.length === 0) thead.remove();
-    } else {
-      // Convert td → th and move row to thead
-      let thead = table.querySelector('thead');
-      if (!thead) {
-        thead = document.createElement('thead');
-        table.insertBefore(thead, table.firstChild);
-      }
-      Array.from(firstRow.cells).forEach((cell) => {
-        const th = document.createElement('th');
-        th.innerHTML = cell.innerHTML;
-        th.style.cssText = cell.style.cssText;
-        firstRow.replaceChild(th, cell);
-      });
-      thead.appendChild(firstRow);
-    }
-
-    this.context.invoke('editor.afterCommand');
-  }
-
-  _sortColumn(direction) {
-    const table = this._activeTable;
-    if (!table) return;
-    const cell = this._getCell();
-    if (!cell) return;
-    const colIdx = getVisualColIndex(cell);
-    if (colIdx === -1) return;
-    const tbody = table.querySelector('tbody') || table;
-    const rows = Array.from(tbody.querySelectorAll(':scope > tr'));
-    if (rows.length < 2) return;
-    rows.sort((a, b) => {
-      const aCell = getCellAtVisualCol(a, colIdx);
-      const bCell = getCellAtVisualCol(b, colIdx);
-      const aText = (aCell?.textContent || '').trim();
-      const bText = (bCell?.textContent || '').trim();
-      const aNum = parseFloat(aText);
-      const bNum = parseFloat(bText);
-      if (!isNaN(aNum) && !isNaN(bNum)) {
-        return direction === 'asc' ? aNum - bNum : bNum - aNum;
-      }
-      return direction === 'asc'
-        ? aText.localeCompare(bText)
-        : bText.localeCompare(aText);
-    });
-    rows.forEach((row) => tbody.appendChild(row));
-    this._markSortIndicator(table, colIdx, direction);
-    this.context.invoke('editor.afterCommand');
-  }
-
-  /**
-   * Marks the header cell of the sorted column with `an-sort-asc`/`an-sort-desc`
-   * so the active sort column and direction are visible, and clears any previous
-   * indicator. No-op for tables without a `<thead>` (no header row to mark).
-   * @param {HTMLTableElement} table
-   * @param {number} colIdx
-   * @param {'asc'|'desc'} direction
-   */
-  _markSortIndicator(table, colIdx, direction) {
-    const thead = table.querySelector('thead');
-    if (!thead) return;
-    thead.querySelectorAll('.an-sort-asc, .an-sort-desc').forEach((el) => {
-      el.classList.remove('an-sort-asc', 'an-sort-desc');
-    });
-    const headerRow = thead.querySelector('tr');
-    if (!headerRow) return;
-    const headerCell = getCellAtVisualCol(headerRow, colIdx);
-    if (headerCell) headerCell.classList.add(direction === 'asc' ? 'an-sort-asc' : 'an-sort-desc');
-  }
-
-  _exportTableCSV() {
-    const table = this._activeTable;
-    if (!table) return;
-    const rows = Array.from(table.querySelectorAll('tr'));
-    const csv = rows.map((row) =>
-      Array.from(row.querySelectorAll('td, th'))
-        .map((cell) => {
-          const text = (cell.textContent || '').trim().replace(/"/g, '""');
-          return `"${text}"`;
-        })
-        .join(',')
-    ).join('\n');
-    const blob = new Blob(['' + csv], { type: 'text/csv;charset=utf-8;' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = 'table.csv';
-    a.style.display = 'none';
-    document.body.appendChild(a);
-    a.click();
-    a.remove();
-    URL.revokeObjectURL(url);
-  }
-}