fable-editor 1.2.2 → 1.2.4

package/dist/core/index.mjs

@@ -407,7 +407,7 @@ const it = "undo redo | preview print | importword revhistory | fontfamily fonts
   ["Verdana", "verdana,geneva"],
   ["Webdings", "webdings"],
   ["Wingdings", "wingdings,zapf dingbats"]
-], ot = ["8px", "9px", "10px", "11px", "12px", "14px", "16px", "18px", "20px", "24px", "28px", "32px", "36px", "48px", "72px", "96px"], nt = 1, rt = 100, _ = ["1", "1.15", "1.4", "1.5", "1.75", "2", "2.5", "3"], V = ["1px", "2px", "4px", "6px", "8px", "12px"], W = ["0.5px", "1px", "1.5px", "2px", "3px", "4px"], U = [
+], ot = ["8px", "9px", "10px", "11px", "12px", "14px", "16px", "18px", "20px", "24px", "28px", "32px", "36px", "48px", "72px", "96px"], nt = 1, rt = 100, _ = ["1", "1.15", "1.4", "1.5", "1.75", "2", "2.5", "3"], U = ["1px", "2px", "4px", "6px", "8px", "12px"], V = ["0.5px", "1px", "1.5px", "2px", "3px", "4px"], W = [
   ["plain", "Plain text"],
   ["html", "HTML/XML"],
   ["css", "CSS"],
@@ -1524,7 +1524,7 @@ const it = "undo redo | preview print | importword revhistory | fontfamily fonts
       "🇲🇦"
     ]
   }
-], Zt = [
+], Nt = [
   "©",
   "®",
   "™",
@@ -1810,7 +1810,7 @@ const it = "undo redo | preview print | importword revhistory | fontfamily fonts
   codesampleic: y(
     '<rect x="3.5" y="4" width="17" height="16" rx="2"/><path d="M3.5 8.5h17"/><path d="M9.5 12 7 14.25l2.5 2.25M14.5 12l2.5 2.25-2.5 2.25"/>'
   )
-}, Nt = (p) => `<span class="txt">${p}</span>`, pt = /* @__PURE__ */ new Set([
+}, Zt = (p) => `<span class="txt">${p}</span>`, pt = /* @__PURE__ */ new Set([
   "p",
   "div",
   "span",
@@ -1954,8 +1954,8 @@ function ft(p) {
       if (!l.length || l[l.length - 1].level < c) {
         const w = p.createElement(m ? "ol" : "ul");
         if (m && g && (w.style.listStyleType = g), l.length) {
-          const k = l[l.length - 1].list;
-          (k.lastElementChild || k).appendChild(w);
+          const H = l[l.length - 1].list;
+          (H.lastElementChild || H).appendChild(w);
         } else
           o.parentNode.insertBefore(w, o);
         l.push({ list: w, level: c });
@@ -1991,7 +1991,7 @@ function bt(p) {
     e.style.backgroundColor = e.style.backgroundColor || e.getAttribute("bgcolor"), e.removeAttribute("bgcolor");
   });
 }
-function N(p, t) {
+function Z(p, t) {
   Array.from(p.childNodes).forEach((e) => {
     if (e.nodeType === Node.COMMENT_NODE) {
       e.remove();
@@ -2017,10 +2017,10 @@ function N(p, t) {
           h[c] && (r.style.fontSize = h[c]);
         }
         for (; i.firstChild; ) r.appendChild(i.firstChild);
-        i.replaceWith(r), N(r, t);
+        i.replaceWith(r), Z(r, t);
         return;
       }
-      for (N(i, t); i.firstChild; ) i.parentNode.insertBefore(i.firstChild, i);
+      for (Z(i, t); i.firstChild; ) i.parentNode.insertBefore(i.firstChild, i);
       i.remove();
       return;
     }
@@ -2043,7 +2043,7 @@ function N(p, t) {
     const o = D(i), n = [];
     for (const [r, c] of Object.entries(o))
       mt.has(r) && (/expression|javascript|url\s*\(\s*['"]?\s*file:/i.test(c) || r === "font-weight" && /^(400|normal)$/i.test(c) || r === "font-style" && /^normal$/i.test(c) || r === "text-decoration" && /^none$/i.test(c) || n.push(r + ":" + c));
-    if (n.length ? i.setAttribute("style", n.join(";")) : i.removeAttribute("style"), i.removeAttribute("class"), N(i, t), s === "span" && !i.attributes.length) {
+    if (n.length ? i.setAttribute("style", n.join(";")) : i.removeAttribute("style"), i.removeAttribute("class"), Z(i, t), s === "span" && !i.attributes.length) {
       for (; i.firstChild; ) i.parentNode.insertBefore(i.firstChild, i);
       i.remove();
     }
@@ -2101,7 +2101,7 @@ function Ct(p) {
 }
 function wt(p, t = "ltr") {
   const e = yt(p), i = new DOMParser().parseFromString(ut(p), "text/html");
-  xt(i, e), /class="?Mso|mso-|urn:schemas-microsoft-com/i.test(i.body.innerHTML) && ft(i), vt(i), bt(i), N(i.body, i), Ct(i);
+  xt(i, e), /class="?Mso|mso-|urn:schemas-microsoft-com/i.test(i.body.innerHTML) && ft(i), vt(i), bt(i), Z(i.body, i), Ct(i);
   const s = (l) => {
     var o;
     return l && l.tagName === "P" && !((o = l.textContent) != null && o.trim()) && !l.querySelector("img,table");
@@ -2292,7 +2292,7 @@ class Lt {
     return e + "</tbody></table>";
   }
 }
-async function Ht(p) {
+async function kt(p) {
   const t = p instanceof ArrayBuffer ? p : await p.arrayBuffer(), e = Mt(t), i = new TextDecoder(), s = async (u) => {
     const v = e.get(u);
     return v ? new DOMParser().parseFromString(i.decode(await Q(t, v)), "application/xml") : null;
@@ -2340,7 +2340,7 @@ async function Ht(p) {
   }
   return new Lt(r, d, m).convertBody(n);
 }
-const kt = ["nw", "ne", "sw", "se"], F = ["img-left", "img-right", "img-top", "img-center"], O = {
+const Ht = ["nw", "ne", "sw", "se"], O = ["img-left", "img-right", "img-top", "img-center"], F = {
   "img-left": "tplimgleft",
   "img-right": "tplimgright",
   "img-top": "tplimgtop",
@@ -2352,7 +2352,7 @@ const kt = ["nw", "ne", "sw", "se"], F = ["img-left", "img-right", "img-top", "i
   "img-center": a.tplcenter
 }, At = ".tox,.pop,.tblctx,.imgctx,.selctx,.dlg";
 let E = null, I = null, $ = 0, K = !1;
-function Z() {
+function N() {
   clearTimeout($), I = null, E && E.classList.remove("show");
 }
 function qt(p) {
@@ -2374,14 +2374,14 @@ function Bt() {
   K || (K = !0, document.addEventListener("mouseover", (p) => {
     const t = p.target, e = t.closest ? t.closest("[title],[data-tip]") : null;
     if (!e || !e.closest(At) || e.closest(".earea")) {
-      e !== I && Z();
+      e !== I && N();
       return;
     }
     const i = e.getAttribute("title");
     i && (e.dataset.tip = i, e.removeAttribute("title"), e.getAttribute("aria-label") || e.setAttribute("aria-label", i)), e !== I && qt(e);
   }), document.addEventListener("mouseout", (p) => {
-    I && !I.contains(p.relatedTarget) && Z();
-  }), document.addEventListener("mousedown", Z, !0), addEventListener("scroll", Z, !0));
+    I && !I.contains(p.relatedTarget) && N();
+  }), document.addEventListener("mousedown", N, !0), addEventListener("scroll", N, !0));
 }
 const A = class A {
   constructor(t) {
@@ -2466,7 +2466,7 @@ const A = class A {
     }), this.on(this.ed, "input", () => {
       this.refreshState(), this.onChange(), this.positionTableHandles(), this.positionImageHandles(), this.positionImgPhCtx(), this.positionTplCtx(), this.positionVphCtx(), this.positionVidCtx(), this.positionCodeCtx();
     }), this.on(this.ed, "keydown", (t) => {
-      t.altKey && t.key === "0" && (t.preventDefault(), this.helpDlg()), (t.key === "Delete" || t.key === "Backspace") && this.phActive && (t.preventDefault(), this.removeImgPlaceholder()), (t.key === "Delete" || t.key === "Backspace") && this.vphActive && (t.preventDefault(), this.removeVphPlaceholder()), t.key === "`" && !t.ctrlKey && !t.metaKey && !t.altKey && this.tryCodeTyping(t);
+      t.altKey && t.key === "0" && (t.preventDefault(), this.helpDlg()), (t.key === "Delete" || t.key === "Backspace") && this.phActive && (t.preventDefault(), this.removeImgPlaceholder()), (t.key === "Delete" || t.key === "Backspace") && this.vphActive && (t.preventDefault(), this.removeVphPlaceholder()), t.key === "`" && !t.ctrlKey && !t.metaKey && !t.altKey && this.tryCodeTyping(t), t.key === "Enter" && !t.shiftKey && !t.ctrlKey && !t.metaKey && !t.altKey && this.tryExitBlockquote(t);
     }), this.on(this.ed, "paste", (t) => this.handlePaste(t)), this.on(this.ed, "drop", (t) => {
       var l, o, n, r;
       t.preventDefault();
@@ -2590,7 +2590,7 @@ const A = class A {
     this.ed.focus();
   }
   async importWordFile(t) {
-    const e = await Ht(t);
+    const e = await kt(t);
     this.recordRevision(), this.setContent(e), this.recordRevision();
   }
   restoreDraft() {
@@ -2638,6 +2638,20 @@ const A = class A {
     }
     return null;
   }
+  /** Enter on an empty last line inside a blockquote exits it into a plain paragraph, mirroring how lists exit on an empty item. */
+  tryExitBlockquote(t) {
+    const e = window.getSelection();
+    if (!e || !e.isCollapsed || !e.anchorNode || !this.ed.contains(e.anchorNode)) return;
+    const i = this.closestBlock(e.anchorNode);
+    if (!i || i.tagName === "BLOCKQUOTE" || (i.textContent || "").trim() !== "") return;
+    const s = i.closest("blockquote");
+    if (!s || !this.ed.contains(s) || i !== s.lastElementChild) return;
+    t.preventDefault();
+    const l = document.createElement("p");
+    l.appendChild(document.createElement("br")), s.after(l), i.remove(), s.firstElementChild || s.remove();
+    const o = document.createRange();
+    o.setStart(l, 0), o.collapse(!0), e.removeAllRanges(), e.addRange(o), this.saveSel(), this.onChange();
+  }
   selectedBlocks() {
     const t = window.getSelection();
     if (!t || !t.rangeCount || !this.ed.contains(t.anchorNode)) return [];
@@ -3005,10 +3019,10 @@ const A = class A {
     this.popup(t, (e) => this.menuItems(e, this.blockStyleItems("lineHeight", _)));
   }
   wordSpacingMenu(t) {
-    this.popup(t, (e) => this.menuItems(e, this.blockStyleItems("wordSpacing", V)));
+    this.popup(t, (e) => this.menuItems(e, this.blockStyleItems("wordSpacing", U)));
   }
   letterSpacingMenu(t) {
-    this.popup(t, (e) => this.menuItems(e, this.blockStyleItems("letterSpacing", W)));
+    this.popup(t, (e) => this.menuItems(e, this.blockStyleItems("letterSpacing", V)));
   }
   closestAnchor() {
     const t = window.getSelection();
@@ -3302,8 +3316,8 @@ const A = class A {
         { label: this.t("blocks"), subBuild: (s) => this.menuItems(s, this.blockItems()) },
         { label: this.t("align"), subBuild: (s) => this.menuItems(s, this.alignItems()) },
         { label: this.t("lineheight"), icon: a.lineheight, subBuild: (s) => this.menuItems(s, this.blockStyleItems("lineHeight", _)) },
-        { label: this.t("wordspacing"), icon: a.wordspacing, subBuild: (s) => this.menuItems(s, this.blockStyleItems("wordSpacing", V)) },
-        { label: this.t("letterspacing"), icon: a.letterspacing, subBuild: (s) => this.menuItems(s, this.blockStyleItems("letterSpacing", W)) },
+        { label: this.t("wordspacing"), icon: a.wordspacing, subBuild: (s) => this.menuItems(s, this.blockStyleItems("wordSpacing", U)) },
+        { label: this.t("letterspacing"), icon: a.letterspacing, subBuild: (s) => this.menuItems(s, this.blockStyleItems("letterSpacing", V)) },
         "|",
         { label: this.t("forecolor"), icon: a.palette, subBuild: (s) => this.buildPaletteInto(s, this.foreColor, (l) => this.applyColor("fore", l)) },
         { label: this.t("backcolor"), icon: a.backcolor, subBuild: (s) => this.buildPaletteInto(s, this.backColor, (l) => this.applyColor("back", l)) },
@@ -3481,20 +3495,20 @@ const A = class A {
     this.dialog(
       this.t("tablepropsttl"),
       (C) => {
-        const M = (w, k) => {
+        const M = (w, H) => {
           const L = document.createElement("div");
           L.style.cssText = n;
-          const H = document.createElement("span");
-          H.style.cssText = r, H.textContent = this.t(w), L.append(H, k), C.appendChild(L);
+          const k = document.createElement("span");
+          k.style.cssText = r, k.textContent = this.t(w), L.append(k, H), C.appendChild(L);
         };
         e = document.createElement("input"), e.type = "text", e.style.cssText = c, e.placeholder = "e.g. 600px or 100%", e.value = d, M("tblwidth", e), i = document.createElement("input"), i.type = "number", i.min = "0", i.style.cssText = c, i.value = String(m), M("tblcellpadding", i), s = document.createElement("input"), s.type = "number", s.min = "0", s.style.cssText = c, s.value = String(g), M("tblcellspacing", s), l = document.createElement("input"), l.type = "number", l.min = "0", l.style.cssText = c, l.value = String(u), M("tblborder", l), o = document.createElement("select"), o.style.cssText = c, [
           ["", "alignnone"],
           ["left", "alignleft"],
           ["center", "aligncenter"],
           ["right", "alignright"]
-        ].forEach(([w, k]) => {
+        ].forEach(([w, H]) => {
           const L = document.createElement("option");
-          L.value = w, L.textContent = this.t(k), w === x && (L.selected = !0), o.appendChild(L);
+          L.value = w, L.textContent = this.t(H), w === x && (L.selected = !0), o.appendChild(L);
         }), M("tblalign", o);
       },
       [
@@ -4086,17 +4100,17 @@ const A = class A {
             const w = (L = C.files) == null ? void 0 : L[0];
             if (!w) return;
             x.disabled = !0, x.textContent = this.t("uploading");
-            const k = (H) => {
-              t.value = H, x.disabled = !1, x.textContent = this.t("uploadvideo");
+            const H = (k) => {
+              t.value = k, x.disabled = !1, x.textContent = this.t("uploadvideo");
             };
             if (this.videoUploadHandler)
-              this.videoUploadHandler(w).then(k).catch((H) => {
+              this.videoUploadHandler(w).then(H).catch((k) => {
                 var z;
-                x.disabled = !1, x.textContent = this.t("uploadfailed"), (z = this.onVideoUploadError) == null || z.call(this, H, w);
+                x.disabled = !1, x.textContent = this.t("uploadfailed"), (z = this.onVideoUploadError) == null || z.call(this, k, w);
               });
             else {
-              const H = new FileReader();
-              H.onload = () => k(H.result), H.readAsDataURL(w);
+              const k = new FileReader();
+              k.onload = () => H(k.result), k.readAsDataURL(w);
             }
           }), b.append(t, x, C), t.style.flex = "1", v.appendChild(n("vidsource", b));
           const M = document.createElement("div");
@@ -4238,7 +4252,7 @@ const A = class A {
         const l = document.createElement("div");
         l.className = "dfield";
         const o = document.createElement("label");
-        o.textContent = this.t("codelang"), e = this.dlgSelect(U, (t == null ? void 0 : t.dataset.lang) || "plain"), l.append(o, e.el), i = document.createElement("textarea"), i.className = "code-input", i.spellcheck = !1, i.value = ((n = t == null ? void 0 : t.querySelector("code")) == null ? void 0 : n.textContent) || "", i.placeholder = "const answer = 42;", s.append(l, i), setTimeout(() => i.focus(), 0);
+        o.textContent = this.t("codelang"), e = this.dlgSelect(W, (t == null ? void 0 : t.dataset.lang) || "plain"), l.append(o, e.el), i = document.createElement("textarea"), i.className = "code-input", i.spellcheck = !1, i.value = ((n = t == null ? void 0 : t.querySelector("code")) == null ? void 0 : n.textContent) || "", i.placeholder = "const answer = 42;", s.append(l, i), setTimeout(() => i.focus(), 0);
       },
       [
         { label: this.t("cancel"), action: () => this.closeDlg() },
@@ -4247,7 +4261,7 @@ const A = class A {
           primary: !0,
           action: () => {
             var n;
-            const s = i.value.replace(/\s+$/, ""), l = e.value(), o = ((n = U.find(([r]) => r === l)) == null ? void 0 : n[1]) || l;
+            const s = i.value.replace(/\s+$/, ""), l = e.value(), o = ((n = W.find(([r]) => r === l)) == null ? void 0 : n[1]) || l;
             if (this.closeDlg(), !!s.trim()) {
               if (t) {
                 t.dataset.lang = l, t.setAttribute("data-lang-label", o);
@@ -4320,9 +4334,9 @@ const A = class A {
   }
   buildTemplatePickInto(t, e) {
     const i = document.createElement("div");
-    i.className = "tplpick", F.forEach((s) => {
+    i.className = "tplpick", O.forEach((s) => {
       const l = document.createElement("button");
-      l.type = "button", l.className = "tpltile", l.title = this.t(O[s]), l.innerHTML = this.tplPreviewHTML(s) + `<span class="tpllbl">${this.t(O[s])}</span>`, l.addEventListener("click", () => {
+      l.type = "button", l.className = "tpltile", l.title = this.t(F[s]), l.innerHTML = this.tplPreviewHTML(s) + `<span class="tpllbl">${this.t(F[s])}</span>`, l.addEventListener("click", () => {
         this.closePop(), this.insertTemplate(s), e == null || e();
       }), i.appendChild(l);
     }), t.appendChild(i);
@@ -4341,15 +4355,15 @@ const A = class A {
   }
   renderTplCtxButtons() {
     const t = this.tplCtx, e = this.tplActive;
-    !t || !e || (t.innerHTML = "", F.forEach((i) => {
-      const s = this.ctxBtn(It[i], this.t(O[i]), () => this.setTplLayout(i));
+    !t || !e || (t.innerHTML = "", O.forEach((i) => {
+      const s = this.ctxBtn(It[i], this.t(F[i]), () => this.setTplLayout(i));
       s.classList.toggle("on", e.classList.contains("tpl-" + i)), t.appendChild(s);
     }), t.append(this.ctxSep(), this.ctxBtn(a.trash, this.t("deltemplate"), () => this.removeTemplate())), this.positionTplCtx());
   }
   setTplLayout(t) {
     const e = this.tplActive;
     if (!e) return;
-    F.forEach((l) => e.classList.remove("tpl-" + l)), e.classList.add("tpl-" + t);
+    O.forEach((l) => e.classList.remove("tpl-" + l)), e.classList.add("tpl-" + t);
     const i = e.querySelector(":scope > .tpl-media"), s = e.querySelector(":scope > .tpl-text");
     i && s && (t === "img-center" ? e.appendChild(i) : e.insertBefore(i, s)), this.renderTplCtxButtons(), this.positionImgPhCtx(), this.positionImageHandles(), this.onChange();
   }
@@ -4525,7 +4539,7 @@ const A = class A {
     this.cancelImgHide(), this.imgHandles.forEach((i) => i.remove()), this.imgHandles = [], (t = this.imgCtx) == null || t.remove(), this.imgCtx = null, (e = this.imgActive) == null || e.classList.remove("img-selected"), this.imgActive = null;
   }
   selectImage(t) {
-    this.imgActive !== t && (this.clearImageHandles(), this.imgActive = t, t.classList.add("img-selected"), this.imgHandles = kt.map((e) => {
+    this.imgActive !== t && (this.clearImageHandles(), this.imgActive = t, t.classList.add("img-selected"), this.imgHandles = Ht.map((e) => {
       const i = document.createElement("div");
       return i.className = "img-handle img-handle-" + e, i.dataset.corner = e, i.addEventListener("mousedown", (s) => this.startImageResizeDrag(s, e)), i.addEventListener("mouseenter", () => this.cancelImgHide()), i.addEventListener("mouseleave", () => this.scheduleImgHide()), document.body.appendChild(i), i;
     }), this.imgCtx = this.buildImageCtxToolbar(t), this.positionImageHandles());
@@ -4622,7 +4636,22 @@ const A = class A {
   }
   /* ---------------------------------------------------------- selection bubble toolbar */
   toggleBlock(t) {
-    this.exec("formatBlock", this.currentBlock() === t ? "<p>" : "<" + t + ">");
+    const e = this.currentBlock() === t;
+    this.exec("formatBlock", e ? "<p>" : "<" + t + ">"), t === "blockquote" && e && this.unwrapBlockquote();
+  }
+  /** Some browsers leave the <blockquote> wrapper in place after formatBlock('<p>'); strip it manually if so. */
+  unwrapBlockquote() {
+    const t = window.getSelection();
+    let e = t && this.ed.contains(t.anchorNode) ? t.anchorNode : null;
+    for (; e && e !== this.ed; ) {
+      if (e.nodeType === 1 && e.tagName === "BLOCKQUOTE") {
+        const i = e, s = i.parentNode;
+        for (; i.firstChild; ) s.insertBefore(i.firstChild, i);
+        s.removeChild(i), this.onChange();
+        return;
+      }
+      e = e.parentNode;
+    }
   }
   clearSelToolbar() {
     var t;
@@ -4685,8 +4714,13 @@ const A = class A {
   currentBlock() {
     const t = window.getSelection();
     if (!t || !t.anchorNode || !this.ed.contains(t.anchorNode)) return "p";
-    const e = this.closestBlock(t.anchorNode);
-    return e ? e.tagName.toLowerCase().replace("div", "p") : "p";
+    let e = t.anchorNode;
+    for (; e && e !== this.ed; ) {
+      if (e.nodeType === 1 && e.tagName === "BLOCKQUOTE") return "blockquote";
+      e = e.parentNode;
+    }
+    const i = this.closestBlock(t.anchorNode);
+    return i ? i.tagName.toLowerCase().replace("div", "p") : "p";
   }
   /** Element whose computed font reflects the current caret, falling back to the editor root before any selection lands inside it. */
   fontRefEl() {
@@ -4769,14 +4803,14 @@ A.instanceCounter = 0, A.TBR_COLLAPSE_MAX = 992;
 let J = A;
 export {
   j as BLOCKS,
-  Zt as CHARS,
+  Nt as CHARS,
   ct as COLORS,
   lt as FONTS,
   J as FableEditor,
   et as I18N,
   a as IC,
   ot as SIZES,
-  Nt as TXT,
+  Zt as TXT,
   wt as cleanPastedHTML,
   R as getStrings,
   Tt as normalizeTextPaste