@webitel/ui-sdk 26.8.118 → 26.8.120

package/dist/{wt-chat-emoji-v9gpIuHe.js → wt-chat-emoji-CQ-ZUYcm.js}

@@ -1,4 +1,4 @@
-import "./components-CeOlovz8.js";
+import "./components-Bl2fDyms.js";
 import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { m as t } from "./enums-CsINFPBu.js";
 import { t as n } from "./wt-button-rUZKbswL.js";

package/dist/{wt-display-chip-items-Bob7miL_.js → wt-display-chip-items-yuaxgXrU.js}

@@ -1,4 +1,4 @@
-import { C as e, i as t } from "./components-CeOlovz8.js";
+import { C as e, i as t } from "./components-Bl2fDyms.js";
 import { t as n } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { t as r } from "./utils-DHSDTqJG.js";
 import { Fragment as i, computed as a, createCommentVNode as o, createElementBlock as s, createTextVNode as c, createVNode as l, defineComponent as u, openBlock as d, renderList as f, renderSlot as p, toDisplayString as m, unref as h, withCtx as g } from "vue";

package/dist/wt-label-CiLpqe61.js

@@ -0,0 +1,34 @@
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
+import { createBlock as t, createCommentVNode as n, createElementBlock as r, createStaticVNode as i, createTextVNode as a, defineComponent as o, normalizeClass as s, openBlock as c, renderSlot as l, resolveComponent as u, toDisplayString as d, withCtx as f } from "vue";
+//#region src/components/on-demand/wt-rich-text-editor/_internals/wt-rich-text-editor-skeleton.vue
+var p = {}, m = {
+	"aria-busy": "true",
+	class: "wt-rich-text-editor-skeleton"
+};
+function h(e, t) {
+	return c(), r("div", m, [...t[0] ||= [i("<div class=\"wt-rich-text-editor-skeleton__toolbar\" data-v-0802d94d></div><div class=\"wt-rich-text-editor-skeleton__body\" data-v-0802d94d><div class=\"wt-rich-text-editor-skeleton__line\" data-v-0802d94d></div><div class=\"wt-rich-text-editor-skeleton__line\" data-v-0802d94d></div><div class=\"wt-rich-text-editor-skeleton__line wt-rich-text-editor-skeleton__line--short\" data-v-0802d94d></div></div>", 2)]]);
+}
+var g = /*#__PURE__*/ e(p, [["render", h], ["__scopeId", "data-v-0802d94d"]]), _ = /*#__PURE__*/ e(/* @__PURE__ */ o({
+	__name: "wt-label",
+	props: {
+		disabled: { type: Boolean },
+		invalid: { type: Boolean },
+		required: { type: Boolean },
+		hint: {}
+	},
+	setup(e) {
+		return (i, o) => {
+			let p = u("wt-hint");
+			return c(), r("label", { class: s([{
+				"wt-label--invalid": e.invalid,
+				"wt-label--disabled": e.disabled,
+				"wt-label--required": e.required
+			}, "wt-label typo-subtitle-2"]) }, [l(i.$slots, "default", {}, void 0, !0), e.hint ? (c(), t(p, { key: 0 }, {
+				default: f(() => [a(d(e.hint), 1)], void 0, !0),
+				_: 1
+			})) : n("", !0)], 2);
+		};
+	}
+}), [["__scopeId", "data-v-7d80b998"]]);
+//#endregion
+export { g as n, _ as t };

package/dist/wt-rich-text-editor-DyGnGabB.js

@@ -0,0 +1,130 @@
+import { n as e, t } from "./wt-label-CiLpqe61.js";
+import { t as n } from "./_plugin-vue_export-helper-B3ysoDQm.js";
+import { computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createTextVNode as s, defineComponent as c, guardReactiveProps as l, mergeModels as u, mergeProps as d, normalizeProps as f, onBeforeUnmount as p, openBlock as m, ref as h, renderSlot as g, toDisplayString as _, unref as v, useId as y, useModel as b, withCtx as x } from "vue";
+import S from "@tinymce/tinymce-vue";
+//#region src/components/on-demand/wt-rich-text-editor/_internals/loadTinyMce.ts
+var C = null;
+function w() {
+	return C ??= import("tinymce/tinymce").then(() => Promise.all([
+		import("tinymce/icons/default"),
+		import("tinymce/models/dom"),
+		import("tinymce/themes/silver"),
+		import("tinymce/plugins/advlist"),
+		import("tinymce/plugins/emoticons"),
+		import("tinymce/plugins/emoticons/js/emojis"),
+		import("tinymce/plugins/fullscreen"),
+		import("tinymce/plugins/image"),
+		import("tinymce/plugins/link"),
+		import("tinymce/plugins/lists"),
+		import("tinymce/plugins/table"),
+		import("tinymce/skins/ui/oxide/skin.css")
+	]).then(() => void 0)), C;
+}
+//#endregion
+//#region src/components/on-demand/wt-rich-text-editor/wt-rich-text-editor.vue?vue&type=script&setup=true&lang.ts
+var T = { class: "wt-rich-text-editor" }, E = /*#__PURE__*/ n(/* @__PURE__ */ c({
+	compatConfig: { MODE: 3 },
+	__name: "wt-rich-text-editor",
+	props: /*@__PURE__*/ u({
+		label: {},
+		labelProps: {},
+		output: { default: "html" },
+		height: { default: 300 },
+		disabled: { type: Boolean },
+		placeholder: {},
+		toolbar: {},
+		plugins: {}
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(n) {
+		let c = {
+			...S,
+			name: "TinyMceEditor",
+			compatConfig: { MODE: 3 }
+		}, u = n, C = b(n, "modelValue"), E = y(), D = h(!1);
+		w().then(() => {
+			D.value = !0;
+		});
+		let O = [
+			"advlist",
+			"emoticons",
+			"fullscreen",
+			"image",
+			"link",
+			"lists",
+			"table"
+		], k = [
+			"undo redo",
+			"bold italic underline strikethrough",
+			"fullscreen",
+			"fontfamily fontsize",
+			"alignleft aligncenter alignright alignjustify",
+			"numlist bullist",
+			"forecolor backcolor removeformat",
+			"emoticons image link table"
+		].join(" | "), A = r(() => u.output === "html"), j = r(() => u.plugins ?? (A.value ? O : [])), M = r(() => u.toolbar ?? (A.value ? k : "undo redo"));
+		function N() {
+			let e = getComputedStyle(document.documentElement);
+			return {
+				backgroundColor: e.getPropertyValue("--content-wrapper-color").trim(),
+				color: e.getPropertyValue("--wt-text-field-text-color").trim()
+			};
+		}
+		let P = r(() => {
+			let { backgroundColor: e, color: t } = N();
+			return {
+				height: Number(u.height),
+				menubar: !1,
+				statusbar: A.value,
+				toolbar_mode: "sliding",
+				toolbar_sticky: !0,
+				placeholder: u.placeholder,
+				skin: !1,
+				content_css: !1,
+				content_style: `body { background-color: ${e}; color: ${t}; }`
+			};
+		}), F = null, I = new MutationObserver(() => {
+			F?.getBody() && F.dom.setStyles(F.getBody(), N());
+		});
+		function L(e, t) {
+			F = t, I.observe(document.documentElement, {
+				attributes: !0,
+				attributeFilter: ["class"]
+			});
+		}
+		return p(() => {
+			I.disconnect(), F = null;
+		}), (r, u) => (m(), o("div", T, [n.label || r.$slots.label ? (m(), i(t, d({ key: 0 }, n.labelProps, {
+			disabled: n.disabled,
+			for: v(E)
+		}), {
+			default: x(() => [g(r.$slots, "label", f(l({ label: n.label })), () => [s(_(n.label), 1)], !0)], void 0, !0),
+			_: 3
+		}, 16, ["disabled", "for"])) : a("", !0), D.value ? (m(), i(c, {
+			key: 1,
+			id: v(E),
+			modelValue: C.value,
+			"onUpdate:modelValue": u[0] ||= (e) => C.value = e,
+			disabled: n.disabled,
+			init: P.value,
+			"output-format": n.output,
+			plugins: j.value,
+			toolbar: M.value,
+			"license-key": "gpl",
+			onInit: L
+		}, null, 8, [
+			"id",
+			"modelValue",
+			"disabled",
+			"init",
+			"output-format",
+			"plugins",
+			"toolbar"
+		])) : (m(), i(e, { key: 2 }))]));
+	}
+}), [["__scopeId", "data-v-47d8ed9a"]]);
+//#endregion
+export { E as default };

package/dist/{wt-send-message-popup-9O69XY0L.js → wt-send-message-popup-Ig3Uq6So.js}

@@ -1,6 +1,6 @@
-import { n as e } from "./components-CeOlovz8.js";
+import { n as e } from "./components-Bl2fDyms.js";
 import "./convertDuration-CW5qzlwH.js";
-import { i as t, r as n } from "./clients-DWcx-Mfk.js";
+import { i as t, r as n } from "./clients-CwGTZ_pb.js";
 import { n as r } from "./vue-i18n-VBiROMZ4.js";
 import { n as i } from "./useEventBus-B-ZeklLu.js";
 import { createBlock as a, createTextVNode as o, createVNode as s, defineComponent as c, mergeProps as l, onMounted as u, openBlock as d, ref as f, resolveComponent as p, toDisplayString as m, unref as h, withCtx as g } from "vue";

package/dist/{wt-type-extension-value-input-55YmFcBp.js → wt-type-extension-value-input-B4fjVEic.js}

@@ -1,8 +1,8 @@
 import { a as e, c as t, i as n, n as r, r as i, s as a, t as o } from "./dist-EXdgfpvN.js";
 import { n as s } from "./genClient-CvWlQ0TZ.js";
 import { a as c } from "./caseConverters-DGri4uJo.js";
-import { a as l, o as u, r as d, s as f } from "./components-CeOlovz8.js";
-import { a as p, n as m, t as h } from "./clients-DWcx-Mfk.js";
+import { a as l, o as u, r as d, s as f } from "./components-Bl2fDyms.js";
+import { a as p, n as m, t as h } from "./clients-CwGTZ_pb.js";
 import { a as g, b as _, d as v, f as y, g as b, i as x, n as S, o as C, r as w, s as T, t as E, y as D } from "./enums-CsINFPBu.js";
 import { n as ee, t as te } from "./vue-i18n-VBiROMZ4.js";
 import "./wt-toast-pXV44Y3v.js";

package/dist/{wt-vidstack-player-ETPSioGH.js → wt-vidstack-player-DitE8XQx.js}

@@ -1,4 +1,4 @@
-import { w as e } from "./components-CeOlovz8.js";
+import { w as e } from "./components-Bl2fDyms.js";
 import "./convertDuration-CW5qzlwH.js";
 import { t } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { m as n } from "./enums-CsINFPBu.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-sdk",
-	"version": "26.8.118",
+	"version": "26.8.120",
 	"private": false,
 	"scripts": {
 		"dev": "npm run docs:dev",
@@ -62,6 +62,7 @@
 		"@morev/vue-transitions": "^3.0.5",
 		"@primeuix/themes": "^1.1.1",
 		"@tailwindcss/vite": "^4.1.7",
+		"@tinymce/tinymce-vue": "^6.3.0",
 		"@vuepic/vue-datepicker": "^4.5.1",
 		"@vueuse/components": "^14.0.0",
 		"autosize": "^6.0.1",
@@ -79,6 +80,7 @@
 		"qs-esm": "^7.0.3",
 		"sortablejs": "^1.15.3",
 		"tailwindcss": "^4.1.7",
+		"tinymce": "^8.9.2",
 		"vue-multiselect": "^3.4.0",
 		"vue-observe-visibility": "^2.0.0-alpha.1",
 		"xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz"

package/src/components/index.js

@@ -1,5 +1,6 @@
 import { defineAsyncComponent } from 'vue';
 
+import WtRichTextEditorSkeleton from './on-demand/wt-rich-text-editor/_internals/wt-rich-text-editor-skeleton.vue';
 import WtReplaceTransition from './transitions/cases/wt-replace-transition.vue';
 import WtAppHeader from './wt-app-header/wt-app-header.vue';
 import WtAppNavigator from './wt-app-header/wt-app-navigator.vue';
@@ -181,6 +182,17 @@ const WtNavigationMenu = defineAsyncComponent(
 	() =>
 		import('./on-demand/wt-navigation-menu/components/wt-navigation-menu.vue'),
 );
+/**
+ * TinyMCE lives in this chunk alone: an app that never renders an editor never
+ * downloads it. The skeleton covers the download.
+ * @type {typeof import('./on-demand/wt-rich-text-editor/wt-rich-text-editor.vue').default}
+ */
+const WtRichTextEditor = defineAsyncComponent({
+	loader: () =>
+		import('./on-demand/wt-rich-text-editor/wt-rich-text-editor.vue'),
+	loadingComponent: WtRichTextEditorSkeleton,
+	delay: 0,
+});
 /** @type {typeof import('./on-demand/wt-selection-popup/wt-selection-popup.vue').default} */
 const WtSelectionPopup = defineAsyncComponent(
 	() => import('./on-demand/wt-selection-popup/wt-selection-popup.vue'),
@@ -233,6 +245,7 @@ const Components = {
 	WtLoader,
 	WtRoundedAction,
 	WtReplaceTransition,
+	WtRichTextEditor,
 	WtCheckbox,
 	WtDatepicker,
 	WtIconBtn,
@@ -364,6 +377,7 @@ export {
 	WtProgressBar,
 	WtRadio,
 	WtReplaceTransition,
+	WtRichTextEditor,
 	WtRoundedAction,
 	WtScreenRecordingsAction,
 	WtSearchBar,

package/src/components/on-demand/wt-rich-text-editor/__tests__/WtRichTextEditor.compat.spec.js

@@ -0,0 +1,127 @@
+/**
+ * cc-workspaces runs on the @vue/compat runtime. There, a component given a
+ * `modelValue` prop has it rewritten to `value` / `onModelCompat:input` unless
+ * the component is marked as Vue 3 — and tinymce-vue binds the model only when
+ * `onUpdate:modelValue` is in its attrs, so it silently stops emitting
+ * (WTEL-4477). This runs the editor on the compat runtime (one instance of it:
+ * @vue/test-utils would bring the real `vue`, so mounting goes through compat's
+ * own createApp) to pin that the listener still arrives.
+ */
+vi.mock('vue', async () => await import('@vue/compat'));
+
+vi.mock('tinymce/tinymce', () => ({}));
+vi.mock('tinymce/icons/default', () => ({}));
+vi.mock('tinymce/models/dom', () => ({}));
+vi.mock('tinymce/themes/silver', () => ({}));
+vi.mock('tinymce/plugins/advlist', () => ({}));
+vi.mock('tinymce/plugins/emoticons', () => ({}));
+vi.mock('tinymce/plugins/emoticons/js/emojis', () => ({}));
+vi.mock('tinymce/plugins/fullscreen', () => ({}));
+vi.mock('tinymce/plugins/image', () => ({}));
+vi.mock('tinymce/plugins/link', () => ({}));
+vi.mock('tinymce/plugins/lists', () => ({}));
+vi.mock('tinymce/plugins/table', () => ({}));
+vi.mock('tinymce/skins/ui/oxide/skin.css', () => ({}));
+
+// Stands in for tinymce-vue's Editor: no declared emits, model read from attrs.
+const seenAttrs = [];
+const seenModel = [];
+let emitEdit = () => {};
+vi.mock('@tinymce/tinymce-vue', async () => {
+	const { defineComponent, h } = await import('@vue/compat');
+	return {
+		default: defineComponent({
+			name: 'Editor',
+			props: [
+				'id',
+				'modelValue',
+				'init',
+				'plugins',
+				'toolbar',
+				'outputFormat',
+				'disabled',
+				'licenseKey',
+			],
+			setup(props, ctx) {
+				seenAttrs.push(Object.keys(ctx.attrs));
+				seenModel.push(props.modelValue);
+				// lets a test type into the stand-in
+				emitEdit = (value) => ctx.attrs['onUpdate:modelValue']?.(value);
+				return () => h('div');
+			},
+		}),
+	};
+});
+
+const { configureCompat, createApp, h } = await import('@vue/compat');
+const { default: TinyMceVueEditor } = await import('@tinymce/tinymce-vue');
+const { default: WtRichTextEditor } = await import(
+	'../wt-rich-text-editor.vue'
+);
+
+async function render(component, props) {
+	const app = createApp({
+		render: () => h(component, props),
+	});
+	// the label is resolved globally in apps; not under test here
+	app.component('WtLabel', {
+		render: () => null,
+	});
+	app.mount(document.createElement('div'));
+	// the editor mounts once TinyMCE has loaded (mocked here: at once)
+	await new Promise((resolve) => setTimeout(resolve));
+	return app;
+}
+
+describe('WtRichTextEditor on @vue/compat', () => {
+	beforeAll(() => {
+		configureCompat({
+			MODE: 2,
+		});
+	});
+
+	afterAll(() => {
+		configureCompat({
+			MODE: 3,
+		});
+	});
+
+	beforeEach(() => {
+		seenAttrs.length = 0;
+		seenModel.length = 0;
+	});
+
+	it('control: compat takes the model listener away from plain tinymce-vue', async () => {
+		(
+			await render(TinyMceVueEditor, {
+				modelValue: '',
+				'onUpdate:modelValue': () => {},
+			})
+		).unmount();
+
+		expect(seenAttrs[0]).not.toContain('onUpdate:modelValue');
+	});
+
+	it('keeps the model listener on its editor', async () => {
+		(
+			await render(WtRichTextEditor, {
+				modelValue: '',
+				'onUpdate:modelValue': () => {},
+			})
+		).unmount();
+
+		expect(seenAttrs[0]).toContain('onUpdate:modelValue');
+	});
+
+	it('takes its own v-model on compat: the value in, edits out', async () => {
+		const onUpdate = vi.fn();
+		await render(WtRichTextEditor, {
+			modelValue: '<p>Seed</p>',
+			'onUpdate:modelValue': onUpdate,
+		});
+
+		expect(seenModel[0]).toBe('<p>Seed</p>');
+		emitEdit('<p>Edited</p>');
+		expect(onUpdate).toHaveBeenCalledWith('<p>Edited</p>');
+	});
+});

package/src/components/on-demand/wt-rich-text-editor/__tests__/WtRichTextEditor.spec.js

@@ -0,0 +1,157 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+
+// TinyMCE cannot run in jsdom: its side-effect imports are stubbed, and the
+// Vue wrapper is replaced by a stub that records its props.
+vi.mock('tinymce/tinymce', () => ({}));
+vi.mock('tinymce/icons/default', () => ({}));
+vi.mock('tinymce/models/dom', () => ({}));
+vi.mock('tinymce/themes/silver', () => ({}));
+vi.mock('tinymce/plugins/advlist', () => ({}));
+vi.mock('tinymce/plugins/emoticons', () => ({}));
+vi.mock('tinymce/plugins/emoticons/js/emojis', () => ({}));
+vi.mock('tinymce/plugins/fullscreen', () => ({}));
+vi.mock('tinymce/plugins/image', () => ({}));
+vi.mock('tinymce/plugins/link', () => ({}));
+vi.mock('tinymce/plugins/lists', () => ({}));
+vi.mock('tinymce/plugins/table', () => ({}));
+vi.mock('tinymce/skins/ui/oxide/skin.css', () => ({}));
+// setup-based like the real Editor, so wrapping it the wrong way shows up
+vi.mock('@tinymce/tinymce-vue', async () => {
+	const { h } = await import('vue');
+	return {
+		default: {
+			name: 'Editor',
+			props: [
+				'id',
+				'modelValue',
+				'init',
+				'plugins',
+				'toolbar',
+				'outputFormat',
+				'disabled',
+				'licenseKey',
+			],
+			emits: [
+				'update:modelValue',
+				'init',
+			],
+			setup: () => () =>
+				h('div', {
+					class: 'editor-stub',
+				}),
+		},
+	};
+});
+
+const { default: WtRichTextEditor } = await import(
+	'../wt-rich-text-editor.vue'
+);
+
+// the editor mounts once TinyMCE has loaded (mocked here: at once)
+const mountEditor = async (props = {}) => {
+	const wrapper = mount(WtRichTextEditor, {
+		props,
+	});
+	await flushPromises();
+	return wrapper;
+};
+
+const editorStub = (wrapper) =>
+	wrapper.findComponent({
+		name: 'TinyMceEditor',
+	});
+
+describe('WtRichTextEditor', () => {
+	afterEach(() => {
+		document.documentElement.classList.remove('theme--dark');
+	});
+
+	it('shows a label only when given one', async () => {
+		expect((await mountEditor()).find('.wt-label').exists()).toBe(false);
+		const labelled = await mountEditor({
+			label: 'Reply',
+		});
+		expect(labelled.text()).toContain('Reply');
+	});
+
+	it('edits html with the full toolbar by default', async () => {
+		const editor = editorStub(await mountEditor());
+
+		expect(editor.props('outputFormat')).toBe('html');
+		expect(editor.props('plugins')).toContain('table');
+		expect(editor.props('toolbar')).toContain('bold italic');
+		expect(editor.props('init').height).toBe(300);
+		expect(editor.props('licenseKey')).toBe('gpl');
+	});
+
+	it('drops the formatting tools for plain text', async () => {
+		const editor = editorStub(
+			await mountEditor({
+				output: 'text',
+			}),
+		);
+
+		expect(editor.props('plugins')).toEqual([]);
+		expect(editor.props('toolbar')).toBe('undo redo');
+		expect(editor.props('init').statusbar).toBe(false);
+	});
+
+	it('takes toolbar and plugin overrides', async () => {
+		const editor = editorStub(
+			await mountEditor({
+				toolbar: 'bold italic | link',
+				plugins: [
+					'link',
+				],
+			}),
+		);
+
+		expect(editor.props('toolbar')).toBe('bold italic | link');
+		expect(editor.props('plugins')).toEqual([
+			'link',
+		]);
+	});
+
+	it('passes the model through both ways', async () => {
+		const wrapper = await mountEditor({
+			modelValue: '<p>Hi</p>',
+		});
+		expect(editorStub(wrapper).props('modelValue')).toBe('<p>Hi</p>');
+
+		await editorStub(wrapper).vm.$emit('update:modelValue', '<p>Hello</p>');
+
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([
+			'<p>Hello</p>',
+		]);
+	});
+
+	it('restyles the editable body when the app switches theme', async () => {
+		const body = {};
+		const setStyles = vi.fn();
+		const wrapper = await mountEditor();
+
+		editorStub(wrapper).vm.$emit(
+			'init',
+			{},
+			{
+				getBody: () => body,
+				dom: {
+					setStyles,
+				},
+			},
+		);
+		document.documentElement.classList.add('theme--dark');
+		// MutationObserver callbacks run as microtasks
+		await nextTick();
+		await Promise.resolve();
+
+		expect(setStyles).toHaveBeenCalledWith(
+			body,
+			expect.objectContaining({
+				backgroundColor: expect.any(String),
+				color: expect.any(String),
+			}),
+		);
+	});
+});

package/src/components/on-demand/wt-rich-text-editor/__tests__/loadTinyMce.spec.js

@@ -0,0 +1,54 @@
+const { loaded, track } = vi.hoisted(() => {
+	const loaded = [];
+	return {
+		loaded,
+		track: (name) => () => {
+			loaded.push(name);
+			return {};
+		},
+	};
+});
+
+vi.mock('tinymce/tinymce', track('core'));
+vi.mock('tinymce/icons/default', track('icons'));
+vi.mock('tinymce/models/dom', track('model'));
+vi.mock('tinymce/themes/silver', track('theme'));
+vi.mock('tinymce/plugins/advlist', track('advlist'));
+vi.mock('tinymce/plugins/emoticons', track('emoticons'));
+vi.mock('tinymce/plugins/emoticons/js/emojis', track('emojis'));
+vi.mock('tinymce/plugins/fullscreen', track('fullscreen'));
+vi.mock('tinymce/plugins/image', track('image'));
+vi.mock('tinymce/plugins/link', track('link'));
+vi.mock('tinymce/plugins/lists', track('lists'));
+vi.mock('tinymce/plugins/table', track('table'));
+vi.mock('tinymce/skins/ui/oxide/skin.css', track('skin'));
+
+const { loadTinyMce } = await import('../_internals/loadTinyMce');
+
+describe('loadTinyMce', () => {
+	it('evaluates the core before any add-on that registers on it', async () => {
+		await loadTinyMce();
+
+		expect(loaded[0]).toBe('core');
+		expect(loaded).toEqual(
+			expect.arrayContaining([
+				'icons',
+				'model',
+				'theme',
+				'table',
+				'skin',
+			]),
+		);
+	});
+
+	it('loads once, however many editors ask', async () => {
+		const count = loaded.length;
+
+		await Promise.all([
+			loadTinyMce(),
+			loadTinyMce(),
+		]);
+
+		expect(loaded).toHaveLength(count);
+	});
+});

package/src/components/on-demand/wt-rich-text-editor/_internals/loadTinyMce.ts

@@ -0,0 +1,31 @@
+/**
+ * Loads TinyMCE (self-hosted) once, core first.
+ *
+ * The icons, model, theme and plugins register themselves on the global
+ * `tinymce` the core sets, so the core must run before any of them. Plain
+ * side-effect imports do not guarantee that: in an app's production build
+ * the core — it touches `module` — ends up behind a lazy CommonJS wrapper,
+ * while the add-ons, plain IIFEs, are hoisted and run first, failing with
+ * "tinymce is not defined". Awaiting the core's import pins the order.
+ */
+let loading: Promise<void> | null = null;
+
+export function loadTinyMce(): Promise<void> {
+	loading ??= import('tinymce/tinymce').then(() =>
+		Promise.all([
+			import('tinymce/icons/default'),
+			import('tinymce/models/dom'),
+			import('tinymce/themes/silver'),
+			import('tinymce/plugins/advlist'),
+			import('tinymce/plugins/emoticons'),
+			import('tinymce/plugins/emoticons/js/emojis'),
+			import('tinymce/plugins/fullscreen'),
+			import('tinymce/plugins/image'),
+			import('tinymce/plugins/link'),
+			import('tinymce/plugins/lists'),
+			import('tinymce/plugins/table'),
+			import('tinymce/skins/ui/oxide/skin.css'),
+		]).then(() => undefined),
+	);
+	return loading;
+}