ckeditor5-blazor 1.8.0 → 1.9.0

package/dist/index.mjs

@@ -1,9 +1,9 @@
-class b extends Error {
+class E extends Error {
   constructor(t) {
     super(t), this.name = "CKEditor5BlazorError";
   }
 }
-class _ {
+class B {
   /**
    * Map of registered items.
    */
@@ -31,11 +31,11 @@ class _ {
    */
   execute(t, e, i) {
     const a = this.items.get(t), n = this.initializationErrors.get(t);
-    return n ? (i?.(n), Promise.reject(n)) : a ? Promise.resolve(e(a)) : new Promise((o, c) => {
+    return n ? (i?.(n), Promise.reject(n)) : a ? Promise.resolve(e(a)) : new Promise((o, s) => {
       const u = this.getPendingCallbacks(t);
-      u.success.push(async (s) => {
-        o(await e(s));
-      }), i ? u.error.push(i) : u.error.push(c);
+      u.success.push(async (d) => {
+        o(await e(d));
+      }), i ? u.error.push(i) : u.error.push(s);
     });
   }
   /**
@@ -111,11 +111,11 @@ class _ {
       let n = !1, o = null;
       this.execute(
         t,
-        (c) => {
-          n || (o !== null && clearTimeout(o), i(c));
+        (s) => {
+          n || (o !== null && clearTimeout(o), i(s));
         },
-        (c) => {
-          n || (o !== null && clearTimeout(o), a(c));
+        (s) => {
+          n || (o !== null && clearTimeout(o), a(s));
         }
       ), e && (o = setTimeout(() => {
         n = !0, a(new Error(`Timeout waiting for item with ID "${t}" to be registered.`));
@@ -187,7 +187,7 @@ class _ {
     this.items.size === 1 && t !== null && this.register(null, e);
   }
 }
-function z(r, t) {
+function R(r, t) {
   let e = null;
   return (...i) => {
     e && clearTimeout(e), e = setTimeout(() => {
@@ -195,18 +195,18 @@ function z(r, t) {
     }, r);
   };
 }
-function et(r, t) {
+function it(r, t) {
   const e = Object.entries(r).filter(([i, a]) => t(a, i));
   return Object.fromEntries(e);
 }
-function B(r) {
+function T(r) {
   return Object.keys(r).length === 0 && r.constructor === Object;
 }
-function V(r, t) {
+function M(r, t) {
   const e = Object.entries(r).map(([i, a]) => [i, t(a, i)]);
   return Object.fromEntries(e);
 }
-function rt(r, t) {
+function at(r, t) {
   if (r === t)
     return !0;
   const e = Object.keys(r), i = Object.keys(t);
@@ -217,30 +217,30 @@ function rt(r, t) {
       return !1;
   return !0;
 }
-function it() {
+function nt() {
   return Math.random().toString(36).substring(2);
 }
-function at(r, {
+function ot(r, {
   timeOutAfter: t = 500,
   retryAfter: e = 100
 } = {}) {
   return new Promise((i, a) => {
     const n = Date.now();
     let o = null;
-    const c = setTimeout(() => {
+    const s = setTimeout(() => {
       a(o ?? new Error("Timeout"));
     }, t), u = async () => {
       try {
-        const s = await r();
-        clearTimeout(c), i(s);
-      } catch (s) {
-        o = s, Date.now() - n > t ? a(s) : setTimeout(u, e);
+        const d = await r();
+        clearTimeout(s), i(d);
+      } catch (d) {
+        o = d, Date.now() - n > t ? a(d) : setTimeout(u, e);
       }
     };
     u();
   });
 }
-function T() {
+function D() {
   return new Promise((r) => {
     switch (document.readyState) {
       case "loading":
@@ -255,7 +255,7 @@ function T() {
     }
   });
 }
-function M(r) {
+function $(r) {
   if (r.hasAttribute("data-cke-interactive"))
     return { promise: Promise.resolve(), disconnect: () => {
     } };
@@ -273,14 +273,14 @@ function M(r) {
     disconnect: () => t?.disconnect()
   };
 }
-function O(r) {
+function x(r) {
   r.setAttribute("data-cke-interactive", "true");
 }
-const x = /* @__PURE__ */ Symbol.for("context-editor-watchdog");
-async function nt({ element: r, context: t, creator: e, config: i }) {
-  const a = it();
+const z = /* @__PURE__ */ Symbol.for("context-editor-watchdog");
+async function st({ element: r, context: t, creator: e, config: i }) {
+  const a = nt();
   await t.add({
-    creator: (u, s) => e.create(u, s),
+    creator: (u, d) => e.create(u, d),
     id: a,
     sourceElementOrData: r,
     type: "editor",
@@ -291,23 +291,23 @@ async function nt({ element: r, context: t, creator: e, config: i }) {
     editorContextId: a,
     context: t
   };
-  n[x] = o;
-  const c = t.destroy.bind(t);
-  return t.destroy = async () => (o.state = "unavailable", c()), {
+  n[z] = o;
+  const s = t.destroy.bind(t);
+  return t.destroy = async () => (o.state = "unavailable", s()), {
     ...o,
     editor: n
   };
 }
-function ot(r) {
-  return x in r ? r[x] : null;
+function ct(r) {
+  return z in r ? r[z] : null;
 }
-function H(r) {
+function J(r) {
   return Array.from(r.model.document.getRoots()).reduce((t, e) => (e.rootName === "$graveyard" || (t[e.rootName] = r.getData({ rootName: e.rootName })), t), /* @__PURE__ */ Object.create({}));
 }
-function A(r) {
+function P(r) {
   return ["inline", "classic", "balloon", "decoupled"].includes(r);
 }
-async function q(r) {
+async function U(r) {
   const t = await import("ckeditor5"), i = {
     inline: t.InlineEditor,
     balloon: t.BalloonEditor,
@@ -316,11 +316,11 @@ async function q(r) {
     multiroot: t.MultiRootEditor
   }[r];
   if (!i)
-    throw new b(`Unsupported editor type: ${r}`);
+    throw new E(`Unsupported editor type: ${r}`);
   return i;
 }
-class R {
-  static the = new R();
+class W {
+  static the = new W();
   /**
    * Map of registered custom plugins.
    */
@@ -339,7 +339,7 @@ class R {
    */
   register(t, e) {
     if (this.plugins.has(t))
-      throw new b(`Plugin with name "${t}" is already registered.`);
+      throw new E(`Plugin with name "${t}" is already registered.`);
     return this.plugins.set(t, e), this.unregister.bind(this, t);
   }
   /**
@@ -350,7 +350,7 @@ class R {
    */
   unregister(t) {
     if (!this.plugins.has(t))
-      throw new b(`Plugin with name "${t}" is not registered.`);
+      throw new E(`Plugin with name "${t}" is not registered.`);
     this.plugins.delete(t);
   }
   /**
@@ -379,20 +379,20 @@ class R {
     return this.plugins.has(t);
   }
 }
-async function J(r) {
+async function H(r) {
   const t = await import("ckeditor5");
   let e = null;
   const i = r.map(async (a) => {
-    if (st(a)) {
-      const { name: u, path: s } = a.$import, d = await import(
+    if (ut(a)) {
+      const { name: u, path: d } = a.$import, l = await import(
         /* @vite-ignore */
-        s
-      ), g = (Object.prototype.hasOwnProperty.call(d, u) ? d[u] : void 0) ?? (Object.prototype.hasOwnProperty.call(d, "default") ? d.default : void 0);
-      if (!g)
-        throw new b(`Plugin "${u}" not found in module "${s}".`);
-      return g;
+        d
+      ), w = (Object.prototype.hasOwnProperty.call(l, u) ? l[u] : void 0) ?? (Object.prototype.hasOwnProperty.call(l, "default") ? l.default : void 0);
+      if (!w)
+        throw new E(`Plugin "${u}" not found in module "${d}".`);
+      return w;
     }
-    const n = await R.the.get(a);
+    const n = await W.the.get(a);
     if (n)
       return n;
     const { [a]: o } = t;
@@ -402,40 +402,40 @@ async function J(r) {
       try {
         e = await import("ckeditor5-premium-features");
       } catch (u) {
-        throw console.error(`Failed to load premium package: ${u}`), new b(`Plugin "${a}" not found in base package and failed to load premium package.`);
+        throw console.error(`Failed to load premium package: ${u}`), new E(`Plugin "${a}" not found in base package and failed to load premium package.`);
       }
-    const { [a]: c } = e || {};
-    if (c)
-      return c;
-    throw new b(`Plugin "${a}" not found in base or premium packages.`);
+    const { [a]: s } = e || {};
+    if (s)
+      return s;
+    throw new E(`Plugin "${a}" not found in base or premium packages.`);
   });
   return {
     loadedPlugins: await Promise.all(i),
     hasPremium: !!e
   };
 }
-function st(r) {
+function ut(r) {
   return typeof r == "object" && r !== null && "$import" in r;
 }
 async function K(r, t) {
   const e = [r.ui, r.content];
   return await Promise.all(
     [
-      U("ckeditor5", e),
+      j("ckeditor5", e),
       /* v8 ignore next -- @preserve */
-      t && U("ckeditor5-premium-features", e)
+      t && j("ckeditor5-premium-features", e)
     ].filter((a) => !!a)
   ).then((a) => a.flat());
 }
-async function U(r, t) {
+async function j(r, t) {
   return await Promise.all(
     t.filter((e) => e !== "en").map(async (e) => {
-      const i = await ct(r, e);
+      const i = await lt(r, e);
       return i?.default ?? i;
     }).filter(Boolean)
   );
 }
-async function ct(r, t) {
+async function lt(r, t) {
   try {
     if (r === "ckeditor5")
       switch (t) {
@@ -736,27 +736,27 @@ async function ct(r, t) {
   }
 }
 function G(r) {
-  return V(r, (t) => ({
+  return M(r, (t) => ({
     dictionary: t
   }));
 }
-function $() {
+function F() {
   return Array.from(document.querySelectorAll("cke5-editor")).map((r) => r.getAttribute("data-cke-editor-id")).filter((r) => r !== null);
 }
 function Y(r) {
   const t = X(r);
-  return V(t, ({ element: e }) => e);
+  return M(t, ({ element: e }) => e);
 }
-function j(r) {
-  const t = X(r), e = V(t, ({ content: i }) => i);
-  return et(e, (i) => typeof i == "string");
+function _(r) {
+  const t = X(r), e = M(t, ({ content: i }) => i);
+  return it(e, (i) => typeof i == "string");
 }
 function X(r) {
-  const t = Array.from(document.querySelectorAll(`cke5-editable[data-cke-editor-id="${r}"]`)).reduce((o, c) => {
-    const u = c.getAttribute("data-cke-root-name"), s = c.getAttribute("data-cke-content");
+  const t = Array.from(document.querySelectorAll(`cke5-editable[data-cke-editor-id="${r}"]`)).reduce((o, s) => {
+    const u = s.getAttribute("data-cke-root-name"), d = s.getAttribute("data-cke-content");
     return o[u] = {
-      element: c.querySelector("[data-cke-editable-content]"),
-      content: s
+      element: s.querySelector("[data-cke-editable-content]"),
+      content: d
     }, o;
   }, /* @__PURE__ */ Object.create({})), e = document.querySelector(`cke5-editor[data-cke-editor-id="${r}"]`);
   if (!e)
@@ -776,11 +776,11 @@ function X(r) {
     }
   } : t;
 }
-function P(r) {
+function O(r) {
   if (!r || typeof r != "object")
     return r;
   if (Array.isArray(r))
-    return r.map((i) => P(i));
+    return r.map((i) => O(i));
   const t = r;
   if (t.$element && typeof t.$element == "string") {
     const i = document.querySelector(t.$element);
@@ -788,43 +788,43 @@ function P(r) {
   }
   const e = /* @__PURE__ */ Object.create(null);
   for (const [i, a] of Object.entries(r))
-    e[i] = P(a);
+    e[i] = O(a);
   return e;
 }
-function I(r, t, e) {
+function S(r, t, e) {
   if (!e || typeof e != "object")
     return e;
   if (Array.isArray(e))
-    return e.map((n) => I(r, t, n));
+    return e.map((n) => S(r, t, n));
   const i = e;
   if (i.$translation && typeof i.$translation == "string") {
-    const n = i.$translation, o = ut(r, n, t);
+    const n = i.$translation, o = dt(r, n, t);
     return o === void 0 && console.warn(`Translation not found for key: ${n}`), o !== void 0 ? o : null;
   }
   const a = /* @__PURE__ */ Object.create(null);
   for (const [n, o] of Object.entries(e))
-    a[n] = I(r, t, o);
+    a[n] = S(r, t, o);
   return a;
 }
-function ut(r, t, e) {
+function dt(r, t, e) {
   for (const i of r) {
     const a = i[e];
     if (a?.dictionary && t in a.dictionary)
       return a.dictionary[t];
   }
 }
-function lt(r, t) {
+function mt(r, t) {
   const { editing: e } = r;
   e.view.change((i) => {
     i.setStyle("height", `${t}px`, e.view.document.getRoot());
   });
 }
-const N = /* @__PURE__ */ Symbol.for("elixir-editor-watchdog");
-async function dt(r) {
+const V = /* @__PURE__ */ Symbol.for("elixir-editor-watchdog");
+async function ht(r) {
   const { EditorWatchdog: t } = await import("ckeditor5"), e = new t(r);
   return e.setCreator(async (...i) => {
     const a = await r.create(...i);
-    return a[N] = e, a;
+    return a[V] = e, a;
   }), {
     watchdog: e,
     Constructor: {
@@ -832,13 +832,13 @@ async function dt(r) {
     }
   };
 }
-function mt(r) {
-  return N in r ? r[N] : null;
+function pt(r) {
+  return V in r ? r[V] : null;
 }
-class v extends _ {
+class v extends B {
   static the = new v();
 }
-class ht extends HTMLElement {
+class wt extends HTMLElement {
   /**
    * The promise that resolves to the context instance.
    */
@@ -851,35 +851,35 @@ class ht extends HTMLElement {
    * Mounts the context component.
    */
   async connectedCallback() {
-    await T(), this.interactiveWait = M(this), await this.interactiveWait.promise, await this.initializeContext();
+    await D(), this.interactiveWait = $(this), await this.interactiveWait.promise, await this.initializeContext();
   }
   /**
    * Initializes the context component.
    */
   async initializeContext() {
-    const t = this.getAttribute("data-cke-context-id"), e = JSON.parse(this.getAttribute("data-cke-language")), i = JSON.parse(this.getAttribute("data-cke-context")), { customTranslations: a, watchdogConfig: n, config: { plugins: o, ...c } } = i, { loadedPlugins: u, hasPremium: s } = await J(o ?? []), d = [
-      ...await K(e, s),
+    const t = this.getAttribute("data-cke-context-id"), e = JSON.parse(this.getAttribute("data-cke-language")), i = JSON.parse(this.getAttribute("data-cke-context")), { customTranslations: a, watchdogConfig: n, config: { plugins: o, ...s } } = i, { loadedPlugins: u, hasPremium: d } = await H(o ?? []), l = [
+      ...await K(e, d),
       G(a || {})
-    ].filter((f) => !B(f));
+    ].filter((y) => !T(y));
     this.contextPromise = (async () => {
-      const { ContextWatchdog: f, Context: w } = await import("ckeditor5"), p = new f(w, {
+      const { ContextWatchdog: y, Context: b } = await import("ckeditor5"), f = new y(b, {
         crashNumberLimit: 10,
         ...n
       });
-      let E = P(c);
-      return E = I([...d].reverse(), e.ui, E), await p.create({
-        ...E,
+      let p = O(s);
+      return p = S([...l].reverse(), e.ui, p), await f.create({
+        ...p,
         language: e,
         plugins: u,
-        ...d.length && {
-          translations: d
+        ...l.length && {
+          translations: l
         }
-      }), p.on("itemError", (...D) => {
-        console.error("Context item error:", ...D);
-      }), p;
+      }), f.on("itemError", (...A) => {
+        console.error("Context item error:", ...A);
+      }), f;
     })();
-    const g = await this.contextPromise;
-    this.isConnected && v.the.register(t, g);
+    const w = await this.contextPromise;
+    this.isConnected && v.the.register(t, w);
   }
   /**
    * Destroys the context component. Unmounts root from the editor.
@@ -895,10 +895,10 @@ class ht extends HTMLElement {
     }
   }
 }
-class h extends _ {
+class h extends B {
   static the = new h();
 }
-class pt extends HTMLElement {
+class ft extends HTMLElement {
   /**
    * The promise that resolves when the editable is mounted.
    */
@@ -921,48 +921,51 @@ class pt extends HTMLElement {
    * Mounts the editable component.
    */
   async connectedCallback() {
-    await T(), this.interactiveWait = M(this), await this.interactiveWait.promise, await this.initializeEditable();
+    await D(), this.interactiveWait = $(this), await this.interactiveWait.promise, await this.initializeEditable();
   }
   /**
    * Initializes the editable instance.
    */
   async initializeEditable() {
-    this.hasAttribute("data-cke-editor-id") || this.setAttribute("data-cke-editor-id", $()[0]);
-    const t = this.getAttribute("data-cke-editor-id"), e = this.getAttribute("data-cke-root-name"), i = this.getAttribute("data-cke-content"), a = Number.parseInt(this.getAttribute("data-cke-save-debounce-ms"), 10);
+    this.hasAttribute("data-cke-editor-id") || this.setAttribute("data-cke-editor-id", F()[0]);
+    const t = this.getAttribute("data-cke-editor-id"), e = this.getAttribute("data-cke-root-name"), i = JSON.parse(this.getAttribute("data-cke-root-attributes") || "{}"), a = this.getAttribute("data-cke-content"), n = Number.parseInt(this.getAttribute("data-cke-save-debounce-ms"), 10);
     if (!t || !e)
-      throw new b("Editor ID or Root Name is missing.");
-    this.style.display = "block", this.editorPromise = h.the.execute(t, async (n) => {
+      throw new E("Editor ID or Root Name is missing.");
+    this.style.display = "block", this.editorPromise = h.the.execute(t, async (o) => {
       if (!this.isConnected)
         return null;
-      const { ui: o, editing: c, model: u } = n, s = this.querySelector("input");
-      if (u.document.getRoot(e)?.isAttached()) {
-        if (i !== null) {
-          const p = n.getData({ rootName: e });
-          p && p !== i && n.setData({
-            [e]: i
+      const { ui: s, editing: u, model: d } = o, c = this.querySelector("input"), l = d.document.getRoot(e);
+      if (l?.isAttached()) {
+        if (a !== null) {
+          const p = o.getData({ rootName: e });
+          p && p !== a && o.setData({
+            [e]: a
           });
         }
-        return n;
+        return T(i) || o.model.change((p) => {
+          p.setAttributes(i, l);
+        }), o;
       }
-      n.addRoot(e, {
+      o.addRoot(e, {
         isUndoable: !1,
-        ...i !== null && {
-          data: i
+        attributes: { ...i },
+        ...a !== null && {
+          data: a
         }
       });
-      const d = this.querySelector("[data-cke-editable-content]"), g = o.view.createEditable(e, d);
-      o.addEditable(g), c.view.forceRender();
-      const f = () => {
-        if (!u.document.getRoot(e)?.isAttached())
+      const w = this.querySelector("[data-cke-editable-content]"), y = s.view.createEditable(e, w);
+      s.addEditable(y), u.view.forceRender();
+      const b = () => {
+        if (!d.document.getRoot(e)?.isAttached())
           return;
-        const p = n.getData({ rootName: e });
-        s && (s.value = p, s.dispatchEvent(new Event("input"))), this.dispatchEvent(new CustomEvent("change", {
+        const p = o.getData({ rootName: e });
+        c && (c.value = p, c.dispatchEvent(new Event("input"))), this.dispatchEvent(new CustomEvent("change", {
           detail: {
             value: p
           }
         }));
-      }, w = z(a, f);
-      return n.model.document.on("change:data", w), this.onBeforeDestroy(() => n.model.document.off("change:data", w)), f(), n;
+      }, f = R(n, b);
+      return o.model.document.on("change:data", f), this.onBeforeDestroy(() => o.model.document.off("change:data", f)), b(), o;
     });
   }
   /**
@@ -989,7 +992,7 @@ class pt extends HTMLElement {
     }
   }
 }
-async function wt({
+async function gt({
   saveDebounceMs: r,
   editorId: t,
   targetElement: e
@@ -1006,7 +1009,7 @@ async function wt({
      * Initializes the plugin.
      */
     afterInit() {
-      const { editor: n } = this, o = z(r, this.dispatch);
+      const { editor: n } = this, o = R(r, this.dispatch);
       n.model.document.on("change:data", o), n.once("ready", this.dispatch);
     }
     /**
@@ -1015,25 +1018,25 @@ async function wt({
     dispatch = () => {
       const { editor: n } = this;
       e.dispatchEvent(
-        new y({
+        new g({
           editorId: t,
           editor: n,
-          roots: H(n)
+          roots: J(n)
         })
       );
     };
   };
 }
-class y extends CustomEvent {
+class g extends CustomEvent {
   static EVENT_NAME = "ckeditor5:change:data";
   constructor(t) {
-    super(y.EVENT_NAME, {
+    super(g.EVENT_NAME, {
       detail: t,
       bubbles: !0
     });
   }
 }
-async function ft(r) {
+async function yt(r) {
   const { Plugin: t } = await import("ckeditor5");
   return class extends t {
     /**
@@ -1055,7 +1058,7 @@ async function ft(r) {
      */
     afterInit() {
       const { editor: i } = this, n = i.sourceElement.id.replace(/_editor$/, "");
-      this.input = document.getElementById(`${n}_input`), this.input && (i.model.document.on("change:data", z(r, () => this.sync())), i.once("ready", this.sync), this.form = this.input.closest("form"), this.form?.addEventListener("submit", this.sync));
+      this.input = document.getElementById(`${n}_input`), this.input && (i.model.document.on("change:data", R(r, () => this.sync())), i.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.
@@ -1074,7 +1077,7 @@ async function ft(r) {
     }
   };
 }
-class gt extends HTMLElement {
+class bt extends HTMLElement {
   /**
    * The promise that resolves to the editor instance.
    */
@@ -1087,7 +1090,7 @@ class gt extends HTMLElement {
    * Mounts the editor component.
    */
   async connectedCallback() {
-    await T(), this.interactiveWait = M(this), q("classic"), await this.interactiveWait.promise, await this.initializeEditor();
+    await D(), this.interactiveWait = $(this), U("classic"), await this.interactiveWait.promise, await this.initializeEditor();
   }
   /**
    * Initializes the editor instance.
@@ -1115,7 +1118,7 @@ class gt extends HTMLElement {
       const t = await this.editorPromise;
       if (!t)
         return;
-      const e = ot(t), i = mt(t);
+      const e = ct(t), i = pt(t);
       e ? e.state !== "unavailable" && await e.context.remove(e.editorContextId) : i ? await i.destroy() : await t.destroy();
     } finally {
       this.editorPromise = null;
@@ -1125,77 +1128,79 @@ class gt extends HTMLElement {
    * Creates the CKEditor instance.
    */
   async createEditor() {
-    const t = this.getAttribute("data-cke-editor-id"), e = JSON.parse(this.getAttribute("data-cke-preset")), i = this.getAttribute("data-cke-context-id"), a = this.getAttribute("data-cke-editable-height") ? Number.parseInt(this.getAttribute("data-cke-editable-height"), 10) : null, n = Number.parseInt(this.getAttribute("data-cke-save-debounce-ms"), 10), o = JSON.parse(this.getAttribute("data-cke-language")), c = this.hasAttribute("data-cke-watchdog"), u = JSON.parse(this.getAttribute("data-cke-content")), {
-      customTranslations: s,
+    const t = this.getAttribute("data-cke-editor-id"), e = JSON.parse(this.getAttribute("data-cke-preset")), i = this.getAttribute("data-cke-context-id"), a = JSON.parse(this.getAttribute("data-cke-root-attributes") || "{}"), n = this.getAttribute("data-cke-editable-height") ? Number.parseInt(this.getAttribute("data-cke-editable-height"), 10) : null, o = Number.parseInt(this.getAttribute("data-cke-save-debounce-ms"), 10), s = JSON.parse(this.getAttribute("data-cke-language")), u = this.hasAttribute("data-cke-watchdog"), d = JSON.parse(this.getAttribute("data-cke-content")), {
+      customTranslations: c,
       editorType: l,
-      licenseKey: d,
-      config: { plugins: g, ...f }
+      licenseKey: w,
+      config: { plugins: y, ...b }
     } = e;
-    let w = await q(l);
+    let f = await U(l);
     const p = await (i ? v.the.waitFor(i) : null);
-    if (c && !p) {
-      const m = await dt(w);
-      ({ Constructor: w } = m), m.watchdog.on("restart", () => {
+    if (u && !p) {
+      const m = await ht(f);
+      ({ Constructor: f } = m), m.watchdog.on("restart", () => {
         const k = m.watchdog.editor;
         this.editorPromise = Promise.resolve(k), h.the.register(t, k);
       });
     }
-    const { loadedPlugins: E, hasPremium: D } = await J(g);
-    E.push(
-      await wt({
-        saveDebounceMs: n,
+    const { loadedPlugins: A, hasPremium: rt } = await H(y);
+    A.push(
+      await gt({
+        saveDebounceMs: o,
         editorId: t,
         targetElement: this
       })
-    ), A(l) && E.push(
-      await ft(n)
+    ), P(l) && A.push(
+      await yt(o)
     );
-    const S = [
-      ...await K(o, D),
-      G(s || {})
-    ].filter((m) => !B(m));
+    const N = [
+      ...await K(s, rt),
+      G(c || {})
+    ].filter((m) => !T(m));
     let C = {
-      ...u,
-      ...j(t)
+      ...d,
+      ..._(t)
     };
-    A(l) && (C = C.main || "");
-    const W = await (async () => {
+    P(l) && (C = C.main || "");
+    const I = await (async () => {
       let m = Y(t);
       if (!m.main) {
-        const L = A(l) ? ["main"] : Object.keys(C);
-        Q(m, L) || (m = await yt(t, L), C = {
-          ...u,
-          ...j(t)
+        const L = P(l) ? ["main"] : Object.keys(C);
+        Q(m, L) || (m = await Et(t, L), C = {
+          ...d,
+          ..._(t)
         });
       }
-      A(l) && "main" in m && (m = m.main);
-      let k = P(f);
-      k = I([...S].reverse(), o.ui, k);
-      const F = {
+      P(l) && "main" in m && (m = m.main);
+      let k = O(b);
+      k = S([...N].reverse(), s.ui, k);
+      const q = {
         ...k,
         initialData: C,
-        licenseKey: d,
-        plugins: E,
-        language: o,
-        ...S.length && {
-          translations: S
+        licenseKey: w,
+        plugins: A,
+        language: s,
+        ...N.length && {
+          translations: N
         }
       };
-      return !p || !(m instanceof HTMLElement) ? w.create(m, F) : (await nt({
+      return !p || !(m instanceof HTMLElement) ? f.create(m, q) : (await st({
         context: p,
         element: m,
-        creator: w,
-        config: F
+        creator: f,
+        config: q
       })).editor;
     })();
-    return A(l) && a && lt(W, a), W;
+    return T(a) || I.model.change((m) => {
+      m.setAttributes(a, I.model.document.getRoot());
+    }), P(l) && n && mt(I, n), I;
   }
 }
 function Q(r, t) {
   return t.every((e) => r[e]);
 }
-async function yt(r, t) {
-  return at(
+async function Et(r, t) {
+  return ot(
     () => {
       const e = Y(r);
       if (!Q(e, t))
@@ -1210,7 +1215,7 @@ Missing roots: ${t.filter((i) => !e[i]).join(", ")}.`
     { timeOutAfter: 2e3, retryAfter: 100 }
   );
 }
-class bt extends HTMLElement {
+class kt extends HTMLElement {
   /**
    * The promise that resolves when the UI part is mounted.
    */
@@ -1219,14 +1224,14 @@ class bt extends HTMLElement {
    * Mounts the UI part component.
    */
   async connectedCallback() {
-    await T();
-    const t = this.getAttribute("data-cke-editor-id") || $()[0], e = this.getAttribute("data-cke-name");
+    await D();
+    const t = this.getAttribute("data-cke-editor-id") || F()[0], e = this.getAttribute("data-cke-name");
     !t || !e || (this.style.display = "block", this.mountedPromise = h.the.execute(t, (i) => {
       if (!this.isConnected)
         return;
-      const { ui: a } = i, n = Et(e), o = a.view[n];
+      const { ui: a } = i, n = vt(e), o = a.view[n];
       if (!o)
-        throw new b(`Unknown UI part name: "${e}". Supported names are "toolbar" and "menubar".`);
+        throw new E(`Unknown UI part name: "${e}". Supported names are "toolbar" and "menubar".`);
       this.appendChild(o.element);
     }));
   }
@@ -1237,7 +1242,7 @@ class bt extends HTMLElement {
     this.style.display = "none", await this.mountedPromise, this.mountedPromise = null, this.innerHTML = "";
   }
 }
-function Et(r) {
+function vt(r) {
   switch (r) {
     case "toolbar":
       return "toolbar";
@@ -1248,18 +1253,18 @@ function Et(r) {
       return null;
   }
 }
-const kt = {
-  "cke5-editor": gt,
-  "cke5-context": ht,
-  "cke5-ui-part": bt,
-  "cke5-editable": pt
+const At = {
+  "cke5-editor": bt,
+  "cke5-context": wt,
+  "cke5-ui-part": kt,
+  "cke5-editable": ft
 };
-function vt() {
-  for (const [r, t] of Object.entries(kt))
+function Ct() {
+  for (const [r, t] of Object.entries(At))
     window.customElements.get(r) || window.customElements.define(r, t);
 }
-function Dt(r) {
-  return O(r), {
+function xt(r) {
+  return x(r), {
     unmount() {
     }
   };
@@ -1272,8 +1277,8 @@ function Z(r, t) {
     lastSyncedValue: null
   }, i = () => {
     e.pendingValue = null;
-  }, a = (n, o, c) => {
-    if (c || e.pendingValue === null)
+  }, a = (n, o, s) => {
+    if (s || e.pendingValue === null)
       return;
     const u = t.getCurrentValue();
     t.isEqual(u, e.pendingValue) || t.applyValue(e.pendingValue), e.pendingValue = null;
@@ -1321,70 +1326,97 @@ function tt() {
     }
   };
 }
-function St(r, t) {
-  const e = r.getAttribute("data-cke-editor-id") ?? $()[0], i = r.getAttribute("data-cke-root-name") ?? "main";
-  let a = !1, n = tt(), o = null;
-  const c = (s) => {
-    if (!(s instanceof y) || s.detail.editorId !== e)
+function et(r, t) {
+  const e = /* @__PURE__ */ new Set();
+  return (i) => {
+    r.model.enqueueChange({ isUndoable: !1 }, (a) => {
+      const n = r.model.document.getRoot(t);
+      if (n) {
+        for (const o of e)
+          i && o in i || (a.removeAttribute(o, n), e.delete(o));
+        for (const [o, s] of Object.entries(i ?? {}))
+          a.setAttribute(o, s, n), e.add(o);
+      }
+    });
+  };
+}
+function Nt(r, t) {
+  const e = r.getAttribute("data-cke-editor-id") ?? F()[0], i = r.getAttribute("data-cke-root-name") ?? "main";
+  let a = !1, n = null, o = tt(), s = null;
+  const u = (c) => {
+    if (!(c instanceof g) || c.detail.editorId !== e)
       return;
-    const l = s.detail.roots[i];
-    l !== void 0 && n.shouldNotify(l) && t.invokeMethodAsync("OnChangeEditableData", o, l);
+    const l = c.detail.roots[i];
+    l !== void 0 && o.shouldNotify(l) && t.invokeMethodAsync("OnChangeEditableData", n, l);
   };
   return (async () => {
-    const s = await h.the.waitFor(e);
-    o = DotNet.createJSObjectReference(s), n = Z(s, {
-      getCurrentValue: () => s.getData({ rootName: i }) ?? "",
-      applyValue: (l) => s.setData({ [i]: l }),
-      isEqual: (l, d) => l === d
-    });
-  })(), document.body.addEventListener(y.EVENT_NAME, c), O(r), {
+    const c = await h.the.waitFor(e);
+    n = DotNet.createJSObjectReference(c), o = Z(c, {
+      getCurrentValue: () => c.getData({ rootName: i }) ?? "",
+      applyValue: (l) => c.setData({ [i]: l }),
+      isEqual: (l, w) => l === w
+    }), s = et(c, i);
+  })(), document.body.addEventListener(g.EVENT_NAME, u), x(r), {
     /**
      * Cleans up all event listeners when the Blazor component is disposed.
      */
     unmount() {
-      a || (document.body.removeEventListener(y.EVENT_NAME, c), n.unmount(), o && (DotNet.disposeJSObjectReference(o), o = null), a = !0);
+      a || (document.body.removeEventListener(g.EVENT_NAME, u), o.unmount(), n && (DotNet.disposeJSObjectReference(n), n = null), s = null, a = !0);
     },
     /**
      * Updates this editable root's data from Blazor.
      * If the editor is focused, the update is deferred until blur to avoid interrupting the user.
      */
-    setValue: async (s) => {
-      a || (await h.the.waitFor(e), n.setValue(s));
+    setValue: async (c) => {
+      a || (await h.the.waitFor(e), o.setValue(c));
+    },
+    /**
+     * Updates the root attributes on the editor. This is useful when the Blazor component
+     * re-renders with new root attributes.
+     */
+    setRootAttributes: async (c) => {
+      a || (await h.the.waitFor(e), s?.(c));
     }
   };
 }
-function xt(r, t) {
+function zt(r, t) {
   const e = r.getAttribute("data-cke-editor-id");
-  let i = !1, a = null, n = tt(), o = null;
-  const c = (s) => {
-    !(s instanceof y) || s.detail.editorId !== e || n.shouldNotify(s.detail.roots) && t.invokeMethodAsync("OnChangeEditorData", o, s.detail.roots);
+  let i = !1, a = null, n = tt(), o = null, s = null;
+  const u = (c) => {
+    !(c instanceof g) || c.detail.editorId !== e || n.shouldNotify(c.detail.roots) && t.invokeMethodAsync("OnChangeEditorData", s, c.detail.roots);
   };
   return (async () => {
-    const s = await h.the.waitFor(e);
-    o = globalThis.DotNet.createJSObjectReference(s), n = Z(s, {
-      getCurrentValue: () => H(s),
-      applyValue: (d) => s.setData(d),
-      isEqual: rt
-    });
-    const l = (d, g, f) => {
-      const w = f ? "OnEditorFocus" : "OnEditorBlur";
-      t.invokeMethodAsync(w, o);
+    const c = await h.the.waitFor(e);
+    s = globalThis.DotNet.createJSObjectReference(c), n = Z(c, {
+      getCurrentValue: () => J(c),
+      applyValue: (w) => c.setData(w),
+      isEqual: at
+    }), o = et(c, "main");
+    const l = (w, y, b) => {
+      const f = b ? "OnEditorFocus" : "OnEditorBlur";
+      t.invokeMethodAsync(f, s);
     };
-    s.ui.focusTracker.on("change:isFocused", l), t.invokeMethodAsync("OnEditorReady", o), a = () => {
-      s.ui.focusTracker.off("change:isFocused", l);
+    c.ui.focusTracker.on("change:isFocused", l), t.invokeMethodAsync("OnEditorReady", s), a = () => {
+      c.ui.focusTracker.off("change:isFocused", l);
     };
-  })(), document.body.addEventListener(y.EVENT_NAME, c), vt(), O(r), {
+  })(), document.body.addEventListener(g.EVENT_NAME, u), Ct(), x(r), {
     /**
      * Updates the editor data from Blazor. If the editor is focused, the update is deferred until blur to avoid interrupting the user.
      */
-    setValue: async (s) => {
-      i || (await h.the.waitFor(e), n.setValue(s));
+    setValue: async (c) => {
+      i || (await h.the.waitFor(e), n.setValue(c));
+    },
+    /**
+     * Updates the root attributes on the editor instance.
+     */
+    setRootAttributes: async (c) => {
+      i || (await h.the.waitFor(e), o?.(c));
     },
     /**
      * Cleans up all event listeners when the Blazor component is disposed.
      */
     unmount() {
-      i || (document.body.removeEventListener(y.EVENT_NAME, c), n.unmount(), a?.(), o && (globalThis.DotNet.disposeJSObjectReference(o), o = null), i = !0);
+      i || (document.body.removeEventListener(g.EVENT_NAME, u), n.unmount(), a?.(), s && (globalThis.DotNet.disposeJSObjectReference(s), s = null), o = null, i = !0);
     },
     /**
      * Installs the custom image upload adapter that delegates uploads to Blazor.
@@ -1394,12 +1426,12 @@ function xt(r, t) {
     attachImageUploadAdapter: async () => {
       if (i)
         return;
-      const s = await h.the.waitFor(e);
-      Ct(s, t);
+      const c = await h.the.waitFor(e);
+      Pt(c, t);
     }
   };
 }
-function Ct(r, t) {
+function Pt(r, t) {
   if (!r.plugins.has("FileRepository"))
     return;
   const e = r.plugins.get("FileRepository");
@@ -1410,16 +1442,16 @@ function Ct(r, t) {
         const n = await i.file;
         if (a)
           throw new Error("Upload aborted.");
-        const o = await At(n), c = await t.invokeMethodAsync("OnEditorImageUpload", {
+        const o = await It(n), s = await t.invokeMethodAsync("OnEditorImageUpload", {
           fileName: n.name,
           mimeType: n.type,
           payload: o
         });
-        if (!c)
+        if (!s)
           throw new Error(
             "OnImageUpload handler returned null. Make sure the OnImageUpload parameter is set on the <CKE5Editor> component."
           );
-        return { default: c };
+        return { default: s };
       },
       abort() {
         a = !0;
@@ -1427,7 +1459,7 @@ function Ct(r, t) {
     };
   };
 }
-function At(r) {
+function It(r) {
   return new Promise((t, e) => {
     const i = new FileReader();
     i.onload = () => {
@@ -1436,25 +1468,25 @@ function At(r) {
     }, i.onerror = () => e(i.error), i.readAsDataURL(r);
   });
 }
-function Nt(r) {
-  return O(r), {
+function Vt(r) {
+  return x(r), {
     unmount() {
     }
   };
 }
 export {
-  b as CKEditor5BlazorError,
-  y as CKEditor5ChangeDataEvent,
+  E as CKEditor5BlazorError,
+  g as CKEditor5ChangeDataEvent,
   v as ContextsRegistry,
-  R as CustomEditorPluginsRegistry,
-  pt as EditableComponentElement,
-  gt as EditorComponentElement,
+  W as CustomEditorPluginsRegistry,
+  ft as EditableComponentElement,
+  bt as EditorComponentElement,
   h as EditorsRegistry,
-  bt as UIPartComponentElement,
-  Dt as createContextBlazorInterop,
-  St as createEditableBlazorInterop,
-  xt as createEditorBlazorInterop,
-  Nt as createUIPartBlazorInterop,
-  vt as ensureEditorElementsRegistered
+  kt as UIPartComponentElement,
+  xt as createContextBlazorInterop,
+  Nt as createEditableBlazorInterop,
+  zt as createEditorBlazorInterop,
+  Vt as createUIPartBlazorInterop,
+  Ct as ensureEditorElementsRegistered
 };
 //# sourceMappingURL=index.mjs.map