ckeditor5-livewire 1.10.0 → 1.11.0

package/dist/index.mjs

@@ -42,12 +42,22 @@ function t(e, t) {
 	});
 }
 //#endregion
+//#region src/shared/are-maps-equal.ts
+function n(e, t) {
+	if (!e || e.size !== t.size) return !1;
+	for (let [n, r] of e) if (!t.has(n) || t.get(n) !== r) return !1;
+	return !0;
+}
+//#endregion
 //#region src/shared/async-registry.ts
-var n = class {
+var r = class {
 	items = /* @__PURE__ */ new Map();
 	initializationErrors = /* @__PURE__ */ new Map();
 	pendingCallbacks = /* @__PURE__ */ new Map();
 	watchers = /* @__PURE__ */ new Set();
+	batchDepth = 0;
+	lastNotifiedItems = null;
+	lastNotifiedErrors = null;
 	execute(e, t, n) {
 		let r = this.items.get(e), i = this.initializationErrors.get(e);
 		return i ? (n?.(i), Promise.reject(i)) : r ? Promise.resolve(t(r)) : new Promise((r, i) => {
@@ -57,28 +67,50 @@ var n = class {
 			}), n ? a.error.push(n) : a.error.push(i);
 		});
 	}
+	mountEffect(e, t) {
+		let n, r, i = !1, a = this.watch((o) => {
+			let s = o.get(e);
+			if (s !== r && (n?.(), n = void 0, r = s, s)) try {
+				let e = t(s);
+				i ? (e?.(), a()) : n = e;
+			} catch (e) {
+				throw console.error(e), e;
+			}
+		});
+		return () => {
+			i = !0, r && (a(), n?.(), n = void 0);
+		};
+	}
 	register(e, t) {
-		if (this.items.has(e)) throw Error(`Item with ID "${e}" is already registered.`);
-		this.resetErrors(e), this.items.set(e, t);
-		let n = this.pendingCallbacks.get(e);
-		n && (n.success.forEach((e) => e(t)), this.pendingCallbacks.delete(e)), this.registerAsDefault(e, t), this.notifyWatchers();
+		this.batch(() => {
+			if (this.items.has(e)) throw Error(`Item with ID "${e}" is already registered.`);
+			this.resetErrors(e), this.items.set(e, t);
+			let n = this.pendingCallbacks.get(e);
+			n && (n.success.forEach((e) => e(t)), this.pendingCallbacks.delete(e)), this.items.size === 1 && e !== null && this.register(null, t);
+		});
 	}
 	error(e, t) {
-		this.items.delete(e), this.initializationErrors.set(e, t);
-		let n = this.pendingCallbacks.get(e);
-		n && (n.error.forEach((e) => e(t)), this.pendingCallbacks.delete(e)), this.initializationErrors.size === 1 && !this.items.size && this.error(null, t), this.notifyWatchers();
+		this.batch(() => {
+			this.items.delete(e), this.initializationErrors.set(e, t);
+			let n = this.pendingCallbacks.get(e);
+			n && (n.error.forEach((e) => e(t)), this.pendingCallbacks.delete(e)), this.initializationErrors.size === 1 && !this.items.size && this.error(null, t);
+		});
 	}
 	resetErrors(e) {
 		let { initializationErrors: t } = this;
 		t.has(null) && t.get(null) === t.get(e) && t.delete(null), t.delete(e);
 	}
-	unregister(e) {
-		if (!this.items.has(e)) throw Error(`Item with ID "${e}" is not registered.`);
-		e && this.items.get(null) === this.items.get(e) && this.unregister(null), this.items.delete(e), this.pendingCallbacks.delete(e), this.notifyWatchers();
+	unregister(e, t = !0) {
+		this.batch(() => {
+			e && this.items.get(null) === this.items.get(e) && this.unregister(null, !1), this.items.delete(e), t && this.pendingCallbacks.delete(e), this.resetErrors(e);
+		});
 	}
 	getItems() {
 		return Array.from(this.items.values());
 	}
+	getItem(e) {
+		return this.items.get(e);
+	}
 	hasItem(e) {
 		return this.items.has(e);
 	}
@@ -89,7 +121,18 @@ var n = class {
 	}
 	async destroyAll() {
 		let e = Array.from(new Set(this.items.values())).map((e) => e.destroy());
-		this.items.clear(), this.pendingCallbacks.clear(), await Promise.all(e), this.notifyWatchers();
+		this.items.clear(), this.pendingCallbacks.clear(), await Promise.all(e), this.flushWatchers();
+	}
+	async reset() {
+		await this.destroyAll(), this.watchers.clear();
+	}
+	batch(e) {
+		this.batchDepth++;
+		try {
+			return e();
+		} finally {
+			this.batchDepth--, this.batchDepth === 0 && this.flushWatchers();
+		}
 	}
 	watch(e) {
 		return this.watchers.add(e), e(new Map(this.items), new Map(this.initializationErrors)), this.unwatch.bind(this, e);
@@ -97,8 +140,8 @@ var n = class {
 	unwatch(e) {
 		this.watchers.delete(e);
 	}
-	notifyWatchers() {
-		this.watchers.forEach((e) => e(new Map(this.items), new Map(this.initializationErrors)));
+	flushWatchers() {
+		n(this.lastNotifiedItems, this.items) && n(this.lastNotifiedErrors, this.initializationErrors) || (this.lastNotifiedItems = new Map(this.items), this.lastNotifiedErrors = new Map(this.initializationErrors), this.watchers.forEach((e) => e(new Map(this.items), new Map(this.initializationErrors))));
 	}
 	getPendingCallbacks(e) {
 		let t = this.pendingCallbacks.get(e);
@@ -107,13 +150,10 @@ var n = class {
 			error: []
 		}, this.pendingCallbacks.set(e, t)), t;
 	}
-	registerAsDefault(e, t) {
-		this.items.size === 1 && e !== null && this.register(null, t);
-	}
 };
 //#endregion
 //#region src/shared/debounce.ts
-function r(e, t) {
+function i(e, t) {
 	let n = null;
 	return (...r) => {
 		n && clearTimeout(n), n = setTimeout(() => {
@@ -123,24 +163,24 @@ function r(e, t) {
 }
 //#endregion
 //#region src/shared/filter-object-values.ts
-function i(e, t) {
+function a(e, t) {
 	let n = Object.entries(e).filter(([e, n]) => t(n, e));
 	return Object.fromEntries(n);
 }
 //#endregion
 //#region src/shared/is-empty-object.ts
-function a(e) {
+function o(e) {
 	return Object.keys(e).length === 0 && e.constructor === Object;
 }
 //#endregion
 //#region src/shared/map-object-values.ts
-function o(e, t) {
+function s(e, t) {
 	let n = Object.entries(e).map(([e, n]) => [e, t(n, e)]);
 	return Object.fromEntries(n);
 }
 //#endregion
 //#region src/shared/shallow-equal.ts
-function s(e, t) {
+function c(e, t) {
 	if (e === t) return !0;
 	let n = Object.keys(e), r = Object.keys(t);
 	if (n.length !== r.length) return !1;
@@ -149,12 +189,12 @@ function s(e, t) {
 }
 //#endregion
 //#region src/shared/uid.ts
-function c() {
+function l() {
 	return Math.random().toString(36).substring(2);
 }
 //#endregion
 //#region src/shared/wait-for.ts
-function l(e, { timeOutAfter: t = 500, retryAfter: n = 100 } = {}) {
+function u(e, { timeOutAfter: t = 500, retryAfter: n = 100 } = {}) {
 	return new Promise((r, i) => {
 		let a = Date.now(), o = null, s = setTimeout(() => {
 			i(o ?? /* @__PURE__ */ Error("Timeout"));
@@ -170,10 +210,27 @@ function l(e, { timeOutAfter: t = 500, retryAfter: n = 100 } = {}) {
 	});
 }
 //#endregion
+//#region src/hooks/editor/utils/cleanup-orphan-editor-elements.ts
+function d(e) {
+	let t = [
+		e.ui?.element,
+		e.ui?.view?.toolbar?.element,
+		e.ui?.view?.menuBarView?.element
+	].filter(Boolean);
+	for (let e of t) i(e);
+	let n = e.ui?.view?.body?._bodyCollectionContainer;
+	n?.isConnected && i(n);
+	let r = e.editing?.view;
+	if (r) for (let e of r.domRoots.values()) e instanceof HTMLElement && (e.removeAttribute("contenteditable"), e.removeAttribute("role"), e.removeAttribute("aria-label"), e.removeAttribute("aria-multiline"), e.removeAttribute("spellcheck"), e.classList.remove("ck", "ck-content", "ck-editor__editable", "ck-rounded-corners", "ck-editor__editable_inline", "ck-blurred", "ck-focused"), i(e));
+	function i(e) {
+		e.hasAttribute("data-cke-controlled") ? e.innerHTML = "" : e.remove();
+	}
+}
+//#endregion
 //#region src/hooks/editor/utils/create-editor-in-context.ts
-var u = Symbol.for("context-editor-watchdog");
-async function d({ element: e, context: t, creator: n, config: r }) {
-	let i = c();
+var f = Symbol.for("context-editor-watchdog");
+async function p({ element: e, context: t, creator: n, config: r }) {
+	let i = l();
 	await t.add({
 		creator: (e, t) => n.create(e, t),
 		id: i,
@@ -186,24 +243,29 @@ async function d({ element: e, context: t, creator: n, config: r }) {
 		editorContextId: i,
 		context: t
 	};
-	a[u] = o;
+	a[f] = o;
 	let s = t.destroy.bind(t);
 	return t.destroy = async () => (o.state = "unavailable", s()), {
 		...o,
 		editor: a
 	};
 }
-function f(e) {
-	return u in e ? e[u] : null;
+function m(e) {
+	return f in e ? e[f] : null;
 }
 //#endregion
 //#region src/hooks/editor/utils/get-editor-roots-values.ts
-function p(e) {
+function h(e) {
 	return e.model.document.getRootNames().reduce((t, n) => (t[n] = e.getData({ rootName: n }), t), Object.create({}));
 }
 //#endregion
+//#region src/hooks/editor/utils/is-multiroot-editor-instance.ts
+function g(e) {
+	return "addEditable" in e.ui;
+}
+//#endregion
 //#region src/hooks/editor/utils/is-single-root-editor.ts
-function m(e) {
+function _(e) {
 	return [
 		"inline",
 		"classic",
@@ -213,7 +275,7 @@ function m(e) {
 }
 //#endregion
 //#region src/hooks/editor/utils/load-editor-constructor.ts
-async function h(e) {
+async function v(e) {
 	let t = await import("ckeditor5"), n = {
 		inline: t.InlineEditor,
 		balloon: t.BalloonEditor,
@@ -226,7 +288,7 @@ async function h(e) {
 }
 //#endregion
 //#region src/hooks/editor/custom-editor-plugins.ts
-var g = class e {
+var y = class e {
 	static the = new e();
 	plugins = /* @__PURE__ */ new Map();
 	constructor() {}
@@ -250,9 +312,9 @@ var g = class e {
 };
 //#endregion
 //#region src/hooks/editor/utils/load-editor-plugins.ts
-async function _(e) {
+async function b(e) {
 	let t = await import("ckeditor5"), n = null, r = e.map(async (e) => {
-		let r = await g.the.get(e);
+		let r = await y.the.get(e);
 		if (r) return r;
 		let { [e]: i } = t;
 		if (i) return i;
@@ -274,19 +336,19 @@ async function _(e) {
 }
 //#endregion
 //#region src/hooks/editor/utils/load-editor-translations.ts
-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 x(e, t) {
+	let n = [e.ui, e.content], r = [S("ckeditor5", n)];
+	return t && r.push(S("ckeditor5-premium-features", n)), await Promise.all(r).then((e) => e.flat());
 }
-async function y(e, t) {
+async function S(e, t) {
 	/* v8 ignore next */
 	return await Promise.all(t.filter((e) => e !== "en").map(async (t) => {
-		let n = await b(e, t);
+		let n = await C(e, t);
 		/* v8 ignore next -- @preserve */
 		return n?.default ?? n;
 	}).filter(Boolean));
 }
-async function b(e, t) {
+async function C(e, t) {
 	try {
 		/* v8 ignore next if -- @preserve */
 		if (e === "ckeditor5") switch (t) {
@@ -446,15 +508,15 @@ catch (n) {
 }
 //#endregion
 //#region src/hooks/editor/utils/normalize-custom-translations.ts
-function x(e) {
-	return o(e, (e) => ({ dictionary: e }));
+function w(e) {
+	return s(e, (e) => ({ dictionary: e }));
 }
 //#endregion
 //#region src/hooks/editor/utils/query-editor-editables.ts
-function S(e) {
-	return o(C(e), ({ element: e }) => e);
+function T(e) {
+	return s(E(e), ({ element: e }) => e);
 }
-function C(e) {
+function E(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]: {
@@ -476,38 +538,38 @@ function C(e) {
 		}
 	} : t;
 }
-function w(e) {
-	return i(o(C(e), ({ content: e }) => e), (e) => typeof e == "string");
+function D(e) {
+	return a(s(E(e), ({ content: e }) => e), (e) => typeof e == "string");
 }
 //#endregion
 //#region src/hooks/editor/utils/resolve-editor-config-elements-references.ts
-function T(e) {
+function O(e) {
 	if (!e || typeof e != "object") return e;
-	if (Array.isArray(e)) return e.map((e) => T(e));
+	if (Array.isArray(e)) return e.map((e) => O(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] = T(r);
+	for (let [t, r] of Object.entries(e)) n[t] = O(r);
 	return n;
 }
 //#endregion
 //#region src/hooks/editor/utils/resolve-editor-config-translations.ts
-function E(e, t, n) {
+function k(e, t, n) {
 	if (!n || typeof n != "object") return n;
-	if (Array.isArray(n)) return n.map((n) => E(e, t, n));
+	if (Array.isArray(n)) return n.map((n) => k(e, t, n));
 	let r = n;
 	if (r.$translation && typeof r.$translation == "string") {
-		let n = r.$translation, i = D(e, n, t);
+		let n = r.$translation, i = A(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] = E(e, t, a);
+	for (let [r, a] of Object.entries(n)) i[r] = k(e, t, a);
 	return i;
 }
-function D(e, t, n) {
+function A(e, t, n) {
 	for (let r of e) {
 		let e = r[n];
 		if (e?.dictionary && t in e.dictionary) return e.dictionary[t];
@@ -515,7 +577,7 @@ function D(e, t, n) {
 }
 //#endregion
 //#region src/hooks/editor/utils/set-editor-editable-height.ts
-function O(e, t) {
+function j(e, t) {
 	let { editing: n } = e;
 	n.view.change((e) => {
 		e.setStyle("height", `${t}px`, n.view.document.getRoot());
@@ -523,34 +585,34 @@ function O(e, t) {
 }
 //#endregion
 //#region src/hooks/editor/utils/wrap-with-watchdog.ts
-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[k] = n, r;
-	}), {
-		watchdog: n,
-		Constructor: { create: async (...e) => (await n.create(...e), n.editor) }
-	};
+var M = Symbol.for("livewire-editor-watchdog");
+async function N(e, t) {
+	let { EditorWatchdog: n } = await import("ckeditor5"), r = new n(null, t ?? {
+		crashNumberLimit: 10,
+		minimumNonErrorTimePeriod: 5e3
+	});
+	return r.setCreator(async () => {
+		let t = await e();
+		return t[M] = r, t;
+	}), r;
 }
-function j(e) {
-	return k in e ? e[k] : null;
+function P(e) {
+	return M in e ? e[M] : null;
 }
 //#endregion
 //#region src/hooks/context/contexts-registry.ts
-var M = class e extends n {
+var F = class e extends r {
 	static the = new e();
-}, N = class extends e {
+}, I = 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 _(o ?? []), u = [...await v(t, l), x(r || {})].filter((e) => !a(e));
+		let { contextId: e, language: t, context: n } = this.canonical, { customTranslations: r, watchdogConfig: i, config: { plugins: a, ...s } } = n, { loadedPlugins: c, hasPremium: l } = await b(a ?? []), u = [...await x(t, l), w(r || {})].filter((e) => !o(e));
 		this.contextPromise = (async () => {
 			let { ContextWatchdog: e, Context: n } = await import("ckeditor5"), r = new e(n, {
 				crashNumberLimit: 10,
 				...i
-			}), a = T(s);
-			return a = E([...u].reverse(), t.ui, a), await r.create({
+			}), a = O(s);
+			return a = k([...u].reverse(), t.ui, a), await r.create({
 				...a,
 				language: t,
 				plugins: c,
@@ -561,7 +623,7 @@ var M = class e extends n {
 		})();
 		let d = await this.contextPromise;
 		/* v8 ignore next if -- @preserve */
-		this.isBeingDestroyed() || M.the.register(e, d);
+		this.isBeingDestroyed() || F.the.register(e, d);
 	}
 	async destroyed() {
 		let { contextId: e } = this.canonical;
@@ -569,15 +631,15 @@ var M = class e extends n {
 		try {
 			await (await this.contextPromise)?.destroy();
 		} finally {
-			this.contextPromise = null, M.the.hasItem(e) && M.the.unregister(e);
+			this.contextPromise = null, F.the.hasItem(e) && F.the.unregister(e);
 		}
 	}
-}, P = class e extends n {
+}, L = class e extends r {
 	static the = new e();
 };
 //#endregion
 //#region src/hooks/utils/is-wire-model-connected.ts
-function F(e) {
+function R(e) {
 	let t = e;
 	for (; t;) {
 		for (let e of t.attributes) if (e.name.startsWith("wire:model")) return !0;
@@ -587,7 +649,7 @@ function F(e) {
 }
 //#endregion
 //#region src/hooks/utils/root-attributes-updater.ts
-function I(e, t) {
+function z(e, t) {
 	let n = /* @__PURE__ */ new Set();
 	return (r) => {
 		e.model.enqueueChange({ isUndoable: !1 }, (i) => {
@@ -601,22 +663,21 @@ function I(e, t) {
 }
 //#endregion
 //#region src/hooks/editable.ts
-var L = class extends e {
-	editorPromise = null;
+var B = class extends e {
 	rootAttributesUpdater = null;
 	pendingContent = null;
 	mounted() {
-		let { editorId: e, rootName: t, content: n } = this.canonical;
-		this.editorPromise = P.the.execute(e, (e) => {
+		let { editorId: e, rootName: t, content: n } = this.canonical, r = L.the.mountEffect(e, (e) => {
 			/* v8 ignore next if -- @preserve */
-			if (this.isBeingDestroyed()) return null;
-			let { ui: r, editing: i, model: a } = e;
-			if (a.document.getRoot(t)) {
-				if (n !== null) {
-					let r = e.getData({ rootName: t });
-					r && r !== n && e.setData({ [t]: n });
-				}
-			} else {
+			if (this.isBeingDestroyed()) return;
+			let r = e.model.document.getRoot(t);
+			if (r?.isAttached() && n !== null) {
+				let r = e.getData({ rootName: t });
+				r && r !== n && e.setData({ [t]: n });
+			}
+			/* v8 ignore next else -- @preserve */
+			if (!r && g(e)) {
+				let { ui: r, editing: i } = e;
 				e.addRoot(t, {
 					isUndoable: !1,
 					...n !== null && { data: n }
@@ -624,34 +685,45 @@ var L = class extends e {
 				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), this.applyRootAttributes(e), e;
+			let i = this.syncTypingContentPush(e), a = this.setupPendingReceivedContentHandlers(e);
+			return this.applyRootAttributes(e), () => {
+				/* v8 ignore next else -- @preserve */
+				if (i(), a(), this.rootAttributesUpdater?.(null), e.state !== "destroyed") {
+					let n = e.model.document.getRoot(t);
+					/* v8 ignore next if -- @preserve */
+					if (n && g(e)) {
+						try {
+							/* v8 ignore else -- @preserve */
+							e.ui.view.editables[t] && e.detachEditable(n);
+						} catch (e) {
+							/* v8 ignore next -- @preserve */
+							console.error("Unable unmount editable from root:", e);
+						}
+						n.isAttached() && e.detachRoot(t, !1);
+					}
+				}
+			};
 		});
+		this.onBeforeDestroy(r);
 	}
 	async afterCommitSynced() {
-		let e = await this.editorPromise;
-		this.applyCanonicalContentToEditor(e), this.applyRootAttributes(e);
+		let { editorId: e } = this.canonical, t = await L.the.waitFor(e);
+		this.applyCanonicalContentToEditor(t), this.applyRootAttributes(t);
 	}
-	async destroyed() {
-		let { rootName: e } = this.canonical;
+	destroyed() {
 		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 = !1, o = () => {
-			if (a) return;
+		let { rootName: t, saveDebounceMs: n } = this.canonical, r = this.element.querySelector("input"), a = !1, o = () => {
+			if (a || !e.model.document.getRoot(t)?.isAttached()) return;
 			let n = e.getData({ rootName: t });
-			i && (i.value = n), this.$wire.set("content", n);
-		}, s = r(n, o), c = () => {
+			r && (r.value = n), this.$wire.set("content", n);
+		}, s = i(n, o), c = () => {
 			e.ui.focusTracker.isFocused ? s() : o();
 		};
-		e.model.document.on("change:data", c), o(), this.onBeforeDestroy(() => {
+		return e.model.document.on("change:data", c), o(), () => {
 			a = !0, e.model.document.off("change:data", c);
-		});
+		};
 	}
 	setupPendingReceivedContentHandlers(e) {
 		let { ui: t, model: n } = e, { focusTracker: r } = t, { rootName: i } = this.canonical, a = () => {
@@ -659,12 +731,12 @@ var L = class extends e {
 		}, o = () => {
 			!r.isFocused && this.pendingContent !== null && (e.setData({ [i]: this.pendingContent }), this.pendingContent = null);
 		};
-		n.document.on("change:data", a), r.on("change:isFocused", o), this.onBeforeDestroy(() => {
+		return n.document.on("change:data", a), r.on("change:isFocused", o), () => {
 			n.document.off("change:data", a), r.off("change:isFocused", o);
-		});
+		};
 	}
 	applyCanonicalContentToEditor(e) {
-		if (!F(this.element)) return;
+		if (!R(this.element)) return;
 		let { content: t, rootName: n } = this.canonical, { ui: r } = e;
 		if (e.getData({ rootName: n }) !== (t ?? "")) {
 			if (r.focusTracker.isFocused) {
@@ -676,12 +748,12 @@ var L = class extends e {
 	}
 	applyRootAttributes(e) {
 		let { rootName: t, rootAttributes: n } = this.canonical;
-		this.rootAttributesUpdater ??= I(e, t), this.rootAttributesUpdater(n);
+		this.rootAttributesUpdater ??= z(e, t), this.rootAttributesUpdater(n);
 	}
 };
 //#endregion
 //#region src/hooks/editor/plugins/livewire-sync.ts
-async function R({ saveDebounceMs: e, component: t }) {
+async function V({ saveDebounceMs: e, component: t }) {
 	let { Plugin: n } = await import("ckeditor5");
 	return class extends n {
 		static get pluginName() {
@@ -693,15 +765,15 @@ async function R({ saveDebounceMs: e, component: t }) {
 		setupAfterCommitHandler() {
 			let { editor: e } = this, { model: n, ui: { focusTracker: r } } = e, i = null;
 			e.on("afterCommitSynced", () => {
-				if (!F(t.element)) return;
+				if (!R(t.element)) return;
 				let { content: n } = t.canonical, a = this.getEditorRootsValues();
 				if (r.isFocused) {
 					/* v8 ignore next else -- @preserve */
-					s(n, a) || (i = n);
+					c(n, a) || (i = n);
 					return;
 				}
 				/* v8 ignore next else -- @preserve */
-				s(n, a) || e.setData(n);
+				c(n, a) || e.setData(n);
 			}), n.document.on("change:data", () => {
 				i = null;
 			}), r.on("change:isFocused", () => {
@@ -715,41 +787,43 @@ async function R({ saveDebounceMs: e, component: t }) {
 			});
 		}
 		setupSetEditorContentHandler() {
-			Livewire.on("set-editor-content", ({ editorId: e, content: n }) => {
-				e === t.canonical.editorId && (s(this.getEditorRootsValues(), n) || this.editor.setData(n));
+			let { editor: e } = this, n = Livewire.on("set-editor-content", ({ editorId: n, content: r }) => {
+				n === t.canonical.editorId && (c(this.getEditorRootsValues(), r) || e.setData(r));
 			});
+			/* v8 ignore next if -- @preserve */
+			typeof n == "function" && e.once("destroy", n);
 		}
 		setupTypingContentPush() {
-			let { editor: n } = this, { model: i, ui: a } = n, { $wire: o } = t, c = !1, l = () => {
+			let { editor: n } = this, { model: r, ui: a } = n, { $wire: o } = t, s = !1, l = () => {
 				/* v8 ignore next if -- @preserve */
-				if (c) return;
+				if (s) return;
 				let e = this.getEditorRootsValues();
-				s(e, t.canonical.content ?? {}) || (o.set("content", e), o.dispatch("editor-content-changed", {
+				c(e, t.canonical.content ?? {}) || (o.set("content", e), o.dispatch("editor-content-changed", {
 					editorId: t.canonical.editorId,
 					content: e
 				}));
-			}, u = r(e, l), d = () => {
+			}, u = i(e, l);
+			r.document.on("change:data", i(10, () => {
 				a.focusTracker.isFocused ? u() : l();
-			};
-			i.document.on("change:data", d), n.once("ready", l), n.once("destroy", () => {
-				c = !0, i.document.off("change:data", d);
+			})), n.once("ready", l), n.once("destroy", () => {
+				s = !0;
 			});
 		}
 		setupFocusableEventPush() {
 			let { ui: e } = this.editor, { $wire: n } = t;
 			e.focusTracker.on("change:isFocused", () => {
 				let r = this.getEditorRootsValues();
-				n.set("focused", e.focusTracker.isFocused), s(r, t.canonical.content ?? {}) || n.set("content", r);
+				n.set("focused", e.focusTracker.isFocused), c(r, t.canonical.content ?? {}) || n.set("content", r);
 			});
 		}
 		getEditorRootsValues() {
-			return p(this.editor);
+			return h(this.editor);
 		}
 	};
 }
 //#endregion
 //#region src/hooks/editor/plugins/sync-editor-with-input.ts
-async function z(e) {
+async function H(e) {
 	let { Plugin: t } = await import("ckeditor5");
 	return class extends t {
 		input = null;
@@ -759,7 +833,7 @@ async function z(e) {
 		}
 		afterInit() {
 			let { editor: t } = this, n = t.sourceElement.id.replace(/_editor$/, "");
-			this.input = document.getElementById(`${n}_input`), this.input && (t.model.document.on("change:data", r(e, () => this.sync())), t.once("ready", this.sync), this.form = this.input.closest("form"), this.form?.addEventListener("submit", this.sync));
+			this.input = document.getElementById(`${n}_input`), this.input && (t.model.document.on("change:data", i(e, () => this.sync())), t.once("ready", this.sync), this.form = this.input.closest("form"), this.form?.addEventListener("submit", this.sync));
 		}
 		sync = () => {
 			/* v8 ignore next else -- @preserve */
@@ -775,100 +849,102 @@ async function z(e) {
 }
 //#endregion
 //#region src/hooks/editor/editor.ts
-var B = class extends e {
-	editorPromise = null;
+var U = class extends e {
 	rootAttributesUpdater = null;
 	async mounted() {
 		let { editorId: e } = this.canonical;
-		P.the.resetErrors(e);
+		L.the.resetErrors(e);
 		try {
-			this.editorPromise = this.createEditor();
-			let t = await this.editorPromise;
-			/* v8 ignore next if -- @preserve */
-			this.isBeingDestroyed() || (P.the.register(e, t), t.once("destroy", () => {
-				/* v8 ignore next if -- @preserve */
-				P.the.hasItem(e) && P.the.unregister(e);
-			}));
+			let t = await this.createEditor(), n = m(t), r = P(t);
+			/* v8 ignore next 3 */
+			if (this.isBeingDestroyed()) return;
+			let i = L.the.mountEffect(e, (t) => {
+				t.once("destroy", () => {
+					L.the.unregister(e, !1);
+				}, { priority: "highest" });
+			});
+			this.onBeforeDestroy(async () => {
+				L.the.unregister(e), i(), n ? n.state !== "unavailable" && await n.context.remove(n.editorContextId) : r ? await r.destroy() : await t.destroy();
+			}), L.the.register(e, t);
 		} catch (t) {
-			console.error(`Error initializing CKEditor5 instance with ID "${e}":`, t), this.editorPromise = null, P.the.error(e, t);
+			console.error(`Error initializing CKEditor5 instance with ID "${e}":`, t), L.the.error(e, t);
 		}
 	}
 	async destroyed() {
 		this.element.style.display = "none";
-		try {
-			let e = await this.editorPromise;
-			if (!e) return;
-			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() {
-		let e = await this.editorPromise;
+		let e = await L.the.waitFor(this.canonical.editorId);
 		/* 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);
+		this.rootAttributesUpdater ??= z(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, ...g } } = e, y = await h(u), b = await (n ? M.the.waitFor(n) : null);
-		if (s && !b) {
-			let e = await A(y);
-			({Constructor: y} = e), e.watchdog.on("restart", () => {
-				let n = e.watchdog.editor;
-				this.editorPromise = Promise.resolve(n), P.the.register(t, n);
-			});
-		}
-		let { loadedPlugins: C, hasPremium: D } = await _(p);
-		C.push(await R({
-			saveDebounceMs: i,
-			component: this
-		})), m(u) && C.push(await z(i));
-		let k = [...await v(o, D), x(l || {})].filter((e) => !a(e)), j = {
-			...c,
-			...w(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(j);
-				V(e, n) || (e = await H(t, n), j = {
-					...c,
-					...w(t)
-				});
-			}
-			m(u) && "main" in e && (e = e.main);
-			let n = T(g);
-			n = E([...k].reverse(), o.ui, n);
-			let r = {
-				...n,
-				initialData: j,
-				licenseKey: f,
-				plugins: C,
-				language: o,
-				...k.length && { translations: k }
+		let { preset: e, editorId: t, contextId: n, editableHeight: r, saveDebounceMs: i, language: a, watchdog: s, content: c } = this.canonical, { customTranslations: l, editorType: u, licenseKey: f, watchdogConfig: m, config: { plugins: h, ...g } } = e, y = await v(u), S = await (n ? F.the.waitFor(n) : null), C = async () => {
+			let { loadedPlugins: e, hasPremium: n } = await b(h);
+			e.push(await V({
+				saveDebounceMs: i,
+				component: this
+			})), _(u) && e.push(await H(i));
+			let s = [...await x(a, n), w(l || {})].filter((e) => !o(e)), d = {
+				...c,
+				...D(t)
 			};
-			return !b || !(e instanceof HTMLElement) ? y.create(e, r) : (await d({
-				context: b,
-				element: e,
-				creator: y,
-				config: r
-			})).editor;
-		})();
-		return m(u) && r && O(N, r), this.applyRootAttributes(N), N;
+			_(u) && (d = d.main || "");
+			let m = await (async () => {
+				let n = T(t);
+				if (!(n instanceof HTMLElement) && !("main" in n)) {
+					let e = u === "decoupled" ? ["main"] : Object.keys(d);
+					W(n, e) || (n = await G(t, e), d = {
+						...c,
+						...D(t)
+					});
+				}
+				_(u) && "main" in n && (n = n.main);
+				let r = O(g);
+				r = k([...s].reverse(), a.ui, r);
+				let i = {
+					...r,
+					initialData: d,
+					licenseKey: f,
+					plugins: e,
+					language: a,
+					...s.length && { translations: s }
+				};
+				return !S || !(n instanceof HTMLElement) ? y.create(n, i) : (await p({
+					context: S,
+					element: n,
+					creator: y,
+					config: i
+				})).editor;
+			})();
+			return _(u) && r && j(m, r), this.applyRootAttributes(m), m;
+		};
+		if (s && !S) {
+			let e = await N(C, m);
+			return e.on("error", (e, { causesRestart: n }) => {
+				if (n) {
+					let e = L.the.getItem(t);
+					/* v8 ignore next 3 */
+					e && (d(e), L.the.unregister(t));
+				}
+			}), e.on("restart", () => {
+				L.the.register(t, e.editor);
+			}), await e.create({}), e.editor;
+		}
+		return C();
 	}
 };
-function V(e, t) {
+function W(e, t) {
 	return t.every((t) => e[t]);
 }
-async function H(e, t) {
-	return l(() => {
-		let n = S(e);
-		if (!V(n, t)) throw Error(`It looks like not all required root elements are present yet.
+async function G(e, t) {
+	return u(() => {
+		let n = T(e);
+		if (!W(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(", ")}.`);
@@ -880,26 +956,27 @@ Missing roots: ${t.filter((e) => !n[e]).join(", ")}.`);
 }
 //#endregion
 //#region src/hooks/ui-part.ts
-var U = class extends e {
-	mountedPromise = null;
-	async mounted() {
-		let { editorId: e, name: t } = this.canonical;
-		this.mountedPromise = P.the.execute(e, (e) => {
+var K = class extends e {
+	mounted() {
+		let { editorId: e, name: t } = this.canonical, n = L.the.mountEffect(e, (e) => {
 			/* v8 ignore next if -- @preserve */
 			if (this.isBeingDestroyed()) return;
-			let { ui: n } = e, r = W(t), i = n.view[r];
+			let { ui: n } = e, r = q(t), i = n.view[r];
 			if (!i) {
 				console.error(`Unknown UI part name: "${t}". Supported names are "toolbar" and "menubar".`);
 				return;
 			}
-			this.element.appendChild(i.element);
+			return this.element.appendChild(i.element), () => {
+				this.element.innerHTML = "";
+			};
 		});
+		this.onBeforeDestroy(n);
 	}
-	async destroyed() {
-		this.element.style.display = "none", await this.mountedPromise, this.mountedPromise = null, this.element.innerHTML = "";
+	destroyed() {
+		this.element.style.display = "none";
 	}
 };
-function W(e) {
+function q(e) {
 	switch (e) {
 		case "toolbar": return "toolbar";
 		case "menubar": return "menuBarView";
@@ -908,19 +985,19 @@ function W(e) {
 }
 //#endregion
 //#region src/hooks/index.ts
-var G = {
-	ckeditor5: B,
-	"ckeditor5-context": N,
-	"ckeditor5-ui-part": U,
-	"ckeditor5-editable": L
+var J = {
+	ckeditor5: U,
+	"ckeditor5-context": I,
+	"ckeditor5-ui-part": K,
+	"ckeditor5-editable": B
 };
-function K() {
-	for (let [e, n] of Object.entries(G)) t(e, n);
+function Y() {
+	for (let [e, n] of Object.entries(J)) t(e, n);
 }
 //#endregion
 //#region src/index.ts
-K();
+Y();
 //#endregion
-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 };
+export { e as ClassHook, F as ContextsRegistry, y as CustomEditorPluginsRegistry, B as EditableComponentHook, U as EditorComponentHook, L as EditorsRegistry, K as UIPartComponentHook, t as registerLivewireComponentHook };
 
 //# sourceMappingURL=index.mjs.map