fable-editor 1.2.7 → 1.2.8

package/dist/angular/fesm2022/fable-editor.mjs

@@ -1828,7 +1828,12 @@ class FableEditor {
     foreColor = '#000000';
     backColor = '#FACC15';
     openPop = null;
-    openSubEl = null;
+    /** Stack of currently-open flyout submenus, shallowest first (e.g. for
+     *  Table > Cell > Cell background: [Cell flyout, Cell background flyout]).
+     *  A single slot isn't enough past one level deep - opening a 2nd-level
+     *  flyout would remove the 1st-level one still needed to bridge visually
+     *  back to the top-level popup, leaving a gap. */
+    subStack = [];
     popAnchor = null;
     dlgOvl = null;
     tblActive = null;
@@ -2018,7 +2023,7 @@ class FableEditor {
             if (this.openPop &&
                 !this.openPop.contains(e.target) &&
                 !this.popAnchor.contains(e.target) &&
-                !(this.openSubEl && this.openSubEl.contains(e.target))) {
+                !this.subContains(e.target)) {
                 this.closePop();
             }
         });
@@ -2175,8 +2180,17 @@ class FableEditor {
             this.positionVidCtx();
             this.positionCodeCtx();
         });
-        this.onWin('scroll', () => {
-            this.closePop();
+        this.onWin('scroll', (e) => {
+            /* this fires for ANY scroll in the document (capture:true is what
+               lets it catch a scrollable ancestor, not just the window) -
+               including the popup's own overflow:auto scrolling through a long
+               menu. Only close it for a scroll that happened outside the open
+               menu/flyouts; otherwise scrolling a long dropdown would close it
+               on the very first scroll tick instead of scrolling its content. */
+            const t = e.target;
+            const withinOpenMenu = t instanceof Node && ((this.openPop?.contains(t) ?? false) || this.subContains(t));
+            if (!withinOpenMenu)
+                this.closePop();
             this.positionTableHandles();
             this.positionImageHandles();
             this.positionImgPhCtx();
@@ -2260,7 +2274,7 @@ class FableEditor {
                 (this.vidCtx && this.vidCtx.contains(e.target)) ||
                 (this.codeCtx && this.codeCtx.contains(e.target)) ||
                 (this.openPop && this.openPop.contains(e.target)) ||
-                (this.openSubEl && this.openSubEl.contains(e.target)))
+                this.subContains(e.target))
                 return;
             this.clearTableHandles();
             this.clearImageHandles();
@@ -2601,8 +2615,28 @@ class FableEditor {
     }
     /* ---------------------------------------------------------- popups / menus */
     closeSub() {
-        this.openSubEl?.remove();
-        this.openSubEl = null;
+        this.closeSubFrom(0);
+    }
+    /** Removes stacked flyouts from `level` (0 = shallowest) onward, keeping
+     *  anything shallower - e.g. hovering a sibling item inside the "Cell"
+     *  flyout should drop a deeper "Cell background" flyout but keep "Cell"
+     *  itself and the top-level popup it bridges to. */
+    closeSubFrom(level) {
+        while (this.subStack.length > level)
+            this.subStack.pop().remove();
+    }
+    /** True if `node` is inside any currently-open flyout submenu (any depth). */
+    subContains(node) {
+        return this.subStack.some((el) => el.contains(node));
+    }
+    /** 0 for the top-level popup itself; otherwise this container's depth in
+     *  the flyout stack + 1. Used to know how many deeper flyouts to close
+     *  when opening or hovering within `container`. */
+    subLevelOf(container) {
+        if (container === this.openPop)
+            return 0;
+        const idx = this.subStack.indexOf(container);
+        return idx === -1 ? this.subStack.length : idx + 1;
     }
     closePop() {
         this.closeSub();
@@ -2617,7 +2651,17 @@ class FableEditor {
         }
     }
     openSubFor(item, anchor) {
-        this.closeSub();
+        /* captured before truncating the stack - for a flyout nested inside
+           another flyout (e.g. Table > Cell > Cell background), anchor is itself
+           a descendant of the currently-open sub-popup; measuring after removing
+           it would read a detached, zeroed-out rect and land the new flyout at
+           the top-left corner of the screen */
+        const r = anchor.getBoundingClientRect();
+        /* only close flyouts deeper than the one anchor lives in - closing
+           everything (the old behavior) would also remove that same containing
+           flyout, leaving a visual gap back to the top-level popup */
+        const parentPop = anchor.closest('.pop');
+        this.closeSubFrom(parentPop ? this.subLevelOf(parentPop) : 0);
         const sub = document.createElement('div');
         sub.className = 'pop sub';
         sub.dir = this.dir();
@@ -2630,7 +2674,6 @@ class FableEditor {
                 e.preventDefault();
         });
         document.body.appendChild(sub);
-        const r = anchor.getBoundingClientRect();
         const isRtl = this.dir() === 'rtl';
         // overlap the parent item slightly so the pointer can travel into the flyout
         let x = isRtl ? r.left - sub.offsetWidth + 2 : r.right - 2;
@@ -2639,7 +2682,7 @@ class FableEditor {
         y = Math.max(8 + scrollY, Math.min(y, scrollY + innerHeight - sub.offsetHeight - 8));
         sub.style.left = x + 'px';
         sub.style.top = y + 'px';
-        this.openSubEl = sub;
+        this.subStack.push(sub);
     }
     popup(anchor, build, cls) {
         if (this.openPop && this.popAnchor === anchor) {
@@ -2655,7 +2698,11 @@ class FableEditor {
         const r = anchor.getBoundingClientRect();
         // align the menu with its control: at least as wide as the anchor
         el.style.minWidth = Math.max(160, Math.round(r.width)) + 'px';
-        el.style.top = r.bottom + scrollY + 2 + 'px';
+        // clamp so a long menu (its own max-height/overflow makes it scrollable)
+        // stays fully on-screen instead of running off the bottom of the viewport
+        let y = r.bottom + scrollY + 2;
+        y = Math.max(8 + scrollY, Math.min(y, scrollY + innerHeight - el.offsetHeight - 8));
+        el.style.top = y + 'px';
         const isRtl = this.dir() === 'rtl';
         let x = isRtl ? r.right - el.offsetWidth : r.left;
         x = Math.max(8, Math.min(x + scrollX, scrollX + innerWidth - el.offsetWidth - 8));
@@ -2687,8 +2734,11 @@ class FableEditor {
             b.addEventListener('mouseenter', () => {
                 if (hasSub)
                     this.openSubFor(it, b);
-                else if (this.openSubEl && el !== this.openSubEl)
-                    this.closeSub();
+                /* hovering a no-submenu item drops whatever deeper flyout was open
+                   from a previously-hovered sibling, but keeps el itself and any
+                   shallower ancestors intact */
+                else
+                    this.closeSubFrom(this.subLevelOf(el));
                 it.hover?.(true);
             });
             b.addEventListener('mouseleave', () => it.hover?.(false));
@@ -3274,8 +3324,8 @@ class FableEditor {
     buildToolbarRegistry() {
         const tableBtn = this.tbtn(IC.tableic, this.t('quicktable'), () => this.tableGrid(tableBtn));
         const registry = {
-            undo: () => this.tbtn(IC.undo, this.t('undo'), () => this.exec('undo')),
-            redo: () => this.tbtn(IC.redo, this.t('redo'), () => this.exec('redo')),
+            undo: () => this.tbtn(IC.undo, this.t('undo'), () => this.exec('undo'), 'undo'),
+            redo: () => this.tbtn(IC.redo, this.t('redo'), () => this.exec('redo'), 'redo'),
             preview: () => this.tbtn(IC.prevw, this.t('preview'), () => this.previewDlg()),
             print: () => this.tbtn(IC.printic, this.t('print'), () => this.printDoc()),
             importword: () => this.tbtn(IC.wordic, this.t('importword'), () => this.pickWordDoc()),