ckeditor5-livewire 1.1.0 → 1.1.2

package/dist/index.mjs

@@ -213,7 +213,7 @@ class H {
     this.items.size === 1 && t !== null && this.register(null, e);
   }
 }
-function D(i, t) {
+function O(i, t) {
   let e = null;
   return (...r) => {
     e && clearTimeout(e), e = setTimeout(() => {
@@ -232,7 +232,7 @@ function S(i, t) {
   const e = Object.entries(i).map(([r, a]) => [r, t(a, r)]);
   return Object.fromEntries(e);
 }
-function v(i, t) {
+function P(i, t) {
   if (i === t)
     return !0;
   const e = Object.keys(i), r = Object.keys(t);
@@ -294,7 +294,7 @@ function J(i) {
 function Q(i) {
   return i.model.document.getRootNames().reduce((e, r) => (e[r] = i.getData({ rootName: r }), e), /* @__PURE__ */ Object.create({}));
 }
-function P(i) {
+function v(i) {
   return ["inline", "classic", "balloon", "decoupled"].includes(i);
 }
 function Z(i) {
@@ -379,7 +379,7 @@ class $ {
     return this.plugins.has(t);
   }
 }
-async function V(i) {
+async function F(i) {
   const t = await import("ckeditor5");
   let e = null;
   const r = i.map(async (a) => {
@@ -405,7 +405,7 @@ async function V(i) {
     hasPremium: !!e
   };
 }
-async function q(i, t) {
+async function V(i, t) {
   const e = [i.ui, i.content];
   return await Promise.all(
     [
@@ -723,12 +723,12 @@ async function et(i, t) {
     return console.error(`Failed to load translation for ${i}/${t}:`, e), null;
   }
 }
-function N(i) {
+function q(i) {
   return S(i, (t) => ({
     dictionary: t
   }));
 }
-function L(i) {
+function M(i) {
   return window.Livewire.all().filter(({ name: t, canonical: e }) => t === "ckeditor5-editable" && e.editorId === i).reduce((t, { canonical: e, el: r }) => ({
     ...t,
     [e.rootName]: {
@@ -737,38 +737,38 @@ function L(i) {
     }
   }), /* @__PURE__ */ Object.create({}));
 }
-function x(i, t) {
+function T(i, t) {
   if (t === "decoupled") {
-    const { element: r } = F(i);
+    const { element: r } = N(i);
     return r;
   }
-  if (P(t))
+  if (v(t))
     return document.getElementById(`${i}_editor`);
-  const e = L(i);
+  const e = M(i);
   return S(e, ({ element: r }) => r);
 }
 function A(i, t) {
   if (t === "decoupled") {
-    const { content: a } = F(i);
+    const { content: a } = N(i);
     if (typeof a == "string")
       return {
         main: a
       };
   }
-  const e = L(i), r = S(e, ({ content: a }) => a);
+  const e = M(i), r = S(e, ({ content: a }) => a);
   return G(r, (a) => typeof a == "string");
 }
-function F(i) {
-  const t = L(i).main;
+function N(i) {
+  const t = M(i).main;
   if (!t)
     throw new Error(`No "main" editable found for editor with ID "${i}".`);
   return t;
 }
-function T(i) {
+function x(i) {
   if (!i || typeof i != "object")
     return i;
   if (Array.isArray(i))
-    return i.map((r) => T(r));
+    return i.map((r) => x(r));
   const t = i;
   if (t.$element && typeof t.$element == "string") {
     const r = document.querySelector(t.$element);
@@ -776,7 +776,7 @@ function T(i) {
   }
   const e = /* @__PURE__ */ Object.create(null);
   for (const [r, a] of Object.entries(i))
-    e[r] = T(a);
+    e[r] = x(a);
   return e;
 }
 function rt(i, t) {
@@ -785,12 +785,12 @@ function rt(i, t) {
     r.setStyle("height", `${t}px`, e.view.document.getRoot());
   });
 }
-const O = Symbol.for("elixir-editor-watchdog");
+const D = Symbol.for("elixir-editor-watchdog");
 async function it(i) {
   const { EditorWatchdog: t } = await import("ckeditor5"), e = new t(i);
   return e.setCreator(async (...r) => {
     const a = await i.create(...r);
-    return a[O] = e, a;
+    return a[D] = e, a;
   }), {
     watchdog: e,
     Constructor: {
@@ -799,7 +799,7 @@ async function it(i) {
   };
 }
 function at(i) {
-  return O in i ? i[O] : null;
+  return D in i ? i[D] : null;
 }
 class y extends H {
   static the = new y();
@@ -813,9 +813,9 @@ class nt extends C {
    * Mounts the context component.
    */
   async mounted() {
-    const { contextId: t, language: e, context: r } = this.canonical, { customTranslations: a, watchdogConfig: n, config: { plugins: s, ...o } } = r, { loadedPlugins: c, hasPremium: u } = await V(s ?? []), h = [
-      ...await q(e, u),
-      N(a || {})
+    const { contextId: t, language: e, context: r } = this.canonical, { customTranslations: a, watchdogConfig: n, config: { plugins: s, ...o } } = r, { loadedPlugins: c, hasPremium: u } = await F(s ?? []), h = [
+      ...await V(e, u),
+      q(a || {})
     ].filter((d) => !j(d));
     this.contextPromise = (async () => {
       const { ContextWatchdog: d, Context: g } = await import("ckeditor5"), p = new d(g, {
@@ -885,7 +885,7 @@ class st extends C {
         const d = s.getData({ rootName: e });
         n && (n.value = d), this.$wire.set("content", d);
       };
-      return s.model.document.on("change:data", D(a, f)), f(), s;
+      return s.model.document.on("change:data", O(a, f)), f(), s;
     });
   }
   /**
@@ -926,17 +926,32 @@ async function ot({
      * Initializes the plugin.
      */
     init() {
-      this.setupTypingContentPush(), this.setupFocusableEventPush(), this.setupContentServerSync(), this.setupLivewireEventListeners();
+      this.setupTypingContentPush(), this.setupFocusableEventPush(), this.setupContentServerSync();
     }
     /**
      * Setups the content sync from Livewire to the editor.
      */
     setupContentServerSync() {
-      this.editor.on("afterCommitSynced", () => {
-        if (!Z(t.element))
+      const { editor: a } = this, { model: n, ui: { focusTracker: s } } = a;
+      let o = null;
+      a.on("afterCommitSynced", () => {
+        const { content: c } = t.canonical, u = this.getEditorRootsValues();
+        if (Z(t.element)) {
+          if (s.isFocused) {
+            P(c, u) || (o = c);
+            return;
+          }
+          P(c, u) || a.setData(c);
+        }
+      }), Livewire.on("set-editor-content", ({ editorId: c, content: u }) => {
+        if (c !== t.canonical.editorId)
           return;
-        const { content: a } = t.canonical, n = this.getEditorRootsValues();
-        v(a, n) || this.editor.setData(a);
+        const l = this.getEditorRootsValues();
+        P(l, u) || a.setData(u);
+      }), n.document.on("change:data", () => {
+        o = null;
+      }), s.on("change:isFocused", () => {
+        !s.isFocused && o !== null && (a.setData(o), o = null);
       });
     }
     /**
@@ -945,12 +960,12 @@ async function ot({
     setupTypingContentPush() {
       const { model: a } = this.editor, { $wire: n } = t, s = () => {
         const o = this.getEditorRootsValues();
-        v(o, t.canonical.content) || (n.set("content", o), n.dispatch("editor-content-changed", {
+        P(o, t.canonical.content) || (n.set("content", o), n.dispatch("editor-content-changed", {
           editorId: t.canonical.editorId,
           content: o
         }));
       };
-      a.document.on("change:data", D(i, s)), this.editor.once("ready", s);
+      a.document.on("change:data", O(i, s)), this.editor.once("ready", s);
     }
     /**
      * Setups the event push for the editor.
@@ -958,7 +973,7 @@ async function ot({
     setupFocusableEventPush() {
       const { ui: a } = this.editor, { $wire: n } = t, s = () => {
         const o = this.getEditorRootsValues();
-        n.set("focused", a.focusTracker.isFocused), v(o, t.canonical.content) || n.set("content", o);
+        n.set("focused", a.focusTracker.isFocused), P(o, t.canonical.content) || n.set("content", o);
       };
       a.focusTracker.on("change:isFocused", s);
     }
@@ -968,17 +983,6 @@ async function ot({
     getEditorRootsValues() {
       return Q(this.editor);
     }
-    /**
-     * Setups Livewire event listeners for external content updates.
-     */
-    setupLivewireEventListeners() {
-      Livewire.on("set-editor-content", ({ editorId: a, content: n }) => {
-        if (a !== t.canonical.editorId)
-          return;
-        const s = this.getEditorRootsValues();
-        v(s, n) || this.editor.setData(n);
-      });
-    }
   };
 }
 async function ct(i) {
@@ -1003,7 +1007,7 @@ async function ct(i) {
      */
     afterInit() {
       const { editor: r } = this, n = r.sourceElement.id.replace(/_editor$/, "");
-      this.input = document.getElementById(`${n}_input`), this.input && (r.model.document.on("change:data", D(i, () => this.sync())), r.once("ready", this.sync), this.form = this.input.closest("form"), this.form?.addEventListener("submit", this.sync));
+      this.input = document.getElementById(`${n}_input`), this.input && (r.model.document.on("change:data", O(i, () => this.sync())), r.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.
@@ -1091,7 +1095,7 @@ class ut extends C {
         this.editorPromise = Promise.resolve(k), w.the.register(e, k);
       });
     }
-    const { loadedPlugins: E, hasPremium: U } = await V(f);
+    const { loadedPlugins: E, hasPremium: U } = await F(f);
     E.push(
       await ot(
         {
@@ -1099,35 +1103,35 @@ class ut extends C {
           component: this
         }
       )
-    ), P(l) && E.push(
+    ), v(l) && E.push(
       await ct(n)
     );
-    const M = [
-      ...await q(s, U),
-      N(u || {})
+    const z = [
+      ...await V(s, U),
+      q(u || {})
     ].filter((m) => !j(m));
     let b = {
       ...c,
       ...A(e, l)
     };
-    P(l) && (b = b.main || "");
-    const z = await (async () => {
-      let m = x(e, l);
+    v(l) && (b = b.main || "");
+    const R = await (async () => {
+      let m = T(e, l);
       if (mt(m, l)) {
-        const R = Object.keys(b);
-        B(m, R) || (m = await lt(e, l, R), b = {
+        const L = Object.keys(b);
+        B(m, L) || (m = await lt(e, l, L), b = {
           ...c,
           ...A(e, l)
         });
       }
       const k = {
-        ...T(d),
+        ...x(d),
         initialData: b,
         licenseKey: h,
         plugins: E,
         language: s,
-        ...M.length && {
-          translations: M
+        ...z.length && {
+          translations: z
         }
       };
       return !p || !(m instanceof HTMLElement) ? g.create(m, k) : (await X({
@@ -1137,7 +1141,7 @@ class ut extends C {
         config: k
       })).editor;
     })();
-    return P(l) && a && rt(z, a), z;
+    return v(l) && a && rt(R, a), R;
   }
 }
 function B(i, t) {
@@ -1146,7 +1150,7 @@ function B(i, t) {
 async function lt(i, t, e) {
   return await Y(
     () => {
-      const r = x(i, t);
+      const r = T(i, t);
       if (!B(r, e))
         throw new Error(
           `It looks like not all required root elements are present yet.
@@ -1157,10 +1161,10 @@ Missing roots: ${e.filter((a) => !r[a]).join(", ")}.`
       return !0;
     },
     { timeOutAfter: 2e3, retryAfter: 100 }
-  ), x(i, t);
+  ), T(i, t);
 }
 function mt(i, t) {
-  return !P(t) && typeof i == "object" && !(i instanceof HTMLElement);
+  return !v(t) && typeof i == "object" && !(i instanceof HTMLElement);
 }
 class dt extends C {
   /**