autumnnote 1.0.0 → 1.0.3

package/src/js/module/ContextMenu.js

@@ -418,11 +418,23 @@ export class ContextMenu {
       document.execCommand('hiliteColor', false, fmt.backgroundColor);
     }
 
+    // Font family — apply BEFORE font-size DOM manipulation so the selection is still intact.
+    if (fmt.fontFamily) {
+      document.execCommand('fontName', false, fmt.fontFamily);
+    }
+
     // Font size — use a unique data-marker to avoid touching pre-existing font[size="7"] nodes.
     if (fmt.fontSize) {
       const marker = `fs-${Date.now()}`;
+      // Snapshot pre-existing font[size="7"] BEFORE execCommand so we don't accidentally
+      // replace nodes that were already in the document (the comment below was aspirational
+      // but the original code never actually excluded them — this Set approach is the fix).
+      const preExisting = new Set(editable.querySelectorAll('font[size="7"]'));
       document.execCommand('fontSize', false, '7');
-      editable.querySelectorAll('font[size="7"]').forEach((el) => el.setAttribute('data-an-tmp', marker));
+      // Mark only the NEWLY created font[size="7"] elements.
+      editable.querySelectorAll('font[size="7"]').forEach((el) => {
+        if (!preExisting.has(el)) el.setAttribute('data-an-tmp', marker);
+      });
       editable.querySelectorAll(`[data-an-tmp="${marker}"]`).forEach((el) => {
         const span = document.createElement('span');
         span.style.fontSize = fmt.fontSize;
@@ -432,11 +444,6 @@ export class ContextMenu {
       });
     }
 
-    // Font family — only apply if it was explicitly set (not just inherited default).
-    if (fmt.fontFamily) {
-      document.execCommand('fontName', false, fmt.fontFamily);
-    }
-
     this.context.invoke('editor.afterCommand');
   }
 

package/src/js/module/Editor.js

@@ -77,12 +77,80 @@ export class Editor {
       }
     };
 
+    // Guard: when cursor lands at the <li> element node of a checklist item
+    // (before the checkbox), nudge it to the correct text position.
+    //
+    // mouseup: use caretRangeFromPoint / caretPositionFromPoint so the cursor
+    //          lands WHERE the user actually clicked (middle, end of text…).
+    // keyup  : arrow-key navigation may land at <li>[0]; move to start-of-text.
+    const fixChecklistCursor = (event) => {
+      const sel = window.getSelection();
+      if (!sel || !sel.rangeCount) return;
+      const r = sel.getRangeAt(0);
+      if (!r.collapsed) return;
+      const sc = r.startContainer;
+
+      // Only act when cursor is at the <li> element node itself (not inside
+      // a text node — the browser already placed it correctly in that case).
+      if (sc.nodeType !== Node.ELEMENT_NODE) return;
+      const li = sc.matches && sc.matches('.an-checklist li') ? sc : null;
+      if (!li) return;
+      const cb = li.querySelector('input[type="checkbox"]');
+      if (!cb) return;
+
+      // For mouse events: ask the browser where the pointer landed so the
+      // cursor respects the actual click position inside the text.
+      if (event && event.type === 'mouseup') {
+        let caret = null;
+        if (document.caretRangeFromPoint) {
+          caret = document.caretRangeFromPoint(event.clientX, event.clientY);
+        } else if (document.caretPositionFromPoint) {
+          const cp = document.caretPositionFromPoint(event.clientX, event.clientY);
+          if (cp) {
+            caret = document.createRange();
+            caret.setStart(cp.offsetNode, cp.offset);
+          }
+        }
+        // If the caret from point landed inside a text node of this li, use it
+        if (caret && editable.contains(caret.startContainer) &&
+            caret.startContainer !== li) {
+          caret.collapse(true);
+          sel.removeAllRanges();
+          sel.addRange(caret);
+          return;
+        }
+      }
+
+      // Fallback (keyboard nav, or caretRangeFromPoint not available / landed
+      // at li again): prefer the first text node after the checkbox so the
+      // cursor renders at the padding-left edge (after the visual checkbox)
+      // rather than at element-level where the browser may place it at x=0.
+      const nr = document.createRange();
+      let anchorNode = null;
+      for (const child of li.childNodes) {
+        if (child !== cb && child.nodeType === Node.TEXT_NODE) {
+          anchorNode = child;
+          break;
+        }
+      }
+      if (anchorNode) {
+        nr.setStart(anchorNode, 0);
+      } else {
+        nr.setStartAfter(cb);
+      }
+      nr.collapse(true);
+      sel.removeAllRanges();
+      sel.addRange(nr);
+    };
+
     this._disposers.push(
       on(editable, 'keydown', onKeydown),
       on(editable, 'beforeinput', onBeforeInput),
       on(editable, 'input', onInput),
       on(document, 'selectionchange', onSelChange),
       on(editable, 'click', onCheckboxClick),
+      on(editable, 'mouseup', fixChecklistCursor),
+      on(editable, 'keyup',   fixChecklistCursor),
     );
   }
 
@@ -114,8 +182,8 @@ export class Editor {
       return; // let the native paste event fire
     }
 
-    // Show keyboard shortcuts dialog: Shift+?
-    if (event.key === '?' && event.shiftKey && !event.ctrlKey && !event.metaKey) {
+    // Show keyboard shortcuts dialog: Ctrl+Shift+/
+    if (event.key === '/' && event.shiftKey && event.ctrlKey && !event.metaKey) {
       event.preventDefault();
       this.context.invoke('shortcutsDialog.show');
       return;

package/src/js/module/IconDialog.js

@@ -318,6 +318,9 @@ export class IconDialog {
     this._selectedIcon = null;
     this._activeCat = 'all';
     this._searchInput.value = '';
+    // Clear previously selected icon highlight and disable Insert button
+    this._grid.querySelectorAll('.an-icon-cell.active').forEach((c) => c.classList.remove('active'));
+    this._insertBtn.setAttribute('disabled', '');
     this._updateCatTabs();
     this._filterIcons('', 'all');
     this._updatePreview(null);
@@ -551,6 +554,7 @@ export class IconDialog {
     const iconEl = document.createElement('i');
     iconEl.className = `${cls} fa-${this._selectedIcon}`;
     iconEl.setAttribute('aria-hidden', 'true');
+    iconEl.setAttribute('contenteditable', 'false');
     if (styleParts.length) iconEl.setAttribute('style', styleParts.join(';'));
 
     const savedRange = this._savedRange;
@@ -574,21 +578,26 @@ export class IconDialog {
     range.deleteContents();
     range.insertNode(iconEl);
 
-    // 4. Insert a zero-width space text node immediately after the icon.
-    //    This is essential when the icon lands at the END of a paragraph:
-    //    browsers cannot place the caret after an inline element that is the
-    //    last child of a block — there is no text node to anchor into.
-    //    The ZWS gives the caret a real text node to sit in, so typing after
-    //    the icon works correctly. It is invisible to the reader.
-    const zwsNode = document.createTextNode('\u200B');
-    iconEl.parentNode.insertBefore(zwsNode, iconEl.nextSibling);
-
-    // 5. Place caret inside the ZWS text node (offset 1 = after the ZWS char).
-    range.setStart(zwsNode, 1);
-    range.collapse(true);
+    // 4. Place cursor after the icon.
+    //    Keep a text anchor (\u200B) after the icon so ArrowLeft/ArrowRight and
+    //    caret placement at end-of-line stay stable across browsers.
+    let caretTextNode = iconEl.nextSibling;
+    if (!caretTextNode || caretTextNode.nodeType !== Node.TEXT_NODE) {
+      caretTextNode = document.createTextNode('\u200B');
+      iconEl.parentNode.insertBefore(caretTextNode, iconEl.nextSibling);
+    } else if (!caretTextNode.textContent) {
+      // Split text-node insertions can leave an empty text node after icon.
+      // Fill it with ZWS so caret-after-icon remains stable at end-of-line.
+      caretTextNode.textContent = '\u200B';
+    }
+
+    const caretOffset = ((caretTextNode.textContent || '').startsWith('\u200B')) ? 1 : 0;
+    const caretRange = document.createRange();
+    caretRange.setStart(caretTextNode, Math.min(caretOffset, caretTextNode.textContent.length));
+    caretRange.collapse(true);
     if (sel) {
       sel.removeAllRanges();
-      sel.addRange(range);
+      sel.addRange(caretRange);
     }
 
     // 5. Close dialog last — same as ImageDialog
@@ -596,6 +605,11 @@ export class IconDialog {
 
     // 6. Restore editor focus (needed for toolbar refresh via afterCommand)
     editable.focus();
+    if (sel) {
+      // Some browsers reset selection when refocusing editable after closing dialog.
+      sel.removeAllRanges();
+      sel.addRange(caretRange);
+    }
     this.context.invoke('editor.afterCommand');
   }
 

package/src/js/module/ImageResizer.js

@@ -27,11 +27,14 @@ export class ImageResizer {
     this._activeImg = null;
     this._overlay = null;
     this._disposers = [];
+    this._positionRaf = null;
   }
 
   initialize() {
     this._overlay = this._buildOverlay();
-    document.body.appendChild(this._overlay);
+    const container = this.context.layoutInfo.editable.closest('.an-container') || document.body;
+    container.appendChild(this._overlay);
+    this._container = container;
 
     const editable = this.context.layoutInfo.editable;
 
@@ -58,6 +61,10 @@ export class ImageResizer {
       this._dragDisposers.forEach((d) => d());
       this._dragDisposers = null;
     }
+    if (this._positionRaf) {
+      cancelAnimationFrame(this._positionRaf);
+      this._positionRaf = null;
+    }
     this._deselect();
     if (this._overlay && this._overlay.parentNode) {
       this._overlay.parentNode.removeChild(this._overlay);
@@ -148,10 +155,22 @@ export class ImageResizer {
   }
 
   _updateOverlayPosition() {
+    if (this._positionRaf) cancelAnimationFrame(this._positionRaf);
+    this._positionRaf = requestAnimationFrame(() => {
+      this._positionRaf = null;
+      this._updateOverlayPositionNow();
+    });
+  }
+
+  _updateOverlayPositionNow() {
     if (!this._activeImg || !this._overlay) return;
+    const offsetParent = this._overlay.offsetParent || this._container;
+    const containerRect = offsetParent.getBoundingClientRect();
     const rect = this._activeImg.getBoundingClientRect();
-    this._overlay.style.left   = `${rect.left}px`;
-    this._overlay.style.top    = `${rect.top}px`;
+    const left = rect.left - containerRect.left + offsetParent.scrollLeft;
+    const top = rect.top - containerRect.top + offsetParent.scrollTop;
+    this._overlay.style.left   = `${left}px`;
+    this._overlay.style.top    = `${top}px`;
     this._overlay.style.width  = `${rect.width}px`;
     this._overlay.style.height = `${rect.height}px`;
   }

package/src/js/module/ImageTooltip.js

@@ -36,7 +36,8 @@ export class ImageTooltip {
     this._disposers.push(
       on(editable, 'mouseover', (e) => {
         const img = e.target.closest('img');
-        if (img && editable.contains(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);
         }
       }),
@@ -205,10 +206,11 @@ export class ImageTooltip {
   _setFloat(value) {
     const img = this._activeImg;
     if (!img) return;
-    img.style.float = value;
-    img.style.display = '';
-    img.style.marginLeft  = value === 'right' ? '12px' : '';
-    img.style.marginRight = value === 'left'  ? '12px' : '';
+    const target = img.closest('figure.an-figure') || img;
+    target.style.float = value;
+    target.style.display = '';
+    target.style.marginLeft  = value === 'right' ? '12px' : '';
+    target.style.marginRight = value === 'left'  ? '12px' : '';
     this.context.invoke('editor.afterCommand');
     this.context.invoke('imageResizer.updateOverlay');
     this._positionNear(img);
@@ -217,10 +219,11 @@ export class ImageTooltip {
   _setCenter() {
     const img = this._activeImg;
     if (!img) return;
-    img.style.float        = '';
-    img.style.display      = 'block';
-    img.style.marginLeft   = 'auto';
-    img.style.marginRight  = 'auto';
+    const target = img.closest('figure.an-figure') || img;
+    target.style.float        = '';
+    target.style.display      = 'block';
+    target.style.marginLeft   = 'auto';
+    target.style.marginRight  = 'auto';
     this.context.invoke('editor.afterCommand');
     this.context.invoke('imageResizer.updateOverlay');
     this._positionNear(img);
@@ -241,7 +244,12 @@ export class ImageTooltip {
     if (!img) return;
     this._hide();
     this.context.invoke('imageResizer.deselect');
-    if (img.parentNode) img.parentNode.removeChild(img);
+    const figure = img.closest('figure.an-figure');
+    if (figure && figure.parentNode) {
+      figure.parentNode.removeChild(figure);
+    } else if (img.parentNode) {
+      img.parentNode.removeChild(img);
+    }
     this.context.invoke('editor.afterCommand');
   }
 
@@ -266,6 +274,23 @@ export class ImageTooltip {
     // Wrap image in <figure><figcaption>
     const figure = document.createElement('figure');
     figure.className = 'an-figure';
+
+    // Transfer existing alignment from <img> to <figure> (C4 fix)
+    if (img.style.float) {
+      figure.style.float       = img.style.float;
+      figure.style.marginLeft  = img.style.marginLeft;
+      figure.style.marginRight = img.style.marginRight;
+      img.style.float       = '';
+      img.style.marginLeft  = '';
+      img.style.marginRight = '';
+    } else if (img.style.display === 'block' && img.style.marginLeft === 'auto') {
+      figure.style.display      = 'block';
+      figure.style.marginLeft   = 'auto';
+      figure.style.marginRight  = 'auto';
+      img.style.display     = '';
+      img.style.marginLeft  = '';
+      img.style.marginRight = '';
+    }
     const figcaption = document.createElement('figcaption');
     figcaption.className = 'an-figcaption';
     figcaption.textContent = 'Caption';
@@ -281,6 +306,8 @@ export class ImageTooltip {
     if (sel) { sel.removeAllRanges(); sel.addRange(range); }
 
     this.context.invoke('editor.afterCommand');
+    // Re-sync the resize overlay: wrapping img in <figure> changes its layout position.
+    this.context.invoke('imageResizer.updateOverlay');
     this._hide();
   }
 }

package/src/js/module/Placeholder.js

@@ -38,7 +38,8 @@ export class Placeholder {
 
   _update() {
     const editable = this.context.layoutInfo.editable;
+    const isFocused = document.activeElement === editable;
     const isEmpty = !editable.textContent.trim() && !editable.querySelector('img, table, hr');
-    editable.classList.toggle('an-placeholder', isEmpty);
+    editable.classList.toggle('an-placeholder', isEmpty && !isFocused);
   }
 }

package/src/js/module/Statusbar.js

@@ -130,8 +130,15 @@ export class Statusbar {
 
     const applyDelta = (clientY) => {
       const delta = clientY - startY;
-      const minH = this.options.minHeight || 100;
-      containerEl.style.height = `${Math.max(minH, startH + delta)}px`;
+      // Compute the true minimum: fixed elements (toolbar + statusbar) must fit
+      // inside the container. Sum the offsetHeight of every child that is NOT
+      // the editable area, then add a small floor so the editable stays visible.
+      const MIN_EDITABLE = 40;
+      const fixedH = Array.from(containerEl.children)
+        .filter(child => !child.classList.contains('an-editable'))
+        .reduce((sum, child) => sum + child.offsetHeight, 0);
+      const trueMin = Math.max(this.options.minHeight || 100, fixedH + MIN_EDITABLE);
+      containerEl.style.height = `${Math.max(trueMin, startH + delta)}px`;
     };
 
     // Mouse drag
@@ -146,6 +153,11 @@ export class Statusbar {
     const onMouseDown = (event) => {
       startY = event.clientY;
       startH = containerEl.offsetHeight;
+      // Clear the editable's inline min-height so the flex layout can compress
+      // it freely once the container has a fixed height. Without this, the
+      // editable's min-height (set from options.height) overflows the container
+      // when the user drags the handle to a size smaller than that value.
+      this.context.layoutInfo.editable.style.minHeight = '';
       document.addEventListener('mousemove', onMouseMove);
       document.addEventListener('mouseup', onMouseUp);
       // Track drag-phase listeners so destroy() can remove them mid-drag
@@ -173,6 +185,8 @@ export class Statusbar {
       if (!touch) return;
       startY = touch.clientY;
       startH = containerEl.offsetHeight;
+      // Same as onMouseDown: clear editable min-height so flex can compress it
+      this.context.layoutInfo.editable.style.minHeight = '';
       document.addEventListener('touchmove', onTouchMove, { passive: false });
       document.addEventListener('touchend', onTouchEnd);
       this._dragDisposers = [

package/src/js/module/TableTooltip.js

@@ -6,6 +6,64 @@ import { createElement, on } from '../core/dom.js';
 const SHOW_DELAY = 120;
 const HIDE_DELAY = 200;
 
+// ---------------------------------------------------------------------------
+// Table helpers — visual column index (accounts for colspan)
+// ---------------------------------------------------------------------------
+
+/**
+ * Returns the visual (logical) column index of a cell, taking colspan into
+ * account for all preceding cells in the same row.
+ * @param {HTMLTableCellElement} cell
+ * @returns {number} 0-based visual column index, or -1 on failure
+ */
+function getVisualColIndex(cell) {
+  const row = cell.closest('tr');
+  if (!row) return -1;
+  let visualIdx = 0;
+  for (const c of row.cells) {
+    if (c === cell) return visualIdx;
+    visualIdx += c.colSpan || 1;
+  }
+  return -1;
+}
+
+/**
+ * Finds the first cell in a row whose visual start column equals visualIdx.
+ * Returns null if no exact match (e.g. the column is spanned by a merged cell).
+ * @param {HTMLTableRowElement} row
+ * @param {number} visualIdx
+ * @returns {HTMLTableCellElement|null}
+ */
+function getCellAtVisualCol(row, visualIdx) {
+  let vIdx = 0;
+  for (const c of row.cells) {
+    if (vIdx === visualIdx) return c;
+    if (vIdx > visualIdx) break;
+    vIdx += c.colSpan || 1;
+  }
+  return null;
+}
+
+/**
+ * Finds the first cell whose visual range ends after visualIdx
+ * (used for inserting a new column to the right of visualIdx).
+ * @param {HTMLTableRowElement} row
+ * @param {number} visualIdx
+ * @returns {HTMLTableCellElement|null} reference cell for insertBefore, or null = append
+ */
+function getCellAfterVisualCol(row, visualIdx) {
+  let vIdx = 0;
+  for (const c of row.cells) {
+    vIdx += c.colSpan || 1;
+    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 null;
+}
+
 const ICONS = {
   rowAbove:    `<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="12" x2="21" y2="12"/><path d="M12 3v7"/><path d="M9 7l3-4 3 4"/></svg>`,
   rowBelow:    `<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="12" x2="21" y2="12"/><path d="M12 12v7"/><path d="M9 17l3 4 3-4"/></svg>`,
@@ -109,6 +167,9 @@ export class TableTooltip {
       if (_resizing) return;
       const cell = e.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(e.clientX - rect.right)  < HIT;
       const onBottom = Math.abs(e.clientY - rect.bottom) < HIT;
@@ -136,7 +197,7 @@ export class TableTooltip {
       _table    = _nearCell.closest('table');
       if (_edge === 'col') {
         _startW = _nearCell.offsetWidth;
-        _colIdx = Array.from(_nearCell.closest('tr').cells).indexOf(_nearCell);
+        _colIdx = getVisualColIndex(_nearCell);
         document.body.style.cursor = 'col-resize';
       } else {
         _row    = _nearCell.closest('tr');
@@ -154,7 +215,7 @@ export class TableTooltip {
         const newW = Math.max(30, _startW + (e.clientX - _startX));
         if (_table && _colIdx >= 0) {
           Array.from(_table.querySelectorAll('tr')).forEach((r) => {
-            const c = r.cells[_colIdx];
+            const c = getCellAtVisualCol(r, _colIdx);
             if (c) { c.style.width = `${newW}px`; c.style.minWidth = `${newW}px`; }
           });
         }
@@ -356,6 +417,16 @@ export class TableTooltip {
   // ---------------------------------------------------------------------------
 
   _getCell() {
+    // Prefer the cell under the current text cursor (most intuitive for operations)
+    const sel = window.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)) {
+        return cellFromSel;
+      }
+    }
     return this._activeCell
       || (this._activeTable && this._activeTable.querySelector('td, th'));
   }
@@ -388,16 +459,19 @@ export class TableTooltip {
   _addColumn(position) {
     const cell = this._getCell();
     if (!cell) return;
-    const row   = cell.closest('tr');
     const table = cell.closest('table');
-    if (!row || !table) return;
-    const colIndex = Array.from(row.cells).indexOf(cell);
+    if (!table) return;
+    const visualColIdx = getVisualColIndex(cell);
     Array.from(table.querySelectorAll('tr')).forEach((r) => {
-      const cells = Array.from(r.cells);
       const isHeader = r.closest('thead') !== null;
       const newCell = createElement(isHeader ? 'th' : 'td', {}, ['\u00a0']);
-      const ref = position === 'left' ? cells[colIndex] : (cells[colIndex + 1] || null);
-      r.insertBefore(newCell, ref);
+      if (position === 'left') {
+        const ref = getCellAtVisualCol(r, visualColIdx);
+        r.insertBefore(newCell, ref);
+      } else {
+        const ref = getCellAfterVisualCol(r, visualColIdx);
+        r.insertBefore(newCell, ref);
+      }
     });
     this._positionNear(this._activeTable);
     this.context.invoke('editor.afterCommand');
@@ -422,14 +496,14 @@ export class TableTooltip {
   _deleteColumn() {
     const cell = this._getCell();
     if (!cell) return;
-    const row   = cell.closest('tr');
     const table = cell.closest('table');
-    if (!row || !table) return;
-    if (row.cells.length <= 1) return;
-    const colIndex = Array.from(row.cells).indexOf(cell);
+    if (!table) return;
+    const row = cell.closest('tr');
+    if (row && row.cells.length <= 1) return;
+    const visualColIdx = getVisualColIndex(cell);
     this._activeCell = null;
     Array.from(table.querySelectorAll('tr')).forEach((r) => {
-      const c = r.cells[colIndex];
+      const c = getCellAtVisualCol(r, visualColIdx);
       if (c) r.removeChild(c);
     });
     this._positionNear(this._activeTable);
@@ -439,19 +513,41 @@ export class TableTooltip {
   _mergeCells() {
     const cell = this._getCell();
     if (!cell) return;
-    const row = cell.closest('tr');
-    if (!row) return;
     const sel = window.getSelection();
     if (!sel || sel.rangeCount === 0) return;
     const range = sel.getRangeAt(0);
-    const selected = Array.from(row.cells).filter((c) => {
+    const table = cell.closest('table');
+    if (!table) return;
+
+    // Collect all cells (in any row) that intersect the selection
+    const allCells = Array.from(table.querySelectorAll('td, th'));
+    const selected = allCells.filter((c) => {
       try { return range.intersectsNode(c); } catch { return false; }
     });
     if (selected.length < 2) return;
-    const first = selected[0];
-    first.colSpan = selected.reduce((sum, c) => sum + (c.colSpan || 1), 0);
-    first.innerHTML = selected.map((c) => c.innerHTML).join('');
-    selected.slice(1).forEach((c) => row.removeChild(c));
+
+    // Determine if all selected cells are in the same row (horizontal merge)
+    const rows = [...new Set(selected.map((c) => c.closest('tr')))];
+    if (rows.length === 1) {
+      // Horizontal merge within a single row
+      const row = rows[0];
+      const rowSelected = Array.from(row.cells).filter((c) => selected.includes(c));
+      if (rowSelected.length < 2) return;
+      const first = rowSelected[0];
+      first.colSpan = rowSelected.reduce((sum, c) => sum + (c.colSpan || 1), 0);
+      first.innerHTML = rowSelected.map((c) => c.innerHTML).join('');
+      rowSelected.slice(1).forEach((c) => row.removeChild(c));
+    } else {
+      // Vertical merge across rows — merge into first selected cell (rowspan)
+      const visualCols = [...new Set(selected.map((c) => getVisualColIndex(c)))];
+      if (visualCols.length !== 1) return; // only support single-column vertical merge
+      const first = selected[0];
+      first.rowSpan = selected.reduce((sum, c) => sum + (c.rowSpan || 1), 0);
+      first.innerHTML = selected.map((c) => c.innerHTML).join('');
+      selected.slice(1).forEach((c) => {
+        if (c.closest('tr')) c.closest('tr').removeChild(c);
+      });
+    }
     this.context.invoke('editor.afterCommand');
   }
 
@@ -532,10 +628,10 @@ export class TableTooltip {
 
     this._sizeApply = (val) => {
       if (isCol) {
-        const table    = cell.closest('table');
-        const colIndex = Array.from(cell.closest('tr').cells).indexOf(cell);
+        const table       = cell.closest('table');
+        const visualColIdx = getVisualColIndex(cell);
         Array.from(table.querySelectorAll('tr')).forEach((r) => {
-          const c = r.cells[colIndex];
+          const c = getCellAtVisualCol(r, visualColIdx);
           if (c) { c.style.width = `${val}px`; c.style.minWidth = `${val}px`; }
         });
       } else {