autumnnote 1.0.1 → 1.0.4

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>`,
@@ -52,7 +110,7 @@ export class TableTooltip {
           if (cell) this._activeCell = cell;
           this._scheduleShow(table);
         }
-      }),
+      }, { passive: true }),
       on(editable, 'mouseout', (e) => {
         const to = e.relatedTarget;
         if (!to || (
@@ -62,7 +120,7 @@ export class TableTooltip {
         )) {
           this._scheduleHide();
         }
-      }),
+      }, { passive: true }),
       on(document, 'click', (e) => {
         if (this._activeTable &&
           !this._activeTable.contains(e.target) &&
@@ -97,8 +155,11 @@ export class TableTooltip {
     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; }
@@ -107,24 +168,29 @@ export class TableTooltip {
 
     const onEditorMove = (e) => {
       if (_resizing) return;
-      const cell = e.target.closest('td, th');
-      if (!cell || !editable.contains(cell)) { clearHover(); return; }
-      const rect    = cell.getBoundingClientRect();
-      const onRight  = Math.abs(e.clientX - rect.right)  < HIT;
-      const onBottom = Math.abs(e.clientY - rect.bottom) < HIT;
-      if (onRight && onBottom) {
-        // Corner — prefer col-resize
-        cell.style.cursor = 'col-resize';
-        _nearCell = cell; _nearEdge = 'col';
-      } else 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();
-      }
+      // 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) => {
@@ -135,8 +201,14 @@ export class TableTooltip {
       _startY   = e.clientY;
       _table    = _nearCell.closest('table');
       if (_edge === 'col') {
-        _startW = _nearCell.offsetWidth;
-        _colIdx = Array.from(_nearCell.closest('tr').cells).indexOf(_nearCell);
+        _startW   = _nearCell.offsetWidth;
+        _colIdx   = getVisualColIndex(_nearCell);
+        // Cache column cells once so onDocMove never runs querySelectorAll per frame
+        _colCells = _colIdx >= 0
+          ? Array.from(_table.querySelectorAll('tr'))
+              .map(r => getCellAtVisualCol(r, _colIdx))
+              .filter(Boolean)
+          : [];
         document.body.style.cursor = 'col-resize';
       } else {
         _row    = _nearCell.closest('tr');
@@ -150,34 +222,42 @@ export class TableTooltip {
 
     const onDocMove = (e) => {
       if (!_resizing) return;
-      if (_edge === 'col') {
-        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];
-            if (c) { c.style.width = `${newW}px`; c.style.minWidth = `${newW}px`; }
-          });
-        }
-      } else {
-        const newH = Math.max(20, _startH + (e.clientY - _startY));
-        if (_row) {
-          Array.from(_row.cells).forEach((c) => {
-            c.style.height    = `${newH}px`;
-            c.style.minHeight = `${newH}px`;
-          });
+      // 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;
+      _edge     = null;
+      _table    = null;
+      _row      = null;
+      _colIdx   = -1;
+      _colCells = null;
       this.context.invoke('editor.afterCommand');
     };
 
@@ -314,7 +394,10 @@ export class TableTooltip {
   _show() {
     if (!this._activeTable) return;
     this._el.style.display = 'flex';
-    this._positionNear(this._activeTable);
+    // Defer: offsetWidth on a newly-visible element forces layout synchronously
+    requestAnimationFrame(() => {
+      if (this._activeTable) this._positionNear(this._activeTable);
+    });
   }
 
   _hide() {
@@ -356,6 +439,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'));
   }
@@ -381,25 +474,27 @@ export class TableTooltip {
     }
     if (position === 'above') row.parentElement?.insertBefore(newRow, row);
     else row.insertAdjacentElement('afterend', newRow);
-    this._positionNear(this._activeTable);
+    // Defer positioning until the browser has painted the new layout
+    requestAnimationFrame(() => this._positionNear(this._activeTable));
     this.context.invoke('editor.afterCommand');
   }
 
   _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);
-    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 (!table) return;
+    const visualColIdx = getVisualColIndex(cell);
+    const rows = Array.from(table.querySelectorAll('tr'));
+    // Batch reads first, then writes — prevents layout thrashing inside the loop
+    const refs      = rows.map(r => position === 'left'
+      ? getCellAtVisualCol(r, visualColIdx)
+      : getCellAfterVisualCol(r, visualColIdx));
+    const isHeaders = rows.map(r => r.closest('thead') !== null);
+    rows.forEach((r, i) => {
+      r.insertBefore(createElement(isHeaders[i] ? 'th' : 'td', {}, ['\u00a0']), refs[i]);
     });
-    this._positionNear(this._activeTable);
+    requestAnimationFrame(() => this._positionNear(this._activeTable));
     this.context.invoke('editor.afterCommand');
   }
 
@@ -415,43 +510,65 @@ export class TableTooltip {
     if (bodyRows <= 1 && row.closest('tbody')) return;
     this._activeCell = null;
     row.parentElement?.removeChild(row);
-    this._positionNear(this._activeTable);
+    requestAnimationFrame(() => this._positionNear(this._activeTable));
     this.context.invoke('editor.afterCommand');
   }
 
   _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];
-      if (c) r.removeChild(c);
-    });
-    this._positionNear(this._activeTable);
+    const rows  = Array.from(table.querySelectorAll('tr'));
+    // Batch reads before writes to avoid forced reflows inside the loop
+    const cells = rows.map(r => getCellAtVisualCol(r, visualColIdx));
+    cells.forEach((c, i) => { if (c) rows[i].removeChild(c); });
+    requestAnimationFrame(() => this._positionNear(this._activeTable));
     this.context.invoke('editor.afterCommand');
   }
 
   _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,15 +649,19 @@ export class TableTooltip {
 
     this._sizeApply = (val) => {
       if (isCol) {
-        const table    = cell.closest('table');
-        const colIndex = Array.from(cell.closest('tr').cells).indexOf(cell);
-        Array.from(table.querySelectorAll('tr')).forEach((r) => {
-          const c = r.cells[colIndex];
+        const table        = cell.closest('table');
+        const visualColIdx = getVisualColIndex(cell);
+        const rows  = Array.from(table.querySelectorAll('tr'));
+        // Batch reads, then writes
+        const cells = rows.map(r => getCellAtVisualCol(r, visualColIdx));
+        cells.forEach(c => {
           if (c) { c.style.width = `${val}px`; c.style.minWidth = `${val}px`; }
         });
       } else {
         const row = cell.closest('tr');
-        if (row) Array.from(row.cells).forEach((c) => { c.style.height = `${val}px`; c.style.minHeight = `${val}px`; });
+        if (row) {
+          for (const c of row.cells) { c.style.height = `${val}px`; c.style.minHeight = `${val}px`; }
+        }
       }
       this.context.invoke('editor.afterCommand');
     };

package/src/js/module/Toolbar.js

@@ -5,6 +5,12 @@
 
 import { createElement, on } from '../core/dom.js';
 
+// Module-level cache for FontAwesome detection.
+// Evaluated once per page load so all Toolbar instances on the same page agree
+// on whether the HOST PAGE included FA — regardless of whether IconDialog later
+// auto-injects its own FA <link> for the icon-picker glyph rendering.
+let _faPageLevelReady = null;
+
 export class Toolbar {
   /**
    * @param {import('../Context.js').Context} context
@@ -16,6 +22,8 @@ export class Toolbar {
     this.el = null;
     /** @type {Array<() => void>} disposers */
     this._disposers = [];
+    /** @type {Array<() => void>} closers for all open color picker popups */
+    this._colorPickerClosers = [];
   }
 
   // ---------------------------------------------------------------------------
@@ -253,9 +261,36 @@ export class Toolbar {
 
     // ---- State ----
     let isOpen = false;
+    /** @type {Range|null} saved selection range before popup opens */
+    let savedRange = null;
+
+    const saveSelection = () => {
+      const sel = window.getSelection();
+      savedRange = (sel && sel.rangeCount) ? sel.getRangeAt(0).cloneRange() : null;
+    };
+
+    const restoreSelection = () => {
+      if (!savedRange) return;
+      const sel = window.getSelection();
+      if (sel) {
+        sel.removeAllRanges();
+        sel.addRange(savedRange);
+      }
+    };
 
     const openPopup = () => {
+      // Close any other open color picker before opening this one
+      this._colorPickerClosers.forEach((fn) => { if (fn !== closePopup) fn(); });
+      saveSelection();
       isOpen = true;
+      // Use fixed positioning so the popup escapes any overflow-clipping ancestor
+      // (notably toolbar scroll mode, where overflow-x:auto coerces overflow-y)
+      const rect = arrowBtn.getBoundingClientRect();
+      const popupMinW = 184;
+      let left = rect.left;
+      if (left + popupMinW > window.innerWidth) left = rect.right - popupMinW;
+      popup.style.top  = `${rect.bottom + 4}px`;
+      popup.style.left = `${Math.max(4, left)}px`;
       popup.style.display = 'block';
       arrowBtn.setAttribute('aria-expanded', 'true');
     };
@@ -263,6 +298,8 @@ export class Toolbar {
     const closePopup = () => {
       isOpen = false;
       popup.style.display = 'none';
+      popup.style.top  = '';
+      popup.style.left = '';
       arrowBtn.setAttribute('aria-expanded', 'false');
     };
 
@@ -270,7 +307,7 @@ export class Toolbar {
       currentColor = color;
       strip.style.background = color;
       colorInput.value = color;
-      this.context.invoke('editor.focus');
+      restoreSelection();
       def.action(this.context, color);
       this.context.invoke('editor.afterCommand');
       closePopup();
@@ -278,17 +315,27 @@ export class Toolbar {
 
     const d1 = on(applyBtn, 'click', (e) => {
       e.preventDefault();
-      this.context.invoke('editor.focus');
+      restoreSelection();
       def.action(this.context, currentColor);
       this.context.invoke('editor.afterCommand');
     });
 
-    const d2 = on(arrowBtn, 'click', (e) => {
+    const d2 = on(arrowBtn, 'mousedown', (e) => {
+      // Prevent editor blur so selection is preserved when the popup opens
+      e.preventDefault();
+    });
+
+    const d2b = on(arrowBtn, 'click', (e) => {
       e.stopPropagation();
       if (isOpen) closePopup(); else openPopup();
     });
 
-    const d3 = on(swatches, 'click', (e) => {
+    const d3 = on(swatches, 'mousedown', (e) => {
+      // Prevent blur before the click handler fires
+      e.preventDefault();
+    });
+
+    const d3b = on(swatches, 'click', (e) => {
       const sw = e.target.closest('.an-color-swatch');
       if (sw) applyColor(sw.dataset.color);
     });
@@ -298,16 +345,38 @@ export class Toolbar {
     });
 
     const d5 = on(document, 'click', (e) => {
-      if (isOpen && !wrap.contains(e.target)) closePopup();
+      // popup is in document.body, not inside wrap — check both
+      if (isOpen && !wrap.contains(e.target) && !popup.contains(e.target)) closePopup();
     });
 
     const d6 = on(popup, 'click', (e) => e.stopPropagation());
 
-    this._disposers.push(d1, d2, d3, d4, d5, d6);
+    // Close the popup when the viewport scrolls or resizes so the fixed-position
+    // popup doesn't drift away from the button it belongs to.
+    const onScrollResize = () => { if (isOpen) closePopup(); };
+    document.addEventListener('scroll', onScrollResize, { passive: true, capture: true });
+    window.addEventListener('resize',   onScrollResize, { passive: true });
+
+    this._disposers.push(d1, d2, d2b, d3, d3b, d4, d5, d6,
+      () => document.removeEventListener('scroll', onScrollResize, { capture: true }),
+      () => window.removeEventListener('resize',   onScrollResize),
+      // Remove popup from body on editor destroy
+      () => { if (popup.parentNode) popup.parentNode.removeChild(popup); },
+    );
+
+    // Register this popup's closer so other color pickers can close it
+    this._colorPickerClosers.push(closePopup);
+    this._disposers.push(() => {
+      const idx = this._colorPickerClosers.indexOf(closePopup);
+      if (idx !== -1) this._colorPickerClosers.splice(idx, 1);
+    });
 
+    // Append popup to document.body so it escapes all overflow-clipping and
+    // contain:layout ancestors (contain:layout makes the container a fixed-pos
+    // containing block per the CSS Contain spec, breaking viewport coordinates).
     wrap.appendChild(applyBtn);
     wrap.appendChild(arrowBtn);
-    wrap.appendChild(popup);
+    document.body.appendChild(popup);
     return wrap;
   }
 
@@ -329,22 +398,27 @@ export class Toolbar {
       'aria-label': def.tooltip || def.name,
     });
 
-    // Blank "placeholder" option
+    // Blank "placeholder" option (non-selectable header)
     const placeholderText = def.placeholder || 'Font';
-    const placeholder = createElement('option', { value: '' }, [placeholderText]);
+    const placeholder = createElement('option', { value: '', disabled: '', hidden: '' }, [placeholderText]);
     select.appendChild(placeholder);
 
     items.forEach((item) => {
-      const value = (typeof item === 'object') ? item.value : item;
-      const label = (typeof item === 'object') ? item.label : item;
-      const opt = createElement('option', { value }, [label]);
-      if (def.name === 'fontFamily') opt.style.fontFamily = value;
+      const value    = (typeof item === 'object') ? item.value    : item;
+      const label    = (typeof item === 'object') ? item.label    : item;
+      const isHeader = (typeof item === 'object') && !!item.disabled;
+      const attrs    = { value };
+      if (isHeader) attrs.disabled = '';
+      const opt = createElement('option', attrs, [label]);
+      // Only apply fontFamily face preview on real (non-header) entries
+      if (def.name === 'fontFamily' && !isHeader) opt.style.fontFamily = value;
       select.appendChild(opt);
     });
 
     const disposer = on(select, 'change', (e) => {
       const value = e.target.value;
-      if (!value) return;
+      const selectedOpt = e.target.options[e.target.selectedIndex];
+      if (!value || selectedOpt.disabled) return;
       this.context.invoke('editor.focus');
       def.action(this.context, value);
       this.context.invoke('editor.afterCommand');
@@ -502,9 +576,21 @@ export class Toolbar {
 
   _detectFontAwesome() {
     if (!this.options.useFontAwesome) return false;
-    if (document.querySelector('.fa, .fas, .far, .fal, .fab, .fa-solid')) return true;
-    const links = Array.from(document.querySelectorAll('link[rel="stylesheet"]')).map((l) => l.href || '').join(' ');
-    return /fontawesome|font-awesome|use\.fontawesome|all\.css/.test(links);
+    // Return cached result when available. This ensures that a later-initialised
+    // toolbar sees the same detection state as the first one — even if IconDialog
+    // has since injected its own FA <link> into <head> for the icon-picker UI.
+    if (_faPageLevelReady !== null) return _faPageLevelReady;
+    if (document.querySelector('.fa, .fas, .far, .fal, .fab, .fa-solid')) {
+      _faPageLevelReady = true;
+      return true;
+    }
+    // Exclude the editor-self-injected link (id='an-fontawesome-css') so it doesn't
+    // count as "the host page loaded FA" for toolbar icon rendering purposes.
+    const links = Array.from(document.querySelectorAll('link[rel="stylesheet"]'))
+      .filter((l) => l.id !== 'an-fontawesome-css')
+      .map((l) => l.href || '').join(' ');
+    _faPageLevelReady = /fontawesome|font-awesome|use\.fontawesome|all\.css/.test(links);
+    return _faPageLevelReady;
   }
 
   // ---------------------------------------------------------------------------

package/src/js/module/VideoDialog.js

@@ -219,7 +219,7 @@ export class VideoDialog {
     if (info && (info.type === 'YouTube' || info.type === 'YouTube Shorts' || info.type === 'Vimeo')) {
       const iframeTitle = `${info.type} video player`;
       return (
-        `<div class="an-video-wrapper" style="position:relative;display:inline-block;max-width:100%">` +
+        `<div class="an-video-wrapper" style="position:relative;display:block;width:${width}px;max-width:100%">` +
         `<iframe src="${info.embedUrl}" width="${width}" height="${height}" ` +
         `title="${iframeTitle}" ` +
         `frameborder="0" allowfullscreen ` +
@@ -233,7 +233,7 @@ export class VideoDialog {
     if (info && info.type === 'Direct video') {
       const src = info.embedUrl.replace(/"/g, '%22');
       return (
-        `<div class="an-video-wrapper" style="position:relative;display:inline-block;max-width:100%">` +
+        `<div class="an-video-wrapper" style="position:relative;display:block;width:${width}px;max-width:100%">` +
         `<video src="${src}" width="${width}" height="${height}" controls ` +
         `style="display:block;max-width:100%"></video>` +
         `<div class="an-video-shield"></div>` +
@@ -253,7 +253,7 @@ export class VideoDialog {
 
     const escapedSrc = safeSrc.replace(/"/g, '%22');
     return (
-      `<div class="an-video-wrapper" style="position:relative;display:inline-block;max-width:100%">` +
+      `<div class="an-video-wrapper" style="position:relative;display:block;width:${width}px;max-width:100%">` +
       `<video src="${escapedSrc}" width="${width}" height="${height}" controls ` +
       `style="display:block;max-width:100%"></video>` +
       `<div class="an-video-shield"></div>` +