@vonage/vivid 5.20.0 → 5.21.0

package/unbundled/definition60.js

@@ -22,8 +22,8 @@ import { keymap } from "prosemirror-keymap";
 import { autoJoin, baseKeymap, chainCommands, createParagraphNear, liftEmptyBlock, newlineInCode, splitBlockAs, toggleMark } from "prosemirror-commands";
 import { dropCursor } from "prosemirror-dropcursor";
 import { gapCursor } from "prosemirror-gapcursor";
-import { closeHistory, history, redo, undo } from "prosemirror-history";
 import DOMPurify from "dompurify";
+import { closeHistory, history, redo, undo } from "prosemirror-history";
 import { InputRule, inputRules, undoInputRule } from "prosemirror-inputrules";
 import { RemoveMarkStep, ReplaceAroundStep, dropPoint } from "prosemirror-transform";
 import { marks } from "prosemirror-schema-basic";
@@ -238,645 +238,333 @@ var FeatureState = class {
 //#region src/lib/rich-text-editor/rte/features/internal/core.style.scss?inline
 var core_style_default = ".ProseMirror{box-sizing:border-box;padding:var(--editor-padding-block) var(--editor-padding-inline);outline:none;flex:1 0 0}.ProseMirror-selectednode{--focus-stroke-gap-color:transparent;--focus-border-radius:2px;outline:none;position:relative}.ProseMirror-selectednode:after{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.editor--disabled .ProseMirror{color:var(--vvd-color-neutral-300);cursor:not-allowed}";
 //#endregion
-//#region src/lib/rich-text-editor/rte/utils/ui.ts
-var isPropBinding = (prop) => typeof prop === "function";
-var on = (event, prop, handler) => [
-	event,
-	prop,
-	handler
-];
-var UiCtx = class {
-	constructor(view, rte, props) {
-		this.view = view;
-		this.rte = rte;
-		this.props = props;
-		this.bindings = [];
-	}
-	evalProp(prop) {
-		return isPropBinding(prop) ? prop(this) : prop;
+//#region src/lib/rich-text-editor/rte/features/internal/foreign-html.ts
+var RteForeignHtmlFeatureImpl = class extends RteFeatureImpl {
+	constructor(..._args) {
+		super(..._args);
+		this.name = "RteForeignHtmlFeature";
 	}
-	bindProp(prop, bindFn) {
-		if (prop === void 0) return;
-		else if (isPropBinding(prop)) {
-			const binding = () => bindFn(prop(this));
-			this.bindings.push(binding);
-			binding();
-		} else bindFn(prop);
+	getPlugins(rte) {
+		return [this.contribution(new Plugin({ props: {
+			transformPastedHTML: (html) => rte.foreignHtmlParser[impl].transform(html),
+			clipboardParser: rte.foreignHtmlParser[impl].parser,
+			clipboardSerializer: rte.foreignHtmlSerializer[impl].serializer
+		} }))];
 	}
-	updateBindings() {
-		for (const binding of this.bindings) binding();
+};
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/internal/cursor-fix.ts
+/**
+* When the cursor is positioned after an inline atom node at the end of a line,
+* browsers may display the cursor inside the atom.
+*/
+var atomCursorFix = ($cursor) => {
+	if (!($cursor.parentOffset === $cursor.parent.content.size)) return null;
+	const nodeBefore = $cursor.nodeBefore;
+	if (nodeBefore && nodeBefore.isInline && nodeBefore.isAtom && !nodeBefore.isText) return {};
+	return null;
+};
+var RteCursorFixFeatureImpl = class extends RteFeatureImpl {
+	constructor(..._args) {
+		super(..._args);
+		this.name = "RteCursorFix";
 	}
-	bindToEl(target, props = {}, events = [], children = []) {
-		for (const name in props) this.bindProp(props[name], (value) => {
-			target[name] = value;
-		});
-		for (const [name, value, bindFn] of events) if (value) target.addEventListener(name, bindFn(value));
-		for (const child of children) target.appendChild(child);
+	getPlugins(rte) {
+		const cursorFixes = [atomCursorFix];
+		for (const markType of Object.values(rte.schema.marks)) {
+			const spec = markType.spec;
+			if (spec.cursorFix) cursorFixes.push(spec.cursorFix);
+		}
+		return [this.contribution(new Plugin({ props: { decorations: (state) => {
+			const { $cursor } = state.selection;
+			if (!$cursor) return null;
+			let cursorFix = null;
+			for (const fn of cursorFixes) {
+				const result = fn($cursor, state);
+				if (result) Object.assign(cursorFix ??= {}, result);
+			}
+			if (!cursorFix) return null;
+			return DecorationSet.create(state.doc, [Decoration.widget($cursor.pos, () => {
+				const span = document.createElement("span");
+				span.textContent = "​";
+				for (const [prop, value] of Object.entries(cursorFix)) span.style.setProperty(prop, value);
+				return span;
+			}, { side: -1 })]);
+		} } }))];
 	}
 };
-var createDiv = (ctx, props) => {
-	const div = document.createElement("div");
-	ctx.bindToEl(div, {
-		className: props.className,
-		slot: props.slot
-	}, [], props.children);
-	return div;
+featureFacade(RteCursorFixFeatureImpl);
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/internal/core.ts
+/**
+* Plugin to bring state from the host web component into ProseMirror.
+*/
+var hostBridgePlugin = new Plugin({ state: {
+	init() {
+		return null;
+	},
+	apply(tr, value) {
+		const meta = tr.getMeta(hostBridgePlugin);
+		if (meta) return meta;
+		else return value;
+	}
+} });
+var RteCoreImpl = class extends RteFeatureImpl {
+	constructor(..._args) {
+		super(..._args);
+		this.name = "RteCore";
+		this.disabled = new FeatureState(false);
+	}
+	getStyles() {
+		return [
+			this.contribution(prosemirror_default),
+			this.contribution(core_style_default),
+			this.contribution(ui_style_default)
+		];
+	}
+	getPlugins(rte) {
+		const enterKeyChainCommands = chainCommands(newlineInCode, createParagraphNear, liftEmptyBlock, splitBlockAs((node, atEnd, $from) => {
+			if (!atEnd) return {
+				type: node.type,
+				attrs: node.attrs
+			};
+			return {
+				type: defaultTextblockForMatch($from.node($from.depth - 1).contentMatchAt($from.indexAfter($from.depth - 1))),
+				attrs: rte.textblockAttrs.extractFromNode(node)
+			};
+		}));
+		return [
+			this.contribution(this.disabled.plugin),
+			this.contribution(new Plugin({
+				props: {
+					editable: () => !this.disabled.getValue(rte),
+					handleDOMEvents: { click: (_view, event) => {
+						if (this.disabled.getValue(rte)) {
+							event.preventDefault();
+							return true;
+						}
+						return false;
+					} }
+				},
+				view: (view) => {
+					const popovers = view.dom.getRootNode().querySelector(".popovers");
+					const updateDisabled = () => {
+						const disabled = this.disabled.getValue(rte);
+						popovers.classList.toggle("popovers--disabled", disabled);
+						view.dom.parentElement.classList.toggle("editor--disabled", disabled);
+					};
+					updateDisabled();
+					return { update: () => {
+						updateDisabled();
+					} };
+				}
+			})),
+			this.contribution(keymap({
+				...baseKeymap,
+				Enter: enterKeyChainCommands,
+				"Shift-Enter": enterKeyChainCommands
+			})),
+			this.contribution(dropCursor()),
+			this.contribution(gapCursor()),
+			this.contribution(hostBridgePlugin)
+		];
+	}
+	getFeatures() {
+		return [
+			this,
+			new RteForeignHtmlFeatureImpl(),
+			new RteCursorFixFeatureImpl()
+		];
+	}
 };
-var createAnchor = (ctx, props) => {
+featureFacade(RteCoreImpl);
+//#endregion
+//#region src/lib/rich-text-editor/rte/utils/sanitization.ts
+var DEFAULT_ALLOWED_URI_REGEXP = /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i;
+var ALLOWED_URI_REGEXP_WITH_BLOB = /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp|blob):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i;
+var ATTR_WHITESPACE = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g;
+var domPurifyConfig = { ALLOWED_URI_REGEXP: ALLOWED_URI_REGEXP_WITH_BLOB };
+/**
+* Sanitize potentially dangerous URLs, like "javascript:", in anchor href attributes.
+* Returns empty string if the URL is unsafe.
+*/
+var sanitizeLinkHref = (url) => {
+	if (!DEFAULT_ALLOWED_URI_REGEXP.test(url.replace(ATTR_WHITESPACE, ""))) return "";
 	const anchor = document.createElement("a");
-	ctx.bindToEl(anchor, {
-		href: props.href,
-		target: props.target,
-		rel: props.rel,
-		className: props.className
-	}, [], props.children);
-	return anchor;
+	anchor.setAttribute("href", url);
+	/* v8 ignore next -- since href is already validated it's probably always present @preserve */
+	return DOMPurify.sanitize(anchor, {
+		RETURN_DOM: true,
+		...domPurifyConfig
+	}).querySelector("a").getAttribute("href") ?? "";
 };
-var wrapperTargets = /* @__PURE__ */ new WeakMap();
-var createOptionalTooltip = (ctx, props) => {
-	const tooltip = ctx.rte.createComponent(Tooltip);
-	tooltip.setAttribute("exportparts", "vvd-theme-alternate");
-	ctx.bindToEl(tooltip, {
-		className: "ui-tooltip",
-		text: props.label,
-		placement: ctx.props.popupPlacement
-	});
-	ctx.bindProp(props.enabled, (enabled) => {
-		if (!enabled) tooltip.open = false;
-		tooltip.anchor = enabled ? props.anchor : void 0;
-	});
-	const wrapper = createDiv(ctx, {
-		className: "ui-tooltip-wrapper",
-		slot: props.slot,
-		children: [props.anchor, tooltip]
-	});
-	wrapperTargets.set(wrapper, props.anchor);
-	return wrapper;
+/**
+* Sanitize potentially dangerous URLs, like "javascript:", in image src attributes.
+* Returns empty string if the URL is unsafe.
+*/
+var sanitizeImageSrc = (url) => {
+	const img = document.createElement("img");
+	img.setAttribute("src", url);
+	return DOMPurify.sanitize(img, {
+		RETURN_DOM: true,
+		...domPurifyConfig
+	}).querySelector("img").getAttribute("src") ?? "";
 };
-var createButton = (ctx, props) => {
-	const variant = () => ctx.evalProp(props.variant) ?? "toolbar";
-	const size = () => variant() === "toolbar" ? "super-condensed" : "condensed";
-	const appearanceInactive = () => variant() === "popover-primary" ? "outlined" : "ghost-light";
-	const appearanceActive = () => variant() === "toolbar-menu" || variant() === "popover" ? "filled" : appearanceInactive();
-	const appearance = () => ctx.evalProp(props.active) ? appearanceActive() : appearanceInactive();
-	const connotation = () => ctx.evalProp(props.connotation) ?? (variant() === "toolbar-menu" && ctx.evalProp(props.active) ? "cta" : void 0);
-	const disabled = () => Boolean(ctx.evalProp(ctx.props.disabled) || ctx.evalProp(props.disabled));
-	const button = ctx.rte.createComponent(Button);
-	ctx.bindToEl(button, {
-		size,
-		appearance,
-		disabled,
-		icon: props.icon,
-		autofocus: props.autofocus,
-		connotation,
-		[props.icon ? "ariaLabel" : "label"]: props.label,
-		pressed: () => Boolean(ctx.evalProp(props.active)),
-		ariaPressed: props.active !== void 0 ? () => ctx.evalProp(props.active) ? "true" : "false" : void 0
-	}, [on("click", props.onClick, (onClick) => () => {
-		if (!onClick()) ctx.view.focus();
-	})]);
-	return createOptionalTooltip(ctx, {
-		enabled: () => Boolean(ctx.evalProp(props.icon) && !ctx.evalProp(props.noTooltip) && !disabled()),
-		label: props.label,
-		anchor: button,
-		slot: props.slot
-	});
-};
-var createMenu = (ctx, props) => {
-	const menu = ctx.rte.createComponent(Menu);
-	ctx.bindToEl(menu, {
-		className: "ui-menu",
-		autoDismiss: true,
-		ariaLabel: props.label,
-		anchor: wrapperTargets.get(props.trigger) ?? props.trigger,
-		placement: ctx.props.popupPlacement,
-		offset: () => ctx.evalProp(ctx.props.menuOffset) ?? null
-	}, [], props.children);
-	const fragment = document.createDocumentFragment();
-	fragment.appendChild(props.trigger);
-	fragment.appendChild(menu);
-	return fragment;
-};
-var createMenuItem = (ctx, props) => {
-	const disabled = () => Boolean(ctx.evalProp(ctx.props.disabled) || ctx.evalProp(props.disabled));
-	const item = ctx.rte.createComponent(MenuItem);
-	ctx.bindToEl(item, {
-		text: props.text,
-		checked: props.checked,
-		disabled,
-		controlType: "radio",
-		checkedAppearance: "tick-only"
-	}, [on("change", props.onSelect, (onSelect) => () => {
-		if (item.checked && !item.disabled) {
-			if (ctx.evalProp(props.checked) !== item.checked) {
-				onSelect();
-				ctx.view.focus();
-			}
-		}
-	})]);
-	return item;
-};
-var createButtonGroup = (ctx, props) => createDiv(ctx, {
-	slot: props.slot,
-	className: "ui-button-group",
-	children: props.children
+/**
+* Escapes a CSS value for insertion into style attribute.
+* E.g. "15px; background: red" => "15px"
+*/
+var escapeCssProperty = (value) => value.replace(/[;!].*/, "");
+//#endregion
+//#region src/lib/rich-text-editor/rte/html-parser.ts
+var copy = (obj) => ({ ...obj });
+var parseRulesFromSchema = (schema) => ({
+	nodes: Object.fromEntries(Object.keys(schema.nodes).map((name) => [name, (schema.nodes[name].spec.parseDOM ?? []).map(copy)])),
+	marks: Object.fromEntries(Object.keys(schema.marks).map((name) => [name, (schema.marks[name].spec.parseDOM ?? []).map(copy)]))
 });
-function markActive(state, type) {
-	const { from, $from, to, empty } = state.selection;
-	if (empty) return !!type.isInSet(state.storedMarks || $from.marks());
-	else return state.doc.rangeHasMark(from, to, type);
-}
-var createMarkToggle = (ctx, props) => createButton(ctx, {
-	label: props.label,
-	icon: props.icon,
-	active: () => markActive(ctx.view.state, props.markType),
-	disabled: () => !toggleMark(props.markType)(ctx.view.state),
-	onClick: () => {
-		toggleMark(props.markType)(ctx.view.state, ctx.view.dispatch);
+var RteHtmlParser = class {
+	constructor(config, options) {
+		this[impl] = new RteHtmlParserImpl(config[impl], options);
+	}
+	/**
+	* Converts an HTML string to an RteDocument.
+	*/
+	parseDocument(html, options) {
+		return this[impl].parser.parse(this.parseHtml(html, options), { preserveWhitespace: true }).toJSON();
+	}
+	/**
+	* Converts an HTML string to an RteFragment.
+	*/
+	parseFragment(html, options) {
+		return this[impl].parser.parseSlice(this.parseHtml(html, options), { preserveWhitespace: true }).content.toJSON() ?? [];
+	}
+	parseHtml(html, options) {
+		const dom = DOMPurify.sanitize(html, {
+			RETURN_DOM: true,
+			...domPurifyConfig
+		});
+		const container = document.createDocumentFragment();
+		container.appendChild(dom);
+		options?.modifyDom?.(container);
+		return container;
 	}
-});
-var createOption = (ctx, props) => {
-	const disabled = () => Boolean(ctx.evalProp(ctx.props.disabled) || ctx.evalProp(props.disabled));
-	const option = ctx.rte.createComponent(ListboxOption);
-	ctx.bindToEl(option, {
-		value: props.value,
-		text: props.text,
-		disabled
-	});
-	return option;
 };
-var createSelect = (ctx, props) => {
-	const disabled = () => Boolean(ctx.evalProp(ctx.props.disabled));
-	const select = ctx.rte.createComponent(Select);
-	select.setAttribute("data-class", "ui-select");
-	ctx.bindToEl(select, {
-		placeholder: " ",
-		ariaLabel: props.label,
-		appearance: "ghost",
-		disabled
-	}, [on("change", props.onSelect, (onSelect) => () => {
-		const value = select.value;
-		if (value) {
-			onSelect(value);
-			ctx.view.focus();
+var RteHtmlParserImpl = class {
+	constructor(config, options) {
+		const rules = parseRulesFromSchema(config.schema);
+		options?.modifyParseRules?.(rules);
+		this.parser = buildDomParser(config.schema, rules);
+	}
+	transform(html) {
+		return DOMPurify.sanitize(html);
+	}
+};
+var buildDomParser = (schema, { marks, nodes }) => {
+	const parserRules = [];
+	const priority = (rule) => rule.priority ?? 50;
+	function insert(rule) {
+		let i = 0;
+		for (; i < parserRules.length; i++) {
+			const next = parserRules[i];
+			if (priority(next) < priority(rule)) break;
 		}
-	})], props.children);
-	queueMicrotask(() => {
-		ctx.bindProp(props.value, (value) => select.value = value);
-	});
-	let hideTooltip = false;
-	select.addEventListener("vwc-popup:open", () => {
-		hideTooltip = true;
-		ctx.updateBindings();
-	});
-	select.addEventListener("vwc-popup:close", () => {
-		hideTooltip = false;
-		ctx.updateBindings();
+		parserRules.splice(i, 0, rule);
+	}
+	for (const name in marks) marks[name]?.forEach((rule) => {
+		insert(rule = copy(rule));
+		if (!(rule.mark || rule.ignore || rule.clearMark)) rule.mark = name;
 	});
-	return createOptionalTooltip(ctx, {
-		enabled: () => !hideTooltip && !disabled(),
-		label: props.label,
-		anchor: select
+	for (const name in nodes) nodes[name]?.forEach((rule) => {
+		insert(rule = copy(rule));
+		if (!(rule.node || rule.ignore || rule.mark)) rule.node = name;
 	});
-};
-var createDivider = (ctx) => {
-	const divider = ctx.rte.createComponent(Divider);
-	ctx.bindToEl(divider, {
-		className: "ui-divider",
-		orientation: "vertical"
+	parserRules.push({
+		tag: "br",
+		closeParent: true
 	});
-	return divider;
-};
-var createTextField = (ctx, props) => {
-	const textField = ctx.rte.createComponent(TextField);
-	ctx.bindToEl(textField, {
-		label: props.label,
-		value: props.value,
-		placeholder: props.placeholder,
-		slot: props.slot,
-		autofocus: props.autofocus,
-		type: props.type,
-		helperText: props.helperText
-	}, [on("input", props.onInput, (onInput) => () => {
-		onInput(textField.value);
-	})]);
-	return textField;
-};
-var createText = (ctx, props) => {
-	const textNode = document.createTextNode("");
-	ctx.bindToEl(textNode, { textContent: props.text });
-	return textNode;
+	return new DOMParser(schema, parserRules);
 };
-var createSingleSlot = (ctx, props) => {
-	const slot = document.createElement("slot");
-	slot.name = props.name;
-	let currentEl = null;
-	const listeners = [];
-	function cleanup() {
-		for (const { el, type, handler } of listeners) el.removeEventListener(type, handler);
-		listeners.length = 0;
-		currentEl = null;
+//#endregion
+//#region src/lib/rich-text-editor/rte/html-serializer.ts
+var RteHtmlSerializer = class {
+	constructor(config, options) {
+		this[impl] = new RteHtmlSerializerImpl(config[impl], options);
 	}
-	for (const [key, prop] of Object.entries(props.assignedProps)) ctx.bindProp(prop, (value) => {
-		if (currentEl) currentEl[key] = value;
-	});
-	function applyPropsAndEvents(el) {
-		for (const [key, prop] of Object.entries(props.assignedProps)) el[key] = ctx.evalProp(prop);
-		for (const [type, handler] of Object.entries(props.assignedEvents)) {
-			const listener = (e) => {
-				handler(e);
-				ctx.view.focus();
-			};
-			el.addEventListener(type, listener);
-			listeners.push({
-				el,
-				type,
-				handler: listener
-			});
-		}
+	/**
+	* Converts an RteDocument to an HTML string.
+	*/
+	serializeDocument(doc, options) {
+		return this[impl].serializeFragment(doc.content, options);
+	}
+	/**
+	* Converts an RteFragment to an HTML string.
+	*/
+	serializeFragment(fragment, options) {
+		return this[impl].serializeFragment(fragment, options);
 	}
-	const processSlot = () => {
-		const first = slot.assignedElements({ flatten: true })[0];
-		if (first === currentEl) return;
-		cleanup();
-		if (first) {
-			currentEl = first;
-			applyPropsAndEvents(first);
-		}
-	};
-	slot.addEventListener("slotchange", processSlot);
-	queueMicrotask(processSlot);
-	return slot;
 };
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/internal/history.ts
-var RteHistoryFeatureImpl = class extends RteFeatureImpl {
-	constructor(..._args) {
-		super(..._args);
-		this.name = "RteHistoryFeature";
+var RteHtmlSerializerImpl = class RteHtmlSerializerImpl {
+	constructor(config, options) {
+		this.config = config;
+		const serializers = RteHtmlSerializerImpl.domSerializersFromSchema(config.schema);
+		Object.assign(serializers.nodes, options?.serializers?.nodes ?? {});
+		Object.assign(serializers.marks, options?.serializers?.marks ?? {});
+		this.serializer = new DOMSerializer(serializers.nodes, serializers.marks);
 	}
-	getPlugins() {
-		return [this.contribution(history()), this.contribution(keymap({
-			"Mod-z": undo,
-			"Ctrl-y": redo,
-			"Cmd-Z": redo
-		}))];
-	}
-	getToolbarItems() {
-		return [this.contribution({
-			section: "history",
-			render: (ctx) => createButton(ctx, {
-				label: (ctx) => ctx.rte.getLocale().richTextEditor.undo,
-				icon: "undo-line",
-				disabled: (ctx) => !undo(ctx.view.state),
-				onClick: () => {
-					const { state, dispatch } = ctx.view;
-					undo(state, dispatch);
-				}
-			})
-		}, 1), this.contribution({
-			section: "history",
-			render: (ctx) => createButton(ctx, {
-				label: (ctx) => ctx.rte.getLocale().richTextEditor.redo,
-				icon: "redo-line",
-				disabled: (ctx) => !redo(ctx.view.state),
-				onClick: () => {
-					const { state, dispatch } = ctx.view;
-					redo(state, dispatch);
-				}
-			})
-		}, 2)];
-	}
-};
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/internal/foreign-html.ts
-var RteForeignHtmlFeatureImpl = class extends RteFeatureImpl {
-	constructor(..._args) {
-		super(..._args);
-		this.name = "RteForeignHtmlFeature";
-	}
-	getPlugins(rte) {
-		return [this.contribution(new Plugin({ props: {
-			transformPastedHTML: (html) => rte.foreignHtmlParser[impl].transform(html),
-			clipboardParser: rte.foreignHtmlParser[impl].parser,
-			clipboardSerializer: rte.foreignHtmlSerializer[impl].serializer
-		} }))];
-	}
-};
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/internal/cursor-fix.ts
-/**
-* When the cursor is positioned after an inline atom node at the end of a line,
-* browsers may display the cursor inside the atom.
-*/
-var atomCursorFix = ($cursor) => {
-	if (!($cursor.parentOffset === $cursor.parent.content.size)) return null;
-	const nodeBefore = $cursor.nodeBefore;
-	if (nodeBefore && nodeBefore.isInline && nodeBefore.isAtom && !nodeBefore.isText) return {};
-	return null;
-};
-var RteCursorFixFeatureImpl = class extends RteFeatureImpl {
-	constructor(..._args) {
-		super(..._args);
-		this.name = "RteCursorFix";
-	}
-	getPlugins(rte) {
-		const cursorFixes = [atomCursorFix];
-		for (const markType of Object.values(rte.schema.marks)) {
-			const spec = markType.spec;
-			if (spec.cursorFix) cursorFixes.push(spec.cursorFix);
+	static domSerializersFromSchema(schema) {
+		const result = {
+			nodes: {},
+			marks: {}
+		};
+		for (const name in schema.marks) {
+			const toDOM = schema.marks[name].spec.toDOM;
+			if (toDOM) result.marks[name] = toDOM;
 		}
-		return [this.contribution(new Plugin({ props: { decorations: (state) => {
-			const { $cursor } = state.selection;
-			if (!$cursor) return null;
-			let cursorFix = null;
-			for (const fn of cursorFixes) {
-				const result = fn($cursor, state);
-				if (result) Object.assign(cursorFix ??= {}, result);
-			}
-			if (!cursorFix) return null;
-			return DecorationSet.create(state.doc, [Decoration.widget($cursor.pos, () => {
-				const span = document.createElement("span");
-				span.textContent = "​";
-				for (const [prop, value] of Object.entries(cursorFix)) span.style.setProperty(prop, value);
-				return span;
-			}, { side: -1 })]);
-		} } }))];
-	}
-};
-featureFacade(RteCursorFixFeatureImpl);
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/internal/core.ts
-/**
-* Plugin to bring state from the host web component into ProseMirror.
-*/
-var hostBridgePlugin = new Plugin({ state: {
-	init() {
-		return null;
-	},
-	apply(tr, value) {
-		const meta = tr.getMeta(hostBridgePlugin);
-		if (meta) return meta;
-		else return value;
-	}
-} });
-var RteCoreImpl = class extends RteFeatureImpl {
-	constructor(..._args) {
-		super(..._args);
-		this.name = "RteCore";
-		this.disabled = new FeatureState(false);
-	}
-	getStyles() {
-		return [
-			this.contribution(prosemirror_default),
-			this.contribution(core_style_default),
-			this.contribution(ui_style_default)
-		];
-	}
-	getPlugins(rte) {
-		const enterKeyChainCommands = chainCommands(newlineInCode, createParagraphNear, liftEmptyBlock, splitBlockAs((node, atEnd, $from) => {
-			if (!atEnd) return {
-				type: node.type,
-				attrs: node.attrs
-			};
-			return {
-				type: defaultTextblockForMatch($from.node($from.depth - 1).contentMatchAt($from.indexAfter($from.depth - 1))),
-				attrs: rte.textblockAttrs.extractFromNode(node)
-			};
-		}));
-		return [
-			this.contribution(this.disabled.plugin),
-			this.contribution(new Plugin({
-				props: {
-					editable: () => !this.disabled.getValue(rte),
-					handleDOMEvents: { click: (_view, event) => {
-						if (this.disabled.getValue(rte)) {
-							event.preventDefault();
-							return true;
-						}
-						return false;
-					} }
-				},
-				view: (view) => {
-					const popovers = view.dom.getRootNode().querySelector(".popovers");
-					const updateDisabled = () => {
-						const disabled = this.disabled.getValue(rte);
-						popovers.classList.toggle("popovers--disabled", disabled);
-						view.dom.parentElement.classList.toggle("editor--disabled", disabled);
-					};
-					updateDisabled();
-					return { update: () => {
-						updateDisabled();
-					} };
-				}
-			})),
-			this.contribution(keymap({
-				...baseKeymap,
-				Enter: enterKeyChainCommands,
-				"Shift-Enter": enterKeyChainCommands
-			})),
-			this.contribution(dropCursor()),
-			this.contribution(gapCursor()),
-			this.contribution(hostBridgePlugin)
-		];
+		for (const name in schema.nodes) {
+			const toDOM = schema.nodes[name].spec.serializeToDOM ?? schema.nodes[name].spec.toDOM;
+			if (toDOM) result.nodes[name] = toDOM;
+		}
+		result.nodes.text = (node) => document.createTextNode(node.text);
+		return result;
 	}
-	getFeatures() {
-		return [
-			this,
-			new RteHistoryFeatureImpl(),
-			new RteForeignHtmlFeatureImpl(),
-			new RteCursorFixFeatureImpl()
-		];
+	serializeFragment(fragment, options) {
+		const parsedFragment = Fragment.fromJSON(this.config.schema, fragment);
+		const serializedFragment = this.serializer.serializeFragment(parsedFragment);
+		const container = document.createDocumentFragment();
+		container.appendChild(serializedFragment);
+		options?.modifyDom?.(container);
+		const output = document.createElement("div");
+		output.appendChild(container);
+		return output.innerHTML;
 	}
 };
-featureFacade(RteCoreImpl);
 //#endregion
-//#region src/lib/rich-text-editor/rte/utils/sanitization.ts
-var DEFAULT_ALLOWED_URI_REGEXP = /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i;
-var ALLOWED_URI_REGEXP_WITH_BLOB = /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp|blob):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i;
-var ATTR_WHITESPACE = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g;
-var domPurifyConfig = { ALLOWED_URI_REGEXP: ALLOWED_URI_REGEXP_WITH_BLOB };
-/**
-* Sanitize potentially dangerous URLs, like "javascript:", in anchor href attributes.
-* Returns empty string if the URL is unsafe.
-*/
-var sanitizeLinkHref = (url) => {
-	if (!DEFAULT_ALLOWED_URI_REGEXP.test(url.replace(ATTR_WHITESPACE, ""))) return "";
-	const anchor = document.createElement("a");
-	anchor.setAttribute("href", url);
-	/* v8 ignore next -- since href is already validated it's probably always present @preserve */
-	return DOMPurify.sanitize(anchor, {
-		RETURN_DOM: true,
-		...domPurifyConfig
-	}).querySelector("a").getAttribute("href") ?? "";
-};
-/**
-* Sanitize potentially dangerous URLs, like "javascript:", in image src attributes.
-* Returns empty string if the URL is unsafe.
-*/
-var sanitizeImageSrc = (url) => {
-	const img = document.createElement("img");
-	img.setAttribute("src", url);
-	return DOMPurify.sanitize(img, {
-		RETURN_DOM: true,
-		...domPurifyConfig
-	}).querySelector("img").getAttribute("src") ?? "";
+//#region src/lib/rich-text-editor/rte/instance.ts
+var parseDocument = (schema, doc) => {
+	const node = schema.topNodeType.createAndFill(null, doc ? Fragment.fromJSON(schema, doc.content) : null);
+	if (!node) throw new Error("Document could not be parsed");
+	node.check();
+	return node;
 };
-/**
-* Escapes a CSS value for insertion into style attribute.
-* E.g. "15px; background: red" => "15px"
-*/
-var escapeCssProperty = (value) => value.replace(/[;!].*/, "");
-//#endregion
-//#region src/lib/rich-text-editor/rte/html-parser.ts
-var copy = (obj) => ({ ...obj });
-var parseRulesFromSchema = (schema) => ({
-	nodes: Object.fromEntries(Object.keys(schema.nodes).map((name) => [name, (schema.nodes[name].spec.parseDOM ?? []).map(copy)])),
-	marks: Object.fromEntries(Object.keys(schema.marks).map((name) => [name, (schema.marks[name].spec.parseDOM ?? []).map(copy)]))
-});
-var RteHtmlParser = class {
+var RteInstance = class {
 	constructor(config, options) {
-		this[impl] = new RteHtmlParserImpl(config[impl], options);
+		this.options = options;
+		this.feature = (Feature, featureId) => {
+			return this[impl].getPublicInterface(Feature, featureId);
+		};
+		this[impl] = new RteInstanceImpl(this, config, options);
 	}
 	/**
-	* Converts an HTML string to an RteDocument.
+	* Returns the current document state.
 	*/
-	parseDocument(html, options) {
-		return this[impl].parser.parse(this.parseHtml(html, options), { preserveWhitespace: true }).toJSON();
+	getDocument() {
+		return this[impl].state.doc.toJSON();
 	}
 	/**
-	* Converts an HTML string to an RteFragment.
+	* Reset the editor to its initial state. Optionally, an initial document can be provided.
 	*/
-	parseFragment(html, options) {
-		return this[impl].parser.parseSlice(this.parseHtml(html, options), { preserveWhitespace: true }).content.toJSON() ?? [];
-	}
-	parseHtml(html, options) {
-		const dom = DOMPurify.sanitize(html, {
-			RETURN_DOM: true,
-			...domPurifyConfig
-		});
-		const container = document.createDocumentFragment();
-		container.appendChild(dom);
-		options?.modifyDom?.(container);
-		return container;
-	}
-};
-var RteHtmlParserImpl = class {
-	constructor(config, options) {
-		const rules = parseRulesFromSchema(config.schema);
-		options?.modifyParseRules?.(rules);
-		this.parser = buildDomParser(config.schema, rules);
-	}
-	transform(html) {
-		return DOMPurify.sanitize(html);
-	}
-};
-var buildDomParser = (schema, { marks, nodes }) => {
-	const parserRules = [];
-	const priority = (rule) => rule.priority ?? 50;
-	function insert(rule) {
-		let i = 0;
-		for (; i < parserRules.length; i++) {
-			const next = parserRules[i];
-			if (priority(next) < priority(rule)) break;
-		}
-		parserRules.splice(i, 0, rule);
-	}
-	for (const name in marks) marks[name]?.forEach((rule) => {
-		insert(rule = copy(rule));
-		if (!(rule.mark || rule.ignore || rule.clearMark)) rule.mark = name;
-	});
-	for (const name in nodes) nodes[name]?.forEach((rule) => {
-		insert(rule = copy(rule));
-		if (!(rule.node || rule.ignore || rule.mark)) rule.node = name;
-	});
-	parserRules.push({
-		tag: "br",
-		closeParent: true
-	});
-	return new DOMParser(schema, parserRules);
-};
-//#endregion
-//#region src/lib/rich-text-editor/rte/html-serializer.ts
-var RteHtmlSerializer = class {
-	constructor(config, options) {
-		this[impl] = new RteHtmlSerializerImpl(config[impl], options);
-	}
-	/**
-	* Converts an RteDocument to an HTML string.
-	*/
-	serializeDocument(doc, options) {
-		return this[impl].serializeFragment(doc.content, options);
-	}
-	/**
-	* Converts an RteFragment to an HTML string.
-	*/
-	serializeFragment(fragment, options) {
-		return this[impl].serializeFragment(fragment, options);
-	}
-};
-var RteHtmlSerializerImpl = class RteHtmlSerializerImpl {
-	constructor(config, options) {
-		this.config = config;
-		const serializers = RteHtmlSerializerImpl.domSerializersFromSchema(config.schema);
-		Object.assign(serializers.nodes, options?.serializers?.nodes ?? {});
-		Object.assign(serializers.marks, options?.serializers?.marks ?? {});
-		this.serializer = new DOMSerializer(serializers.nodes, serializers.marks);
-	}
-	static domSerializersFromSchema(schema) {
-		const result = {
-			nodes: {},
-			marks: {}
-		};
-		for (const name in schema.marks) {
-			const toDOM = schema.marks[name].spec.toDOM;
-			if (toDOM) result.marks[name] = toDOM;
-		}
-		for (const name in schema.nodes) {
-			const toDOM = schema.nodes[name].spec.serializeToDOM ?? schema.nodes[name].spec.toDOM;
-			if (toDOM) result.nodes[name] = toDOM;
-		}
-		result.nodes.text = (node) => document.createTextNode(node.text);
-		return result;
-	}
-	serializeFragment(fragment, options) {
-		const parsedFragment = Fragment.fromJSON(this.config.schema, fragment);
-		const serializedFragment = this.serializer.serializeFragment(parsedFragment);
-		const container = document.createDocumentFragment();
-		container.appendChild(serializedFragment);
-		options?.modifyDom?.(container);
-		const output = document.createElement("div");
-		output.appendChild(container);
-		return output.innerHTML;
-	}
-};
-//#endregion
-//#region src/lib/rich-text-editor/rte/instance.ts
-var parseDocument = (schema, doc) => {
-	const node = schema.topNodeType.createAndFill(null, doc ? Fragment.fromJSON(schema, doc.content) : null);
-	if (!node) throw new Error("Document could not be parsed");
-	node.check();
-	return node;
-};
-var RteInstance = class {
-	constructor(config, options) {
-		this.options = options;
-		this.feature = (Feature, featureId) => {
-			return this[impl].getPublicInterface(Feature, featureId);
-		};
-		this[impl] = new RteInstanceImpl(this, config, options);
-	}
-	/**
-	* Returns the current document state.
-	*/
-	getDocument() {
-		return this[impl].state.doc.toJSON();
-	}
-	/**
-	* Reset the editor to its initial state. Optionally, an initial document can be provided.
-	*/
-	reset(initialDocument) {
-		this[impl].reset(initialDocument);
+	reset(initialDocument) {
+		this[impl].reset(initialDocument);
 	}
 	/**
 	* Replaces the current selection with the given content.
@@ -991,171 +679,487 @@ var RteInstanceImpl = class {
 		this.dispatchTransaction(this.tr.setMeta(hostBridgePlugin, hostState));
 	}
 };
-//#endregion
-//#region src/lib/rich-text-editor/rte/utils/textblock-attrs.ts
-var TextblockAttrs = class {
-	constructor(specs) {
-		this.specs = specs;
-		this.attrs = {};
-		for (const spec of specs) this.attrs[spec.name] = { default: spec.default };
-	}
-	fromDOM(dom) {
-		return Object.assign({}, ...this.specs.map((s) => ({ [s.name]: s.fromDOM(dom) })));
-	}
-	getStyle(node) {
-		return this.specs.flatMap((s) => s.toStyles(node)).join("; ");
-	}
-	getDOMAttrsProperties(node) {
-		if (!this.specs.length) return {};
-		return { style: this.getStyle(node) };
-	}
-	getDOMAttrs(node) {
-		if (!this.specs.length) return [];
-		return [this.getDOMAttrsProperties(node)];
-	}
-	extractFromNode(node) {
-		return Object.assign({}, ...Object.keys(this.attrs).map((attr) => ({ [attr]: node.attrs[attr] })));
-	}
+//#endregion
+//#region src/lib/rich-text-editor/rte/utils/textblock-attrs.ts
+var TextblockAttrs = class {
+	constructor(specs) {
+		this.specs = specs;
+		this.attrs = {};
+		for (const spec of specs) this.attrs[spec.name] = { default: spec.default };
+	}
+	fromDOM(dom) {
+		return Object.assign({}, ...this.specs.map((s) => ({ [s.name]: s.fromDOM(dom) })));
+	}
+	getStyle(node) {
+		return this.specs.flatMap((s) => s.toStyles(node)).join("; ");
+	}
+	getDOMAttrsProperties(node) {
+		if (!this.specs.length) return {};
+		return { style: this.getStyle(node) };
+	}
+	getDOMAttrs(node) {
+		if (!this.specs.length) return [];
+		return [this.getDOMAttrsProperties(node)];
+	}
+	extractFromNode(node) {
+		return Object.assign({}, ...Object.keys(this.attrs).map((attr) => ({ [attr]: node.attrs[attr] })));
+	}
+};
+//#endregion
+//#region src/lib/rich-text-editor/rte/utils/textblock-marks.ts
+var TextblockMarks = class {
+	constructor(specs) {
+		this.specs = specs;
+	}
+	getAllowedMarksForNode(nodeName) {
+		return this.specs.filter((spec) => !spec.onNodeName || spec.onNodeName === nodeName).map((spec) => spec.markName);
+	}
+	getReferencedNodeNames() {
+		return new Set(this.specs.map((spec) => spec.onNodeName).filter(Boolean));
+	}
+};
+//#endregion
+//#region src/lib/rich-text-editor/rte/view.ts
+/**
+* Converts an RteDocument to an RteView tree for rendering outside the editor.
+* The logic is adapted from ProseMirror's DOM serialization to ensure the resulting structure
+* matches the editor's HTML structure.
+*/
+var convertToView = (doc, ctx) => {
+	const schema = ctx.config[impl].schema;
+	const getMarkRank = (mark) => schema.marks[mark.type].rank;
+	const marksEqual = (a, b) => {
+		if (a.type !== b.type) return false;
+		const attrsA = a.attrs;
+		const attrsB = b.attrs;
+		if (attrsA === attrsB) return true;
+		/* v8 ignore next -- not currently reachable since all attrs are required @preserve */
+		if (!attrsA || !attrsB) return false;
+		const keysA = Object.keys(attrsA);
+		const keysB = Object.keys(attrsB);
+		/* v8 ignore next -- not currently reachable since all attrs are required @preserve */
+		if (keysA.length !== keysB.length) return false;
+		for (const key of keysA) if (attrsA[key] !== attrsB[key]) return false;
+		return true;
+	};
+	const convertFragment = (nodes) => {
+		const result = [];
+		const active = [];
+		const activeContents = [result];
+		for (const node of nodes) {
+			const nodeMarks = [...node.marks ?? []].sort((a, b) => getMarkRank(a) - getMarkRank(b));
+			let keep = 0;
+			let rendered = 0;
+			while (keep < active.length && rendered < nodeMarks.length) {
+				if (!marksEqual(active[keep], nodeMarks[rendered])) break;
+				keep++;
+				rendered++;
+			}
+			while (active.length > keep) {
+				active.pop();
+				activeContents.pop();
+			}
+			while (rendered < nodeMarks.length) {
+				const mark = nodeMarks[rendered];
+				const markContent = [];
+				activeContents[activeContents.length - 1].push({
+					type: "mark",
+					mark,
+					children: {
+						type: "fragment",
+						content: markContent,
+						[impl]: ctx
+					},
+					[impl]: ctx
+				});
+				active.push(mark);
+				activeContents.push(markContent);
+				rendered++;
+			}
+			activeContents[activeContents.length - 1].push({
+				type: "node",
+				node,
+				children: convertFragment(node.content ?? []),
+				[impl]: ctx
+			});
+		}
+		return {
+			type: "fragment",
+			content: result,
+			[impl]: ctx
+		};
+	};
+	return {
+		type: "node",
+		node: doc,
+		children: convertFragment(doc.content),
+		[impl]: ctx
+	};
+};
+//#endregion
+//#region src/lib/rich-text-editor/rte/config.ts
+var RteConfig = class {
+	constructor(features) {
+		this[impl] = new RteConfigImpl(features);
+	}
+	instantiateEditor(options) {
+		return new RteInstance(this, options);
+	}
+	instantiateView(document, options) {
+		return convertToView(document, {
+			config: this,
+			options: { ...options }
+		});
+	}
+};
+var RteConfigImpl = class {
+	constructor(featuresFacades) {
+		const resolveFeatures = (features) => features.flatMap((f) => f.getFeatures().flatMap((subFeature) => subFeature === f ? f : resolveFeatures([subFeature])));
+		this.features = resolveFeatures(featuresFacades.map(getFeatureImpl));
+		this.featureMap = /* @__PURE__ */ new Map();
+		for (const f of this.features) {
+			if (this.featureMap.has(f.name)) throw new Error(`Duplicate feature: ${f.name}`);
+			this.featureMap.set(f.name, f);
+		}
+		this.featureFacadesMap = /* @__PURE__ */ new Map();
+		for (const facade of featuresFacades) {
+			const FacadeClass = facade.constructor;
+			const feature = getFeatureImpl(facade);
+			const instances = this.featureFacadesMap.get(FacadeClass);
+			if (instances) instances.push(feature);
+			else this.featureFacadesMap.set(FacadeClass, [feature]);
+		}
+		if (!this.featureMap.has("RteBase")) throw new Error("RteBase feature is required");
+		if (this.featureMap.has("RteLinkFeature") && !this.featureMap.has("RteToolbarFeature")) throw new Error("RteToolbarFeature is required for RteLinkFeature");
+		this.textblockAttrs = new TextblockAttrs(sortedContributions(this.features.flatMap((f) => f.getTextblockAttrs())));
+		this.textblockMarks = new TextblockMarks(sortedContributions(this.features.flatMap((f) => f.getTextblockMarks())));
+		const schemaContributions = sortedContributions(this.features.flatMap((f) => f.getSchema(this.textblockAttrs, this.textblockMarks)));
+		const schemaSpec = {
+			nodes: {},
+			marks: {}
+		};
+		for (const schema of schemaContributions) {
+			Object.assign(schemaSpec.nodes, schema.nodes ?? {});
+			Object.assign(schemaSpec.marks, schema.marks ?? {});
+		}
+		for (const referencedNodeName of this.textblockMarks.getReferencedNodeNames()) if (!(referencedNodeName in schemaSpec.nodes)) throw new Error(`Unknown node "${referencedNodeName}"`);
+		this.schema = new Schema(schemaSpec);
+	}
+};
+//#endregion
+//#region src/lib/rich-text-editor/rte/utils/ui.ts
+var isPropBinding = (prop) => typeof prop === "function";
+var on = (event, prop, handler) => [
+	event,
+	prop,
+	handler
+];
+var UiCtx = class {
+	constructor(view, rte, props) {
+		this.view = view;
+		this.rte = rte;
+		this.props = props;
+		this.bindings = [];
+	}
+	evalProp(prop) {
+		return isPropBinding(prop) ? prop(this) : prop;
+	}
+	bindProp(prop, bindFn) {
+		if (prop === void 0) return;
+		else if (isPropBinding(prop)) {
+			const binding = () => bindFn(prop(this));
+			this.bindings.push(binding);
+			binding();
+		} else bindFn(prop);
+	}
+	updateBindings() {
+		for (const binding of this.bindings) binding();
+	}
+	shouldReturnFocusToEditor() {
+		return this.evalProp(this.props.shouldReturnFocusToEditor);
+	}
+	bindToEl(target, props = {}, events = [], children = []) {
+		for (const name in props) this.bindProp(props[name], (value) => {
+			target[name] = value;
+		});
+		for (const [name, value, bindFn] of events) if (value) target.addEventListener(name, bindFn(value));
+		for (const child of children) target.appendChild(child);
+	}
+};
+var createDiv = (ctx, props) => {
+	const div = document.createElement("div");
+	ctx.bindToEl(div, {
+		className: props.className,
+		slot: props.slot
+	}, [], props.children);
+	return div;
+};
+var createAnchor = (ctx, props) => {
+	const anchor = document.createElement("a");
+	ctx.bindToEl(anchor, {
+		href: props.href,
+		target: props.target,
+		rel: props.rel,
+		className: props.className
+	}, [], props.children);
+	return anchor;
+};
+var wrapperTargets = /* @__PURE__ */ new WeakMap();
+var createOptionalTooltip = (ctx, props) => {
+	const tooltip = ctx.rte.createComponent(Tooltip);
+	tooltip.setAttribute("exportparts", "vvd-theme-alternate");
+	ctx.bindToEl(tooltip, {
+		className: "ui-tooltip",
+		text: props.label,
+		placement: ctx.props.popupPlacement
+	});
+	ctx.bindProp(props.enabled, (enabled) => {
+		if (!enabled) tooltip.open = false;
+		tooltip.anchor = enabled ? props.anchor : void 0;
+	});
+	const wrapper = createDiv(ctx, {
+		className: "ui-tooltip-wrapper",
+		slot: props.slot,
+		children: [props.anchor, tooltip]
+	});
+	wrapperTargets.set(wrapper, props.anchor);
+	return wrapper;
+};
+var createButton = (ctx, props) => {
+	const variant = () => ctx.evalProp(props.variant) ?? "toolbar";
+	const size = () => variant() === "toolbar" ? "super-condensed" : "condensed";
+	const appearanceInactive = () => variant() === "popover-primary" ? "outlined" : "ghost-light";
+	const appearanceActive = () => variant() === "toolbar-menu" || variant() === "popover" ? "filled" : appearanceInactive();
+	const appearance = () => ctx.evalProp(props.active) ? appearanceActive() : appearanceInactive();
+	const connotation = () => ctx.evalProp(props.connotation) ?? (variant() === "toolbar-menu" && ctx.evalProp(props.active) ? "cta" : void 0);
+	const disabled = () => Boolean(ctx.evalProp(ctx.props.disabled) || ctx.evalProp(props.disabled));
+	const button = ctx.rte.createComponent(Button);
+	ctx.bindToEl(button, {
+		size,
+		appearance,
+		disabled,
+		icon: props.icon,
+		autofocus: props.autofocus,
+		connotation,
+		[props.icon ? "ariaLabel" : "label"]: props.label,
+		pressed: () => Boolean(ctx.evalProp(props.active)),
+		ariaPressed: props.active !== void 0 ? () => ctx.evalProp(props.active) ? "true" : "false" : void 0
+	}, [on("click", props.onClick, (onClick) => () => {
+		if (!onClick() && ctx.shouldReturnFocusToEditor()) ctx.view.focus();
+	})]);
+	return createOptionalTooltip(ctx, {
+		enabled: () => Boolean(ctx.evalProp(props.icon) && !ctx.evalProp(props.noTooltip) && !disabled()),
+		label: props.label,
+		anchor: button,
+		slot: props.slot
+	});
+};
+var createMenu = (ctx, props) => {
+	const menu = ctx.rte.createComponent(Menu);
+	ctx.bindToEl(menu, {
+		className: "ui-menu",
+		autoDismiss: true,
+		ariaLabel: props.label,
+		anchor: wrapperTargets.get(props.trigger) ?? props.trigger,
+		placement: ctx.props.popupPlacement,
+		offset: () => ctx.evalProp(ctx.props.menuOffset) ?? null
+	}, [], props.children);
+	const fragment = document.createDocumentFragment();
+	fragment.appendChild(props.trigger);
+	fragment.appendChild(menu);
+	return fragment;
+};
+var createMenuItem = (ctx, props) => {
+	const disabled = () => Boolean(ctx.evalProp(ctx.props.disabled) || ctx.evalProp(props.disabled));
+	const item = ctx.rte.createComponent(MenuItem);
+	ctx.bindToEl(item, {
+		text: props.text,
+		checked: props.checked,
+		disabled,
+		controlType: "radio",
+		checkedAppearance: "tick-only"
+	}, [on("change", props.onSelect, (onSelect) => () => {
+		if (item.checked && !item.disabled) {
+			if (ctx.evalProp(props.checked) !== item.checked) {
+				onSelect();
+				if (ctx.shouldReturnFocusToEditor()) ctx.view.focus();
+			}
+		}
+	})]);
+	return item;
+};
+var createButtonGroup = (ctx, props) => createDiv(ctx, {
+	slot: props.slot,
+	className: "ui-button-group",
+	children: props.children
+});
+function markActive(state, type) {
+	const { from, $from, to, empty } = state.selection;
+	if (empty) return !!type.isInSet(state.storedMarks || $from.marks());
+	else return state.doc.rangeHasMark(from, to, type);
+}
+var createMarkToggle = (ctx, props) => createButton(ctx, {
+	label: props.label,
+	icon: props.icon,
+	active: () => markActive(ctx.view.state, props.markType),
+	disabled: () => !toggleMark(props.markType)(ctx.view.state),
+	onClick: () => {
+		toggleMark(props.markType)(ctx.view.state, ctx.view.dispatch);
+	}
+});
+var createOption = (ctx, props) => {
+	const disabled = () => Boolean(ctx.evalProp(ctx.props.disabled) || ctx.evalProp(props.disabled));
+	const option = ctx.rte.createComponent(ListboxOption);
+	ctx.bindToEl(option, {
+		value: props.value,
+		text: props.text,
+		disabled
+	});
+	return option;
+};
+var createSelect = (ctx, props) => {
+	const disabled = () => Boolean(ctx.evalProp(ctx.props.disabled));
+	const select = ctx.rte.createComponent(Select);
+	select.setAttribute("data-class", "ui-select");
+	ctx.bindToEl(select, {
+		placeholder: " ",
+		ariaLabel: props.label,
+		appearance: "ghost",
+		disabled
+	}, [on("change", props.onSelect, (onSelect) => () => {
+		const value = select.value;
+		if (value) {
+			onSelect(value);
+			if (ctx.shouldReturnFocusToEditor()) ctx.view.focus();
+		}
+	})], props.children);
+	queueMicrotask(() => {
+		ctx.bindProp(props.value, (value) => select.value = value);
+	});
+	let hideTooltip = false;
+	select.addEventListener("vwc-popup:open", () => {
+		hideTooltip = true;
+		ctx.updateBindings();
+	});
+	select.addEventListener("vwc-popup:close", () => {
+		hideTooltip = false;
+		ctx.updateBindings();
+	});
+	return createOptionalTooltip(ctx, {
+		enabled: () => !hideTooltip && !disabled(),
+		label: props.label,
+		anchor: select
+	});
+};
+var createDivider = (ctx) => {
+	const divider = ctx.rte.createComponent(Divider);
+	ctx.bindToEl(divider, {
+		className: "ui-divider",
+		orientation: "vertical"
+	});
+	return divider;
+};
+var createTextField = (ctx, props) => {
+	const textField = ctx.rte.createComponent(TextField);
+	ctx.bindToEl(textField, {
+		label: props.label,
+		value: props.value,
+		placeholder: props.placeholder,
+		slot: props.slot,
+		autofocus: props.autofocus,
+		type: props.type,
+		helperText: props.helperText
+	}, [on("input", props.onInput, (onInput) => () => {
+		onInput(textField.value);
+	})]);
+	return textField;
 };
-//#endregion
-//#region src/lib/rich-text-editor/rte/utils/textblock-marks.ts
-var TextblockMarks = class {
-	constructor(specs) {
-		this.specs = specs;
-	}
-	getAllowedMarksForNode(nodeName) {
-		return this.specs.filter((spec) => !spec.onNodeName || spec.onNodeName === nodeName).map((spec) => spec.markName);
-	}
-	getReferencedNodeNames() {
-		return new Set(this.specs.map((spec) => spec.onNodeName).filter(Boolean));
-	}
+var createText = (ctx, props) => {
+	const textNode = document.createTextNode("");
+	ctx.bindToEl(textNode, { textContent: props.text });
+	return textNode;
 };
-//#endregion
-//#region src/lib/rich-text-editor/rte/view.ts
-/**
-* Converts an RteDocument to an RteView tree for rendering outside the editor.
-* The logic is adapted from ProseMirror's DOM serialization to ensure the resulting structure
-* matches the editor's HTML structure.
-*/
-var convertToView = (doc, ctx) => {
-	const schema = ctx.config[impl].schema;
-	const getMarkRank = (mark) => schema.marks[mark.type].rank;
-	const marksEqual = (a, b) => {
-		if (a.type !== b.type) return false;
-		const attrsA = a.attrs;
-		const attrsB = b.attrs;
-		if (attrsA === attrsB) return true;
-		/* v8 ignore next -- not currently reachable since all attrs are required @preserve */
-		if (!attrsA || !attrsB) return false;
-		const keysA = Object.keys(attrsA);
-		const keysB = Object.keys(attrsB);
-		/* v8 ignore next -- not currently reachable since all attrs are required @preserve */
-		if (keysA.length !== keysB.length) return false;
-		for (const key of keysA) if (attrsA[key] !== attrsB[key]) return false;
-		return true;
-	};
-	const convertFragment = (nodes) => {
-		const result = [];
-		const active = [];
-		const activeContents = [result];
-		for (const node of nodes) {
-			const nodeMarks = [...node.marks ?? []].sort((a, b) => getMarkRank(a) - getMarkRank(b));
-			let keep = 0;
-			let rendered = 0;
-			while (keep < active.length && rendered < nodeMarks.length) {
-				if (!marksEqual(active[keep], nodeMarks[rendered])) break;
-				keep++;
-				rendered++;
-			}
-			while (active.length > keep) {
-				active.pop();
-				activeContents.pop();
-			}
-			while (rendered < nodeMarks.length) {
-				const mark = nodeMarks[rendered];
-				const markContent = [];
-				activeContents[activeContents.length - 1].push({
-					type: "mark",
-					mark,
-					children: {
-						type: "fragment",
-						content: markContent,
-						[impl]: ctx
-					},
-					[impl]: ctx
-				});
-				active.push(mark);
-				activeContents.push(markContent);
-				rendered++;
-			}
-			activeContents[activeContents.length - 1].push({
-				type: "node",
-				node,
-				children: convertFragment(node.content ?? []),
-				[impl]: ctx
+var createSingleSlot = (ctx, props) => {
+	const slot = document.createElement("slot");
+	slot.name = props.name;
+	let currentEl = null;
+	const listeners = [];
+	function cleanup() {
+		for (const { el, type, handler } of listeners) el.removeEventListener(type, handler);
+		listeners.length = 0;
+		currentEl = null;
+	}
+	for (const [key, prop] of Object.entries(props.assignedProps)) ctx.bindProp(prop, (value) => {
+		if (currentEl) currentEl[key] = value;
+	});
+	function applyPropsAndEvents(el) {
+		for (const [key, prop] of Object.entries(props.assignedProps)) el[key] = ctx.evalProp(prop);
+		for (const [type, handler] of Object.entries(props.assignedEvents)) {
+			const listener = (e) => {
+				handler(e);
+				if (ctx.shouldReturnFocusToEditor()) ctx.view.focus();
+			};
+			el.addEventListener(type, listener);
+			listeners.push({
+				el,
+				type,
+				handler: listener
 			});
 		}
-		return {
-			type: "fragment",
-			content: result,
-			[impl]: ctx
-		};
-	};
-	return {
-		type: "node",
-		node: doc,
-		children: convertFragment(doc.content),
-		[impl]: ctx
+	}
+	const processSlot = () => {
+		const first = slot.assignedElements({ flatten: true })[0];
+		if (first === currentEl) return;
+		cleanup();
+		if (first) {
+			currentEl = first;
+			applyPropsAndEvents(first);
+		}
 	};
+	slot.addEventListener("slotchange", processSlot);
+	queueMicrotask(processSlot);
+	return slot;
 };
 //#endregion
-//#region src/lib/rich-text-editor/rte/config.ts
-var RteConfig = class {
-	constructor(features) {
-		this[impl] = new RteConfigImpl(features);
-	}
-	instantiateEditor(options) {
-		return new RteInstance(this, options);
+//#region src/lib/rich-text-editor/rte/features/internal/history.ts
+var RteHistoryFeatureImpl = class extends RteFeatureImpl {
+	constructor(config) {
+		super();
+		this.config = config;
+		this.name = "RteHistoryFeature";
 	}
-	instantiateView(document, options) {
-		return convertToView(document, {
-			config: this,
-			options: { ...options }
-		});
+	getPlugins() {
+		return [this.contribution(history()), this.contribution(keymap({
+			"Mod-z": undo,
+			"Ctrl-y": redo,
+			"Cmd-Z": redo
+		}))];
 	}
-};
-var RteConfigImpl = class {
-	constructor(featuresFacades) {
-		const resolveFeatures = (features) => features.flatMap((f) => f.getFeatures().flatMap((subFeature) => subFeature === f ? f : resolveFeatures([subFeature])));
-		this.features = resolveFeatures(featuresFacades.map(getFeatureImpl));
-		this.featureMap = /* @__PURE__ */ new Map();
-		for (const f of this.features) {
-			if (this.featureMap.has(f.name)) throw new Error(`Duplicate feature: ${f.name}`);
-			this.featureMap.set(f.name, f);
-		}
-		this.featureFacadesMap = /* @__PURE__ */ new Map();
-		for (const facade of featuresFacades) {
-			const FacadeClass = facade.constructor;
-			const feature = getFeatureImpl(facade);
-			const instances = this.featureFacadesMap.get(FacadeClass);
-			if (instances) instances.push(feature);
-			else this.featureFacadesMap.set(FacadeClass, [feature]);
-		}
-		if (!this.featureMap.has("RteBase")) throw new Error("RteBase feature is required");
-		if (this.featureMap.has("RteLinkFeature") && !this.featureMap.has("RteToolbarFeature")) throw new Error("RteToolbarFeature is required for RteLinkFeature");
-		this.textblockAttrs = new TextblockAttrs(sortedContributions(this.features.flatMap((f) => f.getTextblockAttrs())));
-		this.textblockMarks = new TextblockMarks(sortedContributions(this.features.flatMap((f) => f.getTextblockMarks())));
-		const schemaContributions = sortedContributions(this.features.flatMap((f) => f.getSchema(this.textblockAttrs, this.textblockMarks)));
-		const schemaSpec = {
-			nodes: {},
-			marks: {}
-		};
-		for (const schema of schemaContributions) {
-			Object.assign(schemaSpec.nodes, schema.nodes ?? {});
-			Object.assign(schemaSpec.marks, schema.marks ?? {});
-		}
-		for (const referencedNodeName of this.textblockMarks.getReferencedNodeNames()) if (!(referencedNodeName in schemaSpec.nodes)) throw new Error(`Unknown node "${referencedNodeName}"`);
-		this.schema = new Schema(schemaSpec);
+	getToolbarItems() {
+		if (!this.config.showToolbarButtons) return [];
+		return [this.contribution({
+			section: "history",
+			render: (ctx) => createButton(ctx, {
+				label: (ctx) => ctx.rte.getLocale().richTextEditor.undo,
+				icon: "undo-line",
+				disabled: (ctx) => !undo(ctx.view.state),
+				onClick: () => {
+					const { state, dispatch } = ctx.view;
+					undo(state, dispatch);
+				}
+			})
+		}, 1), this.contribution({
+			section: "history",
+			render: (ctx) => createButton(ctx, {
+				label: (ctx) => ctx.rte.getLocale().richTextEditor.redo,
+				icon: "redo-line",
+				disabled: (ctx) => !redo(ctx.view.state),
+				onClick: () => {
+					const { state, dispatch } = ctx.view;
+					redo(state, dispatch);
+				}
+			})
+		}, 2)];
 	}
 };
 //#endregion
@@ -1341,6 +1345,7 @@ var RteBaseImpl = class extends RteFeatureImpl {
 		return [
 			this,
 			new RteCoreImpl(),
+			new RteHistoryFeatureImpl({ showToolbarButtons: this.config?.historyToolbarButtons ?? true }),
 			new RteBasicTextBlocksImpl({
 				heading1: this.config?.heading1 ?? false,
 				heading2: this.config?.heading2 ?? false,
@@ -1421,12 +1426,28 @@ var RteToolbarFeatureImpl = class extends RteFeatureImpl {
 		for (const toolbarItem of sortedContributions(rte.features.flatMap((f) => f.getToolbarItems(rte)))) itemsBySection.get(toolbarItem.section).push(toolbarItem);
 		const core = rte.getFeature("RteCore");
 		return [this.contribution(this.hidden.plugin), this.contribution(new Plugin({ view: (view) => {
+			let focusCameFromEditorWithMouse = false;
 			const ctx = new UiCtx(view, rte, {
 				popupPlacement: this.config?.popupDirection === "outward" ? "bottom" : "top",
 				menuOffset: 8,
-				disabled: () => core.disabled.getValue(rte)
+				disabled: () => core.disabled.getValue(rte),
+				shouldReturnFocusToEditor: () => focusCameFromEditorWithMouse
 			});
 			const toolbar = view.dom.getRootNode().querySelector(".toolbar");
+			let mouseDownTime = -Infinity;
+			const onMouseDown = () => {
+				if (view.hasFocus()) focusCameFromEditorWithMouse = true;
+				mouseDownTime = Date.now();
+			};
+			const onFocusIn = () => {
+				if (Date.now() - mouseDownTime > 250) focusCameFromEditorWithMouse = false;
+			};
+			const onFocusOut = (e) => {
+				if (!toolbar.contains(e.relatedTarget)) focusCameFromEditorWithMouse = false;
+			};
+			toolbar.addEventListener("mousedown", onMouseDown, { capture: true });
+			toolbar.addEventListener("focusin", onFocusIn);
+			toolbar.addEventListener("focusout", onFocusOut);
 			ctx.bindProp(() => this.hidden.getValue(rte), (hidden) => {
 				toolbar.classList.toggle("toolbar--hidden", hidden);
 			});
@@ -1448,6 +1469,10 @@ var RteToolbarFeatureImpl = class extends RteFeatureImpl {
 				},
 				destroy() {
 					toolbar.innerHTML = "";
+					toolbar.removeEventListener("mousedown", onMouseDown, { capture: true });
+					toolbar.removeEventListener("focusin", onFocusIn);
+					toolbar.removeEventListener("focusout", onFocusOut);
+					focusCameFromEditorWithMouse = false;
 				}
 			};
 		} }))];
@@ -2400,7 +2425,10 @@ var RteLinkFeatureImpl = class extends RteFeatureImpl {
 				return null;
 			} },
 			view: (view) => {
-				const ctx = new UiCtx(view, rte, { popupPlacement: "bottom" });
+				const ctx = new UiCtx(view, rte, {
+					popupPlacement: "bottom",
+					shouldReturnFocusToEditor: true
+				});
 				popup = rte.createComponent(Popover);
 				popup.anchorId = "current-link";
 				const content = createDiv(ctx, {
@@ -2525,6 +2553,7 @@ var RteLinkFeatureImpl = class extends RteFeatureImpl {
 					onClick: () => {
 						const { state, dispatch } = ctx.view;
 						this.insertLink(rte, urlField.value, textField.value)(state, dispatch);
+						this.toolbarMenu.open = false;
 					}
 				});
 				const updateValidation = () => {
@@ -2775,7 +2804,10 @@ var RteInlineImageFeatureImpl = class extends RteFeatureImpl {
 		return [this.contribution(new Plugin({
 			props: { nodeViews: { inlineImage: (node, view, getPos) => new InlineImageView(node, view, getPos, this.config) } },
 			view: (view) => {
-				const ctx = new UiCtx(view, rte, { popupPlacement: "bottom" });
+				const ctx = new UiCtx(view, rte, {
+					popupPlacement: "bottom",
+					shouldReturnFocusToEditor: true
+				});
 				popover = rte.createComponent(Popover);
 				popover.offset = 4;
 				const content = createDiv(ctx, {
@@ -3193,7 +3225,6 @@ var RteInputRuleFeature = featureFacade(RteInputRuleFeatureImpl);
 //#endregion
 //#region src/lib/rich-text-editor/rte/features/keyboard-shortcuts.ts
 function toCommand(handler, rteInstance) {
-	if (handler.length === 0) return (_state, _dispatch) => handler();
 	return (_state, _dispatch) => handler(rteInstance);
 }
 var RteKeyboardShortcutsFeatureImpl = class extends RteFeatureImpl {
@@ -3356,7 +3387,10 @@ var RteSuggestFeatureImpl = class extends RteFeatureImpl {
 				return suggestState.loadingDecoration.add(state.doc, [Decoration.inline(suggestState.match.start, suggestState.match.end, { id: `suggest-anchor-${this.featureId}` })]);
 			} },
 			view: (view) => {
-				const ctx = new UiCtx(view, rte, { popupPlacement: "bottom" });
+				const ctx = new UiCtx(view, rte, {
+					popupPlacement: "bottom",
+					shouldReturnFocusToEditor: true
+				});
 				const popover = rte.createComponent(Popover);
 				popover.anchorId = `suggest-anchor-${this.featureId}`;
 				popover.kind = "autocomplete";