ckeditor5-livewire 1.8.0 → 1.10.0

package/dist/index.mjs

@@ -212,18 +212,8 @@ function m(e) {
 	].includes(e);
 }
 //#endregion
-//#region src/hooks/editor/utils/is-wire-model-connected.ts
-function h(e) {
-	let t = e;
-	for (; t;) {
-		for (let e of t.attributes) if (e.name.startsWith("wire:model")) return !0;
-		t = t.parentElement;
-	}
-	return !1;
-}
-//#endregion
 //#region src/hooks/editor/utils/load-editor-constructor.ts
-async function g(e) {
+async function h(e) {
 	let t = await import("ckeditor5"), n = {
 		inline: t.InlineEditor,
 		balloon: t.BalloonEditor,
@@ -236,7 +226,7 @@ async function g(e) {
 }
 //#endregion
 //#region src/hooks/editor/custom-editor-plugins.ts
-var _ = class e {
+var g = class e {
 	static the = new e();
 	plugins = /* @__PURE__ */ new Map();
 	constructor() {}
@@ -260,9 +250,9 @@ var _ = class e {
 };
 //#endregion
 //#region src/hooks/editor/utils/load-editor-plugins.ts
-async function v(e) {
+async function _(e) {
 	let t = await import("ckeditor5"), n = null, r = e.map(async (e) => {
-		let r = await _.the.get(e);
+		let r = await g.the.get(e);
 		if (r) return r;
 		let { [e]: i } = t;
 		if (i) return i;
@@ -284,19 +274,19 @@ async function v(e) {
 }
 //#endregion
 //#region src/hooks/editor/utils/load-editor-translations.ts
-async function y(e, t) {
-	let n = [e.ui, e.content], r = [b("ckeditor5", n)];
-	return t && r.push(b("ckeditor5-premium-features", n)), await Promise.all(r).then((e) => e.flat());
+async function v(e, t) {
+	let n = [e.ui, e.content], r = [y("ckeditor5", n)];
+	return t && r.push(y("ckeditor5-premium-features", n)), await Promise.all(r).then((e) => e.flat());
 }
-async function b(e, t) {
+async function y(e, t) {
 	/* v8 ignore next */
 	return await Promise.all(t.filter((e) => e !== "en").map(async (t) => {
-		let n = await x(e, t);
+		let n = await b(e, t);
 		/* v8 ignore next -- @preserve */
 		return n?.default ?? n;
 	}).filter(Boolean));
 }
-async function x(e, t) {
+async function b(e, t) {
 	try {
 		/* v8 ignore next if -- @preserve */
 		if (e === "ckeditor5") switch (t) {
@@ -456,15 +446,15 @@ catch (n) {
 }
 //#endregion
 //#region src/hooks/editor/utils/normalize-custom-translations.ts
-function S(e) {
+function x(e) {
 	return o(e, (e) => ({ dictionary: e }));
 }
 //#endregion
 //#region src/hooks/editor/utils/query-editor-editables.ts
-function C(e) {
-	return o(w(e), ({ element: e }) => e);
+function S(e) {
+	return o(C(e), ({ element: e }) => e);
 }
-function w(e) {
+function C(e) {
 	let t = window.Livewire.all().filter(({ name: t, canonical: n }) => t === "ckeditor5-editable" && n.editorId === e).reduce((e, { canonical: t, el: n }) => ({
 		...e,
 		[t.rootName]: {
@@ -486,38 +476,38 @@ function w(e) {
 		}
 	} : t;
 }
-function T(e) {
-	return i(o(w(e), ({ content: e }) => e), (e) => typeof e == "string");
+function w(e) {
+	return i(o(C(e), ({ content: e }) => e), (e) => typeof e == "string");
 }
 //#endregion
 //#region src/hooks/editor/utils/resolve-editor-config-elements-references.ts
-function E(e) {
+function T(e) {
 	if (!e || typeof e != "object") return e;
-	if (Array.isArray(e)) return e.map((e) => E(e));
+	if (Array.isArray(e)) return e.map((e) => T(e));
 	let t = e;
 	if (t.$element && typeof t.$element == "string") {
 		let e = document.querySelector(t.$element);
 		return e || console.warn(`Element not found for selector: ${t.$element}`), e || null;
 	}
 	let n = Object.create(null);
-	for (let [t, r] of Object.entries(e)) n[t] = E(r);
+	for (let [t, r] of Object.entries(e)) n[t] = T(r);
 	return n;
 }
 //#endregion
 //#region src/hooks/editor/utils/resolve-editor-config-translations.ts
-function D(e, t, n) {
+function E(e, t, n) {
 	if (!n || typeof n != "object") return n;
-	if (Array.isArray(n)) return n.map((n) => D(e, t, n));
+	if (Array.isArray(n)) return n.map((n) => E(e, t, n));
 	let r = n;
 	if (r.$translation && typeof r.$translation == "string") {
-		let n = r.$translation, i = O(e, n, t);
+		let n = r.$translation, i = D(e, n, t);
 		return i === void 0 && console.warn(`Translation not found for key: ${n}`), i === void 0 ? null : i;
 	}
 	let i = Object.create(null);
-	for (let [r, a] of Object.entries(n)) i[r] = D(e, t, a);
+	for (let [r, a] of Object.entries(n)) i[r] = E(e, t, a);
 	return i;
 }
-function O(e, t, n) {
+function D(e, t, n) {
 	for (let r of e) {
 		let e = r[n];
 		if (e?.dictionary && t in e.dictionary) return e.dictionary[t];
@@ -525,7 +515,7 @@ function O(e, t, n) {
 }
 //#endregion
 //#region src/hooks/editor/utils/set-editor-editable-height.ts
-function k(e, t) {
+function O(e, t) {
 	let { editing: n } = e;
 	n.view.change((e) => {
 		e.setStyle("height", `${t}px`, n.view.document.getRoot());
@@ -533,34 +523,34 @@ function k(e, t) {
 }
 //#endregion
 //#region src/hooks/editor/utils/wrap-with-watchdog.ts
-var A = Symbol.for("elixir-editor-watchdog");
-async function j(e) {
+var k = Symbol.for("elixir-editor-watchdog");
+async function A(e) {
 	let { EditorWatchdog: t } = await import("ckeditor5"), n = new t(e);
 	return n.setCreator(async (...t) => {
 		let r = await e.create(...t);
-		return r[A] = n, r;
+		return r[k] = n, r;
 	}), {
 		watchdog: n,
 		Constructor: { create: async (...e) => (await n.create(...e), n.editor) }
 	};
 }
-function M(e) {
-	return A in e ? e[A] : null;
+function j(e) {
+	return k in e ? e[k] : null;
 }
 //#endregion
 //#region src/hooks/context/contexts-registry.ts
-var N = class e extends n {
+var M = class e extends n {
 	static the = new e();
-}, P = class extends e {
+}, N = class extends e {
 	contextPromise = null;
 	async mounted() {
-		let { contextId: e, language: t, context: n } = this.canonical, { customTranslations: r, watchdogConfig: i, config: { plugins: o, ...s } } = n, { loadedPlugins: c, hasPremium: l } = await v(o ?? []), u = [...await y(t, l), S(r || {})].filter((e) => !a(e));
+		let { contextId: e, language: t, context: n } = this.canonical, { customTranslations: r, watchdogConfig: i, config: { plugins: o, ...s } } = n, { loadedPlugins: c, hasPremium: l } = await _(o ?? []), u = [...await v(t, l), x(r || {})].filter((e) => !a(e));
 		this.contextPromise = (async () => {
 			let { ContextWatchdog: e, Context: n } = await import("ckeditor5"), r = new e(n, {
 				crashNumberLimit: 10,
 				...i
-			}), a = E(s);
-			return a = D([...u].reverse(), t.ui, a), await r.create({
+			}), a = T(s);
+			return a = E([...u].reverse(), t.ui, a), await r.create({
 				...a,
 				language: t,
 				plugins: c,
@@ -571,7 +561,7 @@ var N = class e extends n {
 		})();
 		let d = await this.contextPromise;
 		/* v8 ignore next if -- @preserve */
-		this.isBeingDestroyed() || N.the.register(e, d);
+		this.isBeingDestroyed() || M.the.register(e, d);
 	}
 	async destroyed() {
 		let { contextId: e } = this.canonical;
@@ -579,17 +569,45 @@ var N = class e extends n {
 		try {
 			await (await this.contextPromise)?.destroy();
 		} finally {
-			this.contextPromise = null, N.the.hasItem(e) && N.the.unregister(e);
+			this.contextPromise = null, M.the.hasItem(e) && M.the.unregister(e);
 		}
 	}
-}, F = class e extends n {
+}, P = class e extends n {
 	static the = new e();
-}, I = class extends e {
+};
+//#endregion
+//#region src/hooks/utils/is-wire-model-connected.ts
+function F(e) {
+	let t = e;
+	for (; t;) {
+		for (let e of t.attributes) if (e.name.startsWith("wire:model")) return !0;
+		t = t.parentElement;
+	}
+	return !1;
+}
+//#endregion
+//#region src/hooks/utils/root-attributes-updater.ts
+function I(e, t) {
+	let n = /* @__PURE__ */ new Set();
+	return (r) => {
+		e.model.enqueueChange({ isUndoable: !1 }, (i) => {
+			let a = e.model.document.getRoot(t);
+			if (a) {
+				for (let e of n) r && e in r || (i.removeAttribute(e, a), n.delete(e));
+				for (let [e, t] of Object.entries(r ?? {})) i.setAttribute(e, t, a), n.add(e);
+			}
+		});
+	};
+}
+//#endregion
+//#region src/hooks/editable.ts
+var L = class extends e {
 	editorPromise = null;
+	rootAttributesUpdater = null;
 	pendingContent = null;
 	mounted() {
 		let { editorId: e, rootName: t, content: n } = this.canonical;
-		this.editorPromise = F.the.execute(e, (e) => {
+		this.editorPromise = P.the.execute(e, (e) => {
 			/* v8 ignore next if -- @preserve */
 			if (this.isBeingDestroyed()) return null;
 			let { ui: r, editing: i, model: a } = e;
@@ -606,16 +624,33 @@ var N = class e extends n {
 				let a = this.element.querySelector("[data-cke-editable-content]"), o = r.view.createEditable(t, a);
 				r.addEditable(o), i.view.forceRender();
 			}
-			return this.syncTypingContentPush(e), this.setupPendingReceivedContentHandlers(e), e;
+			return this.syncTypingContentPush(e), this.setupPendingReceivedContentHandlers(e), this.applyRootAttributes(e), e;
 		});
 	}
+	async afterCommitSynced() {
+		let e = await this.editorPromise;
+		this.applyCanonicalContentToEditor(e), this.applyRootAttributes(e);
+	}
+	async destroyed() {
+		let { rootName: e } = this.canonical;
+		this.element.style.display = "none";
+		let t = await this.editorPromise;
+		if (this.editorPromise = null, this.rootAttributesUpdater?.(null), t && t.state !== "destroyed") {
+			let n = t.model.document.getRoot(e);
+			/* v8 ignore next if -- @preserve */
+			n && "detachEditable" in t && (t.detachEditable(n), t.detachRoot(e, !1));
+		}
+	}
 	syncTypingContentPush(e) {
-		let { rootName: t, saveDebounceMs: n } = this.canonical, i = this.element.querySelector("input"), a = () => {
+		let { rootName: t, saveDebounceMs: n } = this.canonical, i = this.element.querySelector("input"), a = !1, o = () => {
+			if (a) return;
 			let n = e.getData({ rootName: t });
 			i && (i.value = n), this.$wire.set("content", n);
-		}, o = r(n, a);
-		e.model.document.on("change:data", o), a(), this.onBeforeDestroy(() => {
-			e.model.document.off("change:data", o);
+		}, s = r(n, o), c = () => {
+			e.ui.focusTracker.isFocused ? s() : o();
+		};
+		e.model.document.on("change:data", c), o(), this.onBeforeDestroy(() => {
+			a = !0, e.model.document.off("change:data", c);
 		});
 	}
 	setupPendingReceivedContentHandlers(e) {
@@ -629,7 +664,7 @@ var N = class e extends n {
 		});
 	}
 	applyCanonicalContentToEditor(e) {
-		if (!h(this.element)) return;
+		if (!F(this.element)) return;
 		let { content: t, rootName: n } = this.canonical, { ui: r } = e;
 		if (e.getData({ rootName: n }) !== (t ?? "")) {
 			if (r.focusTracker.isFocused) {
@@ -639,24 +674,14 @@ var N = class e extends n {
 			e.setData({ [n]: t ?? "" });
 		}
 	}
-	async afterCommitSynced() {
-		let e = await this.editorPromise;
-		this.applyCanonicalContentToEditor(e);
-	}
-	async destroyed() {
-		let { rootName: e } = this.canonical;
-		this.element.style.display = "none";
-		let t = await this.editorPromise;
-		if (this.editorPromise = null, t && t.state !== "destroyed") {
-			let n = t.model.document.getRoot(e);
-			/* v8 ignore next if -- @preserve */
-			n && "detachEditable" in t && (t.detachEditable(n), t.detachRoot(e, !1));
-		}
+	applyRootAttributes(e) {
+		let { rootName: t, rootAttributes: n } = this.canonical;
+		this.rootAttributesUpdater ??= I(e, t), this.rootAttributesUpdater(n);
 	}
 };
 //#endregion
 //#region src/hooks/editor/plugins/livewire-sync.ts
-async function L({ saveDebounceMs: e, component: t }) {
+async function R({ saveDebounceMs: e, component: t }) {
 	let { Plugin: n } = await import("ckeditor5");
 	return class extends n {
 		static get pluginName() {
@@ -668,7 +693,7 @@ async function L({ saveDebounceMs: e, component: t }) {
 		setupAfterCommitHandler() {
 			let { editor: e } = this, { model: n, ui: { focusTracker: r } } = e, i = null;
 			e.on("afterCommitSynced", () => {
-				if (!h(t.element)) return;
+				if (!F(t.element)) return;
 				let { content: n } = t.canonical, a = this.getEditorRootsValues();
 				if (r.isFocused) {
 					/* v8 ignore next else -- @preserve */
@@ -695,14 +720,20 @@ async function L({ saveDebounceMs: e, component: t }) {
 			});
 		}
 		setupTypingContentPush() {
-			let { model: n } = this.editor, { $wire: i } = t, a = () => {
+			let { editor: n } = this, { model: i, ui: a } = n, { $wire: o } = t, c = !1, l = () => {
+				/* v8 ignore next if -- @preserve */
+				if (c) return;
 				let e = this.getEditorRootsValues();
-				s(e, t.canonical.content ?? {}) || (i.set("content", e), i.dispatch("editor-content-changed", {
+				s(e, t.canonical.content ?? {}) || (o.set("content", e), o.dispatch("editor-content-changed", {
 					editorId: t.canonical.editorId,
 					content: e
 				}));
+			}, u = r(e, l), d = () => {
+				a.focusTracker.isFocused ? u() : l();
 			};
-			n.document.on("change:data", r(e, a)), this.editor.once("ready", a);
+			i.document.on("change:data", d), n.once("ready", l), n.once("destroy", () => {
+				c = !0, i.document.off("change:data", d);
+			});
 		}
 		setupFocusableEventPush() {
 			let { ui: e } = this.editor, { $wire: n } = t;
@@ -718,7 +749,7 @@ async function L({ saveDebounceMs: e, component: t }) {
 }
 //#endregion
 //#region src/hooks/editor/plugins/sync-editor-with-input.ts
-async function R(e) {
+async function z(e) {
 	let { Plugin: t } = await import("ckeditor5");
 	return class extends t {
 		input = null;
@@ -744,21 +775,22 @@ async function R(e) {
 }
 //#endregion
 //#region src/hooks/editor/editor.ts
-var z = class extends e {
+var B = class extends e {
 	editorPromise = null;
+	rootAttributesUpdater = null;
 	async mounted() {
 		let { editorId: e } = this.canonical;
-		F.the.resetErrors(e);
+		P.the.resetErrors(e);
 		try {
 			this.editorPromise = this.createEditor();
 			let t = await this.editorPromise;
 			/* v8 ignore next if -- @preserve */
-			this.isBeingDestroyed() || (F.the.register(e, t), t.once("destroy", () => {
+			this.isBeingDestroyed() || (P.the.register(e, t), t.once("destroy", () => {
 				/* v8 ignore next if -- @preserve */
-				F.the.hasItem(e) && F.the.unregister(e);
+				P.the.hasItem(e) && P.the.unregister(e);
 			}));
 		} catch (t) {
-			console.error(`Error initializing CKEditor5 instance with ID "${e}":`, t), this.editorPromise = null, F.the.error(e, t);
+			console.error(`Error initializing CKEditor5 instance with ID "${e}":`, t), this.editorPromise = null, P.the.error(e, t);
 		}
 	}
 	async destroyed() {
@@ -766,71 +798,77 @@ var z = class extends e {
 		try {
 			let e = await this.editorPromise;
 			if (!e) return;
-			let t = f(e), n = M(e);
+			let t = f(e), n = j(e);
 			t ? t.state !== "unavailable" && await t.context.remove(t.editorContextId) : n ? await n.destroy() : await e.destroy();
 		} finally {
 			this.editorPromise = null;
 		}
 	}
 	async afterCommitSynced() {
-		(await this.editorPromise)?.fire("afterCommitSynced");
+		let e = await this.editorPromise;
+		/* v8 ignore if -- @preserve */
+		e && (e.fire("afterCommitSynced"), this.applyRootAttributes(e));
+	}
+	applyRootAttributes(e) {
+		let { rootAttributes: t } = this.canonical;
+		this.rootAttributesUpdater ??= I(e, "main"), this.rootAttributesUpdater(t);
 	}
 	async createEditor() {
-		let { preset: e, editorId: t, contextId: n, editableHeight: r, saveDebounceMs: i, language: o, watchdog: s, content: c } = this.canonical, { customTranslations: l, editorType: u, licenseKey: f, config: { plugins: p, ...h } } = e, _ = await g(u), b = await (n ? N.the.waitFor(n) : null);
+		let { preset: e, editorId: t, contextId: n, editableHeight: r, saveDebounceMs: i, language: o, watchdog: s, content: c } = this.canonical, { customTranslations: l, editorType: u, licenseKey: f, config: { plugins: p, ...g } } = e, y = await h(u), b = await (n ? M.the.waitFor(n) : null);
 		if (s && !b) {
-			let e = await j(_);
-			({Constructor: _} = e), e.watchdog.on("restart", () => {
+			let e = await A(y);
+			({Constructor: y} = e), e.watchdog.on("restart", () => {
 				let n = e.watchdog.editor;
-				this.editorPromise = Promise.resolve(n), F.the.register(t, n);
+				this.editorPromise = Promise.resolve(n), P.the.register(t, n);
 			});
 		}
-		let { loadedPlugins: x, hasPremium: w } = await v(p);
-		x.push(await L({
+		let { loadedPlugins: C, hasPremium: D } = await _(p);
+		C.push(await R({
 			saveDebounceMs: i,
 			component: this
-		})), m(u) && x.push(await R(i));
-		let O = [...await y(o, w), S(l || {})].filter((e) => !a(e)), A = {
+		})), m(u) && C.push(await z(i));
+		let k = [...await v(o, D), x(l || {})].filter((e) => !a(e)), j = {
 			...c,
-			...T(t)
+			...w(t)
 		};
-		m(u) && (A = A.main || "");
-		let M = await (async () => {
-			let e = C(t);
+		m(u) && (j = j.main || "");
+		let N = await (async () => {
+			let e = S(t);
 			if (!(e instanceof HTMLElement) && !("main" in e)) {
-				let n = u === "decoupled" ? ["main"] : Object.keys(A);
-				B(e, n) || (e = await V(t, n), A = {
+				let n = u === "decoupled" ? ["main"] : Object.keys(j);
+				V(e, n) || (e = await H(t, n), j = {
 					...c,
-					...T(t)
+					...w(t)
 				});
 			}
 			m(u) && "main" in e && (e = e.main);
-			let n = E(h);
-			n = D([...O].reverse(), o.ui, n);
+			let n = T(g);
+			n = E([...k].reverse(), o.ui, n);
 			let r = {
 				...n,
-				initialData: A,
+				initialData: j,
 				licenseKey: f,
-				plugins: x,
+				plugins: C,
 				language: o,
-				...O.length && { translations: O }
+				...k.length && { translations: k }
 			};
-			return !b || !(e instanceof HTMLElement) ? _.create(e, r) : (await d({
+			return !b || !(e instanceof HTMLElement) ? y.create(e, r) : (await d({
 				context: b,
 				element: e,
-				creator: _,
+				creator: y,
 				config: r
 			})).editor;
 		})();
-		return m(u) && r && k(M, r), M;
+		return m(u) && r && O(N, r), this.applyRootAttributes(N), N;
 	}
 };
-function B(e, t) {
+function V(e, t) {
 	return t.every((t) => e[t]);
 }
-async function V(e, t) {
+async function H(e, t) {
 	return l(() => {
-		let n = C(e);
-		if (!B(n, t)) throw Error(`It looks like not all required root elements are present yet.
+		let n = S(e);
+		if (!V(n, t)) throw Error(`It looks like not all required root elements are present yet.
 * If you want to wait for them, ensure they are registered before editor initialization.
 * If you want lazy initialize roots, consider removing root values from the \`initialData\` config and assign initial data in editable components.
 Missing roots: ${t.filter((e) => !n[e]).join(", ")}.`);
@@ -842,14 +880,14 @@ Missing roots: ${t.filter((e) => !n[e]).join(", ")}.`);
 }
 //#endregion
 //#region src/hooks/ui-part.ts
-var H = class extends e {
+var U = class extends e {
 	mountedPromise = null;
 	async mounted() {
 		let { editorId: e, name: t } = this.canonical;
-		this.mountedPromise = F.the.execute(e, (e) => {
+		this.mountedPromise = P.the.execute(e, (e) => {
 			/* v8 ignore next if -- @preserve */
 			if (this.isBeingDestroyed()) return;
-			let { ui: n } = e, r = U(t), i = n.view[r];
+			let { ui: n } = e, r = W(t), i = n.view[r];
 			if (!i) {
 				console.error(`Unknown UI part name: "${t}". Supported names are "toolbar" and "menubar".`);
 				return;
@@ -861,7 +899,7 @@ var H = class extends e {
 		this.element.style.display = "none", await this.mountedPromise, this.mountedPromise = null, this.element.innerHTML = "";
 	}
 };
-function U(e) {
+function W(e) {
 	switch (e) {
 		case "toolbar": return "toolbar";
 		case "menubar": return "menuBarView";
@@ -870,19 +908,19 @@ function U(e) {
 }
 //#endregion
 //#region src/hooks/index.ts
-var W = {
-	ckeditor5: z,
-	"ckeditor5-context": P,
-	"ckeditor5-ui-part": H,
-	"ckeditor5-editable": I
+var G = {
+	ckeditor5: B,
+	"ckeditor5-context": N,
+	"ckeditor5-ui-part": U,
+	"ckeditor5-editable": L
 };
-function G() {
-	for (let [e, n] of Object.entries(W)) t(e, n);
+function K() {
+	for (let [e, n] of Object.entries(G)) t(e, n);
 }
 //#endregion
 //#region src/index.ts
-G();
+K();
 //#endregion
-export { e as ClassHook, N as ContextsRegistry, _ as CustomEditorPluginsRegistry, I as EditableComponentHook, z as EditorComponentHook, F as EditorsRegistry, H as UIPartComponentHook, t as registerLivewireComponentHook };
+export { e as ClassHook, M as ContextsRegistry, g as CustomEditorPluginsRegistry, L as EditableComponentHook, B as EditorComponentHook, P as EditorsRegistry, U as UIPartComponentHook, t as registerLivewireComponentHook };
 
 //# sourceMappingURL=index.mjs.map