ckeditor5-livewire 1.2.10 → 1.3.0

package/dist/index.mjs

@@ -1,4 +1,4 @@
-class C {
+class P {
   constructor(t) {
     this.livewireComponent = t;
   }
@@ -31,7 +31,7 @@ class C {
     return ["destroyed", "destroying"].includes(this.state);
   }
 }
-function U(i, t) {
+function _(i, t) {
   const e = /* @__PURE__ */ new Map();
   window.Livewire?.hook("component.init", async ({ component: r, cleanup: n }) => {
     if (r.name !== i)
@@ -47,7 +47,7 @@ function U(i, t) {
     });
   });
 }
-class H {
+class L {
   /**
    * Map of registered items.
    */
@@ -221,18 +221,18 @@ function D(i, t) {
     }, i);
   };
 }
-function _(i, t) {
+function K(i, t) {
   const e = Object.entries(i).filter(([r, n]) => t(n, r));
   return Object.fromEntries(e);
 }
-function W(i) {
+function A(i) {
   return Object.keys(i).length === 0 && i.constructor === Object;
 }
 function O(i, t) {
   const e = Object.entries(i).map(([r, n]) => [r, t(n, r)]);
   return Object.fromEntries(e);
 }
-function P(i, t) {
+function b(i, t) {
   if (i === t)
     return !0;
   const e = Object.keys(i), r = Object.keys(t);
@@ -243,10 +243,10 @@ function P(i, t) {
       return !1;
   return !0;
 }
-function K() {
+function G() {
   return Math.random().toString(36).substring(2);
 }
-function G(i, {
+function Y(i, {
   timeOutAfter: t = 500,
   retryAfter: e = 100
 } = {}) {
@@ -266,9 +266,9 @@ function G(i, {
     c();
   });
 }
-const I = Symbol.for("context-editor-watchdog");
-async function Y({ element: i, context: t, creator: e, config: r }) {
-  const n = K();
+const T = Symbol.for("context-editor-watchdog");
+async function X({ element: i, context: t, creator: e, config: r }) {
+  const n = G();
   await t.add({
     creator: (c, u) => e.create(c, u),
     id: n,
@@ -281,23 +281,23 @@ async function Y({ element: i, context: t, creator: e, config: r }) {
     editorContextId: n,
     context: t
   };
-  a[I] = s;
+  a[T] = s;
   const o = t.destroy.bind(t);
   return t.destroy = async () => (s.state = "unavailable", o()), {
     ...s,
     editor: a
   };
 }
-function X(i) {
-  return I in i ? i[I] : null;
-}
 function J(i) {
+  return T in i ? i[T] : null;
+}
+function Q(i) {
   return i.model.document.getRootNames().reduce((e, r) => (e[r] = i.getData({ rootName: r }), e), /* @__PURE__ */ Object.create({}));
 }
-function v(i) {
+function C(i) {
   return ["inline", "classic", "balloon", "decoupled"].includes(i);
 }
-function Q(i) {
+function W(i) {
   let t = i;
   for (; t; ) {
     for (const e of t.attributes)
@@ -379,7 +379,7 @@ class S {
     return this.plugins.has(t);
   }
 }
-async function A(i) {
+async function F(i) {
   const t = await import("ckeditor5");
   let e = null;
   const r = i.map(async (n) => {
@@ -728,7 +728,7 @@ function j(i) {
     dictionary: t
   }));
 }
-function F(i) {
+function N(i) {
   const t = q(i);
   return O(t, ({ element: e }) => e);
 }
@@ -754,15 +754,15 @@ function q(i) {
     }
   } : t;
 }
-function L(i) {
+function z(i) {
   const t = q(i), e = O(t, ({ content: r }) => r);
-  return _(e, (r) => typeof r == "string");
+  return K(e, (r) => typeof r == "string");
 }
-function x(i) {
+function I(i) {
   if (!i || typeof i != "object")
     return i;
   if (Array.isArray(i))
-    return i.map((r) => x(r));
+    return i.map((r) => I(r));
   const t = i;
   if (t.$element && typeof t.$element == "string") {
     const r = document.querySelector(t.$element);
@@ -770,7 +770,7 @@ function x(i) {
   }
   const e = /* @__PURE__ */ Object.create(null);
   for (const [r, n] of Object.entries(i))
-    e[r] = x(n);
+    e[r] = I(n);
   return e;
 }
 function et(i, t) {
@@ -779,12 +779,12 @@ function et(i, t) {
     r.setStyle("height", `${t}px`, e.view.document.getRoot());
   });
 }
-const T = Symbol.for("elixir-editor-watchdog");
+const x = Symbol.for("elixir-editor-watchdog");
 async function rt(i) {
   const { EditorWatchdog: t } = await import("ckeditor5"), e = new t(i);
   return e.setCreator(async (...r) => {
     const n = await i.create(...r);
-    return n[T] = e, n;
+    return n[x] = e, n;
   }), {
     watchdog: e,
     Constructor: {
@@ -793,12 +793,12 @@ async function rt(i) {
   };
 }
 function it(i) {
-  return T in i ? i[T] : null;
+  return x in i ? i[x] : null;
 }
-class y extends H {
-  static the = new y();
+class h extends L {
+  static the = new h();
 }
-class nt extends C {
+class nt extends P {
   /**
    * The promise that resolves to the context instance.
    */
@@ -807,28 +807,28 @@ class nt extends C {
    * Mounts the context component.
    */
   async mounted() {
-    const { contextId: t, language: e, context: r } = this.canonical, { customTranslations: n, watchdogConfig: a, config: { plugins: s, ...o } } = r, { loadedPlugins: c, hasPremium: u } = await A(s ?? []), h = [
+    const { contextId: t, language: e, context: r } = this.canonical, { customTranslations: n, watchdogConfig: a, config: { plugins: s, ...o } } = r, { loadedPlugins: c, hasPremium: u } = await F(s ?? []), k = [
       ...await V(e, u),
       j(n || {})
-    ].filter((d) => !W(d));
+    ].filter((f) => !A(f));
     this.contextPromise = (async () => {
-      const { ContextWatchdog: d, Context: g } = await import("ckeditor5"), p = new d(g, {
+      const { ContextWatchdog: f, Context: p } = await import("ckeditor5"), w = new f(p, {
         crashNumberLimit: 10,
         ...a
       });
-      return await p.create({
+      return await w.create({
         ...o,
         language: e,
         plugins: c,
-        ...h.length && {
-          translations: h
+        ...k.length && {
+          translations: k
         }
-      }), p.on("itemError", (...E) => {
-        console.error("Context item error:", ...E);
-      }), p;
+      }), w.on("itemError", (...g) => {
+        console.error("Context item error:", ...g);
+      }), w;
     })();
-    const f = await this.contextPromise;
-    this.isBeingDestroyed() || y.the.register(t, f);
+    const v = await this.contextPromise;
+    this.isBeingDestroyed() || h.the.register(t, v);
   }
   /**
    * Destroys the context component. Unmounts root from the editor.
@@ -839,59 +839,96 @@ class nt extends C {
     try {
       await (await this.contextPromise)?.destroy();
     } finally {
-      this.contextPromise = null, y.the.hasItem(t) && y.the.unregister(t);
+      this.contextPromise = null, h.the.hasItem(t) && h.the.unregister(t);
     }
   }
 }
-class w extends H {
-  static the = new w();
+class m extends L {
+  static the = new m();
 }
-class at extends C {
+class at extends P {
   /**
    * The promise that resolves when the editable is mounted.
    */
   editorPromise = null;
+  /**
+   * Pending content to apply when the editor loses focus.
+   */
+  pendingContent = null;
   /**
    * Mounts the editable component.
    */
   mounted() {
-    const { editorId: t, rootName: e, content: r, saveDebounceMs: n } = this.canonical, a = this.element.querySelector("input");
-    this.editorPromise = w.the.execute(t, (s) => {
+    const { editorId: t, rootName: e, content: r } = this.canonical;
+    this.editorPromise = m.the.execute(t, (n) => {
       if (this.isBeingDestroyed())
         return null;
-      const { ui: o, editing: c, model: u } = s;
-      if (u.document.getRoot(e)) {
+      const { ui: a, editing: s, model: o } = n;
+      if (o.document.getRoot(e)) {
         if (r !== null) {
-          const d = s.getData({ rootName: e });
-          d && d !== r && s.setData({
+          const c = n.getData({ rootName: e });
+          c && c !== r && n.setData({
             [e]: r
           });
         }
-        return s;
+      } else {
+        n.addRoot(e, {
+          isUndoable: !1,
+          ...r !== null && {
+            data: r
+          }
+        });
+        const c = this.element.querySelector("[data-cke-editable-content]"), u = a.view.createEditable(e, c);
+        a.addEditable(u), s.view.forceRender();
       }
-      s.addRoot(e, {
-        isUndoable: !1,
-        ...r !== null && {
-          data: r
-        }
-      });
-      const m = this.element.querySelector("[data-cke-editable-content]"), h = o.view.createEditable(e, m);
-      o.addEditable(h), c.view.forceRender();
-      const f = () => {
-        const d = s.getData({ rootName: e });
-        a && (a.value = d), this.$wire.set("content", d);
-      };
-      return s.model.document.on("change:data", D(n, f)), f(), s;
+      return this.syncTypingContentPush(n), this.setupPendingReceivedContentHandlers(n), n;
+    });
+  }
+  /**
+   * Setups the content sync from the editor to Livewire on user input with debounce.
+   */
+  syncTypingContentPush(t) {
+    const { rootName: e, saveDebounceMs: r } = this.canonical, n = this.element.querySelector("input"), a = () => {
+      const s = t.getData({ rootName: e });
+      n && (n.value = s), this.$wire.set("content", s);
+    };
+    t.model.document.on("change:data", D(r, a)), a();
+  }
+  /**
+   * Sets up handlers that manage pending incoming content (clears pending
+   * content on user edits and applies pending content on blur).
+   */
+  setupPendingReceivedContentHandlers(t) {
+    const { ui: e, model: r } = t, { rootName: n } = this.canonical;
+    r.document.on("change:data", () => {
+      this.pendingContent = null;
+    }), e.focusTracker.on("change:isFocused", () => {
+      !e.focusTracker.isFocused && this.pendingContent !== null && (t.setData({
+        [n]: this.pendingContent
+      }), this.pendingContent = null);
     });
   }
+  /**
+   * Applies canonical content to the editor while respecting focus/pending state.
+   */
+  applyCanonicalContentToEditor(t) {
+    if (!W(this.element))
+      return;
+    const { content: e, rootName: r } = this.canonical, { ui: n } = t;
+    if (t.getData({ rootName: r }) !== (e ?? "")) {
+      if (n.focusTracker.isFocused) {
+        this.pendingContent = e ?? "";
+        return;
+      }
+      t.setData({ [r]: e ?? "" });
+    }
+  }
   /**
    * Called when the component is updated by Livewire.
    */
   async afterCommitSynced() {
-    const t = await this.editorPromise, { content: e, rootName: r } = this.canonical;
-    t.getData({ rootName: r }) !== e && t.setData({
-      [r]: e ?? ""
-    });
+    const t = await this.editorPromise;
+    this.applyCanonicalContentToEditor(t);
   }
   /**
    * Destroys the editable component. Unmounts root from the editor.
@@ -922,41 +959,49 @@ async function st({
      * Initializes the plugin.
      */
     init() {
-      this.setupTypingContentPush(), this.setupFocusableEventPush(), this.setupContentServerSync();
+      this.setupTypingContentPush(), this.setupFocusableEventPush(), this.setupAfterCommitHandler(), this.setupSetEditorContentHandler();
     }
     /**
-     * Setups the content sync from Livewire to the editor.
+     * Setups handler that updates the editor content after Livewire changes attributes
+     * on the component and commits the changes, but only if the editor is not focused to prevent
+     * disrupting the user while editing.
      */
-    setupContentServerSync() {
+    setupAfterCommitHandler() {
       const { editor: n } = this, { model: a, ui: { focusTracker: s } } = n;
       let o = null;
       n.on("afterCommitSynced", () => {
+        if (!W(t.element))
+          return;
         const { content: c } = t.canonical, u = this.getEditorRootsValues();
-        if (Q(t.element)) {
-          if (s.isFocused) {
-            P(c, u) || (o = c);
-            return;
-          }
-          P(c, u) || n.setData(c);
-        }
-      }), Livewire.on("set-editor-content", ({ editorId: c, content: u }) => {
-        if (c !== t.canonical.editorId)
+        if (s.isFocused) {
+          b(c, u) || (o = c);
           return;
-        const m = this.getEditorRootsValues();
-        P(m, u) || n.setData(u);
+        }
+        b(c, u) || n.setData(c);
       }), a.document.on("change:data", () => {
         o = null;
       }), s.on("change:isFocused", () => {
         !s.isFocused && o !== null && (n.setData(o), o = null);
       });
     }
+    /**
+     * Setups the content sync from Livewire to the editor when Livewire emits an event.
+     */
+    setupSetEditorContentHandler() {
+      Livewire.on("set-editor-content", ({ editorId: n, content: a }) => {
+        if (n !== t.canonical.editorId)
+          return;
+        const s = this.getEditorRootsValues();
+        b(s, a) || this.editor.setData(a);
+      });
+    }
     /**
      * Setups the content push event for the editor.
      */
     setupTypingContentPush() {
       const { model: n } = this.editor, { $wire: a } = t, s = () => {
         const o = this.getEditorRootsValues();
-        P(o, t.canonical.content ?? {}) || (a.set("content", o), a.dispatch("editor-content-changed", {
+        b(o, t.canonical.content ?? {}) || (a.set("content", o), a.dispatch("editor-content-changed", {
           editorId: t.canonical.editorId,
           content: o
         }));
@@ -969,7 +1014,7 @@ async function st({
     setupFocusableEventPush() {
       const { ui: n } = this.editor, { $wire: a } = t, s = () => {
         const o = this.getEditorRootsValues();
-        a.set("focused", n.focusTracker.isFocused), P(o, t.canonical.content ?? {}) || a.set("content", o);
+        a.set("focused", n.focusTracker.isFocused), b(o, t.canonical.content ?? {}) || a.set("content", o);
       };
       n.focusTracker.on("change:isFocused", s);
     }
@@ -977,7 +1022,7 @@ async function st({
      * Gets the current values of all editor roots.
      */
     getEditorRootsValues() {
-      return J(this.editor);
+      return Q(this.editor);
     }
   };
 }
@@ -1022,7 +1067,7 @@ async function ot(i) {
     }
   };
 }
-class ct extends C {
+class ct extends P {
   /**
    * The promise that resolves to the editor instance.
    */
@@ -1032,15 +1077,15 @@ class ct extends C {
    */
   async mounted() {
     const { editorId: t } = this.canonical;
-    w.the.resetErrors(t);
+    m.the.resetErrors(t);
     try {
       this.editorPromise = this.createEditor();
       const e = await this.editorPromise;
-      this.isBeingDestroyed() || (w.the.register(t, e), e.once("destroy", () => {
-        w.the.hasItem(t) && w.the.unregister(t);
+      this.isBeingDestroyed() || (m.the.register(t, e), e.once("destroy", () => {
+        m.the.hasItem(t) && m.the.unregister(t);
       }));
     } catch (e) {
-      console.error(`Error initializing CKEditor5 instance with ID "${t}":`, e), this.editorPromise = null, w.the.error(t, e);
+      console.error(`Error initializing CKEditor5 instance with ID "${t}":`, e), this.editorPromise = null, m.the.error(t, e);
     }
   }
   /**
@@ -1053,7 +1098,7 @@ class ct extends C {
       const t = await this.editorPromise;
       if (!t)
         return;
-      const e = X(t), r = it(t);
+      const e = J(t), r = it(t);
       e ? e.state !== "unavailable" && await e.context.remove(e.editorContextId) : r ? await r.destroy() : await t.destroy();
     } finally {
       this.editorPromise = null;
@@ -1080,77 +1125,77 @@ class ct extends C {
       content: c
     } = this.canonical, {
       customTranslations: u,
-      editorType: m,
-      licenseKey: h,
-      config: { plugins: f, ...d }
+      editorType: d,
+      licenseKey: k,
+      config: { plugins: v, ...f }
     } = t;
-    let g = await Z(m);
-    const p = await (r ? y.the.waitFor(r) : null);
-    if (o && !p) {
-      const l = await rt(g);
-      ({ Constructor: g } = l), l.watchdog.on("restart", () => {
-        const k = l.watchdog.editor;
-        this.editorPromise = Promise.resolve(k), w.the.register(e, k);
+    let p = await Z(d);
+    const w = await (r ? h.the.waitFor(r) : null);
+    if (o && !w) {
+      const l = await rt(p);
+      ({ Constructor: p } = l), l.watchdog.on("restart", () => {
+        const E = l.watchdog.editor;
+        this.editorPromise = Promise.resolve(E), m.the.register(e, E);
       });
     }
-    const { loadedPlugins: E, hasPremium: B } = await A(f);
-    E.push(
+    const { loadedPlugins: g, hasPremium: U } = await F(v);
+    g.push(
       await st(
         {
           saveDebounceMs: a,
           component: this
         }
       )
-    ), v(m) && E.push(
+    ), C(d) && g.push(
       await ot(a)
     );
     const $ = [
-      ...await V(s, B),
+      ...await V(s, U),
       j(u || {})
-    ].filter((l) => !W(l));
-    let b = {
+    ].filter((l) => !A(l));
+    let y = {
       ...c,
-      ...L(e)
+      ...z(e)
     };
-    v(m) && (b = b.main || "");
-    const M = await (async () => {
-      let l = F(e);
+    C(d) && (y = y.main || "");
+    const H = await (async () => {
+      let l = N(e);
       if (!(l instanceof HTMLElement) && !("main" in l)) {
-        const z = m === "decoupled" ? ["main"] : Object.keys(b);
-        N(l, z) || (l = await ut(e, z), b = {
+        const M = d === "decoupled" ? ["main"] : Object.keys(y);
+        B(l, M) || (l = await ut(e, M), y = {
           ...c,
-          ...L(e)
+          ...z(e)
         });
       }
-      v(m) && "main" in l && (l = l.main);
-      const k = {
-        ...x(d),
-        initialData: b,
-        licenseKey: h,
-        plugins: E,
+      C(d) && "main" in l && (l = l.main);
+      const E = {
+        ...I(f),
+        initialData: y,
+        licenseKey: k,
+        plugins: g,
         language: s,
         ...$.length && {
           translations: $
         }
       };
-      return !p || !(l instanceof HTMLElement) ? g.create(l, k) : (await Y({
-        context: p,
+      return !w || !(l instanceof HTMLElement) ? p.create(l, E) : (await X({
+        context: w,
         element: l,
-        creator: g,
-        config: k
+        creator: p,
+        config: E
       })).editor;
     })();
-    return v(m) && n && et(M, n), M;
+    return C(d) && n && et(H, n), H;
   }
 }
-function N(i, t) {
+function B(i, t) {
   return t.every((e) => i[e]);
 }
 async function ut(i, t) {
-  return G(
+  return Y(
     () => {
-      const e = F(i);
-      if (!N(e, t))
+      const e = N(i);
+      if (!B(e, t))
         throw new Error(
           `It looks like not all required root elements are present yet.
 * If you want to wait for them, ensure they are registered before editor initialization.
@@ -1162,7 +1207,7 @@ Missing roots: ${t.filter((r) => !e[r]).join(", ")}.`
     { timeOutAfter: 2e3, retryAfter: 100 }
   );
 }
-class lt extends C {
+class lt extends P {
   /**
    * The promise that resolves when the UI part is mounted.
    */
@@ -1172,7 +1217,7 @@ class lt extends C {
    */
   async mounted() {
     const { editorId: t, name: e } = this.canonical;
-    this.mountedPromise = w.the.execute(t, (r) => {
+    this.mountedPromise = m.the.execute(t, (r) => {
       if (this.isBeingDestroyed())
         return;
       const { ui: n } = r, a = mt(e), s = n.view[a];
@@ -1208,17 +1253,17 @@ const dt = {
 };
 function wt() {
   for (const [i, t] of Object.entries(dt))
-    U(i, t);
+    _(i, t);
 }
 wt();
 export {
-  C as ClassHook,
-  y as ContextsRegistry,
+  P as ClassHook,
+  h as ContextsRegistry,
   S as CustomEditorPluginsRegistry,
   at as EditableComponentHook,
   ct as EditorComponentHook,
-  w as EditorsRegistry,
+  m as EditorsRegistry,
   lt as UIPartComponentHook,
-  U as registerLivewireComponentHook
+  _ as registerLivewireComponentHook
 };
 //# sourceMappingURL=index.mjs.map