ckeditor5-livewire 1.3.1 → 1.4.1

package/dist/index.mjs

@@ -95,11 +95,11 @@ class L {
    */
   execute(t, e, r) {
     const n = this.items.get(t), a = this.initializationErrors.get(t);
-    return a ? (r?.(a), Promise.reject(a)) : n ? Promise.resolve(e(n)) : new Promise((o, s) => {
+    return a ? (r?.(a), Promise.reject(a)) : n ? Promise.resolve(e(n)) : new Promise((s, o) => {
       const c = this.getPendingCallbacks(t);
       c.success.push(async (u) => {
-        o(await e(u));
-      }), r ? c.error.push(r) : c.error.push(s);
+        s(await e(u));
+      }), r ? c.error.push(r) : c.error.push(o);
     });
   }
   /**
@@ -272,15 +272,15 @@ function Y(i, {
 } = {}) {
   return new Promise((r, n) => {
     const a = Date.now();
-    let o = null;
-    const s = setTimeout(() => {
-      n(o ?? new Error("Timeout"));
+    let s = null;
+    const o = setTimeout(() => {
+      n(s ?? new Error("Timeout"));
     }, t), c = async () => {
       try {
         const u = await i();
-        clearTimeout(s), r(u);
+        clearTimeout(o), r(u);
       } catch (u) {
-        o = u, Date.now() - a > t ? n(u) : setTimeout(c, e);
+        s = u, Date.now() - a > t ? n(u) : setTimeout(c, e);
       }
     };
     c();
@@ -296,15 +296,15 @@ async function X({ element: i, context: t, creator: e, config: r }) {
     type: "editor",
     config: r
   });
-  const a = t.getItem(n), o = {
+  const a = t.getItem(n), s = {
     state: "available",
     editorContextId: n,
     context: t
   };
-  a[D] = o;
-  const s = t.destroy.bind(t);
-  return t.destroy = async () => (o.state = "unavailable", s()), {
-    ...o,
+  a[D] = s;
+  const o = t.destroy.bind(t);
+  return t.destroy = async () => (s.state = "unavailable", o()), {
+    ...s,
     editor: a
   };
 }
@@ -406,18 +406,18 @@ async function W(i) {
     const a = await S.the.get(n);
     if (a)
       return a;
-    const { [n]: o } = t;
-    if (o)
-      return o;
+    const { [n]: s } = t;
+    if (s)
+      return s;
     if (!e)
       try {
         e = await import("ckeditor5-premium-features");
       } catch (c) {
         console.error(`Failed to load premium package: ${c}`);
       }
-    const { [n]: s } = e || {};
-    if (s)
-      return s;
+    const { [n]: o } = e || {};
+    if (o)
+      return o;
     throw new Error(`Plugin "${n}" not found in base or premium packages.`);
   });
   return {
@@ -429,13 +429,13 @@ async function V(i, t) {
   const e = [i.ui, i.content];
   return await Promise.all(
     [
-      R("ckeditor5", e),
+      M("ckeditor5", e),
       /* v8 ignore next */
-      t && R("ckeditor5-premium-features", e)
+      t && M("ckeditor5-premium-features", e)
     ].filter((n) => !!n)
   ).then((n) => n.flat());
 }
-async function R(i, t) {
+async function M(i, t) {
   return await Promise.all(
     t.filter((e) => e !== "en").map(async (e) => {
       const r = await tt(i, e);
@@ -753,13 +753,13 @@ function j(i) {
   return O(t, ({ element: e }) => e);
 }
 function N(i) {
-  const t = window.Livewire.all().filter(({ name: o, canonical: s }) => o === "ckeditor5-editable" && s.editorId === i).reduce((o, { canonical: s, el: c }) => ({
-    ...o,
-    [s.rootName]: {
+  const t = window.Livewire.all().filter(({ name: s, canonical: o }) => s === "ckeditor5-editable" && o.editorId === i).reduce((s, { canonical: o, el: c }) => ({
+    ...s,
+    [o.rootName]: {
       element: c.querySelector("[data-cke-editable-content]"),
-      content: s.content
+      content: o.content
     }
-  }), /* @__PURE__ */ Object.create({})), r = window.Livewire.all().find(({ name: o, canonical: s }) => o === "ckeditor5" && s.editorId === i)?.canonical.content, n = document.querySelector(`#${i}_editor `), a = t.main;
+  }), /* @__PURE__ */ Object.create({})), r = window.Livewire.all().find(({ name: s, canonical: o }) => s === "ckeditor5" && o.editorId === i)?.canonical.content, n = document.querySelector(`#${i}_editor `), a = t.main;
   return a && r?.main ? {
     ...t,
     main: {
@@ -815,8 +815,8 @@ async function rt(i) {
 function it(i) {
   return T in i ? i[T] : null;
 }
-class p extends L {
-  static the = new p();
+class w extends L {
+  static the = new w();
 }
 class nt extends P {
   /**
@@ -827,17 +827,17 @@ class nt extends P {
    * Mounts the context component.
    */
   async mounted() {
-    const { contextId: t, language: e, context: r } = this.canonical, { customTranslations: n, watchdogConfig: a, config: { plugins: o, ...s } } = r, { loadedPlugins: c, hasPremium: u } = await W(o ?? []), C = [
+    const { contextId: t, language: e, context: r } = this.canonical, { customTranslations: n, watchdogConfig: a, config: { plugins: s, ...o } } = r, { loadedPlugins: c, hasPremium: u } = await W(s ?? []), C = [
       ...await V(e, u),
       B(n || {})
     ].filter((f) => !A(f));
     this.contextPromise = (async () => {
-      const { ContextWatchdog: f, Context: w } = await import("ckeditor5"), h = new f(w, {
+      const { ContextWatchdog: f, Context: p } = await import("ckeditor5"), h = new f(p, {
         crashNumberLimit: 10,
         ...a
       });
       return await h.create({
-        ...s,
+        ...o,
         language: e,
         plugins: c,
         ...C.length && {
@@ -848,7 +848,7 @@ class nt extends P {
       }), h;
     })();
     const v = await this.contextPromise;
-    this.isBeingDestroyed() || p.the.register(t, v);
+    this.isBeingDestroyed() || w.the.register(t, v);
   }
   /**
    * Destroys the context component. Unmounts root from the editor.
@@ -859,12 +859,12 @@ class nt extends P {
     try {
       await (await this.contextPromise)?.destroy();
     } finally {
-      this.contextPromise = null, p.the.hasItem(t) && p.the.unregister(t);
+      this.contextPromise = null, w.the.hasItem(t) && w.the.unregister(t);
     }
   }
 }
-class m extends L {
-  static the = new m();
+class d extends L {
+  static the = new d();
 }
 class at extends P {
   /**
@@ -880,11 +880,11 @@ class at extends P {
    */
   mounted() {
     const { editorId: t, rootName: e, content: r } = this.canonical;
-    this.editorPromise = m.the.execute(t, (n) => {
+    this.editorPromise = d.the.execute(t, (n) => {
       if (this.isBeingDestroyed())
         return null;
-      const { ui: a, editing: o, model: s } = n;
-      if (s.document.getRoot(e)) {
+      const { ui: a, editing: s, model: o } = n;
+      if (o.document.getRoot(e)) {
         if (r !== null) {
           const c = n.getData({ rootName: e });
           c && c !== r && n.setData({
@@ -899,7 +899,7 @@ class at extends P {
           }
         });
         const c = this.element.querySelector("[data-cke-editable-content]"), u = a.view.createEditable(e, c);
-        a.addEditable(u), o.view.forceRender();
+        a.addEditable(u), s.view.forceRender();
       }
       return this.syncTypingContentPush(n), this.setupPendingReceivedContentHandlers(n), n;
     });
@@ -909,11 +909,11 @@ class at extends P {
    */
   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);
-    }, o = x(r, a);
-    t.model.document.on("change:data", o), a(), this.onBeforeDestroy(() => {
-      t.model.document.off("change:data", o);
+      const o = t.getData({ rootName: e });
+      n && (n.value = o), this.$wire.set("content", o);
+    }, s = x(r, a);
+    t.model.document.on("change:data", s), a(), this.onBeforeDestroy(() => {
+      t.model.document.off("change:data", s);
     });
   }
   /**
@@ -921,15 +921,15 @@ class at extends P {
    * content on user edits and applies pending content on blur).
    */
   setupPendingReceivedContentHandlers(t) {
-    const { ui: e, model: r } = t, { focusTracker: n } = e, { rootName: a } = this.canonical, o = () => {
+    const { ui: e, model: r } = t, { focusTracker: n } = e, { rootName: a } = this.canonical, s = () => {
       this.pendingContent = null;
-    }, s = () => {
+    }, o = () => {
       !n.isFocused && this.pendingContent !== null && (t.setData({
         [a]: this.pendingContent
       }), this.pendingContent = null);
     };
-    r.document.on("change:data", o), n.on("change:isFocused", s), this.onBeforeDestroy(() => {
-      r.document.off("change:data", o), n.off("change:isFocused", s);
+    r.document.on("change:data", s), n.on("change:isFocused", o), this.onBeforeDestroy(() => {
+      r.document.off("change:data", s), n.off("change:isFocused", o);
     });
   }
   /**
@@ -967,7 +967,7 @@ class at extends P {
     }
   }
 }
-async function ot({
+async function st({
   saveDebounceMs: i,
   component: t
 }) {
@@ -983,7 +983,7 @@ async function ot({
      * Initializes the plugin.
      */
     init() {
-      this.setupTypingContentPush(), this.setupFocusableEventPush(), this.setupAfterCommitHandler(), this.setupSetEditorContentHandler();
+      this.setupTypingContentPush(), this.setupFocusableEventPush(), this.setupAfterCommitHandler(), this.setupSetEditorContentHandler(), this.setupReadyDispatch();
     }
     /**
      * Setups handler that updates the editor content after Livewire changes attributes
@@ -991,21 +991,36 @@ async function ot({
      * disrupting the user while editing.
      */
     setupAfterCommitHandler() {
-      const { editor: n } = this, { model: a, ui: { focusTracker: o } } = n;
-      let s = null;
+      const { editor: n } = this, { model: a, ui: { focusTracker: s } } = n;
+      let o = null;
       n.on("afterCommitSynced", () => {
         if (!F(t.element))
           return;
         const { content: c } = t.canonical, u = this.getEditorRootsValues();
-        if (o.isFocused) {
-          b(c, u) || (s = c);
+        if (s.isFocused) {
+          b(c, u) || (o = c);
           return;
         }
         b(c, u) || n.setData(c);
       }), a.document.on("change:data", () => {
-        s = null;
-      }), o.on("change:isFocused", () => {
-        !o.isFocused && s !== null && (n.setData(s), s = null);
+        o = null;
+      }), s.on("change:isFocused", () => {
+        !s.isFocused && o !== null && (n.setData(o), o = null);
+      });
+    }
+    /**
+     * Dispatches a Livewire event when the editor becomes ready.
+     *
+     * This allows the Livewire component or parent to react as soon as the
+     * instance is fully initialized. The payload contains the editorId so the
+     * listener can ignore events coming from other editors on the page.
+     */
+    setupReadyDispatch() {
+      const { $wire: n } = t;
+      this.editor.once("ready", () => {
+        n.dispatch("editor-ready", {
+          editorId: t.canonical.editorId
+        });
       });
     }
     /**
@@ -1015,32 +1030,32 @@ async function ot({
       Livewire.on("set-editor-content", ({ editorId: n, content: a }) => {
         if (n !== t.canonical.editorId)
           return;
-        const o = this.getEditorRootsValues();
-        b(o, a) || this.editor.setData(a);
+        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, o = () => {
-        const s = this.getEditorRootsValues();
-        b(s, t.canonical.content ?? {}) || (a.set("content", s), a.dispatch("editor-content-changed", {
+      const { model: n } = this.editor, { $wire: a } = t, s = () => {
+        const o = this.getEditorRootsValues();
+        b(o, t.canonical.content ?? {}) || (a.set("content", o), a.dispatch("editor-content-changed", {
           editorId: t.canonical.editorId,
-          content: s
+          content: o
         }));
       };
-      n.document.on("change:data", x(i, o)), this.editor.once("ready", o);
+      n.document.on("change:data", x(i, s)), this.editor.once("ready", s);
     }
     /**
      * Setups the event push for the editor.
      */
     setupFocusableEventPush() {
-      const { ui: n } = this.editor, { $wire: a } = t, o = () => {
-        const s = this.getEditorRootsValues();
-        a.set("focused", n.focusTracker.isFocused), b(s, t.canonical.content ?? {}) || a.set("content", s);
+      const { ui: n } = this.editor, { $wire: a } = t, s = () => {
+        const o = this.getEditorRootsValues();
+        a.set("focused", n.focusTracker.isFocused), b(o, t.canonical.content ?? {}) || a.set("content", o);
       };
-      n.focusTracker.on("change:isFocused", o);
+      n.focusTracker.on("change:isFocused", s);
     }
     /**
      * Gets the current values of all editor roots.
@@ -1050,7 +1065,7 @@ async function ot({
     }
   };
 }
-async function st(i) {
+async function ot(i) {
   const { Plugin: t } = await import("ckeditor5");
   return class extends t {
     /**
@@ -1101,15 +1116,15 @@ class ct extends P {
    */
   async mounted() {
     const { editorId: t } = this.canonical;
-    m.the.resetErrors(t);
+    d.the.resetErrors(t);
     try {
       this.editorPromise = this.createEditor();
       const e = await this.editorPromise;
-      this.isBeingDestroyed() || (m.the.register(t, e), e.once("destroy", () => {
-        m.the.hasItem(t) && m.the.unregister(t);
+      this.isBeingDestroyed() || (d.the.register(t, e), e.once("destroy", () => {
+        d.the.hasItem(t) && d.the.unregister(t);
       }));
     } catch (e) {
-      console.error(`Error initializing CKEditor5 instance with ID "${t}":`, e), this.editorPromise = null, m.the.error(t, e);
+      console.error(`Error initializing CKEditor5 instance with ID "${t}":`, e), this.editorPromise = null, d.the.error(t, e);
     }
   }
   /**
@@ -1144,72 +1159,72 @@ class ct extends P {
       contextId: r,
       editableHeight: n,
       saveDebounceMs: a,
-      language: o,
-      watchdog: s,
+      language: s,
+      watchdog: o,
       content: c
     } = this.canonical, {
       customTranslations: u,
-      editorType: d,
+      editorType: m,
       licenseKey: C,
       config: { plugins: v, ...f }
     } = t;
-    let w = await Z(d);
-    const h = await (r ? p.the.waitFor(r) : null);
-    if (s && !h) {
-      const l = await rt(w);
-      ({ Constructor: w } = l), l.watchdog.on("restart", () => {
+    let p = await Z(m);
+    const h = await (r ? w.the.waitFor(r) : null);
+    if (o && !h) {
+      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);
+        this.editorPromise = Promise.resolve(E), d.the.register(e, E);
       });
     }
     const { loadedPlugins: g, hasPremium: _ } = await W(v);
     g.push(
-      await ot(
+      await st(
         {
           saveDebounceMs: a,
           component: this
         }
       )
-    ), k(d) && g.push(
-      await st(a)
+    ), k(m) && g.push(
+      await ot(a)
     );
     const $ = [
-      ...await V(o, _),
+      ...await V(s, _),
       B(u || {})
     ].filter((l) => !A(l));
     let y = {
       ...c,
       ...z(e)
     };
-    k(d) && (y = y.main || "");
-    const H = await (async () => {
+    k(m) && (y = y.main || "");
+    const R = await (async () => {
       let l = j(e);
       if (!(l instanceof HTMLElement) && !("main" in l)) {
-        const M = d === "decoupled" ? ["main"] : Object.keys(y);
-        q(l, M) || (l = await ut(e, M), y = {
+        const H = m === "decoupled" ? ["main"] : Object.keys(y);
+        q(l, H) || (l = await ut(e, H), y = {
           ...c,
           ...z(e)
         });
       }
-      k(d) && "main" in l && (l = l.main);
+      k(m) && "main" in l && (l = l.main);
       const E = {
         ...I(f),
         initialData: y,
         licenseKey: C,
         plugins: g,
-        language: o,
+        language: s,
         ...$.length && {
           translations: $
         }
       };
-      return !h || !(l instanceof HTMLElement) ? w.create(l, E) : (await X({
+      return !h || !(l instanceof HTMLElement) ? p.create(l, E) : (await X({
         context: h,
         element: l,
-        creator: w,
+        creator: p,
         config: E
       })).editor;
     })();
-    return k(d) && n && et(H, n), H;
+    return k(m) && n && et(R, n), R;
   }
 }
 function q(i, t) {
@@ -1241,15 +1256,15 @@ class lt extends P {
    */
   async mounted() {
     const { editorId: t, name: e } = this.canonical;
-    this.mountedPromise = m.the.execute(t, (r) => {
+    this.mountedPromise = d.the.execute(t, (r) => {
       if (this.isBeingDestroyed())
         return;
-      const { ui: n } = r, a = mt(e), o = n.view[a];
-      if (!o) {
+      const { ui: n } = r, a = dt(e), s = n.view[a];
+      if (!s) {
         console.error(`Unknown UI part name: "${e}". Supported names are "toolbar" and "menubar".`);
         return;
       }
-      this.element.appendChild(o.element);
+      this.element.appendChild(s.element);
     });
   }
   /**
@@ -1259,7 +1274,7 @@ class lt extends P {
     this.element.style.display = "none", await this.mountedPromise, this.mountedPromise = null, this.element.innerHTML = "";
   }
 }
-function mt(i) {
+function dt(i) {
   switch (i) {
     case "toolbar":
       return "toolbar";
@@ -1269,24 +1284,24 @@ function mt(i) {
       return null;
   }
 }
-const dt = {
+const mt = {
   ckeditor5: ct,
   "ckeditor5-context": nt,
   "ckeditor5-ui-part": lt,
   "ckeditor5-editable": at
 };
 function ht() {
-  for (const [i, t] of Object.entries(dt))
+  for (const [i, t] of Object.entries(mt))
     U(i, t);
 }
 ht();
 export {
   P as ClassHook,
-  p as ContextsRegistry,
+  w as ContextsRegistry,
   S as CustomEditorPluginsRegistry,
   at as EditableComponentHook,
   ct as EditorComponentHook,
-  m as EditorsRegistry,
+  d as EditorsRegistry,
   lt as UIPartComponentHook,
   U as registerLivewireComponentHook
 };