fable-editor 1.2.6 → 1.2.8

package/dist/react/index.mjs

@@ -61,10 +61,10 @@ function We() {
         A.unshift("Warning: " + f), Function.prototype.apply.call(console[a], console, A);
       }
     }
-    var H = !1, $ = !1, O = !1, F = !1, et = !1, Mt;
+    var H = !1, $ = !1, Z = !1, F = !1, et = !1, Mt;
     Mt = Symbol.for("react.module.reference");
     function ue(a) {
-      return !!(typeof a == "string" || typeof a == "function" || a === i || a === n || et || a === s || a === c || a === d || F || a === b || H || $ || O || typeof a == "object" && a !== null && (a.$$typeof === m || a.$$typeof === u || a.$$typeof === l || a.$$typeof === r || a.$$typeof === o || // This needs to include all possible module reference object
+      return !!(typeof a == "string" || typeof a == "function" || a === i || a === n || et || a === s || a === c || a === d || F || a === b || H || $ || Z || typeof a == "object" && a !== null && (a.$$typeof === m || a.$$typeof === u || a.$$typeof === l || a.$$typeof === r || a.$$typeof === o || // This needs to include all possible module reference object
       // types supported by any Flight configuration anywhere since
       // we don't know which Flight build this will end up being used
       // with.
@@ -313,13 +313,13 @@ function We() {
         }
       return "";
     }
-    var K = Object.prototype.hasOwnProperty, Dt = {}, Zt = w.ReactDebugCurrentFrame;
+    var K = Object.prototype.hasOwnProperty, Dt = {}, Ot = w.ReactDebugCurrentFrame;
     function lt(a) {
       if (a) {
         var f = a._owner, v = nt(a.type, a._source, f ? f.type : null);
-        Zt.setExtraStackFrame(v);
+        Ot.setExtraStackFrame(v);
       } else
-        Zt.setExtraStackFrame(null);
+        Ot.setExtraStackFrame(null);
     }
     function ye(a, f, v, T, L) {
       {
@@ -352,17 +352,17 @@ function We() {
     }
     function we(a) {
       try {
-        return Ot(a), !1;
+        return Zt(a), !1;
       } catch {
         return !0;
       }
     }
-    function Ot(a) {
+    function Zt(a) {
       return "" + a;
     }
     function Ft(a) {
       if (we(a))
-        return E("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Ce(a)), Ot(a);
+        return E("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Ce(a)), Zt(a);
     }
     var _t = w.ReactCurrentOwner, Te = {
       key: !0,
@@ -601,13 +601,13 @@ Check the top-level render call using <` + v + ">.");
             return Fe !== "key";
           }), xt = D.length > 0 ? "{key: someKey, " + D.join(": ..., ") + ": ...}" : "{key: someKey}";
           if (!Yt[U + xt]) {
-            var Oe = D.length > 0 ? "{" + D.join(": ..., ") + ": ...}" : "{}";
+            var Ze = D.length > 0 ? "{" + D.join(": ..., ") + ": ...}" : "{}";
             E(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`, xt, U, Oe, U), Yt[U + xt] = !0;
+  <%s key={someKey} {...props} />`, xt, U, Ze, U), Yt[U + xt] = !0;
           }
         }
         return a === i ? Pe(P) : Re(P), P;
@@ -619,8 +619,8 @@ React keys must be passed directly to JSX without using spread:
     function Ne(a, f, v) {
       return Qt(a, f, v, !1);
     }
-    var De = Ne, Ze = Be;
-    tt.Fragment = i, tt.jsx = De, tt.jsxs = Ze;
+    var De = Ne, Oe = Be;
+    tt.Fragment = i, tt.jsx = De, tt.jsxs = Oe;
   }()), tt;
 }
 process.env.NODE_ENV === "production" ? Et.exports = je() : Et.exports = We();
@@ -2921,23 +2921,23 @@ const xi = ["nw", "ne", "sw", "se"], wt = ["img-left", "img-right", "img-top", "
   "img-top": h.tpltop,
   "img-center": h.tplcenter
 }, wi = ".tox,.pop,.tblctx,.imgctx,.selctx,.dlg";
-let Z = null, X = null, St = 0, ae = !1;
+let O = null, X = null, St = 0, ae = !1;
 function ct() {
-  clearTimeout(St), X = null, Z && Z.classList.remove("show");
+  clearTimeout(St), X = null, O && O.classList.remove("show");
 }
 function Ti(p) {
   const t = p.dataset.tip;
   if (!t) return;
   X = p, clearTimeout(St);
-  const e = Z && Z.classList.contains("show") ? 60 : 350;
+  const e = O && O.classList.contains("show") ? 60 : 350;
   St = window.setTimeout(() => {
     if (X !== p || !document.contains(p)) return;
-    Z || (Z = document.createElement("div"), Z.className = "etip", document.body.appendChild(Z)), Z.textContent = t, Z.classList.add("show");
-    const i = p.getBoundingClientRect(), s = Z.offsetWidth, n = Z.offsetHeight;
+    O || (O = document.createElement("div"), O.className = "etip", document.body.appendChild(O)), O.textContent = t, O.classList.add("show");
+    const i = p.getBoundingClientRect(), s = O.offsetWidth, n = O.offsetHeight;
     let l = i.left + i.width / 2 - s / 2;
     l = Math.max(6, Math.min(l, innerWidth - s - 6));
     let r = i.bottom + 7;
-    r + n > innerHeight - 6 && (r = i.top - n - 7), Z.style.left = l + "px", Z.style.top = r + "px";
+    r + n > innerHeight - 6 && (r = i.top - n - 7), O.style.left = l + "px", O.style.top = r + "px";
   }, e);
 }
 function Ei() {
@@ -2976,7 +2976,7 @@ function de(p) {
 var j;
 let Hi = (j = class {
   constructor(t) {
-    this.lang = "en", this.contentClass = "fable-content-" + j.instanceCounter++, this.contentStyleEl = null, this.savedRange = null, this.foreColor = "#000000", this.backColor = "#FACC15", this.openPop = null, this.openSubEl = null, this.popAnchor = null, this.dlgOvl = null, this.tblActive = null, this.tblCorner = null, this.tblColBars = [], this.tblCtx = null, this.tblCellMark = null, this.tblOpMark = null, this.tblOpMarkKind = null, this.imgActive = null, this.imgHandles = [], this.imgCtx = null, this.imgHideTimer = null, this.phActive = null, this.phCtx = null, this.phUploadTarget = null, this.vidActive = null, this.vidCtx = null, this.vidHideTimer = null, this.vphActive = null, this.vphCtx = null, this.vphUploadTarget = null, this.selCtx = null, this.tbrMore = null, this.tbrExpanded = !1, this.codeActive = null, this.codeCtx = null, this.tplActive = null, this.tplCtx = null, this.revisions = [], this.revTimer = null, this.draftTimer = null, this.draftStorageKey = "", this.listeners = [], this.isDestroyed = !1, this.options = {
+    this.lang = "en", this.contentClass = "fable-content-" + j.instanceCounter++, this.contentStyleEl = null, this.savedRange = null, this.foreColor = "#000000", this.backColor = "#FACC15", this.openPop = null, this.subStack = [], this.popAnchor = null, this.dlgOvl = null, this.tblActive = null, this.tblCorner = null, this.tblColBars = [], this.tblCtx = null, this.tblCellMark = null, this.tblOpMark = null, this.tblOpMarkKind = null, this.imgActive = null, this.imgHandles = [], this.imgCtx = null, this.imgHideTimer = null, this.phActive = null, this.phCtx = null, this.phUploadTarget = null, this.vidActive = null, this.vidCtx = null, this.vidHideTimer = null, this.vphActive = null, this.vphCtx = null, this.vphUploadTarget = null, this.selCtx = null, this.tbrMore = null, this.tbrExpanded = !1, this.codeActive = null, this.codeCtx = null, this.tplActive = null, this.tplCtx = null, this.revisions = [], this.revTimer = null, this.draftTimer = null, this.draftStorageKey = "", this.listeners = [], this.isDestroyed = !1, this.options = {
       target: t.target,
       language: t.language || "en",
       height: t.height ?? 302,
@@ -3048,7 +3048,7 @@ let Hi = (j = class {
   /* ---------------------------------------------------------- event binding */
   bindEvents() {
     if (this.onDoc("mousedown", (t) => {
-      this.openPop && !this.openPop.contains(t.target) && !this.popAnchor.contains(t.target) && !(this.openSubEl && this.openSubEl.contains(t.target)) && this.closePop();
+      this.openPop && !this.openPop.contains(t.target) && !this.popAnchor.contains(t.target) && !this.subContains(t.target) && this.closePop();
     }), this.onDoc("keydown", (t) => {
       t.key === "Escape" && (this.closePop(), this.closeDlg());
     }), this.onDoc("selectionchange", () => {
@@ -3103,8 +3103,10 @@ let Hi = (j = class {
       this.positionTableHandles(), this.positionImageHandles(), this.positionImgPhCtx(), this.positionTplCtx(), this.positionVphCtx(), this.positionVidCtx(), this.positionCodeCtx();
     }), this.onWin(
       "scroll",
-      () => {
-        this.positionTableHandles(), this.positionImageHandles(), this.positionImgPhCtx(), this.positionTplCtx(), this.positionVphCtx(), this.positionVidCtx(), this.positionCodeCtx(), this.repositionSelToolbar();
+      (t) => {
+        var s;
+        const e = t.target;
+        e instanceof Node && ((((s = this.openPop) == null ? void 0 : s.contains(e)) ?? !1) || this.subContains(e)) || this.closePop(), this.positionTableHandles(), this.positionImageHandles(), this.positionImgPhCtx(), this.positionTplCtx(), this.positionVphCtx(), this.positionVidCtx(), this.positionCodeCtx(), this.repositionSelToolbar();
       },
       !0
     ), this.onWin("resize", () => {
@@ -3152,7 +3154,7 @@ let Hi = (j = class {
       const t = (e = this.docInput.files) == null ? void 0 : e[0];
       t && this.importWordFile(t).catch(() => alert(this.t("importfail")));
     }), this.onDoc("mousedown", (t) => {
-      this.ed.contains(t.target) || t.target === this.tblCorner || this.tblColBars.includes(t.target) || this.tblCtx && this.tblCtx.contains(t.target) || this.imgHandles.includes(t.target) || this.imgCtx && this.imgCtx.contains(t.target) || this.phCtx && this.phCtx.contains(t.target) || this.tplCtx && this.tplCtx.contains(t.target) || this.selCtx && this.selCtx.contains(t.target) || this.vphCtx && this.vphCtx.contains(t.target) || this.vidCtx && this.vidCtx.contains(t.target) || this.codeCtx && this.codeCtx.contains(t.target) || this.openPop && this.openPop.contains(t.target) || this.openSubEl && this.openSubEl.contains(t.target) || (this.clearTableHandles(), this.clearImageHandles(), this.clearImgPlaceholderSel(), this.clearTplSel(), this.clearVphPlaceholderSel(), this.clearVidHandles(), this.clearCodeSel(), this.clearSelToolbar());
+      this.ed.contains(t.target) || t.target === this.tblCorner || this.tblColBars.includes(t.target) || this.tblCtx && this.tblCtx.contains(t.target) || this.imgHandles.includes(t.target) || this.imgCtx && this.imgCtx.contains(t.target) || this.phCtx && this.phCtx.contains(t.target) || this.tplCtx && this.tplCtx.contains(t.target) || this.selCtx && this.selCtx.contains(t.target) || this.vphCtx && this.vphCtx.contains(t.target) || this.vidCtx && this.vidCtx.contains(t.target) || this.codeCtx && this.codeCtx.contains(t.target) || this.openPop && this.openPop.contains(t.target) || this.subContains(t.target) || (this.clearTableHandles(), this.clearImageHandles(), this.clearImgPlaceholderSel(), this.clearTplSel(), this.clearVphPlaceholderSel(), this.clearVidHandles(), this.clearCodeSel(), this.clearSelToolbar());
     });
   }
   on(t, e, i) {
@@ -3358,24 +3360,42 @@ let Hi = (j = class {
   }
   /* ---------------------------------------------------------- popups / menus */
   closeSub() {
-    var t;
-    (t = this.openSubEl) == null || t.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(t) {
+    for (; this.subStack.length > t; ) this.subStack.pop().remove();
+  }
+  /** True if `node` is inside any currently-open flyout submenu (any depth). */
+  subContains(t) {
+    return this.subStack.some((e) => e.contains(t));
+  }
+  /** 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(t) {
+    if (t === this.openPop) return 0;
+    const e = this.subStack.indexOf(t);
+    return e === -1 ? this.subStack.length : e + 1;
   }
   closePop() {
     var t;
     this.closeSub(), this.openPop && (this.openPop.remove(), this.openPop = null, (t = this.popAnchor) == null || t.classList.remove("open"), this.popAnchor = null, this.setOpTarget(null));
   }
   openSubFor(t, e) {
-    this.closeSub();
-    const i = document.createElement("div");
-    i.className = "pop sub", i.dir = this.dir(), t.subBuild ? t.subBuild(i) : t.sub && this.menuItems(i, t.sub), i.addEventListener("mousedown", (o) => {
-      o.target.tagName !== "INPUT" && o.preventDefault();
-    }), document.body.appendChild(i);
-    const s = e.getBoundingClientRect();
-    let l = this.dir() === "rtl" ? s.left - i.offsetWidth + 2 : s.right - 2;
-    l = Math.max(8, Math.min(l + scrollX, scrollX + innerWidth - i.offsetWidth - 8));
-    let r = s.top + scrollY - 6;
-    r = Math.max(8 + scrollY, Math.min(r, scrollY + innerHeight - i.offsetHeight - 8)), i.style.left = l + "px", i.style.top = r + "px", this.openSubEl = i;
+    const i = e.getBoundingClientRect(), s = e.closest(".pop");
+    this.closeSubFrom(s ? this.subLevelOf(s) : 0);
+    const n = document.createElement("div");
+    n.className = "pop sub", n.dir = this.dir(), t.subBuild ? t.subBuild(n) : t.sub && this.menuItems(n, t.sub), n.addEventListener("mousedown", (c) => {
+      c.target.tagName !== "INPUT" && c.preventDefault();
+    }), document.body.appendChild(n);
+    let r = this.dir() === "rtl" ? i.left - n.offsetWidth + 2 : i.right - 2;
+    r = Math.max(8, Math.min(r + scrollX, scrollX + innerWidth - n.offsetWidth - 8));
+    let o = i.top + scrollY - 6;
+    o = Math.max(8 + scrollY, Math.min(o, scrollY + innerHeight - n.offsetHeight - 8)), n.style.left = r + "px", n.style.top = o + "px", this.subStack.push(n);
   }
   popup(t, e, i) {
     if (this.openPop && this.popAnchor === t) {
@@ -3386,10 +3406,12 @@ let Hi = (j = class {
     const s = document.createElement("div");
     s.className = "pop" + (i ? " " + i : ""), s.dir = this.dir(), e(s), document.body.appendChild(s);
     const n = t.getBoundingClientRect();
-    s.style.minWidth = Math.max(160, Math.round(n.width)) + "px", s.style.top = n.bottom + scrollY + 2 + "px";
-    let r = this.dir() === "rtl" ? n.right - s.offsetWidth : n.left;
-    r = Math.max(8, Math.min(r + scrollX, scrollX + innerWidth - s.offsetWidth - 8)), s.style.left = r + "px", s.addEventListener("mousedown", (o) => {
-      o.target.tagName !== "INPUT" && o.preventDefault();
+    s.style.minWidth = Math.max(160, Math.round(n.width)) + "px";
+    let l = n.bottom + scrollY + 2;
+    l = Math.max(8 + scrollY, Math.min(l, scrollY + innerHeight - s.offsetHeight - 8)), s.style.top = l + "px";
+    let o = this.dir() === "rtl" ? n.right - s.offsetWidth : n.left;
+    o = Math.max(8, Math.min(o + scrollX, scrollX + innerWidth - s.offsetWidth - 8)), s.style.left = o + "px", s.addEventListener("mousedown", (c) => {
+      c.target.tagName !== "INPUT" && c.preventDefault();
     }), this.openPop = s, this.popAnchor = t, t.classList.add("open");
   }
   menuItems(t, e) {
@@ -3403,7 +3425,7 @@ let Hi = (j = class {
         i.action && (this.closePop(), i.action());
       }), n.addEventListener("mouseenter", () => {
         var l;
-        s ? this.openSubFor(i, n) : this.openSubEl && t !== this.openSubEl && this.closeSub(), (l = i.hover) == null || l.call(i, !0);
+        s ? this.openSubFor(i, n) : this.closeSubFrom(this.subLevelOf(t)), (l = i.hover) == null || l.call(i, !0);
       }), n.addEventListener("mouseleave", () => {
         var l;
         return (l = i.hover) == null ? void 0 : l.call(i, !1);
@@ -3782,8 +3804,8 @@ let Hi = (j = class {
    *  (the quick color chips); everything else yields one. */
   buildToolbarRegistry() {
     const t = this.tbtn(h.tableic, this.t("quicktable"), () => this.tableGrid(t)), e = {
-      undo: () => this.tbtn(h.undo, this.t("undo"), () => this.exec("undo")),
-      redo: () => this.tbtn(h.redo, this.t("redo"), () => this.exec("redo")),
+      undo: () => this.tbtn(h.undo, this.t("undo"), () => this.exec("undo"), "undo"),
+      redo: () => this.tbtn(h.redo, this.t("redo"), () => this.exec("redo"), "redo"),
       preview: () => this.tbtn(h.prevw, this.t("preview"), () => this.previewDlg()),
       print: () => this.tbtn(h.printic, this.t("print"), () => this.printDoc()),
       importword: () => this.tbtn(h.wordic, this.t("importword"), () => this.pickWordDoc()),
@@ -4126,10 +4148,10 @@ let Hi = (j = class {
       this.t("tablepropsttl"),
       (E) => {
         const I = (H, $) => {
-          const O = document.createElement("div");
-          O.style.cssText = r;
+          const Z = document.createElement("div");
+          Z.style.cssText = r;
           const F = document.createElement("span");
-          F.style.cssText = o, F.textContent = this.t(H), O.append(F, $), E.appendChild(O);
+          F.style.cssText = o, F.textContent = this.t(H), Z.append(F, $), E.appendChild(Z);
         };
         e = document.createElement("input"), e.type = "text", e.style.cssText = c, e.placeholder = "e.g. 600px or 100%", e.value = u, I("tblwidth", e), i = document.createElement("input"), i.type = "number", i.min = "0", i.style.cssText = c, i.value = String(m), I("tblcellpadding", i), s = document.createElement("input"), s.type = "number", s.min = "0", s.style.cssText = c, s.value = String(b), I("tblcellspacing", s), n = document.createElement("input"), n.type = "number", n.min = "0", n.style.cssText = c, n.value = String(y), I("tblborder", n), l = document.createElement("select"), l.style.cssText = c, [
           ["", "alignnone"],
@@ -4137,8 +4159,8 @@ let Hi = (j = class {
           ["center", "aligncenter"],
           ["right", "alignright"]
         ].forEach(([H, $]) => {
-          const O = document.createElement("option");
-          O.value = H, O.textContent = this.t($), H === w && (O.selected = !0), l.appendChild(O);
+          const Z = document.createElement("option");
+          Z.value = H, Z.textContent = this.t($), H === w && (Z.selected = !0), l.appendChild(Z);
         }), I("tblalign", l);
       },
       [
@@ -4726,8 +4748,8 @@ let Hi = (j = class {
           E.type = "file", E.accept = this.options.videoFileTypes.join(","), E.style.display = "none", w.addEventListener("click", () => {
             E.value = "", E.click();
           }), E.addEventListener("change", () => {
-            var O;
-            const H = (O = E.files) == null ? void 0 : O[0];
+            var Z;
+            const H = (Z = E.files) == null ? void 0 : Z[0];
             if (!H) return;
             w.disabled = !0, w.textContent = this.t("uploading");
             const $ = (F) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fable-editor",
-  "version": "1.2.6",
+  "version": "1.2.8",
   "description": "FableEditor — a rich text editor with React and Angular wrappers",
   "author": "Sajin Satheesan <an.sajinsatheesan@gmail.com>",
   "repository": {

package/style.css

@@ -194,6 +194,14 @@
                stroke-linejoin: round;
           }
 
+          /* undo/redo swap sides under dir=rtl (normal flex reordering of the
+             toolbar), but their glyphs stay fixed - without this, both arrows end
+             up pointing at each other instead of outward from their new position */
+          [dir=rtl] .tbtn[data-id=undo] svg,
+          [dir=rtl] .tbtn[data-id=redo] svg {
+               transform: scaleX(-1);
+          }
+
           .tbtn svg .f {
                fill: #2f3744;
                stroke: none;
@@ -1053,7 +1061,7 @@
                transform: rotate(-90deg);
           }
 
-          [dir=rtl] .pop .mi .subarrow svg {
+          .pop[dir=rtl] .mi .subarrow svg {
                transform: rotate(90deg);
           }
 
@@ -1711,8 +1719,13 @@
                color: #556;
           }
 
-          kbd {
+          /* scoped (not a bare kbd selector) and with its own explicit color -
+             a host page's own kbd styling can otherwise out-specificity a bare
+             tag selector and override just one of background/color, leaving
+             light-on-light text */
+          .dlg kbd {
                background: #f3f4f6;
+               color: #444c58;
                border-radius: 4px;
                padding: 2px 7px;
                font: 12px Consolas, monospace;