ckeditor5-phoenix 1.15.1 → 1.15.2

package/dist/index.mjs

@@ -25,12 +25,12 @@ class V {
    * @returns A promise that resolves with the result of the function.
    */
   execute(t, e, r) {
-    const i = this.items.get(t), n = this.initializationErrors.get(t);
-    return n ? (r?.(n), Promise.reject(n)) : i ? Promise.resolve(e(i)) : new Promise((s, o) => {
-      const c = this.getPendingCallbacks(t);
-      c.success.push(async (m) => {
-        s(await e(m));
-      }), r ? c.error.push(r) : c.error.push(o);
+    const a = this.items.get(t), n = this.initializationErrors.get(t);
+    return n ? (r?.(n), Promise.reject(n)) : a ? Promise.resolve(e(a)) : new Promise((s, u) => {
+      const o = this.getPendingCallbacks(t);
+      o.success.push(async (c) => {
+        s(await e(c));
+      }), r ? o.error.push(r) : o.error.push(u);
     });
   }
   /**
@@ -44,7 +44,7 @@ class V {
       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((i) => i(e)), this.pendingCallbacks.delete(t)), this.registerAsDefault(t, e), this.notifyWatchers();
+    r && (r.success.forEach((a) => a(e)), this.pendingCallbacks.delete(t)), this.registerAsDefault(t, e), this.notifyWatchers();
   }
   /**
    * Registers an error for an item.
@@ -55,7 +55,7 @@ class V {
   error(t, e) {
     this.items.delete(t), this.initializationErrors.set(t, e);
     const r = this.pendingCallbacks.get(t);
-    r && (r.error.forEach((i) => i(e)), this.pendingCallbacks.delete(t)), this.initializationErrors.size === 1 && !this.items.size && this.error(null, e), this.notifyWatchers();
+    r && (r.error.forEach((a) => a(e)), this.pendingCallbacks.delete(t)), this.initializationErrors.size === 1 && !this.items.size && this.error(null, e), this.notifyWatchers();
   }
   /**
    * Resets errors for an item.
@@ -164,35 +164,35 @@ class V {
     this.items.size === 1 && t !== null && this.register(null, e);
   }
 }
-function F(a) {
-  return a.replace(/[-_\s]+(.)?/g, (t, e) => e ? e.toUpperCase() : "").replace(/^./, (t) => t.toLowerCase());
+function F(i) {
+  return i.replace(/[-_\s]+(.)?/g, (t, e) => e ? e.toUpperCase() : "").replace(/^./, (t) => t.toLowerCase());
 }
-function O(a, t) {
+function O(i, t) {
   let e = null;
   return (...r) => {
     e && clearTimeout(e), e = setTimeout(() => {
       t(...r);
-    }, a);
+    }, i);
   };
 }
-function G(a) {
-  if (Object.prototype.toString.call(a) !== "[object Object]")
+function G(i) {
+  if (Object.prototype.toString.call(i) !== "[object Object]")
     return !1;
-  const t = Object.getPrototypeOf(a);
+  const t = Object.getPrototypeOf(i);
   return t === Object.prototype || t === null;
 }
-function E(a) {
-  if (Array.isArray(a))
-    return a.map(E);
-  if (G(a)) {
+function b(i) {
+  if (Array.isArray(i))
+    return i.map(b);
+  if (G(i)) {
     const t = /* @__PURE__ */ Object.create(null);
-    for (const [e, r] of Object.entries(a))
-      t[F(e)] = E(r);
+    for (const [e, r] of Object.entries(i))
+      t[F(e)] = b(r);
     return t;
   }
-  return a;
+  return i;
 }
-class k {
+class E {
   /**
    * The current state of the hook.
    */
@@ -234,15 +234,15 @@ class k {
     return this.state === "destroyed" || this.state === "destroying";
   }
 }
-function P(a) {
+function k(i) {
   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.liveSocket = this.liveSocket, t.pushEvent = (r, i, n) => this.pushEvent?.(r, i, n), t.pushEventTo = (r, i, n, s) => this.pushEventTo?.(r, i, n, s), t.handleEvent = (r, i) => this.handleEvent?.(r, i), t.state = "mounting";
+      const t = new i();
+      this.el.instance = t, t.el = this.el, t.liveSocket = this.liveSocket, t.pushEvent = (r, a, n) => this.pushEvent?.(r, a, n), t.pushEventTo = (r, a, n, s) => this.pushEventTo?.(r, a, n, s), t.handleEvent = (r, a) => this.handleEvent?.(r, a), t.state = "mounting";
       const e = await t.mounted?.();
       return t.state = "mounted", e;
     },
@@ -273,67 +273,67 @@ function P(a) {
     }
   };
 }
-function W(a) {
-  return Object.keys(a).length === 0 && a.constructor === Object;
+function L(i) {
+  return Object.keys(i).length === 0 && i.constructor === Object;
 }
-function Y(a) {
-  return a == null;
+function Y(i) {
+  return i == null;
 }
-function A(a, t) {
-  const e = Object.entries(a).map(([r, i]) => [r, t(i, r)]);
+function A(i, t) {
+  const e = Object.entries(i).map(([r, a]) => [r, t(a, r)]);
   return Object.fromEntries(e);
 }
-function H(a) {
-  if (a === null)
+function N(i) {
+  if (i === null)
     return null;
-  const t = Number.parseInt(a, 10);
+  const t = Number.parseInt(i, 10);
   return Number.isNaN(t) ? null : t;
 }
 function J() {
   return Math.random().toString(36).substring(2);
 }
 const I = Symbol.for("context-editor-watchdog");
-async function X({ element: a, context: t, creator: e, config: r }) {
-  const i = J();
+async function X({ element: i, context: t, creator: e, config: r }) {
+  const a = J();
   await t.add({
-    creator: (c, m) => e.create(c, m),
-    id: i,
-    sourceElementOrData: a,
+    creator: (o, c) => e.create(o, c),
+    id: a,
+    sourceElementOrData: i,
     type: "editor",
     config: r
   });
-  const n = t.getItem(i), s = {
+  const n = t.getItem(a), s = {
     state: "available",
-    editorContextId: i,
+    editorContextId: a,
     context: t
   };
   n[I] = s;
-  const o = t.destroy.bind(t);
-  return t.destroy = async () => (s.state = "unavailable", o()), {
+  const u = t.destroy.bind(t);
+  return t.destroy = async () => (s.state = "unavailable", u()), {
     ...s,
     editor: n
   };
 }
-function Q(a) {
-  return I in a ? a[I] : null;
+function Q(i) {
+  return I in i ? i[I] : null;
 }
-function D(a) {
-  return ["inline", "classic", "balloon", "decoupled"].includes(a);
+function y(i) {
+  return ["inline", "classic", "balloon", "decoupled"].includes(i);
 }
-async function Z(a) {
+async function Z(i) {
   const t = await import("ckeditor5"), r = {
     inline: t.InlineEditor,
     balloon: t.BalloonEditor,
     classic: t.ClassicEditor,
     decoupled: t.DecoupledEditor,
     multiroot: t.MultiRootEditor
-  }[a];
+  }[i];
   if (!r)
-    throw new Error(`Unsupported editor type: ${a}`);
+    throw new Error(`Unsupported editor type: ${i}`);
   return r;
 }
-class $ {
-  static the = new $();
+class D {
+  static the = new D();
   /**
    * Map of registered custom plugins.
    */
@@ -392,53 +392,53 @@ class $ {
     return this.plugins.has(t);
   }
 }
-async function q(a) {
+async function q(i) {
   const t = await import("ckeditor5");
   let e = null;
-  const r = a.map(async (i) => {
-    const n = await $.the.get(i);
+  const r = i.map(async (a) => {
+    const n = await D.the.get(a);
     if (n)
       return n;
-    const { [i]: s } = t;
+    const { [a]: 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}`);
+      } catch (o) {
+        console.error(`Failed to load premium package: ${o}`);
       }
-    const { [i]: o } = e || {};
-    if (o)
-      return o;
-    throw new Error(`Plugin "${i}" not found in base or premium packages.`);
+    const { [a]: u } = e || {};
+    if (u)
+      return u;
+    throw new Error(`Plugin "${a}" not found in base or premium packages.`);
   });
   return {
     loadedPlugins: await Promise.all(r),
     hasPremium: !!e
   };
 }
-async function B(a, t) {
-  const e = [a.ui, a.content];
+async function B(i, t) {
+  const e = [i.ui, i.content];
   return await Promise.all(
     [
       z("ckeditor5", e),
       /* v8 ignore next */
       t && z("ckeditor5-premium-features", e)
-    ].filter((i) => !!i)
-  ).then((i) => i.flat());
+    ].filter((a) => !!a)
+  ).then((a) => a.flat());
 }
-async function z(a, t) {
+async function z(i, t) {
   return await Promise.all(
     t.filter((e) => e !== "en").map(async (e) => {
-      const r = await tt(a, e);
+      const r = await tt(i, e);
       return r?.default ?? r;
     }).filter(Boolean)
   );
 }
-async function tt(a, t) {
+async function tt(i, t) {
   try {
-    if (a === "ckeditor5")
+    if (i === "ckeditor5")
       switch (t) {
         case "af":
           return await import("ckeditor5/translations/af.js");
@@ -733,76 +733,76 @@ async function tt(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 ${i}/${t}:`, e), null;
   }
 }
-function L(a) {
-  return A(a, (t) => ({
+function U(i) {
+  return A(i, (t) => ({
     dictionary: t
   }));
 }
-function j(a) {
+function S(i) {
   const t = document.querySelectorAll(
     [
-      `[data-cke-editor-id="${a}"][data-cke-editable-root-name]`,
+      `[data-cke-editor-id="${i}"][data-cke-editable-root-name]`,
       "[data-cke-editable-root-name]:not([data-cke-editor-id])"
     ].join(", ")
   );
   return Array.from(t).reduce((e, r) => {
-    const i = r.getAttribute("data-cke-editable-root-name"), n = r.getAttribute("data-cke-editable-initial-value") || "", s = r.querySelector("[data-cke-editable-content]");
-    return !i || !s ? e : {
+    const a = r.getAttribute("data-cke-editable-root-name"), n = r.getAttribute("data-cke-editable-initial-value") || "", s = r.querySelector("[data-cke-editable-content]");
+    return !a || !s ? e : {
       ...e,
-      [i]: {
+      [a]: {
         content: s,
         initialValue: n
       }
     };
   }, /* @__PURE__ */ Object.create({}));
 }
-const N = ["inline", "classic", "balloon", "decoupled", "multiroot"];
-function et(a) {
-  const t = a.getAttribute("cke-preset");
+const W = ["inline", "classic", "balloon", "decoupled", "multiroot"];
+function et(i) {
+  const t = i.getAttribute("cke-preset");
   if (!t)
     throw new Error('CKEditor5 hook requires a "cke-preset" attribute on the element.');
-  const { type: e, config: r, license: i, ...n } = JSON.parse(t);
-  if (!e || !r || !i)
+  const { type: e, config: r, license: a, ...n } = JSON.parse(t);
+  if (!e || !r || !a)
     throw new Error('CKEditor5 hook configuration must include "editor", "config", and "license" properties.');
-  if (!N.includes(e))
-    throw new Error(`Invalid editor type: ${e}. Must be one of: ${N.join(", ")}.`);
+  if (!W.includes(e))
+    throw new Error(`Invalid editor type: ${e}. Must be one of: ${W.join(", ")}.`);
   return {
     type: e,
-    license: i,
-    config: E(r),
+    license: a,
+    config: b(r),
     customTranslations: n.customTranslations || n.custom_translations
   };
 }
-function T(a) {
-  if (!a || typeof a != "object")
-    return a;
-  if (Array.isArray(a))
-    return a.map((r) => T(r));
-  const t = a;
+function x(i) {
+  if (!i || typeof i != "object")
+    return i;
+  if (Array.isArray(i))
+    return i.map((r) => x(r));
+  const t = i;
   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 e = /* @__PURE__ */ Object.create(null);
-  for (const [r, i] of Object.entries(a))
-    e[r] = T(i);
+  for (const [r, a] of Object.entries(i))
+    e[r] = x(a);
   return e;
 }
-function rt(a, t) {
-  const { editing: e } = a;
+function rt(i, t) {
+  const { editing: e } = i;
   e.view.change((r) => {
     r.setStyle("height", `${t}px`, e.view.document.getRoot());
   });
 }
-const x = Symbol.for("elixir-editor-watchdog");
-async function at(a) {
-  const { EditorWatchdog: t } = await import("ckeditor5"), e = new t(a);
+const T = 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 i = await a.create(...r);
-    return i[x] = e, i;
+    const a = await i.create(...r);
+    return a[T] = e, a;
   }), {
     watchdog: e,
     Constructor: {
@@ -810,24 +810,24 @@ async function at(a) {
     }
   };
 }
-function it(a) {
-  return x in a ? a[x] : null;
+function at(i) {
+  return T in i ? i[T] : null;
 }
-class w extends V {
-  static the = new w();
+class p extends V {
+  static the = new p();
 }
-function nt(a) {
-  const t = a.getAttribute("cke-context");
+function nt(i) {
+  const t = i.getAttribute("cke-context");
   if (!t)
     throw new Error('CKEditor5 hook requires a "cke-context" attribute on the element.');
   const { config: e, ...r } = JSON.parse(t);
   return {
-    config: E(e),
+    config: b(e),
     customTranslations: r.customTranslations || r.custom_translations,
     watchdogConfig: r.watchdogConfig || r.watchdog_config
   };
 }
-class st extends k {
+class st extends E {
   /**
    * The promise that resolves to the context instance.
    */
@@ -855,28 +855,28 @@ class st extends k {
    * Mounts the context component.
    */
   async mounted() {
-    const { id: t, language: e } = this.attrs, { customTranslations: r, watchdogConfig: i, config: { plugins: n, ...s } } = this.attrs.config, { loadedPlugins: o, hasPremium: c } = await q(n ?? []), d = [
-      ...await B(e, c),
-      L(r?.dictionary || {})
-    ].filter((f) => !W(f));
+    const { id: t, language: e } = this.attrs, { customTranslations: r, watchdogConfig: a, config: { plugins: n, ...s } } = this.attrs.config, { loadedPlugins: u, hasPremium: o } = await q(n ?? []), l = [
+      ...await B(e, o),
+      U(r?.dictionary || {})
+    ].filter((w) => !L(w));
     this.contextPromise = (async () => {
-      const { ContextWatchdog: f, Context: v } = await import("ckeditor5"), p = new f(v, {
+      const { ContextWatchdog: w, Context: P } = await import("ckeditor5"), m = new w(P, {
         crashNumberLimit: 10,
-        ...i
+        ...a
       });
-      return await p.create({
+      return await m.create({
         ...s,
         language: e,
-        plugins: o,
-        ...d.length && {
-          translations: d
+        plugins: u,
+        ...l.length && {
+          translations: l
         }
-      }), p.on("itemError", (...b) => {
-        console.error("Context item error:", ...b);
-      }), p;
+      }), m.on("itemError", (...g) => {
+        console.error("Context item error:", ...g);
+      }), m;
     })();
-    const g = await this.contextPromise;
-    this.isBeingDestroyed() || w.the.register(t, g);
+    const h = await this.contextPromise;
+    this.isBeingDestroyed() || p.the.register(t, h);
   }
   /**
    * Destroys the context component. Unmounts root from the editor.
@@ -887,15 +887,15 @@ class st extends k {
     try {
       await (await this.contextPromise)?.destroy();
     } finally {
-      this.contextPromise = null, w.the.hasItem(t) && w.the.unregister(t);
+      this.contextPromise = null, p.the.hasItem(t) && p.the.unregister(t);
     }
   }
 }
-function ot(a) {
-  return a.hasAttribute("cke-context");
+function ot(i) {
+  return i.hasAttribute("cke-context");
 }
-function ct(a) {
-  let t = a;
+function ct(i) {
+  let t = i;
   for (; t; ) {
     if (ot(t))
       return t;
@@ -903,15 +903,15 @@ function ct(a) {
   }
   return null;
 }
-async function ut(a) {
-  const t = ct(a);
-  return t ? w.the.waitFor(t.id) : null;
+async function ut(i) {
+  const t = ct(i);
+  return t ? p.the.waitFor(t.id) : null;
 }
-const lt = P(st);
-class l extends V {
-  static the = new l();
+const lt = k(st);
+class d extends V {
+  static the = new d();
 }
-class dt extends k {
+class dt extends E {
   /**
    * The name of the hook.
    */
@@ -937,17 +937,17 @@ class dt extends k {
    * Mounts the editable component.
    */
   async mounted() {
-    const { editableId: t, editorId: e, rootName: r, initialValue: i } = this.attrs, n = this.el.querySelector(`#${t}_input`);
-    this.editorPromise = l.the.execute(e, (s) => {
-      const { ui: o, editing: c, model: m } = s;
-      if (m.document.getRoot(r))
+    const { editableId: t, editorId: e, rootName: r, initialValue: a } = this.attrs, n = this.el.querySelector(`#${t}_input`);
+    this.editorPromise = d.the.execute(e, (s) => {
+      const { ui: u, editing: o, model: c } = s;
+      if (c.document.getRoot(r))
         return s;
       s.addRoot(r, {
         isUndoable: !1,
-        data: i
+        data: a
       });
-      const d = this.el.querySelector("[data-cke-editable-content]"), g = o.view.createEditable(r, d);
-      return o.addEditable(g), c.view.forceRender(), n && pt(n, s, r), s;
+      const l = this.el.querySelector("[data-cke-editable-content]"), h = u.view.createEditable(r, l);
+      return u.addEditable(h), o.view.forceRender(), n && ht(n, s, r), s;
     });
   }
   /**
@@ -963,14 +963,110 @@ class dt extends k {
     }
   }
 }
-const mt = P(dt);
-function pt(a, t, e) {
+const mt = k(dt);
+function ht(i, t, e) {
   const r = () => {
-    a.value = t.getData({ rootName: e });
+    i.value = t.getData({ rootName: e });
   };
   t.model.document.on("change:data", O(100, r)), r();
 }
-class ht extends k {
+async function pt({
+  editorId: i,
+  saveDebounceMs: t
+}) {
+  const { Plugin: e } = await import("ckeditor5");
+  return class extends e {
+    /**
+     * The input element to synchronize with.
+     */
+    input = null;
+    /**
+     * The form element reference for cleanup.
+     */
+    form = null;
+    /**
+     * The name of the plugin.
+     */
+    static get pluginName() {
+      return "SyncEditorWithInput";
+    }
+    /**
+     * Initializes the plugin.
+     */
+    afterInit() {
+      const { editor: a } = this;
+      this.input = document.getElementById(`${i}_input`), this.input && (a.model.document.on("change:data", O(t, () => this.sync())), a.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.
+     */
+    sync = () => {
+      const a = this.editor.getData();
+      this.input.value = a, this.input.dispatchEvent(new Event("input", { bubbles: !0 }));
+    };
+    /**
+     * Destroys the plugin.
+     */
+    destroy() {
+      this.form && this.form.removeEventListener("submit", this.sync), this.input = null, this.form = null;
+    }
+  };
+}
+async function wt(i) {
+  const { Plugin: t } = await import("ckeditor5"), { editorId: e, saveDebounceMs: r, events: a, pushEvent: n, handleEvent: s } = i;
+  return class extends t {
+    /**
+     * The name of the plugin.
+     */
+    static get pluginName() {
+      return "SyncEditorWithPhoenix";
+    }
+    /**
+     * Initializes the plugin.
+     */
+    init() {
+      const { editor: o } = this;
+      a.change && this.setupTypingContentPush(), a.blur && this.setupEventPush("blur"), a.focus && this.setupEventPush("focus"), s("ckeditor5:set-data", ({ editorId: c, data: l }) => {
+        (Y(c) || c === e) && o.setData(l);
+      });
+    }
+    /**
+     * Setups the content push event for the editor.
+     */
+    setupTypingContentPush() {
+      const { editor: o } = this, c = () => {
+        n(
+          "ckeditor5:change",
+          {
+            editorId: e,
+            data: R(this.editor)
+          }
+        );
+      };
+      o.model.document.on("change:data", O(r, c)), o.once("ready", c);
+    }
+    /**
+     * Setups the event push for the editor.
+     */
+    setupEventPush(o) {
+      const { editor: c } = this, l = () => {
+        const { isFocused: h } = c.ui.focusTracker;
+        (h ? "focus" : "blur") === o && n(
+          `ckeditor5:${o}`,
+          {
+            editorId: e,
+            data: R(c)
+          }
+        );
+      };
+      c.ui.focusTracker.on("change:isFocused", l);
+    }
+  };
+}
+function R(i) {
+  return i.model.document.getRootNames().reduce((e, r) => (e[r] = i.getData({ rootName: r }), e), /* @__PURE__ */ Object.create({}));
+}
+class ft extends E {
   /**
    * The promise that resolves to the editor instance.
    */
@@ -979,44 +1075,44 @@ class ht extends k {
    * Attributes for the editor instance.
    */
   get attrs() {
-    const { el: t } = this, e = t.getAttribute.bind(t), r = t.hasAttribute.bind(t), i = {
+    const { el: t } = this, e = t.getAttribute.bind(t), r = t.hasAttribute.bind(t), a = {
       editorId: e("id"),
       contextId: e("cke-context-id"),
       preset: et(t),
-      editableHeight: H(e("cke-editable-height")),
+      editableHeight: N(e("cke-editable-height")),
       watchdog: r("cke-watchdog"),
       events: {
         change: r("cke-change-event"),
         blur: r("cke-blur-event"),
         focus: r("cke-focus-event")
       },
-      saveDebounceMs: H(e("cke-save-debounce-ms")) ?? 400,
+      saveDebounceMs: N(e("cke-save-debounce-ms")) ?? 400,
       language: {
         ui: e("cke-language") || "en",
         content: e("cke-content-language") || "en"
       }
     };
     return Object.defineProperty(this, "attrs", {
-      value: i,
+      value: a,
       writable: !1,
       configurable: !1,
       enumerable: !0
-    }), i;
+    }), a;
   }
   /**
    * Mounts the editor component.
    */
   async mounted() {
     const { editorId: t } = this.attrs;
-    l.the.resetErrors(t);
+    d.the.resetErrors(t);
     try {
       this.editorPromise = this.createEditor();
       const e = await this.editorPromise;
-      this.isBeingDestroyed() || (l.the.register(t, e), e.once("destroy", () => {
-        l.the.hasItem(t) && l.the.unregister(t);
+      this.isBeingDestroyed() || (d.the.register(t, e), e.once("destroy", () => {
+        d.the.hasItem(t) && d.the.unregister(t);
       }));
     } catch (e) {
-      this.editorPromise = null, l.the.error(t, e);
+      this.editorPromise = null, d.the.error(t, e);
     }
     return this;
   }
@@ -1030,7 +1126,7 @@ class ht extends k {
       const t = await this.editorPromise;
       if (!t)
         return;
-      const e = Q(t), r = it(t);
+      const e = Q(t), r = at(t);
       e ? e.state !== "unavailable" && await e.context.remove(e.editorContextId) : r ? await r.destroy() : await t.destroy();
     } finally {
       this.editorPromise = null;
@@ -1040,116 +1136,81 @@ class ht extends k {
    * Creates the CKEditor instance.
    */
   async createEditor() {
-    const { preset: t, editorId: e, contextId: r, editableHeight: i, events: n, saveDebounceMs: s, language: o, watchdog: c } = this.attrs, { customTranslations: m, type: d, license: g, config: { plugins: f, ...v } } = t;
-    let p = await Z(d);
-    const b = await (r ? w.the.waitFor(r) : ut(this.el));
-    if (c && !b) {
-      const u = await at(p);
-      ({ Constructor: p } = u), u.watchdog.on("restart", () => {
-        const y = u.watchdog.editor;
-        this.editorPromise = Promise.resolve(y), l.the.register(e, y);
+    const { preset: t, editorId: e, contextId: r, editableHeight: a, events: n, saveDebounceMs: s, language: u, watchdog: o } = this.attrs, { customTranslations: c, type: l, license: h, config: { plugins: w, ...P } } = t;
+    let m = await Z(l);
+    const g = await (r ? p.the.waitFor(r) : ut(this.el));
+    if (o && !g) {
+      const f = await it(m);
+      ({ Constructor: m } = f), f.watchdog.on("restart", () => {
+        const H = f.watchdog.editor;
+        this.editorPromise = Promise.resolve(H), d.the.register(e, H);
       });
     }
-    const { loadedPlugins: _, hasPremium: K } = await q(f), M = [
-      ...await B(o, K),
-      L(m?.dictionary || {})
-    ].filter((u) => !W(u)), C = ft(e, d), S = {
-      ...T(v),
-      initialData: bt(e, d),
-      licenseKey: g.key,
-      plugins: _,
-      language: o,
-      ...M.length && {
-        translations: M
+    const { loadedPlugins: v, hasPremium: K } = await q(w);
+    y(l) && v.push(
+      await pt({
+        editorId: e,
+        saveDebounceMs: s
+      })
+    ), v.push(
+      await wt({
+        editorId: e,
+        saveDebounceMs: s,
+        events: n,
+        pushEvent: this.pushEvent.bind(this),
+        handleEvent: this.handleEvent.bind(this)
+      })
+    );
+    const $ = [
+      ...await B(u, K),
+      U(c?.dictionary || {})
+    ].filter((f) => !L(f)), C = gt(e, l), j = {
+      ...x(P),
+      initialData: bt(e, l),
+      licenseKey: h.key,
+      plugins: v,
+      language: u,
+      ...$.length && {
+        translations: $
       }
-    }, h = await (async () => !b || !(C instanceof HTMLElement) ? p.create(C, S) : (await X({
-      context: b,
+    }, M = await (async () => !g || !(C instanceof HTMLElement) ? m.create(C, j) : (await X({
+      context: g,
       element: C,
-      creator: p,
-      config: S
+      creator: m,
+      config: j
     })).editor)();
-    if (n.change && this.setupTypingContentPush(e, h, s), n.blur && this.setupEventPush(e, h, "blur"), n.focus && this.setupEventPush(e, h, "focus"), this.handleEvent("ckeditor5:set-data", ({ editorId: u, data: y }) => {
-      (Y(u) || u === this.attrs.editorId) && h.setData(y);
-    }), D(d)) {
-      const u = document.getElementById(`${e}_input`);
-      u && wt(u, h, s), i && rt(h, i);
-    }
-    return h;
+    return y(l) && a && rt(M, a), M;
   }
-  /**
-   * Setups the content push event for the editor.
-   */
-  setupTypingContentPush(t, e, r) {
-    const i = () => {
-      this.pushEvent(
-        "ckeditor5:change",
-        {
-          editorId: t,
-          data: R(e)
-        }
-      );
-    };
-    e.model.document.on("change:data", O(r, i)), i();
-  }
-  /**
-   * Setups the event push for the editor.
-   */
-  setupEventPush(t, e, r) {
-    const i = () => {
-      const { isFocused: n } = e.ui.focusTracker;
-      (n ? "focus" : "blur") === r && this.pushEvent(
-        `ckeditor5:${r}`,
-        {
-          editorId: t,
-          data: R(e)
-        }
-      );
-    };
-    e.ui.focusTracker.on("change:isFocused", i);
-  }
-}
-function R(a) {
-  return a.model.document.getRootNames().reduce((e, r) => (e[r] = a.getData({ rootName: r }), e), /* @__PURE__ */ Object.create({}));
-}
-function wt(a, t, e) {
-  const r = () => {
-    const i = t.getData();
-    a.value = i, a.dispatchEvent(new Event("input", { bubbles: !0 }));
-  };
-  t.model.document.on("change:data", O(e, r)), gt(a)?.addEventListener("submit", r), r();
-}
-function gt(a) {
-  return a.closest("form");
 }
-function ft(a, t) {
+function gt(i, t) {
   if (t === "decoupled") {
-    const { content: r } = U(a);
+    const { content: r } = _(i);
     return r;
   }
-  if (D(t))
-    return document.getElementById(`${a}_editor`);
-  const e = j(a);
+  if (y(t))
+    return document.getElementById(`${i}_editor`);
+  const e = S(i);
   return A(e, ({ content: r }) => r);
 }
-function bt(a, t) {
+function bt(i, t) {
   if (t === "decoupled") {
-    const { initialValue: r } = U(a);
+    const { initialValue: r } = _(i);
     if (r)
       return r;
   }
-  if (D(t))
-    return document.getElementById(a)?.getAttribute("cke-initial-value") || "";
-  const e = j(a);
+  if (y(t))
+    return document.getElementById(i)?.getAttribute("cke-initial-value") || "";
+  const e = S(i);
   return A(e, ({ initialValue: r }) => r);
 }
-function U(a) {
-  const t = j(a).main;
+function _(i) {
+  const t = S(i).main;
   if (!t)
-    throw new Error(`No "main" editable found for editor with ID "${a}".`);
+    throw new Error(`No "main" editable found for editor with ID "${i}".`);
   return t;
 }
-const yt = P(ht);
-class Et extends k {
+const yt = k(ft);
+class Et extends E {
   /**
    * The name of the hook.
    */
@@ -1174,8 +1235,8 @@ class Et extends k {
    */
   async mounted() {
     const { editorId: t, name: e } = this.attrs;
-    this.mountedPromise = l.the.execute(t, (r) => {
-      const { ui: i } = r, n = kt(e), s = i.view[n];
+    this.mountedPromise = d.the.execute(t, (r) => {
+      const { ui: a } = r, n = kt(e), s = a.view[n];
       if (!s) {
         console.error(`Unknown UI part name: "${e}". Supported names are "toolbar" and "menubar".`);
         return;
@@ -1190,8 +1251,8 @@ class Et extends k {
     this.el.style.display = "none", await this.mountedPromise, this.mountedPromise = null, this.el.innerHTML = "";
   }
 }
-function kt(a) {
-  switch (a) {
+function kt(i) {
+  switch (i) {
     case "toolbar":
       return "toolbar";
     case "menubar":
@@ -1200,17 +1261,17 @@ function kt(a) {
       return null;
   }
 }
-const Pt = P(Et), Ct = {
+const Pt = k(Et), xt = {
   CKEditor5: yt,
   CKEditable: mt,
   CKUIPart: Pt,
   CKContext: lt
 };
 export {
-  $ as CustomEditorPluginsRegistry,
-  l as EditorsRegistry,
-  Ct as Hooks,
+  D as CustomEditorPluginsRegistry,
+  d as EditorsRegistry,
+  xt as Hooks,
   Q as unwrapEditorContext,
-  it as unwrapEditorWatchdog
+  at as unwrapEditorWatchdog
 };
 //# sourceMappingURL=index.mjs.map