@webitel/ui-sdk 26.8.117 → 26.8.119

package/src/components/on-demand/wt-rich-text-editor/wt-rich-text-editor.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="wt-rich-text-editor">
+    <wt-label
+      v-if="label || $slots.label"
+      :disabled="disabled"
+      :for="editorId"
+      v-bind="labelProps"
+    >
+      <!-- @slot Custom editor label -->
+      <slot
+        name="label"
+        v-bind="{ label }"
+      >
+        {{ label }}
+      </slot>
+    </wt-label>
+    <tiny-mce-editor
+      :id="editorId"
+      v-model="model"
+      :disabled="disabled"
+      :init="init"
+      :output-format="output"
+      :plugins="editorPlugins"
+      :toolbar="editorToolbar"
+      license-key="gpl"
+      @init="handleInit"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * TinyMCE, self-hosted. Everything below loads with this component only:
+ * `components/index.js` registers it through `defineAsyncComponent`, so an
+ * app that never renders an editor never downloads TinyMCE.
+ */
+import TinyMceVueEditor from '@tinymce/tinymce-vue';
+import type { Editor as TinyMceInstance } from 'tinymce';
+import 'tinymce/tinymce';
+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';
+import { computed, onBeforeUnmount, useId } from 'vue';
+
+import WtLabel from '../../wt-label/wt-label.vue';
+
+/**
+ * tinymce-vue binds the model only when it finds `onUpdate:modelValue` in its
+ * attrs. Apps on the @vue/compat runtime (cc-workspaces) rewrite `v-model` on
+ * any component not marked as Vue 3 into the Vue 2 `value` / `input` pair, so
+ * the listener never arrives and edits are lost (WTEL-4477). Marking the
+ * editor as Vue 3 keeps `v-model` intact; plain Vue 3 ignores the option.
+ */
+// A copy rather than `extends`: `extends` does not carry `setup()`, which is
+// all tinymce-vue's Editor is.
+const TinyMceEditor = {
+	...TinyMceVueEditor,
+	name: 'TinyMceEditor',
+	compatConfig: {
+		MODE: 3,
+	},
+} as typeof TinyMceVueEditor;
+
+type RichTextOutput = 'html' | 'text';
+
+interface Props {
+	/**
+	 * Editor label
+	 */
+	label?: string;
+	/**
+	 * Object with props, passed down to wt-label as props
+	 */
+	labelProps?: Record<string, unknown>;
+	/**
+	 * `html` keeps the formatting toolbar; `text` edits (and emits) plain text
+	 * @values html, text
+	 */
+	output?: RichTextOutput;
+	/**
+	 * Editor height, in px
+	 */
+	height?: number | string;
+	disabled?: boolean;
+	/**
+	 * Placeholder shown while the editor is empty
+	 */
+	placeholder?: string;
+	/**
+	 * TinyMCE toolbar, replacing the default for `output`
+	 */
+	toolbar?: string;
+	/**
+	 * TinyMCE plugins, replacing the default for `output`. A plugin outside
+	 * the bundled set (advlist, emoticons, fullscreen, image, link, lists,
+	 * table) must be imported by the app.
+	 */
+	plugins?: string[];
+}
+
+// Vue 3 semantics on the @vue/compat runtime too (cc-workspaces): otherwise
+// compat rewrites this component's own `v-model` to `value` / `input` and
+// defineModel below never sees it.
+defineOptions({
+	compatConfig: {
+		MODE: 3,
+	},
+});
+
+const props = withDefaults(defineProps<Props>(), {
+	output: 'html',
+	height: 300,
+});
+
+/**
+ * @model modelValue — the content, as `output` formats it
+ */
+const model = defineModel<string>();
+
+const editorId = useId();
+
+const HTML_PLUGINS = [
+	'advlist',
+	'emoticons',
+	'fullscreen',
+	'image',
+	'link',
+	'lists',
+	'table',
+];
+
+const HTML_TOOLBAR = [
+	'undo redo',
+	'bold italic underline strikethrough',
+	'fullscreen',
+	'fontfamily fontsize',
+	'alignleft aligncenter alignright alignjustify',
+	'numlist bullist',
+	'forecolor backcolor removeformat',
+	'emoticons image link table',
+].join(' | ');
+
+const isHtml = computed(() => props.output === 'html');
+
+const editorPlugins = computed(
+	() => props.plugins ?? (isHtml.value ? HTML_PLUGINS : []),
+);
+const editorToolbar = computed(
+	() => props.toolbar ?? (isHtml.value ? HTML_TOOLBAR : 'undo redo'),
+);
+
+// The editable area lives in an iframe, out of reach of the app's CSS
+// variables, so its colours are read from the page and handed over.
+function readColors() {
+	const styles = getComputedStyle(document.documentElement);
+	return {
+		backgroundColor: styles.getPropertyValue('--content-wrapper-color').trim(),
+		color: styles.getPropertyValue('--wt-text-field-text-color').trim(),
+	};
+}
+
+const init = computed(() => {
+	const { backgroundColor, color } = readColors();
+	return {
+		height: Number(props.height),
+		menubar: false,
+		statusbar: isHtml.value,
+		toolbar_mode: 'sliding' as const,
+		toolbar_sticky: true,
+		placeholder: props.placeholder,
+		// the skin CSS is imported above; content styles are set here
+		skin: false,
+		content_css: false,
+		content_style: `body { background-color: ${backgroundColor}; color: ${color}; }`,
+	};
+});
+
+let editor: TinyMceInstance | null = null;
+
+// The app switches themes by toggling `theme--dark` on <html>; follow it.
+const themeObserver = new MutationObserver(() => {
+	if (!editor?.getBody()) return;
+	editor.dom.setStyles(editor.getBody(), readColors());
+});
+
+function handleInit(_event: unknown, initialized: TinyMceInstance) {
+	editor = initialized;
+	themeObserver.observe(document.documentElement, {
+		attributes: true,
+		attributeFilter: [
+			'class',
+		],
+	});
+}
+
+onBeforeUnmount(() => {
+	themeObserver.disconnect();
+	editor = null;
+});
+</script>
+
+<style scoped>
+.wt-rich-text-editor :deep(.tox-toolbar__primary),
+.wt-rich-text-editor :deep(.tox-editor-header) {
+  background-color: var(--content-wrapper-color);
+}
+
+.wt-rich-text-editor :deep(.tox-tbtn svg) {
+  fill: var(--icon-active-color);
+}
+
+.wt-rich-text-editor :deep(.tox-tbtn--disabled svg),
+.wt-rich-text-editor :deep(.tox-tbtn--disabled:hover svg) {
+  fill: var(--icon-color);
+}
+</style>

package/src/utils/__tests__/findTreePath.spec.ts

@@ -0,0 +1,83 @@
+import { describe, expect, it } from 'vitest';
+
+import { findTreePath } from '../findTreePath';
+
+interface Service {
+	id: string;
+	name: string;
+	service?: Service[];
+}
+
+const services: Service[] = [
+	{
+		id: 'billing',
+		name: 'Billing',
+		service: [
+			{
+				id: 'refunds',
+				name: 'Refunds',
+				service: [
+					{
+						id: 'card',
+						name: 'Card refund',
+					},
+				],
+			},
+		],
+	},
+	{
+		id: 'support',
+		name: 'Support',
+	},
+];
+
+const byId = (id: string) => (service: Service) => service.id === id;
+
+describe('findTreePath', () => {
+	it('returns the nodes from the root down to the target', () => {
+		expect(
+			findTreePath(services, byId('card'), 'service')?.map(({ name }) => name),
+		).toEqual([
+			'Billing',
+			'Refunds',
+			'Card refund',
+		]);
+	});
+
+	it('returns a one-node path for a root', () => {
+		expect(findTreePath(services, byId('support'), 'service')).toEqual([
+			services[1],
+		]);
+	});
+
+	it('returns null when nothing matches, or there is no tree', () => {
+		expect(findTreePath(services, byId('missing'), 'service')).toBeNull();
+		expect(findTreePath(undefined, byId('card'), 'service')).toBeNull();
+		expect(findTreePath([], byId('card'), 'service')).toBeNull();
+	});
+
+	it('stops at the first match, depth first', () => {
+		const tree = [
+			{
+				id: 'a',
+				children: [
+					{
+						id: 'x',
+					},
+				],
+			},
+			{
+				id: 'x',
+			},
+		];
+
+		expect(
+			findTreePath(tree, (node) => node.id === 'x', 'children')?.map(
+				({ id }) => id,
+			),
+		).toEqual([
+			'a',
+			'x',
+		]);
+	});
+});

package/src/utils/findTreePath.ts

@@ -0,0 +1,33 @@
+/**
+ * Walks a tree depth-first and returns the nodes from a root down to the
+ * first node matching `isTarget`, both ends included, or `null` when nothing
+ * matches. Children are read from `childrenKey` (e.g. `service` for case
+ * service catalogs, whose services nest under `service`).
+ *
+ * The path is what a breadcrumb, an "A / B / C" label or an ancestor check
+ * needs: `path.map(({ name }) => name)`, `path.slice(0, -1)`, and so on.
+ */
+export function findTreePath<TNode extends object>(
+	nodes: readonly TNode[] | null | undefined,
+	isTarget: (node: TNode) => boolean,
+	// NoInfer: the node type comes from `nodes` only; inferred from the key
+	// literal instead, loosely typed trees narrowed to `{ service: any }`
+	childrenKey: NoInfer<keyof TNode>,
+): TNode[] | null {
+	for (const node of nodes ?? []) {
+		if (isTarget(node))
+			return [
+				node,
+			];
+		const children = node[childrenKey];
+		if (Array.isArray(children)) {
+			const path = findTreePath(children as TNode[], isTarget, childrenKey);
+			if (path)
+				return [
+					node,
+					...path,
+				];
+		}
+	}
+	return null;
+}

package/src/utils/index.ts

@@ -1,3 +1,4 @@
 export * from './displayText';
+export * from './findTreePath';
 export * from './formatDate';
 export * from './prettifyDate';