ckeditor5-phoenix 1.25.0 → 1.26.0

package/dist/index.mjs

@@ -1,8 +1,8 @@
-function q(a, t) {
-  if (!a || a.size !== t.size)
+function q(r, t) {
+  if (!r || r.size !== t.size)
     return !1;
-  for (const [e, r] of a)
-    if (!t.has(e) || t.get(e) !== r)
+  for (const [e, a] of r)
+    if (!t.has(e) || t.get(e) !== a)
       return !1;
   return !0;
 }
@@ -41,13 +41,13 @@ class Y {
    * @param onError Optional error callback.
    * @returns A promise that resolves with the result of the function.
    */
-  execute(t, e, r) {
+  execute(t, e, a) {
     const n = this.items.get(t), i = this.initializationErrors.get(t);
-    return i ? (r?.(i), Promise.reject(i)) : n ? Promise.resolve(e(n)) : new Promise((s, c) => {
+    return i ? (a?.(i), Promise.reject(i)) : n ? Promise.resolve(e(n)) : new Promise((s, c) => {
       const o = this.getPendingCallbacks(t);
       o.success.push(async (u) => {
         s(await e(u));
-      }), r ? o.error.push(r) : o.error.push(c);
+      }), a ? o.error.push(a) : o.error.push(c);
     });
   }
   /**
@@ -58,19 +58,19 @@ class Y {
    * @returns A function that stops observing and immediately runs any pending cleanup.
    */
   mountEffect(t, e) {
-    let r, n, i = !1;
+    let a, n, i = !1;
     const s = this.watch((c) => {
       const o = c.get(t);
-      if (o !== n && (r?.(), r = void 0, n = o, !!o))
+      if (o !== n && (a?.(), a = void 0, n = o, !!o))
         try {
           const u = e(o);
-          i ? (u?.(), s()) : r = u;
+          i ? (u?.(), s()) : a = u;
         } catch (u) {
           throw console.error(u), u;
         }
     });
     return () => {
-      i = !0, n && (s(), r?.(), r = void 0);
+      i = !0, n && (s(), a?.(), a = void 0);
     };
   }
   /**
@@ -84,8 +84,8 @@ class Y {
       if (this.items.has(t))
         throw new Error(`Item with ID "${t}" is already registered.`);
       this.resetErrors(t), this.items.set(t, e);
-      const r = this.pendingCallbacks.get(t);
-      r && (r.success.forEach((n) => n(e)), this.pendingCallbacks.delete(t)), this.items.size === 1 && t !== null && this.register(null, e);
+      const a = this.pendingCallbacks.get(t);
+      a && (a.success.forEach((n) => n(e)), this.pendingCallbacks.delete(t)), this.items.size === 1 && t !== null && this.register(null, e);
     });
   }
   /**
@@ -97,8 +97,8 @@ class Y {
   error(t, e) {
     this.batch(() => {
       this.items.delete(t), this.initializationErrors.set(t, e);
-      const r = this.pendingCallbacks.get(t);
-      r && (r.error.forEach((n) => n(e)), this.pendingCallbacks.delete(t)), this.initializationErrors.size === 1 && !this.items.size && this.error(null, e);
+      const a = this.pendingCallbacks.get(t);
+      a && (a.error.forEach((n) => n(e)), this.pendingCallbacks.delete(t)), this.initializationErrors.size === 1 && !this.items.size && this.error(null, e);
     });
   }
   /**
@@ -154,8 +154,8 @@ class Y {
    * @returns A promise that resolves with the item instance.
    */
   waitFor(t) {
-    return new Promise((e, r) => {
-      this.execute(t, e, r);
+    return new Promise((e, a) => {
+      this.execute(t, e, a);
     });
   }
   /**
@@ -231,42 +231,42 @@ class Y {
     return e || (e = { success: [], error: [] }, this.pendingCallbacks.set(t, e)), e;
   }
 }
-function at(a) {
-  return a.replace(/[-_\s]+(.)?/g, (t, e) => e ? e.toUpperCase() : "").replace(/^./, (t) => t.toLowerCase());
+function at(r) {
+  return r.replace(/[-_\s]+(.)?/g, (t, e) => e ? e.toUpperCase() : "").replace(/^./, (t) => t.toLowerCase());
 }
-function T(a, t) {
+function T(r, t) {
   let e = null;
-  return (...r) => {
+  return (...a) => {
     e && clearTimeout(e), e = setTimeout(() => {
-      t(...r);
-    }, a);
+      t(...a);
+    }, r);
   };
 }
-function nt(a) {
-  if (Object.prototype.toString.call(a) !== "[object Object]")
+function nt(r) {
+  if (Object.prototype.toString.call(r) !== "[object Object]")
     return !1;
-  const t = Object.getPrototypeOf(a);
+  const t = Object.getPrototypeOf(r);
   return t === Object.prototype || t === null;
 }
-function I(a) {
-  if (Array.isArray(a))
-    return a.map(I);
-  if (nt(a)) {
+function I(r) {
+  if (Array.isArray(r))
+    return r.map(I);
+  if (nt(r)) {
     const t = /* @__PURE__ */ Object.create(null);
-    for (const [e, r] of Object.entries(a))
-      t[at(e)] = I(r);
+    for (const [e, a] of Object.entries(r))
+      t[at(e)] = I(a);
     return t;
   }
-  return a;
+  return r;
 }
-function it(a, t) {
-  const e = Object.entries(a).filter(([r, n]) => t(n, r));
+function it(r, t) {
+  const e = Object.entries(r).filter(([a, n]) => t(n, a));
   return Object.fromEntries(e);
 }
 function st() {
-  const a = document.querySelector('meta[name="csrf-token"]');
-  if (a)
-    return a.getAttribute("content");
+  const r = document.querySelector('meta[name="csrf-token"]');
+  if (r)
+    return r.getAttribute("content");
   const t = document.cookie.match(/(?:^|; )_csrf_token=([^;]*)/);
   return t ? decodeURIComponent(t[1]) : null;
 }
@@ -345,15 +345,15 @@ class D {
     this._beforeDestroyCallbacks = [];
   }
 }
-function S(a) {
+function S(r) {
   return {
     /**
      * The mounted lifecycle callback for the LiveView hook object.
      * It creates an instance of the user-defined hook class and sets up the necessary properties and methods.
      */
     async mounted() {
-      const t = new a();
-      this.el.instance = t, t.el = this.el, t.pushEvent = (r, n, i) => this.pushEvent?.(r, n, i), t.pushEventTo = (r, n, i, s) => this.pushEventTo?.(r, n, i, s), t.handleEvent = (r, n) => this.handleEvent?.(r, n), t.state = "mounting";
+      const t = new r();
+      this.el.instance = t, t.el = this.el, t.pushEvent = (a, n, i) => this.pushEvent?.(a, n, i), t.pushEventTo = (a, n, i, s) => this.pushEventTo?.(a, n, i, s), t.handleEvent = (a, n) => this.handleEvent?.(a, n), t.state = "mounting";
       const e = await t.mounted?.();
       return t.state = "mounted", e;
     },
@@ -390,52 +390,52 @@ function S(a) {
     }
   };
 }
-function J(a) {
-  return Object.keys(a).length === 0 && a.constructor === Object;
+function J(r) {
+  return Object.keys(r).length === 0 && r.constructor === Object;
 }
-function ot(a) {
-  return a == null;
+function ot(r) {
+  return r == null;
 }
-function $(a, t) {
-  const e = Object.entries(a).map(([r, n]) => [r, t(n, r)]);
+function $(r, t) {
+  const e = Object.entries(r).map(([a, n]) => [a, t(n, a)]);
   return Object.fromEntries(e);
 }
-function F(a) {
-  if (a === null)
+function B(r) {
+  if (r === null)
     return null;
-  const t = Number.parseInt(a, 10);
+  const t = Number.parseInt(r, 10);
   return Number.isNaN(t) ? null : t;
 }
-function ct(a) {
-  return a == null || a.trim() === "" ? null : JSON.parse(a);
+function ct(r) {
+  return r == null || r.trim() === "" ? null : JSON.parse(r);
 }
-function ut(a, t) {
-  if (a === t)
+function ut(r, t) {
+  if (r === t)
     return !0;
-  const e = Object.keys(a), r = Object.keys(t);
-  if (e.length !== r.length)
+  const e = Object.keys(r), a = Object.keys(t);
+  if (e.length !== a.length)
     return !1;
   for (const n of e)
-    if (a[n] !== t[n] || !Object.prototype.hasOwnProperty.call(t, n))
+    if (r[n] !== t[n] || !Object.prototype.hasOwnProperty.call(t, n))
       return !1;
   return !0;
 }
 function lt() {
   return Math.random().toString(36).substring(2);
 }
-function dt(a, {
+function dt(r, {
   timeOutAfter: t = 500,
   retryAfter: e = 100
 } = {}) {
-  return new Promise((r, n) => {
+  return new Promise((a, n) => {
     const i = Date.now();
     let s = null;
     const c = setTimeout(() => {
       n(s ?? new Error("Timeout"));
     }, t), o = async () => {
       try {
-        const u = await a();
-        clearTimeout(c), r(u);
+        const u = await r();
+        clearTimeout(c), a(u);
       } catch (u) {
         s = u, Date.now() - i > t ? n(u) : setTimeout(o, e);
       }
@@ -443,19 +443,19 @@ function dt(a, {
     o();
   });
 }
-function ht(a) {
+function ht(r) {
   const t = [
-    a.ui?.element,
-    a.ui?.view?.toolbar?.element,
-    a.ui?.view?.menuBarView?.element
+    r.ui?.element,
+    r.ui?.view?.toolbar?.element,
+    r.ui?.view?.menuBarView?.element
   ].filter(Boolean);
   for (const i of t)
     n(i);
-  const e = a.ui?.view?.body?._bodyCollectionContainer;
+  const e = r.ui?.view?.body?._bodyCollectionContainer;
   e?.isConnected && n(e);
-  const r = a.editing?.view;
-  if (r)
-    for (const i of r.domRoots.values())
+  const a = r.editing?.view;
+  if (a)
+    for (const i of a.domRoots.values())
       i instanceof HTMLElement && (i.removeAttribute("contenteditable"), i.removeAttribute("role"), i.removeAttribute("aria-label"), i.removeAttribute("aria-multiline"), i.removeAttribute("spellcheck"), i.classList.remove(
         "ck",
         "ck-content",
@@ -470,14 +470,14 @@ function ht(a) {
   }
 }
 const R = /* @__PURE__ */ Symbol.for("context-editor-watchdog");
-async function mt({ element: a, context: t, creator: e, config: r }) {
+async function mt({ element: r, context: t, creator: e, config: a }) {
   const n = lt();
   await t.add({
     creator: (o, u) => e.create(o, u),
     id: n,
-    sourceElementOrData: a,
+    sourceElementOrData: r,
     type: "editor",
-    config: r
+    config: a
   });
   const i = t.getItem(n), s = {
     state: "available",
@@ -491,26 +491,26 @@ async function mt({ element: a, context: t, creator: e, config: r }) {
     editor: i
   };
 }
-function pt(a) {
-  return R in a ? a[R] : null;
+function pt(r) {
+  return R in r ? r[R] : null;
 }
-function B(a) {
-  return "addEditable" in a.ui;
+function F(r) {
+  return "addEditable" in r.ui;
 }
-function A(a) {
-  return ["inline", "classic", "balloon", "decoupled"].includes(a);
+function A(r) {
+  return ["inline", "classic", "balloon", "decoupled"].includes(r);
 }
-async function ft(a) {
-  const t = await import("ckeditor5"), r = {
+async function ft(r) {
+  const t = await import("ckeditor5"), a = {
     inline: t.InlineEditor,
     balloon: t.BalloonEditor,
     classic: t.ClassicEditor,
     decoupled: t.DecoupledEditor,
     multiroot: t.MultiRootEditor
-  }[a];
-  if (!r)
-    throw new Error(`Unsupported editor type: ${a}`);
-  return r;
+  }[r];
+  if (!a)
+    throw new Error(`Unsupported editor type: ${r}`);
+  return a;
 }
 class _ {
   static the = new _();
@@ -572,10 +572,10 @@ class _ {
     return this.plugins.has(t);
   }
 }
-async function G(a) {
+async function G(r) {
   const t = await import("ckeditor5");
   let e = null;
-  const r = a.map(async (n) => {
+  const a = r.map(async (n) => {
     const i = await _.the.get(n);
     if (i)
       return i;
@@ -594,12 +594,12 @@ async function G(a) {
     throw new Error(`Plugin "${n}" not found in base or premium packages.`);
   });
   return {
-    loadedPlugins: await Promise.all(r),
+    loadedPlugins: await Promise.all(a),
     hasPremium: !!e
   };
 }
-async function X(a, t) {
-  const e = [a.ui, a.content];
+async function X(r, t) {
+  const e = [r.ui, r.content];
   return await Promise.all(
     [
       L("ckeditor5", e),
@@ -608,17 +608,17 @@ async function X(a, t) {
     ].filter((n) => !!n)
   ).then((n) => n.flat());
 }
-async function L(a, t) {
+async function L(r, t) {
   return await Promise.all(
     t.filter((e) => e !== "en").map(async (e) => {
-      const r = await wt(a, e);
-      return r?.default ?? r;
+      const a = await wt(r, e);
+      return a?.default ?? a;
     }).filter(Boolean)
   );
 }
-async function wt(a, t) {
+async function wt(r, t) {
   try {
-    if (a === "ckeditor5")
+    if (r === "ckeditor5")
       switch (t) {
         case "af":
           return await import("ckeditor5/translations/af.js");
@@ -913,26 +913,26 @@ async function wt(a, t) {
           return console.warn(`Language ${t} not found in premium translations`), await import("ckeditor5-premium-features/translations/en.js");
       }
   } catch (e) {
-    return console.error(`Failed to load translation for ${a}/${t}:`, e), null;
+    return console.error(`Failed to load translation for ${r}/${t}:`, e), null;
   }
 }
-function Q(a) {
-  return $(a, (t) => ({
+function Q(r) {
+  return $(r, (t) => ({
     dictionary: t
   }));
 }
-function Z(a) {
-  const t = tt(a);
+function Z(r) {
+  const t = tt(r);
   return $(t, ({ content: e }) => e);
 }
-function W(a) {
-  const t = tt(a), e = $(t, ({ initialValue: r }) => r);
-  return it(e, (r) => typeof r == "string");
+function W(r) {
+  const t = tt(r), e = $(t, ({ initialValue: a }) => a);
+  return it(e, (a) => typeof a == "string");
 }
-function tt(a) {
+function tt(r) {
   const t = document.querySelectorAll(
     [
-      `[data-cke-editor-id="${a}"][data-cke-editable-root-name]`,
+      `[data-cke-editor-id="${r}"][data-cke-editable-root-name]`,
       "[data-cke-editable-root-name]:not([data-cke-editor-id])"
     ].join(", ")
   ), e = Array.from(t).reduce((c, o) => {
@@ -944,10 +944,10 @@ function tt(a) {
         initialValue: l
       }
     };
-  }, /* @__PURE__ */ Object.create({})), r = document.querySelector(`[phx-hook="CKEditor5"][id="${a}"]`);
-  if (!r)
+  }, /* @__PURE__ */ Object.create({})), a = document.querySelector(`[phx-hook="CKEditor5"][id="${r}"]`);
+  if (!a)
     return e;
-  const n = r.getAttribute("data-cke-initial-value") || "", i = r.querySelector(`#${a}_editor `), s = e.main;
+  const n = a.getAttribute("data-cke-initial-value") || "", i = a.querySelector(`#${r}_editor `), s = e.main;
   return s ? {
     ...e,
     main: {
@@ -963,12 +963,12 @@ function tt(a) {
   } : e;
 }
 const K = ["inline", "classic", "balloon", "decoupled", "multiroot"];
-function gt(a) {
-  const t = a.getAttribute("data-cke-preset");
+function gt(r) {
+  const t = r.getAttribute("data-cke-preset");
   if (!t)
     throw new Error('CKEditor5 hook requires a "cke-preset" attribute on the element.');
-  const { type: e, config: r, license: n, watchdog: i, ...s } = JSON.parse(t);
-  if (!e || !r || !n)
+  const { type: e, config: a, license: n, watchdog: i, ...s } = JSON.parse(t);
+  if (!e || !a || !n)
     throw new Error('CKEditor5 hook configuration must include "editor", "config", and "license" properties.');
   if (!K.includes(e))
     throw new Error(`Invalid editor type: ${e}. Must be one of: ${K.join(", ")}.`);
@@ -976,79 +976,79 @@ function gt(a) {
     type: e,
     license: n,
     watchdog: i,
-    config: I(r),
+    config: I(a),
     customTranslations: s.customTranslations || s.custom_translations
   };
 }
-function x(a) {
-  if (!a || typeof a != "object")
-    return a;
-  if (Array.isArray(a))
-    return a.map((r) => x(r));
-  const t = a;
+function x(r) {
+  if (!r || typeof r != "object")
+    return r;
+  if (Array.isArray(r))
+    return r.map((a) => x(a));
+  const t = r;
   if (t.$element && typeof t.$element == "string") {
-    const r = document.querySelector(t.$element);
-    return r || console.warn(`Element not found for selector: ${t.$element}`), r || null;
+    const a = document.querySelector(t.$element);
+    return a || console.warn(`Element not found for selector: ${t.$element}`), a || null;
   }
   const e = /* @__PURE__ */ Object.create(null);
-  for (const [r, n] of Object.entries(a))
-    e[r] = x(n);
+  for (const [a, n] of Object.entries(r))
+    e[a] = x(n);
   return e;
 }
-function O(a, t, e) {
+function O(r, t, e) {
   if (!e || typeof e != "object")
     return e;
   if (Array.isArray(e))
-    return e.map((i) => O(a, t, i));
-  const r = e;
-  if (r.$translation && typeof r.$translation == "string") {
-    const i = r.$translation, s = yt(a, i, t);
+    return e.map((i) => O(r, t, i));
+  const a = e;
+  if (a.$translation && typeof a.$translation == "string") {
+    const i = a.$translation, s = yt(r, i, t);
     return s === void 0 && console.warn(`Translation not found for key: ${i}`), s !== void 0 ? s : null;
   }
   const n = /* @__PURE__ */ Object.create(null);
   for (const [i, s] of Object.entries(e))
-    n[i] = O(a, t, s);
+    n[i] = O(r, t, s);
   return n;
 }
-function yt(a, t, e) {
-  for (const r of a) {
-    const n = r[e];
+function yt(r, t, e) {
+  for (const a of r) {
+    const n = a[e];
     if (n?.dictionary && t in n.dictionary)
       return n.dictionary[t];
   }
 }
-function bt(a, t) {
-  const { editing: e } = a;
-  e.view.change((r) => {
-    r.setStyle("height", `${t}px`, e.view.document.getRoot());
+function bt(r, t) {
+  const { editing: e } = r;
+  e.view.change((a) => {
+    a.setStyle("height", `${t}px`, e.view.document.getRoot());
   });
 }
 const U = /* @__PURE__ */ Symbol.for("elixir-editor-watchdog");
-async function kt(a, t) {
-  const { EditorWatchdog: e } = await import("ckeditor5"), r = new e(null, t ?? {
+async function kt(r, t) {
+  const { EditorWatchdog: e } = await import("ckeditor5"), a = new e(null, t ?? {
     crashNumberLimit: 10,
     minimumNonErrorTimePeriod: 5e3
   });
-  return r.setCreator(async () => {
-    const n = await a();
-    return n[U] = r, n;
-  }), r;
+  return a.setCreator(async () => {
+    const n = await r();
+    return n[U] = a, n;
+  }), a;
 }
-function Et(a) {
-  return U in a ? a[U] : null;
+function Et(r) {
+  return U in r ? r[U] : null;
 }
 class y extends Y {
   static the = new y();
 }
-function vt(a) {
-  const t = a.getAttribute("data-cke-context");
+function vt(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, ...r } = JSON.parse(t);
+  const { config: e, ...a } = JSON.parse(t);
   return {
     config: I(e),
-    customTranslations: r.customTranslations || r.custom_translations,
-    watchdogConfig: r.watchdogConfig || r.watchdog_config
+    customTranslations: a.customTranslations || a.custom_translations,
+    watchdogConfig: a.watchdogConfig || a.watchdog_config
   };
 }
 class Ct extends D {
@@ -1060,7 +1060,7 @@ class Ct extends D {
    * Attributes for the context instance.
    */
   get attrs() {
-    const t = (r) => this.el.getAttribute(r) || null, e = {
+    const t = (a) => this.el.getAttribute(a) || null, e = {
       id: this.el.id,
       config: vt(this.el),
       language: {
@@ -1079,9 +1079,9 @@ class Ct extends D {
    * Mounts the context component.
    */
   async mounted() {
-    const { id: t, language: e } = this.attrs, { customTranslations: r, watchdogConfig: n, config: { plugins: i, ...s } } = this.attrs.config, { loadedPlugins: c, hasPremium: o } = await G(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 G(i ?? []), l = [
       ...await X(e, o),
-      Q(r?.dictionary || {})
+      Q(a?.dictionary || {})
     ].filter((m) => !J(m));
     let d = x(s);
     d = O([...l].reverse(), e.ui, d), this.contextPromise = (async () => {
@@ -1116,11 +1116,11 @@ class Ct extends D {
     }
   }
 }
-function Pt(a) {
-  return a.hasAttribute("data-cke-context");
+function Pt(r) {
+  return r.hasAttribute("data-cke-context");
 }
-function At(a) {
-  let t = a;
+function At(r) {
+  let t = r;
   for (; t; ) {
     if (Pt(t))
       return t;
@@ -1128,29 +1128,29 @@ function At(a) {
   }
   return null;
 }
-async function Tt(a) {
-  const t = At(a);
+async function Tt(r) {
+  const t = At(r);
   return t ? y.the.waitFor(t.id) : null;
 }
 const It = S(Ct);
-function xt(a, t) {
+function xt(r, t) {
   const e = /* @__PURE__ */ new Set();
-  return (r) => {
+  return (a) => {
     let n = !1;
-    return a.model.enqueueChange({ isUndoable: !1 }, (i) => {
-      const s = a.model.document.getRoot(t);
+    return r.model.enqueueChange({ isUndoable: !1 }, (i) => {
+      const s = r.model.document.getRoot(t);
       if (s) {
         for (const c of e)
-          r && c in r || (i.removeAttribute(c, s), e.delete(c), n = !0);
-        for (const [c, o] of Object.entries(r ?? {}))
+          a && c in a || (i.removeAttribute(c, s), e.delete(c), n = !0);
+        for (const [c, o] of Object.entries(a ?? {}))
           i.setAttribute(c, o, s), e.add(c), n = !0;
       }
     }), n;
   };
 }
 async function Ot() {
-  const { Plugin: a, FileRepository: t } = await import("ckeditor5");
-  return class extends a {
+  const { Plugin: r, FileRepository: t } = await import("ckeditor5");
+  return class extends r {
     /**
      * The name of the plugin.
      */
@@ -1164,7 +1164,7 @@ async function Ot() {
      * Initializes the plugin.
      */
     init() {
-      const { editor: r } = this, { plugins: n, config: i } = r, s = i.get("phoenixUpload.url");
+      const { editor: a } = this, { plugins: n, config: i } = a, s = i.get("phoenixUpload.url");
       if (!s || n.has("SimpleUploadAdapter") || n.has("Base64UploadAdapter") || n.has("CKFinderUploadAdapter"))
         return;
       const c = n.get(t);
@@ -1187,12 +1187,12 @@ class Dt {
     this.abortController = new AbortController();
     const e = new FormData();
     e.append("file", t), t.size && (this.loader.uploadTotal = t.size, this.loader.uploaded = 0);
-    const r = {}, n = st();
-    n && (r["X-CSRF-Token"] = n);
+    const a = {}, n = st();
+    n && (a["X-CSRF-Token"] = n);
     try {
       const i = await fetch(this.uploadUrl, {
         method: "POST",
-        headers: r,
+        headers: a,
         body: e,
         signal: this.abortController.signal
       });
@@ -1221,7 +1221,7 @@ class Dt {
   }
 }
 async function St({
-  editorId: a,
+  editorId: r,
   saveDebounceMs: t
 }) {
   const { Plugin: e } = await import("ckeditor5");
@@ -1245,7 +1245,7 @@ async function St({
      */
     afterInit() {
       const { editor: n } = this;
-      this.input = document.getElementById(`${a}_input`), this.input && (n.model.document.on("change:data", T(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", T(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.
@@ -1263,8 +1263,8 @@ async function St({
   };
 }
 const M = /* @__PURE__ */ Symbol("suppress-phoenix-sync");
-async function Nt(a) {
-  const { Plugin: t } = await import("ckeditor5"), { editorId: e, saveDebounceMs: r, events: n, pushEvent: i, handleEvent: s } = a;
+async function Nt(r) {
+  const { Plugin: t } = await import("ckeditor5"), { editorId: e, saveDebounceMs: a, events: n, pushEvent: i, handleEvent: s } = r;
   return class extends t {
     /**
      * The name of the plugin.
@@ -1303,7 +1303,7 @@ async function Nt(a) {
             data: m
           }
         ), u = m);
-      }, w = T(r, d);
+      }, w = T(a, d);
       o.model.document.on("change:data", T(10, (m) => {
         if (Vt(m)) {
           u = null;
@@ -1332,20 +1332,20 @@ async function Nt(a) {
     }
   };
 }
-function V(a) {
-  return a.model.document.getRootNames().reduce((e, r) => (e[r] = a.getData({ rootName: r }), e), /* @__PURE__ */ Object.create({}));
+function V(r) {
+  return r.model.document.getRootNames().reduce((e, a) => (e[a] = r.getData({ rootName: a }), e), /* @__PURE__ */ Object.create({}));
 }
-function Vt(a) {
-  const t = a[M];
-  return delete a[M], !!t;
+function Vt(r) {
+  const t = r[M];
+  return delete r[M], !!t;
 }
-function Rt(a) {
+function Rt(r) {
   let t = !1;
-  const e = (r) => {
-    t || (r[M] = !0);
+  const e = (a) => {
+    t || (a[M] = !0);
   };
-  return a.model.document.once("change:data", e, { priority: "highest" }), () => {
-    t = !0, a.model.document.off("change:data", e);
+  return r.model.document.once("change:data", e, { priority: "highest" }), () => {
+    t = !0, r.model.document.off("change:data", e);
   };
 }
 class et {
@@ -1403,11 +1403,11 @@ class et {
   constructor({
     el: t,
     editor: e,
-    rootName: r,
+    rootName: a,
     valueAttrName: n = "data-cke-value",
     rootAttrsAttrName: i = "data-cke-root-attrs"
   }) {
-    this.el = t, this.editor = e, this.rootName = r, this.valueAttrName = n, this.rootAttrsAttrName = i;
+    this.el = t, this.editor = e, this.rootName = a, this.valueAttrName = n, this.rootAttrsAttrName = i;
     const { value: s } = this.attrs;
     this.previousValue = s, this.setupSyncHandlers(e, this.rootName);
   }
@@ -1426,13 +1426,13 @@ class et {
    * However, if the editor is focused, we want to wait until it blurs to avoid disrupting the user while typing.
    */
   async updated() {
-    const { editor: t } = this, { value: e, rootAttributes: r } = this.attrs;
+    const { editor: t } = this, { value: e, rootAttributes: a } = this.attrs;
     if (!t || t.state === "destroyed" || this.isDestroyed)
       return;
     let n = () => {
     };
     t.model.enqueueChange({ isUndoable: !1 }, () => {
-      let i = this.attrsUpdater?.(r);
+      let i = this.attrsUpdater?.(a);
       e !== this.previousValue && (this.previousValue = e, t.ui.focusTracker.isFocused ? this.pendingValue = e : (this.setRootValue(t, this.rootName, e), i = !0)), i && (n = Rt(t));
     }), n();
   }
@@ -1442,20 +1442,20 @@ class et {
    */
   setupSyncHandlers(t, e) {
     this.attrsUpdater = xt(t, e), this.attrsUpdater(this.attrs.rootAttributes);
-    const r = () => {
+    const a = () => {
       this.pendingValue = null;
     }, n = () => {
       !t.ui.focusTracker.isFocused && this.pendingValue !== null && (this.setRootValue(t, e, this.pendingValue), this.pendingValue = null);
     };
-    t.model.document.on("change:data", r), t.ui.focusTracker.on("change:isFocused", n), this.cleanupCallbacks.push(() => {
-      t.model.document.off("change:data", r), t.ui.focusTracker.off("change:isFocused", n);
+    t.model.document.on("change:data", a), t.ui.focusTracker.on("change:isFocused", n), this.cleanupCallbacks.push(() => {
+      t.model.document.off("change:data", a), t.ui.focusTracker.off("change:isFocused", n);
     });
   }
   /**
    * Sets the value of a specific root in the editor.
    */
-  setRootValue(t, e, r) {
-    t.getData({ rootName: e }) !== r && t.setData({ [e]: r });
+  setRootValue(t, e, a) {
+    t.getData({ rootName: e }) !== a && t.setData({ [e]: a });
   }
   /**
    * Disconnects the observer and cleans up editor event listeners.
@@ -1478,19 +1478,19 @@ class Ut extends D {
    * Attributes for the editor instance.
    */
   get attrs() {
-    const { el: t } = this, e = t.getAttribute.bind(t), r = t.hasAttribute.bind(t), n = {
+    const { el: t } = this, e = t.getAttribute.bind(t), a = t.hasAttribute.bind(t), n = {
       editorId: e("id"),
       contextId: e("data-cke-context-id"),
       preset: gt(t),
-      editableHeight: F(e("data-cke-editable-height")),
-      watchdog: r("data-cke-watchdog"),
+      editableHeight: B(e("data-cke-editable-height")),
+      watchdog: a("data-cke-watchdog"),
       events: {
-        change: r("data-cke-change-event"),
-        blur: r("data-cke-blur-event"),
-        focus: r("data-cke-focus-event"),
-        ready: r("data-cke-ready-event")
+        change: a("data-cke-change-event"),
+        blur: a("data-cke-blur-event"),
+        focus: a("data-cke-focus-event"),
+        ready: a("data-cke-ready-event")
       },
-      saveDebounceMs: F(e("data-cke-save-debounce-ms")) ?? 400,
+      saveDebounceMs: B(e("data-cke-save-debounce-ms")) ?? 400,
       language: {
         ui: e("data-cke-language") || "en",
         content: e("data-cke-content-language") || "en"
@@ -1513,7 +1513,7 @@ class Ut extends D {
       const e = await this.createEditor();
       if (this.isBeingDestroyed())
         return;
-      const r = h.the.mountEffect(t, (n) => (n.once("destroy", () => {
+      const a = h.the.mountEffect(t, (n) => (n.once("destroy", () => {
         h.the.unregister(t, !1);
       }, { priority: "highest" }), this.sentinel = new et({
         editor: n,
@@ -1524,7 +1524,11 @@ class Ut extends D {
       }), () => {
         this.sentinel?.destroy(), this.sentinel = null;
       }));
-      this.onBeforeDestroy(r), h.the.register(t, e);
+      this.onBeforeDestroy(async () => {
+        h.the.unregister(t), a();
+        const n = pt(e), i = Et(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) {
       console.error(e), h.the.error(t, e);
     }
@@ -1537,18 +1541,10 @@ class Ut extends D {
     this.sentinel?.updated();
   }
   /**
-   * Destroys the editor instance when the component is destroyed.
-   * This is important to prevent memory leaks and ensure that the editor is properly cleaned up.
+   * Destroys editor component.
    */
   async destroyed() {
-    const { editorId: t } = this.attrs;
     this.el.style.display = "none";
-    const e = await h.the.waitFor(t);
-    if (!e)
-      return;
-    h.the.unregister(t);
-    const r = pt(e), n = Et(e);
-    r ? r.state !== "unavailable" && await r.context.remove(r.editorContextId) : n ? await n.destroy() : await e.destroy();
   }
   /**
    * Creates the CKEditor instance.
@@ -1557,13 +1553,13 @@ class Ut extends D {
     const {
       preset: t,
       editorId: e,
-      contextId: r,
+      contextId: a,
       editableHeight: n,
       events: i,
       saveDebounceMs: s,
       language: c,
       watchdog: o
-    } = this.attrs, { customTranslations: u, type: l, license: d, config: { plugins: w, ...m } } = t, v = await ft(l), g = await (r ? y.the.waitFor(r) : Tt(this.el)), C = async () => {
+    } = this.attrs, { customTranslations: u, type: l, license: d, config: { plugins: w, ...m } } = t, v = await ft(l), g = await (a ? y.the.waitFor(a) : Tt(this.el)), C = async () => {
       const { loadedPlugins: f, hasPremium: P } = await G(w);
       A(l) && f.push(
         await St({
@@ -1630,19 +1626,19 @@ class Ut extends D {
     return C();
   }
 }
-function rt(a, t) {
-  return t.every((e) => a[e]);
+function rt(r, t) {
+  return t.every((e) => r[e]);
 }
-async function Mt(a, t) {
+async function Mt(r, t) {
   return dt(
     () => {
-      const e = Z(a);
+      const e = Z(r);
       if (!rt(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.
 * If you want lazy initialize roots, consider removing root values from the \`initialData\` config and assign initial data in editable components.
-Missing roots: ${t.filter((r) => !e[r]).join(", ")}.`
+Missing roots: ${t.filter((a) => !e[a]).join(", ")}.`
         );
       return e;
     },
@@ -1676,32 +1672,32 @@ class _t extends D {
    * Mounts the editable component.
    */
   mounted() {
-    const { editableId: t, editorId: e, rootName: r, initialValue: n } = this.attrs, i = h.the.mountEffect(e, (s) => {
+    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]");
       if (this.isBeingDestroyed())
         return;
       const o = this.el.querySelector(`#${t}_input`);
-      if (B(s) && !s.model.document.getRoot(r)) {
+      if (F(s) && !s.model.document.getRoot(a)) {
         const { ui: l, editing: d } = s;
-        s.addRoot(r, {
+        s.addRoot(a, {
           isUndoable: !1,
           data: n
         });
-        const w = l.view.createEditable(r, c);
+        const w = l.view.createEditable(a, c);
         l.addEditable(w), d.view.forceRender();
       }
       this.sentinel = new et({
         el: this.el,
         editor: s,
-        rootName: r,
+        rootName: a,
         valueAttrName: "data-cke-editable-initial-value",
         rootAttrsAttrName: "data-cke-editable-root-attrs"
       });
-      const u = o ? Ht(o, s, r) : null;
+      const u = o ? Ht(o, s, a) : null;
       return () => {
         if (u?.(), this.sentinel?.destroy(), this.sentinel = null, s.state !== "destroyed") {
-          const l = s.model.document.getRoot(r);
-          l && B(s) && (s.ui.view.editables[r] && s.detachEditable(l), l.isAttached() && s.detachRoot(r, !1));
+          const l = s.model.document.getRoot(a);
+          l && F(s) && (s.ui.view.editables[a] && s.detachEditable(l), l.isAttached() && s.detachRoot(a, !1));
         }
       };
     });
@@ -1717,11 +1713,11 @@ class _t extends D {
   }
 }
 const zt = S(_t);
-function Ht(a, t, e) {
-  const r = () => {
-    a.value = t.getData({ rootName: e });
-  }, n = T(200, r);
-  return t.model.document.on("change:data", n), r(), () => {
+function Ht(r, t, e) {
+  const a = () => {
+    r.value = t.getData({ rootName: e });
+  }, n = T(200, a);
+  return t.model.document.on("change:data", n), a(), () => {
     t.model.document.off("change:data", n);
   };
 }
@@ -1745,7 +1741,7 @@ class jt extends D {
    * Mounts the UI part component.
    */
   mounted() {
-    const { editorId: t, name: e } = this.attrs, r = h.the.mountEffect(t, (n) => {
+    const { editorId: t, name: e } = this.attrs, a = h.the.mountEffect(t, (n) => {
       if (this.isBeingDestroyed())
         return;
       const { ui: i } = n, s = qt(e), c = i.view[s];
@@ -1758,12 +1754,12 @@ class jt extends D {
       };
     });
     this.onBeforeDestroy(() => {
-      this.el.style.display = "none", r();
+      this.el.style.display = "none", a();
     });
   }
 }
-function qt(a) {
-  switch (a) {
+function qt(r) {
+  switch (r) {
     case "toolbar":
       return "toolbar";
     case "menubar":
@@ -1772,10 +1768,10 @@ function qt(a) {
       return null;
   }
 }
-const Ft = S(jt), Kt = {
+const Bt = S(jt), Kt = {
   CKEditor5: $t,
   CKEditable: zt,
-  CKUIPart: Ft,
+  CKUIPart: Bt,
   CKContext: It
 };
 export {