ckeditor5-phoenix 1.27.1 → 1.28.0

package/dist/index.mjs

@@ -1,4 +1,4 @@
-function H(r, t) {
+function j(r, t) {
   if (!r || r.size !== t.size)
     return !1;
   for (const [e, a] of r)
@@ -6,7 +6,7 @@ function H(r, t) {
       return !1;
   return !0;
 }
-class K {
+class W {
   /**
    * Map of registered items.
    */
@@ -215,7 +215,7 @@ class K {
    * Immediately dispatches the current state to all watchers if it changed.
    */
   flushWatchers() {
-    H(this.lastNotifiedItems, this.items) && H(this.lastNotifiedErrors, this.initializationErrors) || (this.lastNotifiedItems = new Map(this.items), this.lastNotifiedErrors = new Map(this.initializationErrors), this.watchers.forEach((t) => t(
+    j(this.lastNotifiedItems, this.items) && j(this.lastNotifiedErrors, this.initializationErrors) || (this.lastNotifiedItems = new Map(this.items), this.lastNotifiedErrors = new Map(this.initializationErrors), this.watchers.forEach((t) => t(
       new Map(this.items),
       new Map(this.initializationErrors)
     )));
@@ -231,10 +231,10 @@ class K {
     return e || (e = { success: [], error: [] }, this.pendingCallbacks.set(t, e)), e;
   }
 }
-function rt(r) {
+function Z(r) {
   return r.replace(/[-_\s]+(.)?/g, (t, e) => e ? e.toUpperCase() : "").replace(/^./, (t) => t.toLowerCase());
 }
-function I(r, t) {
+function A(r, t) {
   let e = null;
   return (...a) => {
     e && clearTimeout(e), e = setTimeout(() => {
@@ -242,35 +242,31 @@ function I(r, t) {
     }, r);
   };
 }
-function at(r) {
+function tt(r) {
   if (Object.prototype.toString.call(r) !== "[object Object]")
     return !1;
   const t = Object.getPrototypeOf(r);
   return t === Object.prototype || t === null;
 }
-function O(r) {
+function P(r) {
   if (Array.isArray(r))
-    return r.map(O);
-  if (at(r)) {
+    return r.map(P);
+  if (tt(r)) {
     const t = /* @__PURE__ */ Object.create(null);
     for (const [e, a] of Object.entries(r))
-      t[rt(e)] = O(a);
+      t[Z(e)] = P(a);
     return t;
   }
   return r;
 }
-function nt(r, t) {
-  const e = Object.entries(r).filter(([a, n]) => t(n, a));
-  return Object.fromEntries(e);
-}
-function it() {
+function et() {
   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;
 }
-class S {
+class x {
   /**
    * The current state of the hook.
    */
@@ -345,7 +341,7 @@ class S {
     this._beforeDestroyCallbacks = [];
   }
 }
-function N(r) {
+function D(r) {
   return {
     /**
      * The mounted lifecycle callback for the LiveView hook object.
@@ -390,26 +386,26 @@ function N(r) {
     }
   };
 }
-function Y(r) {
+function L(r) {
   return Object.keys(r).length === 0 && r.constructor === Object;
 }
-function st(r) {
+function rt(r) {
   return r == null;
 }
-function j(r, t) {
+function at(r, t) {
   const e = Object.entries(r).map(([a, n]) => [a, t(n, a)]);
   return Object.fromEntries(e);
 }
-function q(r) {
+function H(r) {
   if (r === null)
     return null;
   const t = Number.parseInt(r, 10);
   return Number.isNaN(t) ? null : t;
 }
-function ot(r) {
+function nt(r) {
   return r == null || r.trim() === "" ? null : JSON.parse(r);
 }
-function ct(r, t) {
+function it(r, t) {
   if (r === t)
     return !0;
   const e = Object.keys(r), a = Object.keys(t);
@@ -420,10 +416,10 @@ function ct(r, t) {
       return !1;
   return !0;
 }
-function ut() {
+function ot() {
   return Math.random().toString(36).substring(2);
 }
-function lt(r, {
+function st(r, {
   timeOutAfter: t = 500,
   retryAfter: e = 100
 } = {}) {
@@ -443,60 +439,36 @@ function lt(r, {
     o();
   });
 }
-function dt(r, t) {
-  const e = ht(r), a = /* @__PURE__ */ new Set([
-    ...Object.keys(e),
-    ...Object.keys(t.roots ?? {})
-  ]), n = Array.from(a).reduce((s, c) => ({
-    ...s,
-    [c]: {
-      ...t.roots?.[c],
-      ...c === "main" ? t.root : {},
-      /* v8 ignore next 5 */
-      ...c in e ? {
-        initialData: e[c]
-      } : {}
-    }
-  }), Object.create(t.roots || {})), i = {
-    ...t,
-    roots: n
-  };
-  return delete i.root, i;
-}
-function ht(r) {
-  return typeof r == "string" ? { main: r } : { ...r };
-}
-function mt(r, t, e) {
-  const a = pt(t);
-  if (!r.editorName || r.editorName === "ClassicEditor")
-    return {
-      ...e,
-      attachTo: a.main
-    };
-  const n = /* @__PURE__ */ new Set([
-    ...Object.keys(a),
+function ct(r, t, e) {
+  const a = !r.editorName || r.editorName === "ClassicEditor", n = /* @__PURE__ */ new Set([
+    ...Object.keys(t),
     ...Object.keys(e.roots ?? {})
   ]), i = Array.from(n).reduce((c, o) => ({
     ...c,
     [o]: {
-      /* v8 ignore next */
+      /* v8 ignore next 1 */
       ...e.roots?.[o],
       ...o === "main" ? e.root : {},
-      /* v8 ignore next 5 */
-      ...o in a ? {
-        element: a[o]
+      /* v8 ignore start */
+      ...o in t ? {
+        initialData: t[o].initialValue,
+        modelElement: t[o].modelElement || "$root",
+        ...!a && {
+          element: t[o].content
+        }
       } : {}
+      /* v8 ignore end */
     }
-  }), Object.create(e.roots || {})), s = {
+  }), { ...e.roots || {} }), s = {
     ...e,
-    roots: i
+    roots: i,
+    ...a && {
+      attachTo: t.main?.content
+    }
   };
   return delete s.root, s;
 }
-function pt(r) {
-  return r instanceof HTMLElement ? { main: r } : { ...r };
-}
-function ft(r) {
+function ut(r) {
   const t = [
     r.ui?.element,
     r.ui?.view?.toolbar?.element,
@@ -523,8 +495,8 @@ function ft(r) {
   }
 }
 const R = /* @__PURE__ */ Symbol.for("context-editor-watchdog");
-async function wt({ context: r, creator: t, config: e }) {
-  const a = ut();
+async function lt({ context: r, creator: t, config: e }) {
+  const a = ot();
   await r.add({
     creator: t.create.bind(t),
     id: a,
@@ -543,16 +515,16 @@ async function wt({ context: r, creator: t, config: e }) {
     editor: n
   };
 }
-function gt(r) {
+function dt(r) {
   return R in r ? r[R] : null;
 }
-function B(r) {
+function q(r) {
   return "addEditable" in r.ui;
 }
-function T(r) {
+function N(r) {
   return ["inline", "classic", "balloon", "decoupled"].includes(r);
 }
-async function bt(r) {
+async function mt(r) {
   const t = await import("ckeditor5"), a = {
     inline: t.InlineEditor,
     balloon: t.BalloonEditor,
@@ -564,8 +536,8 @@ async function bt(r) {
     throw new Error(`Unsupported editor type: ${r}`);
   return a;
 }
-class $ {
-  static the = new $();
+class U {
+  static the = new U();
   /**
    * Map of registered custom plugins.
    */
@@ -624,11 +596,11 @@ class $ {
     return this.plugins.has(t);
   }
 }
-async function J(r) {
+async function K(r) {
   const t = await import("ckeditor5");
   let e = null;
   const a = r.map(async (n) => {
-    const i = await $.the.get(n);
+    const i = await U.the.get(n);
     if (i)
       return i;
     const { [n]: s } = t;
@@ -650,25 +622,25 @@ async function J(r) {
     hasPremium: !!e
   };
 }
-async function G(r, t) {
+async function Y(r, t) {
   const e = [r.ui, r.content];
   return await Promise.all(
     [
-      F("ckeditor5", e),
+      B("ckeditor5", e),
       /* v8 ignore next */
-      t && F("ckeditor5-premium-features", e)
+      t && B("ckeditor5-premium-features", e)
     ].filter((n) => !!n)
   ).then((n) => n.flat());
 }
-async function F(r, t) {
+async function B(r, t) {
   return await Promise.all(
     t.filter((e) => e !== "en").map(async (e) => {
-      const a = await yt(r, e);
+      const a = await ht(r, e);
       return a?.default ?? a;
     }).filter(Boolean)
   );
 }
-async function yt(r, t) {
+async function ht(r, t) {
   try {
     if (r === "ckeditor5")
       switch (t) {
@@ -968,75 +940,73 @@ async function yt(r, t) {
     return console.error(`Failed to load translation for ${r}/${t}:`, e), null;
   }
 }
-function X(r) {
-  return j(r, (t) => ({
+function J(r) {
+  return at(r, (t) => ({
     dictionary: t
   }));
 }
-function Q(r) {
-  const t = Z(r);
-  return j(t, ({ content: e }) => e);
-}
-function L(r) {
-  const t = Z(r), e = j(t, ({ initialValue: a }) => a);
-  return nt(e, (a) => typeof a == "string");
-}
-function Z(r) {
+function G(r) {
   const t = document.querySelectorAll(
     [
       `[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) => {
-    const u = o.getAttribute("data-cke-editable-root-name"), l = o.getAttribute("data-cke-editable-initial-value") || "", d = o.querySelector("[data-cke-editable-content]");
-    return !u || !d ? c : {
+    const u = o.getAttribute("data-cke-editable-root-name"), d = o.getAttribute("data-cke-editable-root-model-element-name") || null, l = o.getAttribute("data-cke-editable-initial-value") || "", p = o.querySelector("[data-cke-editable-content]");
+    return !u || !p ? c : {
       ...c,
       [u]: {
-        content: d,
-        initialValue: l
+        content: p,
+        initialValue: l,
+        modelElement: d
       }
     };
-  }, /* @__PURE__ */ Object.create({})), a = document.querySelector(`[phx-hook="CKEditor5"][id="${r}"]`);
+  }, /* @__PURE__ */ Object.create(null)), a = document.querySelector(`[phx-hook="CKEditor5"][id="${r}"]`);
   if (!a)
     return e;
-  const n = a.getAttribute("data-cke-initial-value") || "", i = a.querySelector(`#${r}_editor `), s = e.main;
+  const n = a.getAttribute("data-cke-root-model-element-name"), i = a.getAttribute("data-cke-initial-value") || "";
+  if (e.main)
+    return {
+      ...e,
+      main: {
+        ...e.main,
+        modelElement: e.main.modelElement || n,
+        initialValue: e.main.initialValue || i
+      }
+    };
+  const s = a.querySelector(`#${r}_editor `);
   return s ? {
     ...e,
     main: {
-      ...s,
-      initialValue: s.initialValue || n
-    }
-  } : i ? {
-    ...e,
-    main: {
-      content: i,
-      initialValue: n
+      content: s,
+      initialValue: i,
+      modelElement: a.getAttribute("data-cke-root-model-element-name") || "$root"
     }
   } : e;
 }
-const W = ["inline", "classic", "balloon", "decoupled", "multiroot"];
-function kt(r) {
+const F = ["inline", "classic", "balloon", "decoupled", "multiroot"];
+function pt(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: 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 (!W.includes(e))
-    throw new Error(`Invalid editor type: ${e}. Must be one of: ${W.join(", ")}.`);
+  if (!F.includes(e))
+    throw new Error(`Invalid editor type: ${e}. Must be one of: ${F.join(", ")}.`);
   return {
     type: e,
     license: n,
     watchdog: i,
-    config: O(a),
+    config: P(a),
     customTranslations: s.customTranslations || s.custom_translations
   };
 }
-function x(r) {
+function T(r) {
   if (!r || typeof r != "object")
     return r;
   if (Array.isArray(r))
-    return r.map((a) => x(a));
+    return r.map((a) => T(a));
   const t = r;
   if (t.$element && typeof t.$element == "string") {
     const a = document.querySelector(t.$element);
@@ -1044,39 +1014,39 @@ function x(r) {
   }
   const e = /* @__PURE__ */ Object.create(null);
   for (const [a, n] of Object.entries(r))
-    e[a] = x(n);
+    e[a] = T(n);
   return e;
 }
-function D(r, t, e) {
+function I(r, t, e) {
   if (!e || typeof e != "object")
     return e;
   if (Array.isArray(e))
-    return e.map((i) => D(r, t, i));
+    return e.map((i) => I(r, t, i));
   const a = e;
   if (a.$translation && typeof a.$translation == "string") {
-    const i = a.$translation, s = Et(r, i, t);
+    const i = a.$translation, s = ft(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] = D(r, t, s);
+    n[i] = I(r, t, s);
   return n;
 }
-function Et(r, t, e) {
+function ft(r, t, e) {
   for (const a of r) {
     const n = a[e];
     if (n?.dictionary && t in n.dictionary)
       return n.dictionary[t];
   }
 }
-function vt(r, t) {
+function wt(r, t) {
   const { editing: e } = r;
   e.view.change((a) => {
     a.setStyle("height", `${t}px`, e.view.document.getRoot());
   });
 }
 const V = /* @__PURE__ */ Symbol.for("elixir-editor-watchdog");
-async function Ct(r, t) {
+async function gt(r, t) {
   const { EditorWatchdog: e } = await import("ckeditor5"), a = new e(null, t ?? {
     crashNumberLimit: 10,
     minimumNonErrorTimePeriod: 5e3
@@ -1086,24 +1056,24 @@ async function Ct(r, t) {
     return n[V] = a, n;
   }), a;
 }
-function Pt(r) {
+function bt(r) {
   return V in r ? r[V] : null;
 }
-class y extends K {
-  static the = new y();
+class b extends W {
+  static the = new b();
 }
-function At(r) {
+function yt(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, ...a } = JSON.parse(t);
   return {
-    config: O(e),
+    config: P(e),
     customTranslations: a.customTranslations || a.custom_translations,
     watchdogConfig: a.watchdogConfig || a.watchdog_config
   };
 }
-class Tt extends S {
+class kt extends x {
   /**
    * The promise that resolves to the context instance.
    */
@@ -1114,7 +1084,7 @@ class Tt extends S {
   get attrs() {
     const t = (a) => this.el.getAttribute(a) || null, e = {
       id: this.el.id,
-      config: At(this.el),
+      config: yt(this.el),
       language: {
         ui: t("data-cke-language") || "en",
         content: t("data-cke-content-language") || "en"
@@ -1131,29 +1101,29 @@ class Tt extends S {
    * Mounts the context component.
    */
   async mounted() {
-    const { id: t, language: e } = this.attrs, { customTranslations: a, watchdogConfig: n, config: { plugins: i, ...s } } = this.attrs.config, { loadedPlugins: c, hasPremium: o } = await J(i ?? []), l = [
-      ...await G(e, o),
-      X(a?.dictionary || {})
-    ].filter((m) => !Y(m));
-    let d = x(s);
-    d = D([...l].reverse(), e.ui, d), this.contextPromise = (async () => {
-      const { ContextWatchdog: m, Context: E } = await import("ckeditor5"), b = new m(E, {
+    const { id: t, language: e } = this.attrs, { customTranslations: a, watchdogConfig: n, config: { plugins: i, ...s } } = this.attrs.config, { loadedPlugins: c, hasPremium: o } = await K(i ?? []), d = [
+      ...await Y(e, o),
+      J(a?.dictionary || {})
+    ].filter((m) => !L(m));
+    let l = T(s);
+    l = I([...d].reverse(), e.ui, l), this.contextPromise = (async () => {
+      const { ContextWatchdog: m, Context: k } = await import("ckeditor5"), g = new m(k, {
         crashNumberLimit: 10,
         ...n
       });
-      return await b.create({
-        ...d,
+      return await g.create({
+        ...l,
         language: e,
         plugins: c,
-        ...l.length && {
-          translations: l
+        ...d.length && {
+          translations: d
         }
-      }), b.on("itemError", (...P) => {
-        console.error("Context item error:", ...P);
-      }), b;
+      }), g.on("itemError", (...E) => {
+        console.error("Context item error:", ...E);
+      }), g;
     })();
-    const w = await this.contextPromise;
-    this.isBeingDestroyed() || y.the.register(t, w);
+    const p = await this.contextPromise;
+    this.isBeingDestroyed() || b.the.register(t, p);
   }
   /**
    * Destroys the context component. Unmounts root from the editor.
@@ -1164,28 +1134,28 @@ class Tt extends S {
     try {
       await (await this.contextPromise)?.destroy();
     } finally {
-      this.contextPromise = null, y.the.hasItem(t) && y.the.unregister(t);
+      this.contextPromise = null, b.the.hasItem(t) && b.the.unregister(t);
     }
   }
 }
-function It(r) {
+function Et(r) {
   return r.hasAttribute("data-cke-context");
 }
-function Ot(r) {
+function vt(r) {
   let t = r;
   for (; t; ) {
-    if (It(t))
+    if (Et(t))
       return t;
     t = t.parentElement;
   }
   return null;
 }
-async function xt(r) {
-  const t = Ot(r);
-  return t ? y.the.waitFor(t.id) : null;
+async function Ct(r) {
+  const t = vt(r);
+  return t ? b.the.waitFor(t.id) : null;
 }
-const Dt = N(Tt);
-function St(r, t) {
+const At = D(kt);
+function Pt(r, t) {
   const e = /* @__PURE__ */ new Set();
   return (a) => {
     let n = !1;
@@ -1200,7 +1170,7 @@ function St(r, t) {
     }), n;
   };
 }
-async function Nt() {
+async function Tt() {
   const { Plugin: r, FileRepository: t } = await import("ckeditor5");
   return class extends r {
     /**
@@ -1220,11 +1190,11 @@ async function Nt() {
       if (!s || n.has("SimpleUploadAdapter") || n.has("Base64UploadAdapter") || n.has("CKFinderUploadAdapter"))
         return;
       const c = n.get(t);
-      c.createUploadAdapter = (o) => new Mt(o, s);
+      c.createUploadAdapter = (o) => new It(o, s);
     }
   };
 }
-class Mt {
+class It {
   loader;
   uploadUrl;
   abortController = null;
@@ -1239,7 +1209,7 @@ class Mt {
     this.abortController = new AbortController();
     const e = new FormData();
     e.append("file", t), t.size && (this.loader.uploadTotal = t.size, this.loader.uploaded = 0);
-    const a = {}, n = it();
+    const a = {}, n = et();
     n && (a["X-CSRF-Token"] = n);
     try {
       const i = await fetch(this.uploadUrl, {
@@ -1272,7 +1242,7 @@ class Mt {
     this.abortController?.abort(), this.abortController = null;
   }
 }
-async function Rt({
+async function xt({
   editorId: r,
   saveDebounceMs: t
 }) {
@@ -1297,7 +1267,7 @@ async function Rt({
      */
     afterInit() {
       const { editor: n } = this;
-      this.input = document.getElementById(`${r}_input`), this.input && (n.model.document.on("change:data", I(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", A(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.
@@ -1314,8 +1284,8 @@ async function Rt({
     }
   };
 }
-const U = /* @__PURE__ */ Symbol("suppress-phoenix-sync");
-async function Vt(r) {
+const $ = /* @__PURE__ */ Symbol("suppress-phoenix-sync");
+async function Dt(r) {
   const { Plugin: t } = await import("ckeditor5"), { editorId: e, saveDebounceMs: a, events: n, pushEvent: i, handleEvent: s } = r;
   return class extends t {
     /**
@@ -1332,10 +1302,10 @@ async function Vt(r) {
       n.change && this.setupTypingContentPush(), n.blur && this.setupEventPush("blur"), n.focus && this.setupEventPush("focus"), n.ready && this.editor.once("ready", () => {
         i("ckeditor5:ready", {
           editorId: e,
-          data: M(o)
+          data: S(o)
         });
-      }), s("ckeditor5:set-data", ({ editorId: u, data: l }) => {
-        (st(u) || u === e) && o.setData(l);
+      }), s("ckeditor5:set-data", ({ editorId: u, data: d }) => {
+        (rt(u) || u === e) && o.setData(d);
       });
     }
     /**
@@ -1343,64 +1313,64 @@ async function Vt(r) {
      */
     setupTypingContentPush() {
       const { editor: o } = this;
-      let u = null, l = !1;
-      const d = () => {
-        if (l)
+      let u = null, d = !1;
+      const l = () => {
+        if (d)
           return;
-        const m = M(o);
-        (!u || !ct(u, m)) && (i(
+        const m = S(o);
+        (!u || !it(u, m)) && (i(
           "ckeditor5:change",
           {
             editorId: e,
             data: m
           }
         ), u = m);
-      }, w = I(a, d);
-      o.model.document.on("change:data", I(10, (m) => {
-        if (Ut(m)) {
+      }, p = A(a, l);
+      o.model.document.on("change:data", A(10, (m) => {
+        if (Ot(m)) {
           u = null;
           return;
         }
-        o.ui.focusTracker.isFocused ? w() : d();
-      })), o.once("ready", d), o.once("destroy", () => {
-        l = !0;
+        o.ui.focusTracker.isFocused ? p() : l();
+      })), o.once("ready", l), o.once("destroy", () => {
+        d = !0;
       });
     }
     /**
      * Setups the event push for the editor.
      */
     setupEventPush(o) {
-      const { editor: u } = this, l = () => {
-        const { isFocused: d } = u.ui.focusTracker;
-        (d ? "focus" : "blur") === o && i(
+      const { editor: u } = this, d = () => {
+        const { isFocused: l } = u.ui.focusTracker;
+        (l ? "focus" : "blur") === o && i(
           `ckeditor5:${o}`,
           {
             editorId: e,
-            data: M(u)
+            data: S(u)
           }
         );
       };
-      u.ui.focusTracker.on("change:isFocused", l);
+      u.ui.focusTracker.on("change:isFocused", d);
     }
   };
 }
-function M(r) {
-  return r.model.document.getRootNames().reduce((e, a) => (e[a] = r.getData({ rootName: a }), e), /* @__PURE__ */ Object.create({}));
+function S(r) {
+  return r.model.document.getRootNames().reduce((e, a) => (e[a] = r.getData({ rootName: a }), e), /* @__PURE__ */ Object.create(null));
 }
-function Ut(r) {
-  const t = r[U];
-  return delete r[U], !!t;
+function Ot(r) {
+  const t = r[$];
+  return delete r[$], !!t;
 }
-function jt(r) {
+function Nt(r) {
   let t = !1;
   const e = (a) => {
-    t || (a[U] = !0);
+    t || (a[$] = !0);
   };
   return r.model.document.once("change:data", e, { priority: "highest" }), () => {
     t = !0, r.model.document.off("change:data", e);
   };
 }
-class tt {
+class X {
   /**
    * The DOM element being observed for attribute changes.
    */
@@ -1469,7 +1439,7 @@ class tt {
    */
   get attrs() {
     return {
-      rootAttributes: ot(this.el.getAttribute(this.rootAttrsAttrName)),
+      rootAttributes: nt(this.el.getAttribute(this.rootAttrsAttrName)),
       value: this.el.getAttribute(this.valueAttrName)
     };
   }
@@ -1485,7 +1455,7 @@ class tt {
     };
     t.model.enqueueChange({ isUndoable: !1 }, () => {
       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 = jt(t));
+      e !== this.previousValue && (this.previousValue = e, t.ui.focusTracker.isFocused ? this.pendingValue = e : (this.setRootValue(t, this.rootName, e), i = !0)), i && (n = Nt(t));
     }), n();
   }
   /**
@@ -1493,7 +1463,7 @@ class tt {
    * Registers cleanup via onBeforeDestroy.
    */
   setupSyncHandlers(t, e) {
-    this.attrsUpdater = St(t, e), this.attrsUpdater(this.attrs.rootAttributes);
+    this.attrsUpdater = Pt(t, e), this.attrsUpdater(this.attrs.rootAttributes);
     const a = () => {
       this.pendingValue = null;
     }, n = () => {
@@ -1517,10 +1487,10 @@ class tt {
     this.isDestroyed = !0, this.cleanupCallbacks.forEach((t) => t()), this.cleanupCallbacks = [];
   }
 }
-class h extends K {
+class h extends W {
   static the = new h();
 }
-class $t extends S {
+class St extends x {
   /**
    * The sentinel instance responsible for tracking and updating root values and attributes
    * for single-root editors.
@@ -1533,8 +1503,8 @@ class $t extends S {
     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: kt(t),
-      editableHeight: q(e("data-cke-editable-height")),
+      preset: pt(t),
+      editableHeight: H(e("data-cke-editable-height")),
       watchdog: a("data-cke-watchdog"),
       events: {
         change: a("data-cke-change-event"),
@@ -1542,7 +1512,7 @@ class $t extends S {
         focus: a("data-cke-focus-event"),
         ready: a("data-cke-ready-event")
       },
-      saveDebounceMs: q(e("data-cke-save-debounce-ms")) ?? 400,
+      saveDebounceMs: H(e("data-cke-save-debounce-ms")) ?? 400,
       language: {
         ui: e("data-cke-language") || "en",
         content: e("data-cke-content-language") || "en"
@@ -1567,7 +1537,7 @@ class $t extends S {
         return;
       const a = h.the.mountEffect(t, (n) => (n.once("destroy", () => {
         h.the.unregister(t, !1);
-      }, { priority: "highest" }), this.sentinel = new tt({
+      }, { priority: "highest" }), this.sentinel = new X({
         editor: n,
         el: this.el,
         rootName: "main",
@@ -1578,7 +1548,7 @@ class $t extends S {
       }));
       this.onBeforeDestroy(async () => {
         h.the.unregister(t), a();
-        const n = gt(e), i = Pt(e);
+        const n = dt(e), i = bt(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) {
@@ -1611,16 +1581,16 @@ class $t extends S {
       saveDebounceMs: s,
       language: c,
       watchdog: o
-    } = this.attrs, { customTranslations: u, type: l, license: d, config: { plugins: w, ...m } } = t, E = await bt(l), b = await (a ? y.the.waitFor(a) : xt(this.el)), P = async () => {
-      const { loadedPlugins: f, hasPremium: A } = await J(w);
-      T(l) && f.push(
-        await Rt({
+    } = this.attrs, { customTranslations: u, type: d, license: l, config: { plugins: p, ...m } } = t, k = await mt(d), g = await (a ? b.the.waitFor(a) : Ct(this.el)), E = async () => {
+      const { loadedPlugins: f, hasPremium: v } = await K(p);
+      N(d) && f.push(
+        await xt({
           editorId: e,
           saveDebounceMs: s
         })
       ), f.push(
         ...await Promise.all([
-          Vt(
+          Dt(
             {
               editorId: e,
               saveDebounceMs: s,
@@ -1629,61 +1599,56 @@ class $t extends S {
               handleEvent: this.handleEvent.bind(this)
             }
           ),
-          Nt()
+          Tt()
         ])
       );
-      const k = [
-        ...await G(c, A),
-        X(u?.dictionary || {})
-      ].filter((C) => !Y(C));
-      let v = L(e);
-      T(l) && (v = v.main || "");
-      let g = Q(e);
-      if (!(g instanceof HTMLElement) && !("main" in g)) {
-        const C = l === "decoupled" ? ["main"] : Object.keys(v);
-        et(g, C) || (g = await _t(e, C), v = L(e));
-      }
-      T(l) && "main" in g && (g = g.main);
-      let p = {
+      const y = [
+        ...await Y(c, v),
+        J(u?.dictionary || {})
+      ].filter((z) => !L(z));
+      let C = G(e);
+      const O = Object.keys(C);
+      N(d) && O.push("main"), Q(C, O) || (C = await Rt(e, O));
+      let w = {
         ...m,
-        licenseKey: d.key,
+        licenseKey: l.key,
         plugins: f,
         language: c,
-        ...k.length && {
-          translations: k
+        ...y.length && {
+          translations: y
         }
       };
-      p = x(p), p = D([...k].reverse(), c.ui, p), p = mt(E, g, p), p = dt(v, p);
-      const z = await (async () => b ? (await wt({
-        context: b,
-        creator: E,
-        config: p
-      })).editor : E.create(p))();
-      return T(l) && n && vt(z, n), z;
+      w = T(w), w = I([...y].reverse(), c.ui, w), w = ct(k, C, w);
+      const _ = await (async () => g ? (await lt({
+        context: g,
+        creator: k,
+        config: w
+      })).editor : k.create(w))();
+      return N(d) && n && wt(_, n), _;
     };
-    if (o && !b) {
-      const f = await Ct(P, t.watchdog);
-      return f.on("error", (A, { causesRestart: _ }) => {
-        if (_) {
-          const k = h.the.getItem(e);
-          k && (ft(k), h.the.unregister(e));
+    if (o && !g) {
+      const f = await gt(E, t.watchdog);
+      return f.on("error", (v, { causesRestart: M }) => {
+        if (M) {
+          const y = h.the.getItem(e);
+          y && (ut(y), h.the.unregister(e));
         }
       }), f.on("restart", () => {
-        const A = f.editor;
-        h.the.register(e, A);
+        const v = f.editor;
+        h.the.register(e, v);
       }), await f.create({}), f.editor;
     }
-    return P();
+    return E();
   }
 }
-function et(r, t) {
+function Q(r, t) {
   return t.every((e) => r[e]);
 }
-async function _t(r, t) {
-  return lt(
+async function Rt(r, t) {
+  return st(
     () => {
-      const e = Q(r);
-      if (!et(e, t))
+      const e = G(r);
+      if (!Q(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.
@@ -1695,8 +1660,8 @@ Missing roots: ${t.filter((a) => !e[a]).join(", ")}.`
     { timeOutAfter: 2e3, retryAfter: 100 }
   );
 }
-const zt = N($t);
-class Ht extends S {
+const Vt = D(St);
+class $t extends x {
   /**
    * The sentinel instance responsible for tracking and updating root values and attributes.
    */
@@ -1709,6 +1674,7 @@ class Ht extends S {
       editableId: this.el.getAttribute("id"),
       editorId: this.el.getAttribute("data-cke-editor-id") || null,
       rootName: this.el.getAttribute("data-cke-editable-root-name"),
+      modelElement: this.el.getAttribute("data-cke-editable-root-model-element-name") || null,
       initialValue: this.el.getAttribute("data-cke-editable-initial-value") || ""
     };
     return Object.defineProperty(this, "attrs", {
@@ -1722,37 +1688,38 @@ class Ht extends S {
    * Mounts the editable component.
    */
   mounted() {
-    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]");
+    const { editableId: t, editorId: e, rootName: a, initialValue: n, modelElement: i } = this.attrs, s = h.the.mountEffect(e, (c) => {
+      const o = 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(a)) {
-        const { ui: l, editing: d } = s;
-        s.addRoot(a, {
+      const u = this.el.querySelector(`#${t}_input`);
+      if (q(c) && !c.model.document.getRoot(a)) {
+        const { ui: l, editing: p } = c;
+        c.addRoot(a, {
           isUndoable: !1,
-          initialData: n
+          initialData: n,
+          modelElement: i || "$root"
         });
-        const w = l.view.createEditable(a, c);
-        l.addEditable(w), d.view.forceRender();
+        const m = l.view.createEditable(a, o);
+        l.addEditable(m), p.view.forceRender();
       }
-      this.sentinel = new tt({
+      this.sentinel = new X({
         el: this.el,
-        editor: s,
+        editor: c,
         rootName: a,
         valueAttrName: "data-cke-editable-initial-value",
         rootAttrsAttrName: "data-cke-editable-root-attrs"
       });
-      const u = o ? Bt(o, s, a) : null;
+      const d = u ? Mt(u, c, a) : null;
       return () => {
-        if (u?.(), this.sentinel?.destroy(), this.sentinel = null, s.state !== "destroyed") {
-          const l = s.model.document.getRoot(a);
-          l && B(s) && (s.ui.view.editables[a] && s.detachEditable(l), l.isAttached() && s.detachRoot(a, !1));
+        if (d?.(), this.sentinel?.destroy(), this.sentinel = null, c.state !== "destroyed") {
+          const l = c.model.document.getRoot(a);
+          l && q(c) && (c.ui.view.editables[a] && c.detachEditable(l), l.isAttached() && c.detachRoot(a, !1));
         }
       };
     });
     this.onBeforeDestroy(() => {
-      this.el.style.display = "none", i();
+      this.el.style.display = "none", s();
     });
   }
   /**
@@ -1762,16 +1729,16 @@ class Ht extends S {
     this.sentinel?.updated();
   }
 }
-const qt = N(Ht);
-function Bt(r, t, e) {
+const Ut = D($t);
+function Mt(r, t, e) {
   const a = () => {
     r.value = t.getData({ rootName: e });
-  }, n = I(200, a);
+  }, n = A(200, a);
   return t.model.document.on("change:data", n), a(), () => {
     t.model.document.off("change:data", n);
   };
 }
-class Ft extends S {
+class _t extends x {
   /**
    * Attributes for the editable instance.
    */
@@ -1794,7 +1761,7 @@ class Ft extends S {
     const { editorId: t, name: e } = this.attrs, a = h.the.mountEffect(t, (n) => {
       if (this.isBeingDestroyed())
         return;
-      const { ui: i } = n, s = Lt(e), c = i.view[s];
+      const { ui: i } = n, s = zt(e), c = i.view[s];
       if (!c) {
         console.error(`Unknown UI part name: "${e}". Supported names are "toolbar" and "menubar".`);
         return;
@@ -1808,7 +1775,7 @@ class Ft extends S {
     });
   }
 }
-function Lt(r) {
+function zt(r) {
   switch (r) {
     case "toolbar":
       return "toolbar";
@@ -1818,18 +1785,18 @@ function Lt(r) {
       return null;
   }
 }
-const Wt = N(Ft), Gt = {
-  CKEditor5: zt,
-  CKEditable: qt,
-  CKUIPart: Wt,
-  CKContext: Dt
+const jt = D(_t), Ft = {
+  CKEditor5: Vt,
+  CKEditable: Ut,
+  CKUIPart: jt,
+  CKContext: At
 };
 export {
-  y as ContextsRegistry,
-  $ as CustomEditorPluginsRegistry,
+  b as ContextsRegistry,
+  U as CustomEditorPluginsRegistry,
   h as EditorsRegistry,
-  Gt as Hooks,
-  gt as unwrapEditorContext,
-  Pt as unwrapEditorWatchdog
+  Ft as Hooks,
+  dt as unwrapEditorContext,
+  bt as unwrapEditorWatchdog
 };
 //# sourceMappingURL=index.mjs.map