ckeditor5-phoenix 1.27.2 → 1.28.1

package/dist/index.mjs

@@ -234,7 +234,7 @@ class W {
 function Z(r) {
   return r.replace(/[-_\s]+(.)?/g, (t, e) => e ? e.toUpperCase() : "").replace(/^./, (t) => t.toLowerCase());
 }
-function P(r, t) {
+function A(r, t) {
   let e = null;
   return (...a) => {
     e && clearTimeout(e), e = setTimeout(() => {
@@ -248,13 +248,13 @@ function tt(r) {
   const t = Object.getPrototypeOf(r);
   return t === Object.prototype || t === null;
 }
-function A(r) {
+function P(r) {
   if (Array.isArray(r))
-    return r.map(A);
+    return r.map(P);
   if (tt(r)) {
     const t = /* @__PURE__ */ Object.create(null);
     for (const [e, a] of Object.entries(r))
-      t[Z(e)] = A(a);
+      t[Z(e)] = P(a);
     return t;
   }
   return r;
@@ -341,7 +341,7 @@ class x {
     this._beforeDestroyCallbacks = [];
   }
 }
-function O(r) {
+function D(r) {
   return {
     /**
      * The mounted lifecycle callback for the LiveView hook object.
@@ -416,10 +416,10 @@ function it(r, t) {
       return !1;
   return !0;
 }
-function st() {
+function ot() {
   return Math.random().toString(36).substring(2);
 }
-function ot(r, {
+function st(r, {
   timeOutAfter: t = 500,
   retryAfter: e = 100
 } = {}) {
@@ -449,13 +449,17 @@ function ct(r, t, e) {
       /* v8 ignore next 1 */
       ...e.roots?.[o],
       ...o === "main" ? e.root : {},
-      /* v8 ignore next 6 */
+      /* v8 ignore start */
       ...o in t ? {
         initialData: t[o].initialValue,
-        ...!a && { element: t[o].content }
+        modelElement: t[o].modelElement || "$root",
+        ...!a && {
+          element: t[o].content
+        }
       } : {}
+      /* v8 ignore end */
     }
-  }), Object.create(e.roots || {})), s = {
+  }), { ...e.roots || {} }), s = {
     ...e,
     roots: i,
     ...a && {
@@ -492,7 +496,7 @@ function ut(r) {
 }
 const R = /* @__PURE__ */ Symbol.for("context-editor-watchdog");
 async function lt({ context: r, creator: t, config: e }) {
-  const a = st();
+  const a = ot();
   await r.add({
     creator: t.create.bind(t),
     id: a,
@@ -520,7 +524,7 @@ function q(r) {
 function N(r) {
   return ["inline", "classic", "balloon", "decoupled"].includes(r);
 }
-async function ht(r) {
+async function mt(r) {
   const t = await import("ckeditor5"), a = {
     inline: t.InlineEditor,
     balloon: t.BalloonEditor,
@@ -532,8 +536,8 @@ async function ht(r) {
     throw new Error(`Unsupported editor type: ${r}`);
   return a;
 }
-class $ {
-  static the = new $();
+class U {
+  static the = new U();
   /**
    * Map of registered custom plugins.
    */
@@ -596,7 +600,7 @@ async function K(r) {
   const t = await import("ckeditor5");
   let e = null;
   const a = r.map(async (n) => {
-    const i = await $.the.get(n);
+    const i = await U.the.get(n);
     if (i)
       return i;
     const { [n]: s } = t;
@@ -631,12 +635,12 @@ async function Y(r, t) {
 async function B(r, t) {
   return await Promise.all(
     t.filter((e) => e !== "en").map(async (e) => {
-      const a = await mt(r, e);
+      const a = await ht(r, e);
       return a?.default ?? a;
     }).filter(Boolean)
   );
 }
-async function mt(r, t) {
+async function ht(r, t) {
   try {
     if (r === "ckeditor5")
       switch (t) {
@@ -948,29 +952,35 @@ function G(r) {
       "[data-cke-editable-root-name]:not([data-cke-editor-id])"
     ].join(", ")
   ), e = Array.from(t).reduce((c, o) => {
-    const u = o.getAttribute("data-cke-editable-root-name"), l = o.getAttribute("data-cke-editable-initial-value") || "", d = o.querySelector("[data-cke-editable-content]");
-    return !u || !d ? c : {
+    const u = o.getAttribute("data-cke-editable-root-name"), d = o.getAttribute("data-cke-editable-root-model-element-name") || null, l = o.getAttribute("data-cke-editable-initial-value") || "", p = o.querySelector("[data-cke-editable-content]");
+    return !u || !p ? c : {
       ...c,
       [u]: {
-        content: d,
-        initialValue: l
+        content: p,
+        initialValue: l,
+        modelElement: d
       }
     };
-  }, /* @__PURE__ */ Object.create({})), a = document.querySelector(`[phx-hook="CKEditor5"][id="${r}"]`);
+  }, /* @__PURE__ */ Object.create(null)), a = document.querySelector(`[phx-hook="CKEditor5"][id="${r}"]`);
   if (!a)
     return e;
-  const n = a.getAttribute("data-cke-initial-value") || "", i = a.querySelector(`#${r}_editor `), s = e.main;
+  const n = a.getAttribute("data-cke-root-model-element-name"), i = a.getAttribute("data-cke-initial-value") || "";
+  if (e.main)
+    return {
+      ...e,
+      main: {
+        ...e.main,
+        modelElement: e.main.modelElement || n,
+        initialValue: e.main.initialValue || i
+      }
+    };
+  const s = a.querySelector(`#${r}_editor `);
   return s ? {
     ...e,
     main: {
-      ...s,
-      initialValue: s.initialValue || n
-    }
-  } : i ? {
-    ...e,
-    main: {
-      content: i,
-      initialValue: n
+      content: s,
+      initialValue: i,
+      modelElement: a.getAttribute("data-cke-root-model-element-name") || "$root"
     }
   } : e;
 }
@@ -988,7 +998,7 @@ function pt(r) {
     type: e,
     license: n,
     watchdog: i,
-    config: A(a),
+    config: P(a),
     customTranslations: s.customTranslations || s.custom_translations
   };
 }
@@ -1046,19 +1056,19 @@ async function gt(r, t) {
     return n[V] = a, n;
   }), a;
 }
-function yt(r) {
+function bt(r) {
   return V in r ? r[V] : null;
 }
-class y extends W {
-  static the = new y();
+class b extends W {
+  static the = new b();
 }
-function bt(r) {
+function yt(r) {
   const t = r.getAttribute("data-cke-context");
   if (!t)
     throw new Error('CKEditor5 hook requires a "data-cke-context" attribute on the element.');
   const { config: e, ...a } = JSON.parse(t);
   return {
-    config: A(e),
+    config: P(e),
     customTranslations: a.customTranslations || a.custom_translations,
     watchdogConfig: a.watchdogConfig || a.watchdog_config
   };
@@ -1074,7 +1084,7 @@ class kt extends x {
   get attrs() {
     const t = (a) => this.el.getAttribute(a) || null, e = {
       id: this.el.id,
-      config: bt(this.el),
+      config: yt(this.el),
       language: {
         ui: t("data-cke-language") || "en",
         content: t("data-cke-content-language") || "en"
@@ -1091,29 +1101,29 @@ class kt extends x {
    * Mounts the context component.
    */
   async mounted() {
-    const { id: t, language: e } = this.attrs, { customTranslations: a, watchdogConfig: n, config: { plugins: i, ...s } } = this.attrs.config, { loadedPlugins: c, hasPremium: o } = await K(i ?? []), l = [
+    const { id: t, language: e } = this.attrs, { customTranslations: a, watchdogConfig: n, config: { plugins: i, ...s } } = this.attrs.config, { loadedPlugins: c, hasPremium: o } = await K(i ?? []), d = [
       ...await Y(e, o),
       J(a?.dictionary || {})
     ].filter((m) => !L(m));
-    let d = T(s);
-    d = I([...l].reverse(), e.ui, d), this.contextPromise = (async () => {
+    let l = T(s);
+    l = I([...d].reverse(), e.ui, l), this.contextPromise = (async () => {
       const { ContextWatchdog: m, Context: k } = await import("ckeditor5"), g = new m(k, {
         crashNumberLimit: 10,
         ...n
       });
       return await g.create({
-        ...d,
+        ...l,
         language: e,
         plugins: c,
-        ...l.length && {
-          translations: l
+        ...d.length && {
+          translations: d
         }
       }), g.on("itemError", (...E) => {
         console.error("Context item error:", ...E);
       }), g;
     })();
-    const f = await this.contextPromise;
-    this.isBeingDestroyed() || y.the.register(t, f);
+    const p = await this.contextPromise;
+    this.isBeingDestroyed() || b.the.register(t, p);
   }
   /**
    * Destroys the context component. Unmounts root from the editor.
@@ -1124,7 +1134,7 @@ class kt extends x {
     try {
       await (await this.contextPromise)?.destroy();
     } finally {
-      this.contextPromise = null, y.the.hasItem(t) && y.the.unregister(t);
+      this.contextPromise = null, b.the.hasItem(t) && b.the.unregister(t);
     }
   }
 }
@@ -1142,10 +1152,10 @@ function vt(r) {
 }
 async function Ct(r) {
   const t = vt(r);
-  return t ? y.the.waitFor(t.id) : null;
+  return t ? b.the.waitFor(t.id) : null;
 }
-const Pt = O(kt);
-function At(r, t) {
+const At = D(kt);
+function Pt(r, t) {
   const e = /* @__PURE__ */ new Set();
   return (a) => {
     let n = !1;
@@ -1257,7 +1267,7 @@ async function xt({
      */
     afterInit() {
       const { editor: n } = this;
-      this.input = document.getElementById(`${r}_input`), this.input && (n.model.document.on("change:data", P(t, () => this.sync())), n.once("ready", this.sync), this.form = this.input.closest("form"), this.form?.addEventListener("submit", this.sync));
+      this.input = document.getElementById(`${r}_input`), this.input && (n.model.document.on("change:data", A(t, () => this.sync())), n.once("ready", this.sync), this.form = this.input.closest("form"), this.form?.addEventListener("submit", this.sync));
     }
     /**
      * Synchronizes the editor's content with the input field.
@@ -1274,8 +1284,8 @@ async function xt({
     }
   };
 }
-const U = /* @__PURE__ */ Symbol("suppress-phoenix-sync");
-async function Ot(r) {
+const $ = /* @__PURE__ */ Symbol("suppress-phoenix-sync");
+async function Dt(r) {
   const { Plugin: t } = await import("ckeditor5"), { editorId: e, saveDebounceMs: a, events: n, pushEvent: i, handleEvent: s } = r;
   return class extends t {
     /**
@@ -1294,8 +1304,8 @@ async function Ot(r) {
           editorId: e,
           data: S(o)
         });
-      }), s("ckeditor5:set-data", ({ editorId: u, data: l }) => {
-        (rt(u) || u === e) && o.setData(l);
+      }), s("ckeditor5:set-data", ({ editorId: u, data: d }) => {
+        (rt(u) || u === e) && o.setData(d);
       });
     }
     /**
@@ -1303,9 +1313,9 @@ async function Ot(r) {
      */
     setupTypingContentPush() {
       const { editor: o } = this;
-      let u = null, l = !1;
-      const d = () => {
-        if (l)
+      let u = null, d = !1;
+      const l = () => {
+        if (d)
           return;
         const m = S(o);
         (!u || !it(u, m)) && (i(
@@ -1315,24 +1325,24 @@ async function Ot(r) {
             data: m
           }
         ), u = m);
-      }, f = P(a, d);
-      o.model.document.on("change:data", P(10, (m) => {
-        if (Dt(m)) {
+      }, p = A(a, l);
+      o.model.document.on("change:data", A(10, (m) => {
+        if (Ot(m)) {
           u = null;
           return;
         }
-        o.ui.focusTracker.isFocused ? f() : d();
-      })), o.once("ready", d), o.once("destroy", () => {
-        l = !0;
+        o.ui.focusTracker.isFocused ? p() : l();
+      })), o.once("ready", l), o.once("destroy", () => {
+        d = !0;
       });
     }
     /**
      * Setups the event push for the editor.
      */
     setupEventPush(o) {
-      const { editor: u } = this, l = () => {
-        const { isFocused: d } = u.ui.focusTracker;
-        (d ? "focus" : "blur") === o && i(
+      const { editor: u } = this, d = () => {
+        const { isFocused: l } = u.ui.focusTracker;
+        (l ? "focus" : "blur") === o && i(
           `ckeditor5:${o}`,
           {
             editorId: e,
@@ -1340,21 +1350,21 @@ async function Ot(r) {
           }
         );
       };
-      u.ui.focusTracker.on("change:isFocused", l);
+      u.ui.focusTracker.on("change:isFocused", d);
     }
   };
 }
 function S(r) {
-  return r.model.document.getRootNames().reduce((e, a) => (e[a] = r.getData({ rootName: a }), e), /* @__PURE__ */ Object.create({}));
+  return r.model.document.getRootNames().reduce((e, a) => (e[a] = r.getData({ rootName: a }), e), /* @__PURE__ */ Object.create(null));
 }
-function Dt(r) {
-  const t = r[U];
-  return delete r[U], !!t;
+function Ot(r) {
+  const t = r[$];
+  return delete r[$], !!t;
 }
 function Nt(r) {
   let t = !1;
   const e = (a) => {
-    t || (a[U] = !0);
+    t || (a[$] = !0);
   };
   return r.model.document.once("change:data", e, { priority: "highest" }), () => {
     t = !0, r.model.document.off("change:data", e);
@@ -1453,7 +1463,7 @@ class X {
    * Registers cleanup via onBeforeDestroy.
    */
   setupSyncHandlers(t, e) {
-    this.attrsUpdater = At(t, e), this.attrsUpdater(this.attrs.rootAttributes);
+    this.attrsUpdater = Pt(t, e), this.attrsUpdater(this.attrs.rootAttributes);
     const a = () => {
       this.pendingValue = null;
     }, n = () => {
@@ -1538,7 +1548,7 @@ class St extends x {
       }));
       this.onBeforeDestroy(async () => {
         h.the.unregister(t), a();
-        const n = dt(e), i = yt(e);
+        const n = dt(e), i = bt(e);
         n ? n.state !== "unavailable" && await n.context.remove(n.editorContextId) : i ? await i.destroy() : await e.destroy();
       }), h.the.register(t, e);
     } catch (e) {
@@ -1571,16 +1581,16 @@ class St extends x {
       saveDebounceMs: s,
       language: c,
       watchdog: o
-    } = this.attrs, { customTranslations: u, type: l, license: d, config: { plugins: f, ...m } } = t, k = await ht(l), g = await (a ? y.the.waitFor(a) : Ct(this.el)), E = async () => {
-      const { loadedPlugins: p, hasPremium: v } = await K(f);
-      N(l) && p.push(
+    } = this.attrs, { customTranslations: u, type: d, license: l, config: { plugins: p, ...m } } = t, k = await mt(d), g = await (a ? b.the.waitFor(a) : Ct(this.el)), E = async () => {
+      const { loadedPlugins: f, hasPremium: v } = await K(p);
+      N(d) && f.push(
         await xt({
           editorId: e,
           saveDebounceMs: s
         })
-      ), p.push(
+      ), f.push(
         ...await Promise.all([
-          Ot(
+          Dt(
             {
               editorId: e,
               saveDebounceMs: s,
@@ -1592,41 +1602,41 @@ class St extends x {
           Tt()
         ])
       );
-      const b = [
+      const y = [
         ...await Y(c, v),
         J(u?.dictionary || {})
       ].filter((z) => !L(z));
       let C = G(e);
-      const D = Object.keys(C);
-      N(l) && D.push("main"), Q(C, D) || (C = await Rt(e, D));
+      const O = Object.keys(C);
+      N(d) && O.push("main"), Q(C, O) || (C = await Rt(e, O));
       let w = {
         ...m,
-        licenseKey: d.key,
-        plugins: p,
+        licenseKey: l.key,
+        plugins: f,
         language: c,
-        ...b.length && {
-          translations: b
+        ...y.length && {
+          translations: y
         }
       };
-      w = T(w), w = I([...b].reverse(), c.ui, w), w = ct(k, C, w);
+      w = T(w), w = I([...y].reverse(), c.ui, w), w = ct(k, C, w);
       const _ = await (async () => g ? (await lt({
         context: g,
         creator: k,
         config: w
       })).editor : k.create(w))();
-      return N(l) && n && wt(_, n), _;
+      return N(d) && n && wt(_, n), _;
     };
     if (o && !g) {
-      const p = await gt(E, t.watchdog);
-      return p.on("error", (v, { causesRestart: M }) => {
+      const f = await gt(E, t.watchdog);
+      return f.on("error", (v, { causesRestart: M }) => {
         if (M) {
-          const b = h.the.getItem(e);
-          b && (ut(b), h.the.unregister(e));
+          const y = h.the.getItem(e);
+          y && (ut(y), h.the.unregister(e));
         }
-      }), p.on("restart", () => {
-        const v = p.editor;
+      }), f.on("restart", () => {
+        const v = f.editor;
         h.the.register(e, v);
-      }), await p.create({}), p.editor;
+      }), await f.create({}), f.editor;
     }
     return E();
   }
@@ -1635,7 +1645,7 @@ function Q(r, t) {
   return t.every((e) => r[e]);
 }
 async function Rt(r, t) {
-  return ot(
+  return st(
     () => {
       const e = G(r);
       if (!Q(e, t))
@@ -1650,8 +1660,8 @@ Missing roots: ${t.filter((a) => !e[a]).join(", ")}.`
     { timeOutAfter: 2e3, retryAfter: 100 }
   );
 }
-const Vt = O(St);
-class Ut extends x {
+const Vt = D(St);
+class $t extends x {
   /**
    * The sentinel instance responsible for tracking and updating root values and attributes.
    */
@@ -1664,6 +1674,7 @@ class Ut extends x {
       editableId: this.el.getAttribute("id"),
       editorId: this.el.getAttribute("data-cke-editor-id") || null,
       rootName: this.el.getAttribute("data-cke-editable-root-name"),
+      modelElement: this.el.getAttribute("data-cke-editable-root-model-element-name") || null,
       initialValue: this.el.getAttribute("data-cke-editable-initial-value") || ""
     };
     return Object.defineProperty(this, "attrs", {
@@ -1677,37 +1688,38 @@ class Ut extends x {
    * Mounts the editable component.
    */
   mounted() {
-    const { editableId: t, editorId: e, rootName: a, initialValue: n } = this.attrs, i = h.the.mountEffect(e, (s) => {
-      const c = this.el.querySelector("[data-cke-editable-content]");
+    const { editableId: t, editorId: e, rootName: a, initialValue: n, modelElement: i } = this.attrs, s = h.the.mountEffect(e, (c) => {
+      const o = this.el.querySelector("[data-cke-editable-content]");
       if (this.isBeingDestroyed())
         return;
-      const o = this.el.querySelector(`#${t}_input`);
-      if (q(s) && !s.model.document.getRoot(a)) {
-        const { ui: l, editing: d } = s;
-        s.addRoot(a, {
+      const u = this.el.querySelector(`#${t}_input`);
+      if (q(c) && !c.model.document.getRoot(a)) {
+        const { ui: l, editing: p } = c;
+        c.addRoot(a, {
           isUndoable: !1,
-          initialData: n
+          initialData: n,
+          modelElement: i || "$root"
         });
-        const f = l.view.createEditable(a, c);
-        l.addEditable(f), d.view.forceRender();
+        const m = l.view.createEditable(a, o);
+        l.addEditable(m), p.view.forceRender();
       }
       this.sentinel = new X({
         el: this.el,
-        editor: s,
+        editor: c,
         rootName: a,
         valueAttrName: "data-cke-editable-initial-value",
         rootAttrsAttrName: "data-cke-editable-root-attrs"
       });
-      const u = o ? Mt(o, s, a) : null;
+      const d = u ? Mt(u, c, a) : null;
       return () => {
-        if (u?.(), this.sentinel?.destroy(), this.sentinel = null, s.state !== "destroyed") {
-          const l = s.model.document.getRoot(a);
-          l && q(s) && (s.ui.view.editables[a] && s.detachEditable(l), l.isAttached() && s.detachRoot(a, !1));
+        if (d?.(), this.sentinel?.destroy(), this.sentinel = null, c.state !== "destroyed") {
+          const l = c.model.document.getRoot(a);
+          l && q(c) && (c.ui.view.editables[a] && c.detachEditable(l), l.isAttached() && c.detachRoot(a, !1));
         }
       };
     });
     this.onBeforeDestroy(() => {
-      this.el.style.display = "none", i();
+      this.el.style.display = "none", s();
     });
   }
   /**
@@ -1717,11 +1729,11 @@ class Ut extends x {
     this.sentinel?.updated();
   }
 }
-const $t = O(Ut);
+const Ut = D($t);
 function Mt(r, t, e) {
   const a = () => {
     r.value = t.getData({ rootName: e });
-  }, n = P(200, a);
+  }, n = A(200, a);
   return t.model.document.on("change:data", n), a(), () => {
     t.model.document.off("change:data", n);
   };
@@ -1773,18 +1785,18 @@ function zt(r) {
       return null;
   }
 }
-const jt = O(_t), Ft = {
+const jt = D(_t), Ft = {
   CKEditor5: Vt,
-  CKEditable: $t,
+  CKEditable: Ut,
   CKUIPart: jt,
-  CKContext: Pt
+  CKContext: At
 };
 export {
-  y as ContextsRegistry,
-  $ as CustomEditorPluginsRegistry,
+  b as ContextsRegistry,
+  U as CustomEditorPluginsRegistry,
   h as EditorsRegistry,
   Ft as Hooks,
   dt as unwrapEditorContext,
-  yt as unwrapEditorWatchdog
+  bt as unwrapEditorWatchdog
 };
 //# sourceMappingURL=index.mjs.map