autumnnote 1.0.3 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autumnnote",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "A modern, lightweight WYSIWYG editor — built with vanilla JavaScript, no jQuery required.",
   "main": "dist/autumnnote.umd.js",
   "module": "dist/autumnnote.es.js",

package/src/js/index.umd.js

@@ -1,12 +1,12 @@
-/**
- * index.umd.js — UMD entry point for AutumnNote
- *
- * Re-exports only the default export so the UMD global is the factory object
- * directly, enabling the script-tag usage documented in the README:
- *
- *   <script src="dist/autumnnote.umd.js"></script>
- *   <script>
- *     const editor = AutumnNote.create('#my-editor');
- *   </script>
- */
-export { default } from './index.js';
+/**
+ * index.umd.js — UMD entry point for AutumnNote
+ *
+ * Re-exports only the default export so the UMD global is the factory object
+ * directly, enabling the script-tag usage documented in the README:
+ *
+ *   <script src="dist/autumnnote.umd.js"></script>
+ *   <script>
+ *     const editor = AutumnNote.create('#my-editor');
+ *   </script>
+ */
+export { default } from './index.js';

package/src/js/module/ImageResizer.js

@@ -38,6 +38,14 @@ export class ImageResizer {
 
     const editable = this.context.layoutInfo.editable;
 
+    // Debounce window resize — _updateOverlayPosition already has rAF gating but
+    // every call cancels + re-schedules it; a debounce reduces that churn.
+    let _resizeDebounce = null;
+    const onWindowResize = () => {
+      clearTimeout(_resizeDebounce);
+      _resizeDebounce = setTimeout(() => this._updateOverlayPosition(), 100);
+    };
+
     this._disposers.push(
       on(editable, 'click', (e) => this._onEditorClick(e)),
       // Also select on right-click so the highlight shows before the context menu
@@ -47,7 +55,7 @@ export class ImageResizer {
       }),
       on(document, 'click', (e) => this._onDocClick(e)),
       on(window, 'scroll', () => this._updateOverlayPosition(), { passive: true }),
-      on(window, 'resize', () => this._updateOverlayPosition()),
+      on(window, 'resize', onWindowResize),
       on(editable, 'scroll', () => this._updateOverlayPosition(), { passive: true }),
     );
 
@@ -187,37 +195,44 @@ export class ImageResizer {
     const isCorner = pos.length === 2; // 'nw','ne','se','sw'
 
     const editable = this.context.layoutInfo.editable;
+    let _raf = null; // rAF handle — ensures at most one write per paint frame
+
     const onMove = (me) => {
-      const dx = me.clientX - startX;
-      const dy = me.clientY - startY;
-      const maxW = editable.clientWidth || Infinity;
-      let newW = startW;
-      let newH = startH;
-
-      if (pos.includes('e')) newW = Math.max(20, startW + dx);
-      if (pos.includes('w')) newW = Math.max(20, startW - dx);
-      if (pos.includes('s')) newH = Math.max(20, startH + dy);
-      if (pos.includes('n')) newH = Math.max(20, startH - dy);
-
-      // Clamp to container width
-      newW = Math.min(newW, maxW);
-
-      if (isCorner) {
-        // Lock aspect ratio: use larger absolute delta to drive both dimensions
-        if (Math.abs(dx) >= Math.abs(dy)) {
-          newH = Math.max(20, Math.round(newW / aspectRatio));
-        } else {
-          newW = Math.min(Math.max(20, Math.round(newH * aspectRatio)), maxW);
-          newH = Math.max(20, Math.round(newW / aspectRatio));
+      if (_raf !== null) return; // frame already pending, discard this event
+      const clientX = me.clientX;
+      const clientY = me.clientY;
+      _raf = requestAnimationFrame(() => {
+        _raf = null;
+        const dx = clientX - startX;
+        const dy = clientY - startY;
+        const maxW = editable.clientWidth || Infinity;
+        let newW = startW;
+        let newH = startH;
+
+        if (pos.includes('e')) newW = Math.max(20, startW + dx);
+        if (pos.includes('w')) newW = Math.max(20, startW - dx);
+        if (pos.includes('s')) newH = Math.max(20, startH + dy);
+        if (pos.includes('n')) newH = Math.max(20, startH - dy);
+
+        newW = Math.min(newW, maxW);
+
+        if (isCorner) {
+          if (Math.abs(dx) >= Math.abs(dy)) {
+            newH = Math.max(20, Math.round(newW / aspectRatio));
+          } else {
+            newW = Math.min(Math.max(20, Math.round(newH * aspectRatio)), maxW);
+            newH = Math.max(20, Math.round(newW / aspectRatio));
+          }
         }
-      }
 
-      img.style.width  = `${newW}px`;
-      img.style.height = `${newH}px`;
-      this._updateOverlayPosition();
+        img.style.width  = `${newW}px`;
+        img.style.height = `${newH}px`;
+        this._updateOverlayPosition();
+      });
     };
 
     const onUp = () => {
+      if (_raf !== null) { cancelAnimationFrame(_raf); _raf = null; }
       document.removeEventListener('mousemove', onMove);
       document.removeEventListener('mouseup', onUp);
       this._dragDisposers = null;

package/src/js/module/ImageTooltip.js

@@ -11,6 +11,8 @@ const ICONS = {
   originalSize:`<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"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>`,
   deleteImg:   `<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"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>`,
   caption:     `<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="11" rx="2"/><line x1="6" y1="18" x2="18" y2="18"/><line x1="9" y1="21" x2="15" y2="21"/></svg>`,
+  rotateLeft:  `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><polyline points="3 3 3 8 8 8"/></svg>`,
+  rotateRight: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><polyline points="21 3 21 8 16 8"/></svg>`,
 };
 
 const SHOW_DELAY = 100;
@@ -40,13 +42,13 @@ export class ImageTooltip {
         if (img && editable.contains(img) && !img.closest('a[href]')) {
           this._scheduleShow(img);
         }
-      }),
+      }, { passive: true }),
       on(editable, 'mouseout', (e) => {
         const to = e.relatedTarget;
         if (!to || (!editable.contains(to) && !this._el.contains(to))) {
           this._scheduleHide();
         }
-      }),
+      }, { passive: true }),
       // Hide when image is deselected by clicking elsewhere
       on(document, 'click', (e) => {
         if (this._activeImg && !this._activeImg.contains(e.target) && !this._el.contains(e.target)) {
@@ -103,6 +105,11 @@ export class ImageTooltip {
 
     el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
 
+    el.appendChild(this._makeBtn(ICONS.rotateLeft,  'Rotate Left',  () => this._rotate(-90)));
+    el.appendChild(this._makeBtn(ICONS.rotateRight, 'Rotate Right', () => this._rotate(90)));
+
+    el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
+
     this._captionBtn = this._makeBtn(ICONS.caption, 'Add / Edit Caption', () => this._toggleCaption());
     el.appendChild(this._captionBtn);
 
@@ -166,7 +173,10 @@ export class ImageTooltip {
 
   _show(img) {
     this._el.style.display = 'flex';
-    this._positionNear(img);
+    // Defer positioning: offsetWidth on a newly-visible element forces layout
+    requestAnimationFrame(() => {
+      if (this._activeImg) this._positionNear(this._activeImg);
+    });
   }
 
   _hide() {
@@ -213,7 +223,7 @@ export class ImageTooltip {
     target.style.marginRight = value === 'left'  ? '12px' : '';
     this.context.invoke('editor.afterCommand');
     this.context.invoke('imageResizer.updateOverlay');
-    this._positionNear(img);
+    requestAnimationFrame(() => { if (this._activeImg) this._positionNear(this._activeImg); });
   }
 
   _setCenter() {
@@ -226,7 +236,7 @@ export class ImageTooltip {
     target.style.marginRight  = 'auto';
     this.context.invoke('editor.afterCommand');
     this.context.invoke('imageResizer.updateOverlay');
-    this._positionNear(img);
+    requestAnimationFrame(() => { if (this._activeImg) this._positionNear(this._activeImg); });
   }
 
   _resetSize() {
@@ -236,7 +246,31 @@ export class ImageTooltip {
     img.style.height = '';
     this.context.invoke('editor.afterCommand');
     this.context.invoke('imageResizer.updateOverlay');
-    this._positionNear(img);
+    requestAnimationFrame(() => { if (this._activeImg) this._positionNear(this._activeImg); });
+  }
+
+  /**
+   * Rotate the active image by `delta` degrees (±90).
+   * Reads the existing rotate() value from the transform style so
+   * repeated clicks accumulate correctly.
+   * @param {number} delta
+   */
+  _rotate(delta) {
+    const img = this._activeImg;
+    if (!img) return;
+    // Parse current rotation angle from inline transform
+    const current = img.style.transform || '';
+    const match   = current.match(/rotate\((-?[\d.]+)deg\)/);
+    const prev    = match ? parseFloat(match[1]) : 0;
+    const next    = (prev + delta + 360) % 360; // normalise to [0, 360)
+    // Preserve any other transform functions (e.g. scale), replace only rotate()
+    const cleaned = current.replace(/rotate\(-?[\d.]+deg\)/, '').trim();
+    img.style.transform = cleaned
+      ? `${cleaned} rotate(${next}deg)`
+      : next === 0 ? '' : `rotate(${next}deg)`;
+    this.context.invoke('editor.afterCommand');
+    this.context.invoke('imageResizer.updateOverlay');
+    requestAnimationFrame(() => { if (this._activeImg) this._positionNear(this._activeImg); });
   }
 
   _delete() {

package/src/js/module/TableTooltip.js

@@ -110,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 || (
@@ -120,7 +120,7 @@ export class TableTooltip {
         )) {
           this._scheduleHide();
         }
-      }),
+      }, { passive: true }),
       on(document, 'click', (e) => {
         if (this._activeTable &&
           !this._activeTable.contains(e.target) &&
@@ -155,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; }
@@ -165,27 +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; }
-      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;
-      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) => {
@@ -196,8 +201,14 @@ export class TableTooltip {
       _startY   = e.clientY;
       _table    = _nearCell.closest('table');
       if (_edge === 'col') {
-        _startW = _nearCell.offsetWidth;
-        _colIdx = getVisualColIndex(_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');
@@ -211,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 = getCellAtVisualCol(r, _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');
     };
 
@@ -375,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() {
@@ -452,7 +474,8 @@ 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');
   }
 
@@ -462,18 +485,16 @@ export class TableTooltip {
     const table = cell.closest('table');
     if (!table) return;
     const visualColIdx = getVisualColIndex(cell);
-    Array.from(table.querySelectorAll('tr')).forEach((r) => {
-      const isHeader = r.closest('thead') !== null;
-      const newCell = createElement(isHeader ? 'th' : 'td', {}, ['\u00a0']);
-      if (position === 'left') {
-        const ref = getCellAtVisualCol(r, visualColIdx);
-        r.insertBefore(newCell, ref);
-      } else {
-        const ref = getCellAfterVisualCol(r, visualColIdx);
-        r.insertBefore(newCell, ref);
-      }
+    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');
   }
 
@@ -489,7 +510,7 @@ 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');
   }
 
@@ -502,11 +523,11 @@ export class TableTooltip {
     if (row && row.cells.length <= 1) return;
     const visualColIdx = getVisualColIndex(cell);
     this._activeCell = null;
-    Array.from(table.querySelectorAll('tr')).forEach((r) => {
-      const c = getCellAtVisualCol(r, visualColIdx);
-      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');
   }
 
@@ -628,15 +649,19 @@ export class TableTooltip {
 
     this._sizeApply = (val) => {
       if (isCol) {
-        const table       = cell.closest('table');
+        const table        = cell.closest('table');
         const visualColIdx = getVisualColIndex(cell);
-        Array.from(table.querySelectorAll('tr')).forEach((r) => {
-          const c = getCellAtVisualCol(r, visualColIdx);
+        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/VideoResizer.js

@@ -32,6 +32,12 @@ export class VideoResizer {
 
     const editable = this.context.layoutInfo.editable;
 
+    let _resizeDebounce = null;
+    const onWindowResize = () => {
+      clearTimeout(_resizeDebounce);
+      _resizeDebounce = setTimeout(() => this._updateOverlayPosition(), 100);
+    };
+
     this._disposers.push(
       on(editable, 'click', (e) => this._onEditorClick(e)),
       on(editable, 'contextmenu', (e) => {
@@ -40,7 +46,7 @@ export class VideoResizer {
       }),
       on(document, 'click', (e) => this._onDocClick(e)),
       on(window, 'scroll', () => this._updateOverlayPosition(), { passive: true }),
-      on(window, 'resize', () => this._updateOverlayPosition()),
+      on(window, 'resize', onWindowResize),
       on(editable, 'scroll', () => this._updateOverlayPosition(), { passive: true }),
     );
 
@@ -192,43 +198,49 @@ export class VideoResizer {
     const isCorner = pos.length === 2;
 
     const editable = this.context.layoutInfo.editable;
+    let _raf = null; // rAF handle — at most one write per paint frame
+
     const onMove = (me) => {
-      const dx = me.clientX - startX;
-      const dy = me.clientY - startY;
-      const maxW = editable.clientWidth || Infinity;
-      let newW = startW;
-      let newH = startH;
-
-      if (pos.includes('e')) newW = Math.max(80, startW + dx);
-      if (pos.includes('w')) newW = Math.max(80, startW - dx);
-      if (pos.includes('s')) newH = Math.max(45, startH + dy);
-      if (pos.includes('n')) newH = Math.max(45, startH - dy);
-
-      // Clamp to container width
-      newW = Math.min(newW, maxW);
-
-      if (isCorner) {
-        if (Math.abs(dx) >= Math.abs(dy)) {
-          newH = Math.max(45, Math.round(newW / aspectRatio));
-        } else {
-          newW = Math.min(Math.max(80, Math.round(newH * aspectRatio)), maxW);
-          newH = Math.max(45, Math.round(newW / aspectRatio));
+      if (_raf !== null) return;
+      const clientX = me.clientX;
+      const clientY = me.clientY;
+      _raf = requestAnimationFrame(() => {
+        _raf = null;
+        const dx = clientX - startX;
+        const dy = clientY - startY;
+        const maxW = editable.clientWidth || Infinity;
+        let newW = startW;
+        let newH = startH;
+
+        if (pos.includes('e')) newW = Math.max(80, startW + dx);
+        if (pos.includes('w')) newW = Math.max(80, startW - dx);
+        if (pos.includes('s')) newH = Math.max(45, startH + dy);
+        if (pos.includes('n')) newH = Math.max(45, startH - dy);
+
+        newW = Math.min(newW, maxW);
+
+        if (isCorner) {
+          if (Math.abs(dx) >= Math.abs(dy)) {
+            newH = Math.max(45, Math.round(newW / aspectRatio));
+          } else {
+            newW = Math.min(Math.max(80, Math.round(newH * aspectRatio)), maxW);
+            newH = Math.max(45, Math.round(newW / aspectRatio));
+          }
+        }
+
+        // Resize wrapper and inner embed via CSS only — attribute writes are redundant
+        wrapper.style.width  = `${newW}px`;
+        wrapper.style.height = `${newH}px`;
+        if (embed) {
+          embed.style.width  = `${newW}px`;
+          embed.style.height = `${newH}px`;
         }
-      }
-
-      // Resize both the wrapper and the inner embed element
-      wrapper.style.width  = `${newW}px`;
-      wrapper.style.height = `${newH}px`;
-      if (embed) {
-        embed.width  = newW;
-        embed.height = newH;
-        embed.style.width  = `${newW}px`;
-        embed.style.height = `${newH}px`;
-      }
-      this._updateOverlayPosition();
+        this._updateOverlayPosition();
+      });
     };
 
     const onUp = () => {
+      if (_raf !== null) { cancelAnimationFrame(_raf); _raf = null; }
       document.removeEventListener('mousemove', onMove);
       document.removeEventListener('mouseup', onUp);
       this._dragDisposers = null;

package/src/js/module/VideoTooltip.js

@@ -42,13 +42,13 @@ export class VideoTooltip {
         if (wrapper && editable.contains(wrapper)) {
           this._scheduleShow(wrapper);
         }
-      }),
+      }, { passive: true }),
       on(editable, 'mouseout', (e) => {
         const to = e.relatedTarget;
         if (!to || (!editable.contains(to) && !this._el.contains(to))) {
           this._scheduleHide();
         }
-      }),
+      }, { passive: true }),
       on(document, 'click', (e) => {
         if (
           this._activeWrapper &&
@@ -174,7 +174,10 @@ export class VideoTooltip {
 
   _show(wrapper) {
     this._el.style.display = 'flex';
-    this._positionNear(wrapper);
+    // Defer: offsetWidth on a newly-visible element forces synchronous layout
+    requestAnimationFrame(() => {
+      if (this._activeWrapper) this._positionNear(this._activeWrapper);
+    });
   }
 
   _hide() {
@@ -221,7 +224,7 @@ export class VideoTooltip {
     wrapper.style.marginRight  = value === 'left'  ? '12px' : '';
     this.context.invoke('editor.afterCommand');
     this.context.invoke('videoResizer.updateOverlay');
-    this._positionNear(wrapper);
+    requestAnimationFrame(() => { if (this._activeWrapper) this._positionNear(this._activeWrapper); });
   }
 
   _setCenter() {
@@ -233,7 +236,7 @@ export class VideoTooltip {
     wrapper.style.marginRight = 'auto';
     this.context.invoke('editor.afterCommand');
     this.context.invoke('videoResizer.updateOverlay');
-    this._positionNear(wrapper);
+    requestAnimationFrame(() => { if (this._activeWrapper) this._positionNear(this._activeWrapper); });
   }
 
   _resetSize() {
@@ -250,7 +253,7 @@ export class VideoTooltip {
     }
     this.context.invoke('editor.afterCommand');
     this.context.invoke('videoResizer.updateOverlay');
-    this._positionNear(wrapper);
+    requestAnimationFrame(() => { if (this._activeWrapper) this._positionNear(this._activeWrapper); });
   }
 
   _delete() {