@vonage/vivid 5.23.1 → 5.25.0

package/unbundled/definition62.cjs

@@ -1,141 +1,3800 @@
-require("./chunk.cjs");
+const require_chunk = require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_decorate = require("./decorate.cjs");
+const require_definition = require("./definition5.cjs");
+const require_localized = require("./localized.cjs");
+const require_definition$1 = require("./definition6.cjs");
+const require_definition$2 = require("./definition9.cjs");
+const require_definition$3 = require("./definition11.cjs");
+const require_definition$4 = require("./definition12.cjs");
+const require_divider = require("./divider.cjs");
+const require_randomId = require("./randomId.cjs");
+const require_definition$5 = require("./definition26.cjs");
+const require_definition$6 = require("./definition27.cjs");
+const require_option = require("./option.cjs");
+const require_definition$7 = require("./definition29.cjs");
+const require_definition$8 = require("./definition36.cjs");
 const require_slottable_request = require("./slottable-request.cjs");
+const require_definition$9 = require("./definition63.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let prosemirror_model = require("prosemirror-model");
-//#region src/lib/rich-text-view/rich-text-view.scss?inline
-var rich_text_view_default = ":host{display:contents}.content{overflow-wrap:break-word;white-space:break-spaces;display:contents}";
+let prosemirror_state = require("prosemirror-state");
+let prosemirror_view = require("prosemirror-view");
+let prosemirror_keymap = require("prosemirror-keymap");
+let prosemirror_commands = require("prosemirror-commands");
+let prosemirror_dropcursor = require("prosemirror-dropcursor");
+let prosemirror_gapcursor = require("prosemirror-gapcursor");
+let dompurify = require("dompurify");
+dompurify = require_chunk.__toESM(dompurify, 1);
+let prosemirror_history = require("prosemirror-history");
+let prosemirror_inputrules = require("prosemirror-inputrules");
+let prosemirror_transform = require("prosemirror-transform");
+let prosemirror_schema_basic = require("prosemirror-schema-basic");
+//#region src/lib/rich-text-editor/rich-text-editor.scss?inline
+var rich_text_editor_default = ":host{display:block}.rte{--editor-padding-inline:var(--rich-text-editor-padding-inline,16px);--editor-padding-block:var(--rich-text-editor-padding-block,8px);block-size:100%;max-block-size:inherit;min-block-size:inherit;flex-direction:column;display:flex}.editor{display:contents}.editor-viewport{contain:layout;flex-direction:column;flex:1;min-block-size:0;display:flex;position:relative;overflow:hidden}.editor-scroll-area{background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin;flex-direction:column;flex:1;min-block-size:0;display:flex;overflow-y:auto}.editor-scroll-area ::-webkit-scrollbar{width:4px}.editor-scroll-area ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.editor-scroll-area ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.popovers--disabled>*{display:none!important}";
 //#endregion
-//#region src/lib/rich-text-view/rich-text-view.ts
+//#region src/lib/rich-text-editor/rich-text-editor.ts
 /**
 * @public
-* @component rich-text-view
-* @dynamicSlot `@vonage/vivid#RteChildSlotProps` child - Used for custom rendered children.
+* @component rich-text-editor
+* @slot editor-before - Displayed before the scrollable editor area.
+* @slot editor-start - Displayed at the start of the scrollable editor area.
+* @slot editor-end - Displayed at the end of the scrollable editor area.
+* @slot editor-after - Displayed after the scrollable editor area.
+* @slot status - Displayed between the editor viewport and the toolbar.
+* @slot text-color-picker - Color picker for the RteTextColorFeature.
+* @dynamicSlot `{ url: string }` inline-image-placeholder - Placeholder content for inline images.
+* @dynamicSlot `{ id: string }` suggestions-empty - Empty state if no suggestions are found.
 */
-var RichTextView = class extends require_vivid_element.VividElement {
+var RichTextEditor = class extends require_localized.WithObservableLocale(require_vivid_element.VividElement) {
+	/** @internal */
+	instanceChanged(prevInstance) {
+		prevInstance?.[require_slottable_request.impl].destroyViewIfNeeded();
+		this._initViewIfNeeded();
+		prevInstance?.[require_slottable_request.impl].styles.removeStylesFrom(this.shadowRoot);
+		this.instance?.[require_slottable_request.impl].styles.addStylesTo(this.shadowRoot);
+	}
+	_initViewIfNeeded() {
+		const instance = this.instance?.[require_slottable_request.impl];
+		if (instance && this.$fastController.isConnected && !instance.view) {
+			this._syncStateIfNeeded();
+			instance.createView(this._editorEl);
+		}
+	}
+	_destroyViewIfNeeded() {
+		this.instance?.[require_slottable_request.impl].destroyViewIfNeeded();
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this._initViewIfNeeded();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._destroyViewIfNeeded();
+	}
+	/** @internal */
+	localeChanged() {
+		this._syncStateIfNeeded();
+	}
+	_syncStateIfNeeded() {
+		this.instance?.[require_slottable_request.impl].updateHostState({
+			locale: this.locale,
+			ctx: this._ctx
+		});
+	}
+};
+require_decorate.__decorate([_microsoft_fast_element.observable], RichTextEditor.prototype, "instance", void 0);
+//#endregion
+//#region src/lib/rich-text-editor/rich-text-editor.template.ts
+var RichTextEditorTemplate = (ctx) => {
+	return _microsoft_fast_element.html`<template :_ctx="${() => ctx}">
+		<div class="rte">
+			<slot name="editor-before"></slot>
+			<div class="editor-viewport" ${(0, _microsoft_fast_element.ref)("editorViewportElement")}>
+				<div class="editor-scroll-area" part="editor-scrollable-area">
+					<slot name="editor-start"></slot>
+					<div class="editor rich-text" ${(0, _microsoft_fast_element.ref)("_editorEl")}></div>
+					<div class="popovers"></div>
+					<slot name="editor-end"></slot>
+				</div>
+			</div>
+			<slot name="editor-after"></slot>
+			<slot name="status"></slot>
+			<div class="toolbar"></div>
+		</div>
+	</template>`;
+};
+//#endregion
+//#region src/lib/rich-text-editor/popover.ts
+var Kind = {
+	default: {
+		placement: void 0,
+		placementStrategy: require_definition$2.PlacementStrategy.AutoPlacementHorizontal,
+		shiftCrossAxis: false,
+		strategy: "absolute"
+	},
+	autocomplete: {
+		placement: "bottom-start",
+		placementStrategy: require_definition$2.PlacementStrategy.Flip,
+		shiftCrossAxis: false,
+		strategy: "fixed"
+	},
+	imageOptions: {
+		placement: "bottom",
+		placementStrategy: require_definition$2.PlacementStrategy.Flip,
+		shiftCrossAxis: true,
+		strategy: "absolute"
+	}
+};
+var popoverTemplate = (context) => {
+	const popup = context.tagFor(require_definition$2.Popup);
+	return _microsoft_fast_element.html`<${popup}
+		:anchor="${(x) => x.anchorEl}"
+		:placement="${(x) => Kind[x.kind].placement}"
+		:placementStrategy="${(x) => Kind[x.kind].placementStrategy}"
+		:shiftCrossAxis="${(x) => Kind[x.kind].shiftCrossAxis}"
+		:open="${(x) => x.open}"
+		:offset="${(x) => x.offset}"
+		:strategy="${(x) => Kind[x.kind].strategy}"
+		exportparts="vvd-theme-alternate"
+	>
+		<slot></slot>
+	</${popup}>`;
+};
+var Popover = class extends require_vivid_element.VividElement {
 	constructor(..._args) {
 		super(..._args);
-		this._slotCounter = 0;
-		this._slottedChildren = /* @__PURE__ */ new Set();
-		this._slotRequests = /* @__PURE__ */ new Set();
-		this._contentElement = null;
+		this.kind = "default";
+		this.anchorBlocksPopover = false;
+		this.onAnchorBlockPopoverChanged = () => {
+			this.anchorBlocksPopover = this.anchorEl?.dataset.blockPopover === "true" || false;
+		};
+		this.requestedOpenState = false;
 	}
-	/** @internal */
-	viewChanged(oldView, newView) {
-		if (oldView) this._removeStyles();
-		if (newView) this._addStyles(newView);
-		this._updateView();
-	}
-	_addStyles(view) {
-		const config = view[require_slottable_request.impl].config[require_slottable_request.impl];
-		this._styles = new _microsoft_fast_element.ElementStyles(require_slottable_request.sortedContributions(config.features.flatMap((f) => f.getStyles())));
-		this._styles.addStylesTo(this.shadowRoot);
-	}
-	_removeStyles() {
-		if (this._styles) {
-			this._styles.removeStylesFrom(this.shadowRoot);
-			this._styles = void 0;
-		}
-	}
-	_cleanupLightDom() {
-		for (const el of this._slottedChildren) this.removeChild(el);
-		for (const slotName of this._slotRequests) require_slottable_request.dispatchSlottableRequest(this, "child", slotName, require_slottable_request.removeSymbol);
-		this._slottedChildren.clear();
-		this._slotRequests.clear();
-		this._slotCounter = 0;
-	}
-	_updateView() {
-		if (!this._contentElement) return;
-		this._contentElement.innerHTML = "";
-		this._cleanupLightDom();
-		if (this.view) this._contentElement.appendChild(this._renderView(this.view));
-	}
-	_renderView(rteView) {
-		const ctx = rteView[require_slottable_request.impl];
-		if (rteView.type === "node" && rteView.node.type === "doc") rteView = rteView.children;
-		if (rteView.type === "fragment") {
-			const frag = document.createDocumentFragment();
-			for (const child of rteView.content) frag.appendChild(this._renderView(child));
-			return frag;
-		}
-		const customRenderedView = ctx.options.renderChildView?.(rteView) ?? false;
-		if (customRenderedView) return this._handleCustomRender(rteView, customRenderedView);
-		else return this._renderDefault(rteView);
-	}
-	_handleCustomRender(rteView, customResult) {
-		const slotName = `child-view-${this._slotCounter++}`;
-		const slot = document.createElement("slot");
-		slot.setAttribute("name", slotName);
-		if (customResult === true) {
-			this._slotRequests.add(slotName);
-			require_slottable_request.dispatchSlottableRequest(this, "child", slotName, { view: rteView });
-		} else {
-			const { dom, contentDom = dom } = customResult;
-			const nestedView = document.createElement(this.tagName);
-			nestedView.view = rteView.children;
-			contentDom.appendChild(nestedView);
-			dom.setAttribute("slot", slotName);
-			this.appendChild(dom);
-			this._slottedChildren.add(dom);
-		}
-		return slot;
-	}
-	_renderDefault(view) {
-		const schema = view[require_slottable_request.impl].config[require_slottable_request.impl].schema;
-		if (view.type === "node" && view.node.type === "text") return document.createTextNode(view.node.text);
-		const item = view.type === "node" ? view.node : view.mark;
-		const pmItem = view.type === "node" ? prosemirror_model.Node.fromJSON(schema, item) : prosemirror_model.Mark.fromJSON(schema, item);
-		const spec = pmItem instanceof prosemirror_model.Node ? pmItem.type.spec.toDOM(pmItem) : pmItem.type.spec.toDOM(pmItem, true);
-		const { dom, contentDOM = dom } = prosemirror_model.DOMSerializer.renderSpec(document, spec);
-		const childrenRendered = this._renderView(view.children);
-		contentDOM.appendChild(childrenRendered);
-		return dom;
+	static setBlockPopover(onElement, block) {
+		onElement.dataset.blockPopover = block ? "true" : "false";
+		const event = new CustomEvent("block-popover-changed", {
+			bubbles: false,
+			composed: false
+		});
+		onElement.dispatchEvent(event);
 	}
-	/** @internal */
+	/** Closes the popover. It reopens when anchorEl changes to a new element that does not block it. */
+	dismiss() {
+		this.anchorBlocksPopover = true;
+	}
+	anchorElChanged(prev, next) {
+		prev?.removeEventListener("block-popover-changed", this.onAnchorBlockPopoverChanged);
+		next?.addEventListener("block-popover-changed", this.onAnchorBlockPopoverChanged);
+		this.onAnchorBlockPopoverChanged();
+	}
+	anchorIdChanged() {
+		this.updateAnchor();
+	}
+	updateAnchor() {
+		if (this.anchorId && this.isConnected) this.anchorEl = this.getRootNode().getElementById(this.anchorId) || void 0;
+		else this.anchorEl = void 0;
+	}
+	requestOpenState(open) {
+		this.requestedOpenState = open;
+	}
+	get open() {
+		return this.requestedOpenState && !!this.anchorEl && !this.anchorBlocksPopover;
+	}
+	#observer;
 	connectedCallback() {
 		super.connectedCallback();
-		this._updateView();
+		this.updateAnchor();
+		this.#observer = new MutationObserver((records) => {
+			if (records.some((r) => Array.from(r.addedNodes).some((n) => n instanceof HTMLElement && n.id === this.anchorId))) this.updateAnchor();
+		});
+		this.#observer.observe(this.getRootNode(), {
+			childList: true,
+			subtree: true
+		});
 	}
-	/** @internal */
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		this._removeStyles();
-		this._cleanupLightDom();
+		this.#observer.disconnect();
 	}
 };
-require_decorate.__decorate([_microsoft_fast_element.observable], RichTextView.prototype, "view", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Popover.prototype, "kind", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Popover.prototype, "offset", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Popover.prototype, "anchorBlocksPopover", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Popover.prototype, "anchorEl", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Popover.prototype, "anchorId", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Popover.prototype, "requestedOpenState", void 0);
+require_decorate.__decorate([_microsoft_fast_element.volatile], Popover.prototype, "open", null);
+var popoverDefinition = require_vivid_element.defineVividComponent("rich-text-editor-popover", Popover, popoverTemplate, [require_definition$2.popupDefinition], {});
 //#endregion
-//#region src/lib/rich-text-view/rich-text-view.template.ts
-var RichTextViewTemplate = () => _microsoft_fast_element.html`<div class="content rich-text" ${(0, _microsoft_fast_element.ref)("_contentElement")}></div>`;
+//#region ../../node_modules/.pnpm/prosemirror-view@1.41.8/node_modules/prosemirror-view/style/prosemirror.css?inline
+var prosemirror_default = ".ProseMirror{word-wrap:break-word;white-space:pre-wrap;white-space:break-spaces;-webkit-font-variant-ligatures:none;font-variant-ligatures:none;font-feature-settings:\"liga\" 0;position:relative}.ProseMirror pre{white-space:pre-wrap}.ProseMirror li{position:relative}.ProseMirror-hideselection ::selection{background:0 0}.ProseMirror-hideselection ::selection{background:0 0}.ProseMirror-hideselection{caret-color:#0000}.ProseMirror [draggable][contenteditable=false]{user-select:text}.ProseMirror-selectednode{outline:2px solid #8cf}li.ProseMirror-selectednode{outline:none}li.ProseMirror-selectednode:after{content:\"\";pointer-events:none;border:2px solid #8cf;position:absolute;inset:-2px -2px -2px -32px}img.ProseMirror-separator{border:none!important;margin:0!important;display:inline!important}";
 //#endregion
-//#region src/lib/rich-text-view/definition.ts
-var richTextViewDefinition = require_vivid_element.defineVividComponent("rich-text-view", RichTextView, RichTextViewTemplate, [], {
-	styles: rich_text_view_default,
-	shadowOptions: { delegatesFocus: true }
+//#region src/lib/rich-text-editor/rte/utils/default-textblock.ts
+function defaultTextblockForMatch(match) {
+	for (let i = 0; i < match.edgeCount; i++) {
+		const { type } = match.edge(i);
+		/* v8 ignore if -- @preserve It's currently not possible to exercise this code in our RTE */
+		if (type.isTextblock && !type.hasRequiredAttrs()) return type;
+	}
+}
+//#endregion
+//#region src/lib/rich-text-editor/rte/utils/ui.style.scss?inline
+var ui_style_default = "[data-class=ui-select]{min-inline-size:120px;margin-block:-4px}.ui-divider{block-size:20px}.ui-button-group{gap:4px;display:flex}.ui-tooltip,.ui-menu{--_popup-display:contents;display:contents}.ui-tooltip-wrapper{display:contents}";
+//#endregion
+//#region src/lib/rich-text-editor/rte/utils/feature-state.ts
+var FeatureState = class {
+	constructor(initialValue) {
+		this.plugin = new prosemirror_state.Plugin({ state: {
+			init: () => initialValue,
+			apply: (tr, value) => {
+				const meta = tr.getMeta(this.plugin);
+				return meta !== void 0 ? meta : value;
+			}
+		} });
+	}
+	getValue(rte) {
+		return this.plugin.getState(rte.state);
+	}
+	setValue(rte, newValue) {
+		rte.dispatchTransaction(rte.tr.setMeta(this.plugin, newValue));
+	}
+};
+//#endregion
+//#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/features/internal/foreign-html.ts
+var RteForeignHtmlFeatureImpl = class extends require_slottable_request.RteFeatureImpl {
+	constructor(..._args) {
+		super(..._args);
+		this.name = "RteForeignHtmlFeature";
+	}
+	getPlugins(rte) {
+		return [this.contribution(new prosemirror_state.Plugin({ props: {
+			transformPastedHTML: (html) => rte.foreignHtmlParser[require_slottable_request.impl].transform(html),
+			clipboardParser: rte.foreignHtmlParser[require_slottable_request.impl].parser,
+			clipboardSerializer: rte.foreignHtmlSerializer[require_slottable_request.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;
+};
+/**
+* When the cursor is positioned directly before an inline atom node (e.g. an image)
+* that wraps to the next line, browsers may display the cursor on the next line even
+* though typing inserts text on the previous line. A ZWSP between cursor and atom will be
+* layouted to the previous line and therefore fix the cursor position.
+*/
+var beforeAtomCursorFix = ($cursor) => {
+	const nodeAfter = $cursor.nodeAfter;
+	if (nodeAfter && nodeAfter.isInline && nodeAfter.isAtom && !nodeAfter.isText) return { afterCursor: true };
+	return null;
+};
+function createZwspWidget(style) {
+	const span = document.createElement("span");
+	span.textContent = "​";
+	for (const [prop, value] of Object.entries(style)) span.style.setProperty(prop, value);
+	return span;
+}
+var RteCursorFixFeatureImpl = class extends require_slottable_request.RteFeatureImpl {
+	constructor(..._args) {
+		super(..._args);
+		this.name = "RteCursorFix";
+	}
+	getPlugins(rte) {
+		const cursorFixes = [atomCursorFix, beforeAtomCursorFix];
+		for (const markType of Object.values(rte.schema.marks)) {
+			const spec = markType.spec;
+			if (spec.cursorFix) cursorFixes.push(spec.cursorFix);
+		}
+		return [this.contribution(new prosemirror_state.Plugin({ props: { decorations: (state) => {
+			const { $cursor } = state.selection;
+			if (!$cursor) return null;
+			const decorations = [];
+			const cursorFixStyles = {};
+			let before = false;
+			let after = false;
+			for (const fn of cursorFixes) {
+				const result = fn($cursor, state);
+				if (!result) continue;
+				if (result.style) Object.assign(cursorFixStyles, result.style);
+				if (result.afterCursor) after = true;
+				else before = true;
+			}
+			if (before) decorations.push(prosemirror_view.Decoration.widget($cursor.pos, () => createZwspWidget(cursorFixStyles), { side: -1 }));
+			if (after) decorations.push(prosemirror_view.Decoration.widget($cursor.pos, () => createZwspWidget(cursorFixStyles), { side: 1 }));
+			if (decorations.length === 0) return null;
+			return prosemirror_view.DecorationSet.create(state.doc, decorations);
+		} } }))];
+	}
+};
+require_slottable_request.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 prosemirror_state.Plugin({ state: {
+	init() {
+		return null;
+	},
+	apply(tr, value) {
+		const meta = tr.getMeta(hostBridgePlugin);
+		if (meta) return meta;
+		else return value;
+	}
+} });
+var RteCoreImpl = class extends require_slottable_request.RteFeatureImpl {
+	constructor(..._args) {
+		super(..._args);
+		this.name = "RteCore";
+		this.disabled = new FeatureState(false);
+		this.scrollThreshold = void 0;
+		this.scrollMargin = void 0;
+	}
+	getStyles() {
+		return [
+			this.contribution(prosemirror_default),
+			this.contribution(core_style_default),
+			this.contribution(ui_style_default)
+		];
+	}
+	getPlugins(rte) {
+		const splitFn = (0, prosemirror_commands.splitBlockAs)((node, atEnd, $from) => {
+			if (!atEnd) return {
+				type: node.type,
+				attrs: node.attrs
+			};
+			const defaultTextblock = defaultTextblockForMatch($from.node($from.depth - 1).contentMatchAt($from.indexAfter($from.depth - 1)));
+			if (!defaultTextblock) return null;
+			return {
+				type: defaultTextblock,
+				attrs: rte.textblockAttrs.extractFromNode(node)
+			};
+		});
+		const splitFnKeepMarks = (state, dispatch) => splitFn(state, dispatch && ((tr) => {
+			const marks = state.storedMarks || state.selection.$to.parentOffset && state.selection.$from.marks();
+			if (marks) tr.ensureMarks(marks);
+			dispatch(tr);
+		}));
+		const enterKeyChainCommands = (0, prosemirror_commands.chainCommands)(prosemirror_commands.newlineInCode, prosemirror_commands.createParagraphNear, prosemirror_commands.liftEmptyBlock, splitFnKeepMarks);
+		return [
+			this.contribution(this.disabled.plugin),
+			this.contribution(new prosemirror_state.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((0, prosemirror_keymap.keymap)({
+				...prosemirror_commands.baseKeymap,
+				Enter: enterKeyChainCommands,
+				"Shift-Enter": enterKeyChainCommands
+			})),
+			this.contribution((0, prosemirror_dropcursor.dropCursor)()),
+			this.contribution((0, prosemirror_gapcursor.gapCursor)()),
+			this.contribution(hostBridgePlugin)
+		];
+	}
+	getFeatures() {
+		return [
+			this,
+			new RteForeignHtmlFeatureImpl(),
+			new RteCursorFixFeatureImpl()
+		];
+	}
+};
+require_slottable_request.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.default.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.default.sanitize(img, {
+		RETURN_DOM: true,
+		...domPurifyConfig
+	}).querySelector("img").getAttribute("src") ?? "";
+};
+/**
+* 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 {
+	constructor(config, options) {
+		this[require_slottable_request.impl] = new RteHtmlParserImpl(config[require_slottable_request.impl], options);
+	}
+	/** Converts an HTML string to an RteDocument. */
+	parseDocument(html, options) {
+		return this[require_slottable_request.impl].parser.parse(this.parseHtml(html, options), { preserveWhitespace: true }).toJSON();
+	}
+	/** Converts an HTML string to an RteFragment. */
+	parseFragment(html, options) {
+		return this[require_slottable_request.impl].parser.parseSlice(this.parseHtml(html, options), { preserveWhitespace: true }).content.toJSON() ?? [];
+	}
+	parseHtml(html, options) {
+		const dom = dompurify.default.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);
+	}
+	/** Used by the editor when foreign HTML is pasted or dropped */
+	transform(html) {
+		return dompurify.default.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 prosemirror_model.DOMParser(schema, parserRules);
+};
+//#endregion
+//#region src/lib/rich-text-editor/rte/html-serializer.ts
+var RteHtmlSerializer = class {
+	constructor(config, options) {
+		this[require_slottable_request.impl] = new RteHtmlSerializerImpl(config[require_slottable_request.impl], options);
+	}
+	/** Converts an RteDocument to an HTML string. */
+	serializeDocument(doc, options) {
+		return this[require_slottable_request.impl].serializeFragment(doc.content, options);
+	}
+	/** Converts an RteFragment to an HTML string. */
+	serializeFragment(fragment, options) {
+		return this[require_slottable_request.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 prosemirror_model.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 = prosemirror_model.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 ? prosemirror_model.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[require_slottable_request.impl].getPublicInterface(Feature, featureId);
+		};
+		this[require_slottable_request.impl] = new RteInstanceImpl(this, config, options);
+	}
+	/** Returns the current document state. */
+	getDocument() {
+		return this[require_slottable_request.impl].state.doc.toJSON();
+	}
+	/** Reset the editor to its initial state. Optionally, an initial document can be provided. */
+	reset(initialDocument) {
+		this[require_slottable_request.impl].reset(initialDocument);
+	}
+	/**
+	* Replaces the current selection with the given content.
+	* If no text is selected, this inserts the content at the cursor position.
+	*/
+	replaceSelection(content, options) {
+		const { state, tr, schema, dispatchTransaction } = this[require_slottable_request.impl];
+		tr.replaceSelection(new prosemirror_model.Slice(prosemirror_model.Fragment.fromJSON(schema, content), 0, 0));
+		tr.doc.check();
+		const $from = tr.doc.resolve(tr.mapping.map(state.selection.from));
+		const $to = tr.doc.resolve(tr.selection.to);
+		const [$head, $anchor] = options?.cursorPlacement === "start" ? [$from, $to] : [$to, $from];
+		if (options?.selectContent) tr.setSelection(state.selection instanceof prosemirror_state.AllSelection ? new prosemirror_state.AllSelection(tr.doc) : prosemirror_state.TextSelection.between($anchor, $head));
+		else tr.setSelection(prosemirror_state.TextSelection.between($head, $head));
+		dispatchTransaction(tr);
+	}
+	/**
+	* Replaces the entire document with the given new document.
+	* Unlike reset, this preserves the rest of the editor state. The undo history is preserved, so the user can undo the replacement.
+	*/
+	replaceDocument(newDocument, options) {
+		const { state, tr, schema, dispatchTransaction } = this[require_slottable_request.impl];
+		tr.replaceWith(0, state.doc.content.size, parseDocument(schema, newDocument));
+		if (options?.selectContent) tr.setSelection(new prosemirror_state.AllSelection(tr.doc));
+		else if (options?.cursorPlacement === "end") tr.setSelection(prosemirror_state.TextSelection.atEnd(tr.doc));
+		else tr.setSelection(prosemirror_state.TextSelection.atStart(tr.doc));
+		dispatchTransaction(tr);
+	}
+	/**
+	* Scrolls the cursor into view.
+	* Has no effect if the editor is not currently mounted.
+	*/
+	scrollIntoView() {
+		const instance = this[require_slottable_request.impl];
+		if (!instance.view) return;
+		instance.dispatchTransaction(instance.tr.scrollIntoView());
+	}
+};
+var RteInstanceImpl = class {
+	getFeature(name) {
+		const f = this.config.featureMap.get(name);
+		if (!f) throw new Error(`Feature not found: ${name}`);
+		return f;
+	}
+	getPublicInterface(Feature, featureId) {
+		const instances = this.config.featureFacadesMap.get(Feature);
+		if (!instances || instances.length === 0) throw new Error(`Feature not found`);
+		if (instances[0].featureId !== void 0) {
+			if (featureId === void 0) throw new Error(`No featureId provided for multi-instance feature.`);
+			const instance = instances.find((f) => f.featureId === featureId);
+			if (!instance) throw new Error(`Feature with id "${featureId}" not found`);
+			return instance.getPublicInterface(this);
+		}
+		if (featureId !== void 0) throw new Error(`Feature does not support featureId`);
+		return instances[0].getPublicInterface(this);
+	}
+	constructor(instanceFacade, configFacade, options) {
+		this.options = options;
+		this.view = null;
+		this.dispatchTransaction = (tr) => {
+			const prevState = this.state;
+			this.state = this.state.apply(tr);
+			this.view?.updateState(this.state);
+			if (prevState.doc !== this.state.doc) this.options?.onChange?.();
+			return this.state;
+		};
+		this.facade = instanceFacade;
+		const config = configFacade[require_slottable_request.impl];
+		this.config = config;
+		this.schema = config.schema;
+		this.textblockAttrs = config.textblockAttrs;
+		this.features = config.features;
+		this.foreignHtmlParser = options?.foreignHtmlParser ?? new RteHtmlParser(configFacade);
+		this.foreignHtmlSerializer = options?.foreignHtmlSerializer ?? new RteHtmlSerializer(configFacade);
+		this.styles = new _microsoft_fast_element.ElementStyles(require_slottable_request.sortedContributions(config.features.flatMap((f) => f.getStyles())));
+		this.initState(options?.initialDocument);
+	}
+	initState(initialDoc) {
+		this.state = prosemirror_state.EditorState.create({
+			doc: parseDocument(this.schema, initialDoc),
+			schema: this.config.schema,
+			plugins: require_slottable_request.sortedContributions(this.config.features.flatMap((feature) => feature.getPlugins(this)))
+		});
+	}
+	reset(initialDocument) {
+		const currentHostState = hostBridgePlugin.getState(this.state);
+		this.initState(initialDocument);
+		this.updateHostState(currentHostState);
+		this.view?.updateState(this.state);
+	}
+	createView(target) {
+		const core = this.config.featureMap.get("RteCore");
+		this.view = new prosemirror_view.EditorView((editor) => {
+			editor.part = "editor";
+			target.appendChild(editor);
+		}, {
+			state: this.state,
+			dispatchTransaction: this.dispatchTransaction,
+			...core?.scrollThreshold !== void 0 && { scrollThreshold: core.scrollThreshold },
+			...core?.scrollMargin !== void 0 && { scrollMargin: core.scrollMargin }
+		});
+	}
+	destroyViewIfNeeded() {
+		if (this.view) {
+			this.view.destroy();
+			this.view = null;
+		}
+	}
+	createComponent(type) {
+		return document.createElement(this.hostState().ctx.tagFor(type, true));
+	}
+	getLocale() {
+		return this.hostState().locale;
+	}
+	get tr() {
+		return this.state.tr;
+	}
+	hostState() {
+		const state = hostBridgePlugin.getState(this.state);
+		if (!state) throw new Error("No host state available");
+		return state;
+	}
+	updateHostState(hostState) {
+		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-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
 /**
-* Registers the rich-text-view element with the design system.
-*
-* @param prefix - the prefix to use for the component name
+* 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 registerRichTextView = require_vivid_element.createRegisterFunction(richTextViewDefinition);
+var convertToView = (doc, ctx) => {
+	const schema = ctx.config[require_slottable_request.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,
+						[require_slottable_request.impl]: ctx
+					},
+					[require_slottable_request.impl]: ctx
+				});
+				active.push(mark);
+				activeContents.push(markContent);
+				rendered++;
+			}
+			activeContents[activeContents.length - 1].push({
+				type: "node",
+				node,
+				children: convertFragment(node.content ?? []),
+				[require_slottable_request.impl]: ctx
+			});
+		}
+		return {
+			type: "fragment",
+			content: result,
+			[require_slottable_request.impl]: ctx
+		};
+	};
+	return {
+		type: "node",
+		node: doc,
+		children: convertFragment(doc.content),
+		[require_slottable_request.impl]: ctx
+	};
+};
+//#endregion
+//#region src/lib/rich-text-editor/rte/config.ts
+var RteConfig = class {
+	constructor(features) {
+		this[require_slottable_request.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(require_slottable_request.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 = require_slottable_request.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(require_slottable_request.sortedContributions(this.features.flatMap((f) => f.getTextblockAttrs())));
+		this.textblockMarks = new TextblockMarks(require_slottable_request.sortedContributions(this.features.flatMap((f) => f.getTextblockMarks())));
+		const schemaContributions = require_slottable_request.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 prosemirror_model.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 = [];
+	}
+	/** Evaluates a prop, returning its current value. */
+	evalProp(prop) {
+		return isPropBinding(prop) ? prop(this) : prop;
+	}
+	/** On every state change, prop is re-evaluated and passed to bindFn. */
+	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);
+	}
+	/** To be called on each state update to refresh all bindings. */
+	updateBindings() {
+		for (const binding of this.bindings) binding();
+	}
+	/** Whether to return focus to the editor after a toolbar action */
+	shouldReturnFocusToEditor() {
+		return this.evalProp(this.props.shouldReturnFocusToEditor);
+	}
+	/** Utility to more conveniently bind props to elements */
+	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(require_definition$6.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(require_definition$1.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(require_definition$4.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(require_definition$3.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: () => !(0, prosemirror_commands.toggleMark)(props.markType)(ctx.view.state),
+	onClick: () => {
+		(0, prosemirror_commands.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(require_option.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(require_definition$9.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(require_divider.Divider);
+	ctx.bindToEl(divider, {
+		className: "ui-divider",
+		orientation: "vertical"
+	});
+	return divider;
+};
+var createTextField = (ctx, props) => {
+	const textField = ctx.rte.createComponent(require_definition$5.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;
+};
+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
+			});
+		}
+	}
+	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 require_slottable_request.RteFeatureImpl {
+	constructor(config) {
+		super();
+		this.config = config;
+		this.name = "RteHistoryFeature";
+	}
+	getPlugins() {
+		return [this.contribution((0, prosemirror_history.history)()), this.contribution((0, prosemirror_keymap.keymap)({
+			"Mod-z": prosemirror_history.undo,
+			"Ctrl-y": prosemirror_history.redo,
+			"Cmd-Z": prosemirror_history.redo
+		}))];
+	}
+	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) => !(0, prosemirror_history.undo)(ctx.view.state),
+				onClick: () => {
+					const { state, dispatch } = ctx.view;
+					(0, prosemirror_history.undo)(state, dispatch);
+				}
+			})
+		}, 1), this.contribution({
+			section: "history",
+			render: (ctx) => createButton(ctx, {
+				label: (ctx) => ctx.rte.getLocale().richTextEditor.redo,
+				icon: "redo-line",
+				disabled: (ctx) => !(0, prosemirror_history.redo)(ctx.view.state),
+				onClick: () => {
+					const { state, dispatch } = ctx.view;
+					(0, prosemirror_history.redo)(state, dispatch);
+				}
+			})
+		}, 2)];
+	}
+};
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/internal/basic-text-blocks.style.scss?inline
+var basic_text_blocks_style_default = "h1,h2,h3,p{all:unset;display:block}h1:first-child,h2:first-child,h3:first-child,p:first-child{margin-block-start:0}h1:last-child,h2:last-child,h3:last-child,p:last-child{margin-block-end:0}p{font:var(--vvd-typography-base);font-variant-ligatures:unset;font-feature-settings:unset;margin-block:16px;line-height:20px}.heading-step-1{font:var(--vvd-typography-heading-4);font-variant-ligatures:unset;font-feature-settings:unset;margin-block:24px 12px;line-height:28px}.heading-step-2{font:var(--vvd-typography-heading-3);font-variant-ligatures:unset;font-feature-settings:unset;margin-block:24px 12px;line-height:36px}.heading-step-3{font:var(--vvd-typography-heading-2);font-variant-ligatures:unset;font-feature-settings:unset;margin-block:32px 16px;line-height:42px}";
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/internal/basic-text-blocks.ts
+var RteBasicTextBlocksImpl = class extends require_slottable_request.RteFeatureImpl {
+	constructor(enabledBlocks) {
+		super();
+		this.enabledBlocks = enabledBlocks;
+		this.name = "RteBasicTextBlocks";
+	}
+	getStyles() {
+		return [this.contribution(basic_text_blocks_style_default)];
+	}
+	getSchema(textblockAttrs, textblockMarks) {
+		const nodes = {};
+		if (this.enabledBlocks.paragraph) nodes["paragraph"] = {
+			group: "block",
+			content: "inline*",
+			attrs: { ...textblockAttrs.attrs },
+			parseDOM: [{
+				tag: "p",
+				getAttrs: (dom) => textblockAttrs.fromDOM(dom)
+			}],
+			marks: textblockMarks.getAllowedMarksForNode("paragraph").join(" "),
+			toDOM(node) {
+				return [
+					"p",
+					{
+						part: `node--paragraph`,
+						...textblockAttrs.getDOMAttrsProperties(node)
+					},
+					0
+				];
+			},
+			serializeToDOM(node) {
+				return [
+					"p",
+					...textblockAttrs.getDOMAttrs(node),
+					0
+				];
+			}
+		};
+		let headingCount = 0;
+		for (const level of [
+			3,
+			2,
+			1
+		]) {
+			const nodeName = `heading${level}`;
+			const tag = `h${level}`;
+			if (!this.enabledBlocks[nodeName]) continue;
+			headingCount++;
+			const visualLevel = headingCount;
+			nodes[nodeName] = {
+				group: "block",
+				content: "inline*",
+				attrs: { ...textblockAttrs.attrs },
+				parseDOM: [{
+					tag,
+					getAttrs: (dom) => textblockAttrs.fromDOM(dom)
+				}],
+				marks: textblockMarks.getAllowedMarksForNode(nodeName).join(" "),
+				defining: true,
+				toDOM(node) {
+					return [
+						tag,
+						{
+							class: `heading-step-${visualLevel}`,
+							part: `node--${nodeName}`,
+							...textblockAttrs.getDOMAttrsProperties(node)
+						},
+						0
+					];
+				},
+				serializeToDOM(node) {
+					return [
+						tag,
+						...textblockAttrs.getDOMAttrs(node),
+						0
+					];
+				}
+			};
+		}
+		return [this.contribution({ nodes })];
+	}
+	getPlugins(rte) {
+		const keyBindings = {};
+		if (this.enabledBlocks.paragraph) keyBindings["Mod-Alt-0"] = this.setBlockType(rte, "paragraph");
+		for (const level of [
+			1,
+			2,
+			3
+		]) {
+			const nodeName = `heading${level}`;
+			if (this.enabledBlocks[nodeName]) keyBindings[`Mod-Alt-${level}`] = this.setBlockType(rte, nodeName);
+		}
+		return [this.contribution((0, prosemirror_keymap.keymap)(keyBindings))];
+	}
+	getCurrentBlockType(state) {
+		const { $from, $to } = state.selection;
+		const fromTopBlock = $from.depth === 0 ? state.doc.childAfter($from.pos).node : $from.node(1);
+		if (fromTopBlock !== ($to.depth === 0 ? state.doc.childBefore($to.pos).node : $to.node(1))) return null;
+		if (!(fromTopBlock.type.name in this.enabledBlocks)) return null;
+		return fromTopBlock.type.name;
+	}
+	setBlockType(rte, name) {
+		return (state, dispatch) => {
+			const { from, to } = state.selection;
+			const tr = state.tr;
+			let supportedNodeFound = false;
+			state.doc.nodesBetween(from, to, (node, pos) => {
+				if (node.type.name in this.enabledBlocks) {
+					supportedNodeFound = true;
+					tr.setBlockType(pos, pos + node.nodeSize, state.schema.nodes[name], (oldNode) => rte.textblockAttrs.extractFromNode(oldNode));
+				}
+				return false;
+			});
+			if (!supportedNodeFound) return false;
+			dispatch?.(tr);
+			return true;
+		};
+	}
+};
+//#endregion
+//#region src/lib/rich-text-editor/rte/utils/text-before-cursor.ts
+/** Get the text content before the cursor position in the current text block. */
+var textBeforeCursor = ($cursor) => $cursor.parent.textBetween(0, $cursor.parentOffset, void 0, "");
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/internal/input-rules.ts
+/** Aggregates all input rules from other features. */
+var RteInputRulesFeatureImpl = class extends require_slottable_request.RteFeatureImpl {
+	constructor(..._args) {
+		super(..._args);
+		this.name = "RteInputRulesFeature";
+	}
+	getPlugins(rte) {
+		const ruleSpecs = require_slottable_request.sortedContributions(rte.config.features.flatMap((f) => f.getInputRules(rte)));
+		if (ruleSpecs.length === 0) return [];
+		const plugins = [];
+		const rules = ruleSpecs.map((spec) => spec.rule);
+		plugins.push(this.contribution((0, prosemirror_inputrules.inputRules)({ rules })));
+		plugins.push(this.contribution((0, prosemirror_keymap.keymap)({ Backspace: prosemirror_inputrules.undoInputRule }), require_slottable_request.contributionPriority.high));
+		const enterHandlers = ruleSpecs.filter((spec) => spec.enterHandler).map((spec) => spec.enterHandler);
+		if (enterHandlers.length > 0) plugins.push(this.contribution((0, prosemirror_keymap.keymap)({ Enter: (state, dispatch) => {
+			const { $cursor } = state.selection;
+			if (!$cursor) return false;
+			const textBefore = textBeforeCursor($cursor);
+			for (const { regex, handler } of enterHandlers) {
+				const match = regex.exec(textBefore);
+				if (!match) continue;
+				const matchStart = $cursor.pos - $cursor.parentOffset + match.index;
+				const tr = handler(state, match, matchStart, matchStart + match[0].length);
+				if (tr) dispatch?.(tr);
+				break;
+			}
+			return false;
+		} }), require_slottable_request.contributionPriority.highest));
+		return plugins;
+	}
+};
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/base.ts
+var RteBaseImpl = class extends require_slottable_request.RteFeatureImpl {
+	constructor(config) {
+		super();
+		this.config = config;
+		this.name = "RteBase";
+	}
+	getSchema() {
+		return [this.contribution({ nodes: {
+			doc: { content: this.config?.singleBlock ? "block" : "block+" },
+			text: { group: "inline" }
+		} })];
+	}
+	getFeatures() {
+		return [
+			this,
+			new RteCoreImpl(),
+			new RteHistoryFeatureImpl({ showToolbarButtons: this.config?.historyToolbarButtons ?? true }),
+			new RteBasicTextBlocksImpl({
+				heading1: this.config?.heading1 ?? false,
+				heading2: this.config?.heading2 ?? false,
+				heading3: this.config?.heading3 ?? false,
+				paragraph: this.config?.paragraph ?? true
+			}),
+			new RteInputRulesFeatureImpl()
+		];
+	}
+	getPublicInterface(rte) {
+		const core = rte.getFeature("RteCore");
+		return {
+			get disabled() {
+				return core.disabled.getValue(rte);
+			},
+			set disabled(value) {
+				core.disabled.setValue(rte, value);
+			},
+			get scrollThreshold() {
+				return core.scrollThreshold;
+			},
+			set scrollThreshold(value) {
+				core.scrollThreshold = value;
+				rte.view?.setProps({ scrollThreshold: value });
+			},
+			get scrollMargin() {
+				return core.scrollMargin;
+			},
+			set scrollMargin(value) {
+				core.scrollMargin = value;
+				rte.view?.setProps({ scrollMargin: value });
+			}
+		};
+	}
+};
+var RteBase = require_slottable_request.featureFacade(RteBaseImpl);
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/text-block-picker.ts
+var RteTextBlockPickerFeatureImpl = class extends require_slottable_request.RteFeatureImpl {
+	constructor(config) {
+		super();
+		this.config = config;
+		this.name = "RteTextBlockPickerFeature";
+	}
+	getToolbarItems(rte) {
+		const blocks = rte.getFeature("RteBasicTextBlocks");
+		return [this.contribution({
+			section: "font",
+			render: (ctx) => {
+				return createSelect(ctx, {
+					label: () => ctx.rte.getLocale().richTextEditor.paragraphStyles,
+					value: (ctx) => blocks.getCurrentBlockType(ctx.view.state) ?? "",
+					onSelect: (value) => {
+						const { state, dispatch } = ctx.view;
+						blocks.setBlockType(rte, value)(state, dispatch);
+					},
+					children: this.config.options.map((opt) => createOption(ctx, {
+						text: opt.label,
+						value: opt.node,
+						disabled: () => !blocks.setBlockType(rte, opt.node)(ctx.view.state)
+					}))
+				});
+			}
+		}, 1)];
+	}
+};
+var RteTextBlockPickerFeature = require_slottable_request.featureFacade(RteTextBlockPickerFeatureImpl);
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/toolbar.style.scss?inline
+var toolbar_style_default = ".toolbar{background-color:var(--vvd-color-neutral-50);flex-wrap:wrap;align-items:center;gap:8px;padding:4px;display:flex}.toolbar--hidden{display:none}";
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/toolbar.ts
+var RteToolbarFeatureImpl = class extends require_slottable_request.RteFeatureImpl {
+	constructor(config) {
+		super();
+		this.config = config;
+		this.name = "RteToolbarFeature";
+		this.hidden = new FeatureState(false);
+	}
+	getStyles() {
+		return [this.contribution(toolbar_style_default)];
+	}
+	getPlugins(rte) {
+		const sections = [
+			"history",
+			"font",
+			"text-style",
+			"textblock",
+			"insert"
+		];
+		const itemsBySection = new Map(sections.map((section) => [section, []]));
+		for (const toolbarItem of require_slottable_request.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 prosemirror_state.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),
+				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);
+			});
+			let openSection = false;
+			for (const section of sections) {
+				const items = itemsBySection.get(section);
+				if (items.length && openSection) {
+					toolbar.appendChild(createDivider(ctx));
+					openSection = false;
+				}
+				for (const toolbarItemSpec of items) {
+					toolbar.appendChild(toolbarItemSpec.render(ctx));
+					openSection = true;
+				}
+			}
+			return {
+				update() {
+					ctx.updateBindings();
+				},
+				destroy() {
+					toolbar.innerHTML = "";
+					toolbar.removeEventListener("mousedown", onMouseDown, { capture: true });
+					toolbar.removeEventListener("focusin", onFocusIn);
+					toolbar.removeEventListener("focusout", onFocusOut);
+					focusCameFromEditorWithMouse = false;
+				}
+			};
+		} }))];
+	}
+	getPublicInterface(rte) {
+		const hidden = this.hidden;
+		return {
+			get hidden() {
+				return hidden.getValue(rte);
+			},
+			set hidden(value) {
+				hidden.setValue(rte, value);
+			}
+		};
+	}
+};
+var RteToolbarFeature = require_slottable_request.featureFacade(RteToolbarFeatureImpl);
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/placeholder.style.scss?inline
+var placeholder_style_default = ".placeholder{display:contents}.placeholder:before{color:var(--vvd-color-neutral-600);content:attr(data-placeholder);font-size:var(--placeholder-font-size,inherit);inset-inline:var(--editor-padding-inline);line-height:inherit;pointer-events:none;position:absolute}.editor--disabled .placeholder:before{color:var(--vvd-color-neutral-300)}";
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/placeholder.ts
+var RtePlaceholderFeatureImpl = class extends require_slottable_request.RteFeatureImpl {
+	constructor(config) {
+		super();
+		this.config = config;
+		this.name = "RtePlaceholderFeature";
+	}
+	getStyles() {
+		return [this.contribution(placeholder_style_default)];
+	}
+	getPlugins() {
+		const placeholderPlugin = new prosemirror_state.Plugin({ props: { decorations: (state) => {
+			if (state.doc.nodeSize === 4) {
+				const storedSize = state.schema.marks.fontSize?.isInSet(state.storedMarks ?? [])?.attrs.size;
+				return prosemirror_view.DecorationSet.create(state.doc, [prosemirror_view.Decoration.widget(1, () => {
+					const placeholder = document.createElement("span");
+					placeholder.className = "placeholder";
+					placeholder.dataset.placeholder = this.config.text;
+					if (storedSize) placeholder.style.setProperty("--placeholder-font-size", storedSize);
+					return placeholder;
+				})]);
+			}
+			return null;
+		} } });
+		return [this.contribution(placeholderPlugin)];
+	}
+};
+var RtePlaceholderFeature = require_slottable_request.featureFacade(RtePlaceholderFeatureImpl);
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/hard-break.ts
+var RteHardBreakFeatureImpl = class extends require_slottable_request.RteFeatureImpl {
+	constructor(..._args) {
+		super(..._args);
+		this.name = "RteHardBreakFeature";
+	}
+	getSchema() {
+		return [this.contribution({ nodes: { hardBreak: {
+			inline: true,
+			group: "inline",
+			selectable: false,
+			parseDOM: [{ tag: "br" }],
+			toDOM() {
+				return ["br"];
+			}
+		} } })];
+	}
+	getPlugins(_rte) {
+		const forceBreak = (state, dispatch) => {
+			const marks = state.storedMarks || state.selection.$from.marks();
+			const tr = state.tr.replaceSelectionWith(state.schema.nodes.hardBreak.create(), true).scrollIntoView();
+			if (marks.length) tr.setStoredMarks(marks);
+			dispatch?.(tr);
+			return true;
+		};
+		const keyBindings = { "Shift-Enter": forceBreak };
+		return [this.contribution((0, prosemirror_keymap.keymap)(keyBindings), require_slottable_request.contributionPriority.high)];
+	}
+};
+var RteHardBreakFeature = require_slottable_request.featureFacade(RteHardBreakFeatureImpl);
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/font-size-picker.ts
+var mixedFontSize = Symbol("mixedFontSize");
+var RteFontSizePickerFeatureImpl = class extends require_slottable_request.RteFeatureImpl {
+	constructor(config) {
+		super();
+		this.config = config;
+		this.name = "RteFontSizePickerFeature";
+		this.fontSizes = config.options;
+		if (config.onBlocks) {
+			this.defaultFontSizeForNode = {};
+			for (const block of config.onBlocks) this.defaultFontSizeForNode[block.node] = block.defaultSize ?? null;
+		}
+	}
+	getTextblockMarks() {
+		if (this.config?.onBlocks) return this.config.onBlocks.map((block) => this.contribution({
+			markName: "fontSize",
+			onNodeName: block.node
+		}));
+		return [this.contribution({ markName: "fontSize" })];
+	}
+	getSchema() {
+		return [this.contribution({ marks: { fontSize: {
+			attrs: { size: { validate: "string" } },
+			parseDOM: [{
+				tag: "span[style*='font-size']",
+				getAttrs: (node) => {
+					const size = node.getAttribute("style").match(/font-size:\s*([^;]+)/)?.[1]?.trim();
+					if (size) return { size };
+					return false;
+				}
+			}],
+			toDOM: (mark) => {
+				return [
+					"span",
+					{ style: `font-size: ${escapeCssProperty(mark.attrs.size)};` },
+					0
+				];
+			},
+			cursorFix: ($cursor, state) => {
+				const storedMarks = state.storedMarks;
+				if (!storedMarks) return null;
+				const fontSizeMark = storedMarks.find((m) => m.type.name === "fontSize");
+				if (fontSizeMark) return { style: { "font-size": fontSizeMark.attrs.size } };
+				if (storedMarks.length === 0) {
+					const defaultSize = this.defaultFontSizeForNode?.[$cursor.parent.type.name];
+					if (defaultSize) return { style: { "font-size": defaultSize } };
+				}
+				return null;
+			}
+		} } })];
+	}
+	getPlugins() {
+		return [this.contribution((0, prosemirror_keymap.keymap)({
+			"Mod-Shift-.": this.adjustFontSize(-1),
+			"Mod-Shift-,": this.adjustFontSize(1)
+		}))];
+	}
+	getToolbarItems(rte) {
+		return [this.contribution({
+			section: "font",
+			render: (ctx) => createMenu(ctx, {
+				label: () => rte.getLocale().richTextEditor.textSize,
+				trigger: createButton(ctx, {
+					label: () => rte.getLocale().richTextEditor.textSize,
+					icon: "text-size-line"
+				}),
+				children: this.fontSizes.map((fs) => createMenuItem(ctx, {
+					text: fs.label,
+					checked: () => this.getFontSizeFromSelection(ctx.view.state) === fs.size,
+					disabled: () => !this.setFontSize(fs.size)(ctx.view.state),
+					onSelect: () => {
+						const { state, dispatch } = ctx.view;
+						this.setFontSize(fs.size)(state, dispatch);
+					}
+				}))
+			})
+		}, 2)];
+	}
+	getFontSizeFromSelection(state) {
+		const { from, to, $from, empty } = state.selection;
+		const { fontSize } = state.schema.marks;
+		if (empty) {
+			const defaultSize = this.defaultFontSizeForNode?.[$from.parent.type.name] ?? null;
+			return fontSize.isInSet(state.storedMarks || $from.marks())?.attrs.size ?? defaultSize;
+		}
+		let size = null;
+		const observeSize = (observedSize) => {
+			if (size === null) size = observedSize ?? null;
+			else if (observedSize !== size) size = mixedFontSize;
+		};
+		state.doc.nodesBetween(from, to, (node, _, parent) => {
+			if (size === mixedFontSize) return false;
+			if (!node.isLeaf) {
+				if (node.type.allowsMarkType(fontSize) && node.childCount === 0) observeSize(this.defaultFontSizeForNode?.[node.type.name]);
+				return true;
+			}
+			observeSize(fontSize.isInSet(node.marks)?.attrs.size ?? (parent && this.defaultFontSizeForNode?.[parent.type.name]));
+			return true;
+		});
+		return size;
+	}
+	setFontSize(size) {
+		return (state, dispatch) => {
+			const { from, to, empty, $from } = state.selection;
+			const { fontSize } = state.schema.marks;
+			if (!(0, prosemirror_commands.toggleMark)(fontSize, { size })(state)) return false;
+			const tr = state.tr;
+			if (empty) {
+				const newStoredMarks = (state.storedMarks || []).filter((m) => m.type !== fontSize);
+				if (size !== this.defaultFontSizeForNode?.[$from.parent.type.name]) newStoredMarks.push(fontSize.create({ size }));
+				tr.setStoredMarks(newStoredMarks);
+			} else {
+				tr.addMark(from, to, fontSize.create({ size }));
+				tr.doc.nodesBetween(from, to, (node, pos, parent) => {
+					if (!node.isInline) return;
+					const mark = fontSize.isInSet(node.marks);
+					const defaultSize = this.defaultFontSizeForNode?.[parent.type.name];
+					if (mark && mark.attrs.size === defaultSize) tr.step(new prosemirror_transform.RemoveMarkStep(pos, pos + node.nodeSize, mark));
+				});
+			}
+			dispatch?.(tr.scrollIntoView());
+			return true;
+		};
+	}
+	adjustFontSize(adjustment) {
+		return (state, dispatch) => {
+			const currentSize = this.getFontSizeFromSelection(state);
+			if (currentSize === null || currentSize === mixedFontSize) return false;
+			const nextIndex = this.fontSizes.findIndex((fs) => fs.size === currentSize) + adjustment;
+			if (nextIndex < 0 || nextIndex >= this.fontSizes.length) return false;
+			return this.setFontSize(this.fontSizes[nextIndex].size)(state, dispatch);
+		};
+	}
+};
+var RteFontSizePickerFeature = require_slottable_request.featureFacade(RteFontSizePickerFeatureImpl);
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/internal/text-style.ts
+var RteTextStyleFeatureImpl = class extends require_slottable_request.RteFeatureImpl {
+	constructor(config) {
+		super();
+		this.config = config;
+	}
+	getTextblockMarks() {
+		if (this.config?.onBlocks) return this.config.onBlocks.map((block) => this.contribution({
+			markName: this.markName,
+			onNodeName: block.node
+		}));
+		return [this.contribution({ markName: this.markName })];
+	}
+};
 //#endregion
-Object.defineProperty(exports, "RichTextView", {
+//#region src/lib/rich-text-editor/rte/features/bold.ts
+var RteBoldFeatureImpl = class extends RteTextStyleFeatureImpl {
+	constructor(..._args) {
+		super(..._args);
+		this.name = "RteBoldFeature";
+		this.markName = "bold";
+	}
+	getSchema() {
+		return [this.contribution({ marks: { bold: prosemirror_schema_basic.marks.strong } })];
+	}
+	getPlugins(rte) {
+		return [this.contribution((0, prosemirror_keymap.keymap)({ "Mod-b": (0, prosemirror_commands.toggleMark)(rte.schema.marks.bold) }))];
+	}
+	getToolbarItems(rte) {
+		return [this.contribution({
+			section: "text-style",
+			render: (ctx) => createMarkToggle(ctx, {
+				label: () => ctx.rte.getLocale().richTextEditor.bold,
+				icon: "bold-line",
+				markType: rte.schema.marks.bold
+			})
+		}, 1)];
+	}
+};
+var RteBoldFeature = require_slottable_request.featureFacade(RteBoldFeatureImpl);
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/italic.ts
+var RteItalicFeatureImpl = class extends RteTextStyleFeatureImpl {
+	constructor(..._args) {
+		super(..._args);
+		this.name = "RteItalicFeature";
+		this.markName = "italic";
+	}
+	getSchema() {
+		return [this.contribution({ marks: { italic: prosemirror_schema_basic.marks.em } })];
+	}
+	getPlugins(rte) {
+		return [this.contribution((0, prosemirror_keymap.keymap)({ "Mod-i": (0, prosemirror_commands.toggleMark)(rte.schema.marks.italic) }))];
+	}
+	getToolbarItems(rte) {
+		return [this.contribution({
+			section: "text-style",
+			render: (ctx) => createMarkToggle(ctx, {
+				label: () => ctx.rte.getLocale().richTextEditor.italic,
+				icon: "italic-line",
+				markType: rte.schema.marks.italic
+			})
+		}, 2)];
+	}
+};
+var RteItalicFeature = require_slottable_request.featureFacade(RteItalicFeatureImpl);
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/underline.ts
+var RteUnderlineFeatureImpl = class extends RteTextStyleFeatureImpl {
+	constructor(..._args) {
+		super(..._args);
+		this.name = "RteUnderlineFeature";
+		this.markName = "underline";
+	}
+	getSchema() {
+		return [this.contribution({ marks: { underline: {
+			parseDOM: [{ tag: "u" }],
+			toDOM() {
+				return ["u", 0];
+			}
+		} } })];
+	}
+	getPlugins(rte) {
+		return [this.contribution((0, prosemirror_keymap.keymap)({ "Mod-u": (0, prosemirror_commands.toggleMark)(rte.schema.marks.underline) }))];
+	}
+	getToolbarItems(rte) {
+		return [this.contribution({
+			section: "text-style",
+			render: (ctx) => createMarkToggle(ctx, {
+				label: () => ctx.rte.getLocale().richTextEditor.underline,
+				icon: "underline-line",
+				markType: rte.schema.marks.underline
+			})
+		}, 3)];
+	}
+};
+var RteUnderlineFeature = require_slottable_request.featureFacade(RteUnderlineFeatureImpl);
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/strikethrough.ts
+var RteStrikethroughFeatureImpl = class extends RteTextStyleFeatureImpl {
+	constructor(..._args) {
+		super(..._args);
+		this.name = "RteStrikethroughFeature";
+		this.markName = "strikethrough";
+	}
+	getSchema() {
+		return [this.contribution({ marks: { strikethrough: {
+			parseDOM: [{ tag: "s" }, { tag: "del" }],
+			toDOM() {
+				return ["s", 0];
+			}
+		} } })];
+	}
+	getPlugins(rte) {
+		return [this.contribution((0, prosemirror_keymap.keymap)({
+			"Alt-Shift-5": (0, prosemirror_commands.toggleMark)(rte.schema.marks.strikethrough),
+			"Cmd-Shift-X": (0, prosemirror_commands.toggleMark)(rte.schema.marks.strikethrough)
+		}))];
+	}
+	getToolbarItems(rte) {
+		return [this.contribution({
+			section: "text-style",
+			render: (ctx) => createMarkToggle(ctx, {
+				label: () => ctx.rte.getLocale().richTextEditor.strikethrough,
+				icon: "strikethrough-line",
+				markType: rte.schema.marks.strikethrough
+			})
+		}, 4)];
+	}
+};
+var RteStrikethroughFeature = require_slottable_request.featureFacade(RteStrikethroughFeatureImpl);
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/monospace.style.scss?inline
+var monospace_style_default = "tt{font:var(--vvd-typography-base-code);font-variant-ligatures:unset;font-feature-settings:unset;font-size:unset;font-weight:unset;line-height:unset}";
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/monospace.ts
+var RteMonospaceFeatureImpl = class extends RteTextStyleFeatureImpl {
+	constructor(..._args) {
+		super(..._args);
+		this.name = "RteMonospaceFeature";
+		this.markName = "monospace";
+	}
+	getStyles() {
+		return [this.contribution(monospace_style_default)];
+	}
+	getSchema() {
+		return [this.contribution({ marks: { monospace: {
+			parseDOM: [{ tag: "tt" }, { tag: "code" }],
+			toDOM() {
+				return ["tt", 0];
+			}
+		} } })];
+	}
+	getPlugins(rte) {
+		return [this.contribution((0, prosemirror_keymap.keymap)({ "Mod-M": (0, prosemirror_commands.toggleMark)(rte.schema.marks.monospace) }))];
+	}
+	getToolbarItems(rte) {
+		return [this.contribution({
+			section: "text-style",
+			render: (ctx) => createMarkToggle(ctx, {
+				label: () => ctx.rte.getLocale().richTextEditor.monospace,
+				icon: "monospace-line",
+				markType: rte.schema.marks.monospace
+			})
+		}, 5)];
+	}
+};
+var RteMonospaceFeature = require_slottable_request.featureFacade(RteMonospaceFeatureImpl);
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/text-color-picker.ts
+function markApplies(doc, ranges, type) {
+	for (let i = 0; i < ranges.length; i++) {
+		const { $from, $to } = ranges[i];
+		let can = $from.depth == 0 ? doc.type.allowsMarkType(type) : false;
+		doc.nodesBetween($from.pos, $to.pos, (node) => {
+			if (can) return false;
+			can = node.inlineContent && node.type.allowsMarkType(type);
+			return true;
+		});
+		if (can) return true;
+	}
+	return false;
+}
+var mixedColor = Symbol("mixedColor");
+var RteTextColorPickerFeatureImpl = class extends require_slottable_request.RteFeatureImpl {
+	constructor(config) {
+		super();
+		this.config = config;
+		this.name = "RteTextColorPicker";
+		if (config?.onBlocks) {
+			this.defaultColorForNode = {};
+			for (const block of config.onBlocks) this.defaultColorForNode[block.node] = block.defaultColor ?? null;
+		}
+	}
+	getTextblockMarks() {
+		if (this.config?.onBlocks) return this.config.onBlocks.map((block) => this.contribution({
+			markName: "textColor",
+			onNodeName: block.node
+		}));
+		return [this.contribution({ markName: "textColor" })];
+	}
+	getSchema() {
+		return [this.contribution({ marks: { textColor: {
+			attrs: { color: { validate: "string" } },
+			parseDOM: [{
+				tag: "span[data-text-color]",
+				getAttrs: (dom) => {
+					return { color: dom.getAttribute("data-text-color") };
+				}
+			}, {
+				style: "color",
+				getAttrs: (value) => {
+					return { color: value };
+				}
+			}],
+			toDOM(node) {
+				const { color } = node.attrs;
+				return [
+					"span",
+					{
+						style: `color: ${escapeCssProperty(color)};`,
+						"data-text-color": color
+					},
+					0
+				];
+			},
+			inclusive: true
+		} } })];
+	}
+	getToolbarItems() {
+		return [this.contribution({
+			section: "text-style",
+			render: (ctx) => {
+				const tooltipButton = createButton(ctx, {
+					label: () => ctx.rte.getLocale().richTextEditor.textColor,
+					disabled: () => !this.setColor("any")(ctx.view.state),
+					icon: "textcolor-line"
+				});
+				const button = tooltipButton.firstElementChild;
+				return createDiv(ctx, { children: [tooltipButton, createSingleSlot(ctx, {
+					name: "text-color-picker",
+					assignedProps: {
+						anchor: button,
+						value: () => this.getSelectionColor(ctx.view.state) || ""
+					},
+					assignedEvents: { change: (e) => {
+						const value = e.currentTarget.value;
+						this.setColor(value)(ctx.view.state, ctx.view.dispatch);
+					} }
+				})] });
+			}
+		}, 6)];
+	}
+	/** Determine the color of the current selection or null if colors are mixed */
+	getSelectionColor(state) {
+		const { selection } = state;
+		const { textColor } = state.schema.marks;
+		const { from, to, $from, empty } = selection;
+		if (empty) {
+			const defaultColor = this.defaultColorForNode?.[$from.parent.type.name] ?? null;
+			return textColor.isInSet(state.storedMarks || $from.marks())?.attrs.color ?? defaultColor;
+		}
+		let selectionColor = null;
+		const observeColor = (observedColor) => {
+			if (selectionColor === null) selectionColor = observedColor ?? null;
+			else if (observedColor !== selectionColor) selectionColor = mixedColor;
+		};
+		state.doc.nodesBetween(from, to, (node, _pos, parent) => {
+			if (selectionColor === mixedColor) return false;
+			if (!node.isLeaf) {
+				if (node.type.allowsMarkType(textColor) && node.childCount === 0) observeColor(this.defaultColorForNode?.[node.type.name]);
+				return true;
+			}
+			observeColor(textColor.isInSet(node.marks)?.attrs.color ?? (parent && this.defaultColorForNode?.[parent.type.name]));
+			return true;
+		});
+		return selectionColor === mixedColor ? null : selectionColor;
+	}
+	setColor(color) {
+		return (state, dispatch) => {
+			const { textColor } = state.schema.marks;
+			const { from, to, empty, $from } = state.selection;
+			if (!markApplies(state.doc, state.selection.ranges, textColor)) return false;
+			const tr = state.tr;
+			if (empty) {
+				const newStoredMarks = (state.storedMarks || []).filter((m) => m.type !== textColor);
+				if (color !== this.defaultColorForNode?.[$from.parent.type.name]) newStoredMarks.push(textColor.create({ color }));
+				tr.setStoredMarks(newStoredMarks);
+			} else {
+				tr.addMark(from, to, textColor.create({ color }));
+				tr.doc.nodesBetween(from, to, (node, pos, parent) => {
+					if (!node.isInline) return;
+					const mark = textColor.isInSet(node.marks);
+					const defaultColor = this.defaultColorForNode?.[parent.type.name];
+					if (mark && mark.attrs.color === defaultColor) tr.step(new prosemirror_transform.RemoveMarkStep(pos, pos + node.nodeSize, mark));
+				});
+			}
+			dispatch?.(tr.scrollIntoView());
+			return true;
+		};
+	}
+};
+var RteTextColorPickerFeature = require_slottable_request.featureFacade(RteTextColorPickerFeatureImpl);
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/list.style.scss?inline
+var list_style_default = ".rich-text ul,.rich-text ol{padding-inline-start:1.5em}.rich-text li{list-style-position:inside}";
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/list.ts
+var atStartOfNode = ($cursor) => $cursor.parentOffset === 0;
+var isEmpty = (node) => node.nodeSize === 2;
+var listDepth = ($li) => $li.depth - 1;
+var outOfListDepth = ($li) => $li.depth - 2;
+var getLi = ($li) => $li.parent;
+var getList = ($li) => $li.node(listDepth($li));
+var isNested = ($li) => $li.depth > 2;
+var isFirstChild = ($pos, depth) => $pos.index(depth) === 0;
+var isLastChild = ($pos, depth) => $pos.index(depth) === $pos.node(depth).childCount - 1;
+var prevSibling = ($pos, depth) => {
+	const parent = $pos.node(depth);
+	const index = $pos.index(depth);
+	return parent.maybeChild(index - 1);
+};
+var nextSibling = ($pos, depth) => {
+	const parent = $pos.node(depth);
+	const index = $pos.index(depth);
+	return parent.maybeChild(index + 1);
+};
+var asTextSelection = (selection) => {
+	let { $from, $to } = selection;
+	if (selection instanceof prosemirror_state.AllSelection) {
+		const textSelection = prosemirror_state.TextSelection.between(selection.$from, selection.$to);
+		$from = textSelection.$from;
+		$to = textSelection.$to;
+	}
+	return {
+		$from,
+		$to
+	};
+};
+var getSharedAncestor = ($from, $to) => $from.sameParent($to) ? $from.node(-1) : $from.node($from.sharedDepth($to.pos));
+var cursorInListItem = (state) => {
+	const { $cursor } = state.selection;
+	if ($cursor?.parent.type === state.schema.nodes.listItem) return $cursor;
+	return null;
+};
+var allListItemsAreOfType = (state, $from, $to, type) => {
+	let currentListType;
+	let allLisAreOurType = true;
+	state.doc.nodesBetween($from.pos, $to.pos, (node) => {
+		if (node.type.isInGroup("list")) currentListType = node.type;
+		if (node.type === state.schema.nodes.listItem && currentListType !== type) allLisAreOurType = false;
+	});
+	return allLisAreOurType;
+};
+var lift = (rte, $li, tr) => {
+	if (isNested($li)) {
+		liftToOuterList($li, tr);
+		return true;
+	}
+	return liftOutOfList(rte, $li, tr);
+};
+var liftToOuterList = ($li, tr) => {
+	const liRange = new prosemirror_model.NodeRange($li.doc.resolve($li.before()), $li.doc.resolve($li.after()), $li.depth - 1);
+	tr.lift(liRange, $li.depth - 2);
+};
+var liftOutOfList = (rte, $li, tr) => {
+	const list = getList($li);
+	const listIndex = $li.index(outOfListDepth($li));
+	const defaultTextblock = defaultTextblockForMatch($li.node(outOfListDepth($li)).contentMatchAt(listIndex + 1));
+	if (!defaultTextblock) return false;
+	const atStart = isFirstChild($li, listDepth($li));
+	const atEnd = isLastChild($li, listDepth($li));
+	tr.step(new prosemirror_transform.ReplaceAroundStep($li.before() - (atStart ? 1 : 0), $li.after() + (atEnd ? 1 : 0), $li.start(), $li.end(), new prosemirror_model.Slice((atStart ? prosemirror_model.Fragment.empty : prosemirror_model.Fragment.from(list.copy(prosemirror_model.Fragment.empty))).append(prosemirror_model.Fragment.from(defaultTextblock.create(rte.textblockAttrs.extractFromNode(getLi($li))))).append(atEnd ? prosemirror_model.Fragment.empty : prosemirror_model.Fragment.from(list.copy(prosemirror_model.Fragment.empty))), atStart ? 0 : 1, atEnd ? 0 : 1), (atStart ? 0 : 1) + 1));
+	return true;
+};
+var sink = (rte, listType, $node, tr) => {
+	if ($node.parent.type === rte.schema.nodes.listItem) sinkLi(listType, $node, tr);
+	else sinkNode(rte, listType, $node, tr);
+};
+var sinkLi = (listType, $li, tr) => {
+	const canJoinWithPrev = prevSibling($li, listDepth($li))?.type === listType;
+	const canJoinWithNext = nextSibling($li, listDepth($li))?.type === listType;
+	const openStart = canJoinWithPrev ? 1 : 0;
+	const openEnd = canJoinWithNext ? 1 : 0;
+	tr.step(new prosemirror_transform.ReplaceAroundStep($li.before() - (canJoinWithPrev ? 1 : 0), $li.after() + (canJoinWithNext ? 1 : 0), $li.before(), $li.after(), new prosemirror_model.Slice(prosemirror_model.Fragment.from(listType.create(null, [])), openStart, openEnd), 1 - openStart));
+};
+var sinkNode = (rte, listType, $node, tr) => {
+	tr.step(new prosemirror_transform.ReplaceAroundStep($node.before(), $node.after(), $node.start(), $node.end(), new prosemirror_model.Slice(prosemirror_model.Fragment.from(listType.create(null, [rte.schema.nodes.listItem.create(rte.textblockAttrs.extractFromNode($node.parent))])), 0, 0), 2));
+};
+var RteListFeatureImpl = class extends require_slottable_request.RteFeatureImpl {
+	constructor(config) {
+		super();
+		this.config = config;
+		this.name = "RteListFeature";
+		if (!config.bulletList && !config.numberedList) throw new Error("RteListFeature requires at least one of bulletList or numberedList to be enabled");
+	}
+	getStyles() {
+		return [this.contribution(list_style_default)];
+	}
+	getSchema(textblockAttrs) {
+		return [this.contribution({ nodes: {
+			listItem: {
+				content: "inline*",
+				attrs: textblockAttrs.attrs,
+				defining: true,
+				parseDOM: [{
+					tag: "li",
+					getAttrs: (dom) => textblockAttrs.fromDOM(dom)
+				}],
+				toDOM(node) {
+					return [
+						"li",
+						...textblockAttrs.getDOMAttrs(node),
+						0
+					];
+				}
+			},
+			...this.config.bulletList ? { bulletList: {
+				group: "block list",
+				content: "(listItem | list)+",
+				parseDOM: [{ tag: "ul" }],
+				toDOM() {
+					return ["ul", 0];
+				}
+			} } : {},
+			...this.config.numberedList ? { numberedList: {
+				group: "block list",
+				content: "(listItem | list)+",
+				parseDOM: [{ tag: "ol" }],
+				toDOM() {
+					return ["ol", 0];
+				}
+			} } : {}
+		} })];
+	}
+	getPlugins(rte) {
+		this.rte = rte;
+		const tabCommand = (state, dispatch) => {
+			const $liCursor = cursorInListItem(state);
+			if ($liCursor && atStartOfNode($liCursor)) {
+				const tr = state.tr;
+				sinkLi(getList($liCursor).type, $liCursor, tr);
+				dispatch?.(tr.scrollIntoView());
+				return true;
+			}
+			return false;
+		};
+		const shiftTabCommand = (state, dispatch) => {
+			const $liCursor = cursorInListItem(state);
+			if ($liCursor && atStartOfNode($liCursor) && isNested($liCursor)) {
+				const tr = state.tr;
+				liftToOuterList($liCursor, tr);
+				dispatch?.(tr.scrollIntoView());
+				return true;
+			}
+			return false;
+		};
+		const enterCommand = (state, dispatch) => {
+			const $liCursor = cursorInListItem(state);
+			if ($liCursor && isEmpty(getLi($liCursor))) {
+				const tr = state.tr;
+				if (!lift(this.rte, $liCursor, tr)) return false;
+				dispatch?.(tr.scrollIntoView());
+				return true;
+			}
+			return false;
+		};
+		const backspaceCommand = (state, dispatch) => {
+			const $liCursor = cursorInListItem(state);
+			if ($liCursor && atStartOfNode($liCursor)) {
+				if (isFirstChild($liCursor, listDepth($liCursor)) && prevSibling($liCursor, outOfListDepth($liCursor))?.type === getList($liCursor).type) return false;
+				const tr = state.tr;
+				if (!lift(this.rte, $liCursor, tr)) return false;
+				dispatch?.(tr.scrollIntoView());
+				return true;
+			}
+			return false;
+		};
+		return [this.contribution((0, prosemirror_keymap.keymap)({
+			Enter: enterCommand,
+			Backspace: backspaceCommand,
+			Tab: tabCommand,
+			"Shift-Tab": shiftTabCommand,
+			...this.config.bulletList ? { "Mod-Shift-8": this.toggleList(rte.schema.nodes.bulletList) } : {},
+			...this.config.numberedList ? { "Mod-Shift-7": this.toggleList(rte.schema.nodes.numberedList) } : {}
+		}), require_slottable_request.contributionPriority.high)];
+	}
+	getToolbarItems(rte) {
+		const toolbarItems = [];
+		if (this.config.bulletList) toolbarItems.push(this.contribution({
+			section: "textblock",
+			render: (ctx) => createButton(ctx, {
+				label: () => ctx.rte.getLocale().richTextEditor.bulletList,
+				icon: "bullet-list-2-line",
+				active: () => this.isSelectionInList(rte.schema.nodes.bulletList, ctx.rte.state),
+				onClick: () => {
+					const { state, dispatch } = ctx.view;
+					this.toggleList(rte.schema.nodes.bulletList)(state, dispatch);
+				}
+			})
+		}, 1));
+		if (this.config.numberedList) toolbarItems.push(this.contribution({
+			section: "textblock",
+			render: (ctx) => createButton(ctx, {
+				label: () => ctx.rte.getLocale().richTextEditor.numberedList,
+				icon: "list-numbered-line",
+				active: () => this.isSelectionInList(rte.schema.nodes.numberedList, ctx.rte.state),
+				onClick: () => {
+					const { state, dispatch } = ctx.view;
+					this.toggleList(rte.schema.nodes.numberedList)(state, dispatch);
+				}
+			})
+		}, 2));
+		return toolbarItems;
+	}
+	toggleList(type) {
+		return (0, prosemirror_commands.autoJoin)((state, dispatch) => {
+			const { $from, $to } = asTextSelection(state.selection);
+			if (getSharedAncestor($from, $to).type.isInGroup("list")) if (allListItemsAreOfType(state, $from, $to, type)) {
+				const tr = state.tr;
+				state.doc.nodesBetween($from.pos, $to.pos, (node, pos) => {
+					if (node.type === state.schema.nodes.listItem) {
+						const $li = tr.doc.resolve(tr.mapping.map(pos + 1));
+						lift(this.rte, $li, tr);
+					}
+				});
+				dispatch?.(tr.scrollIntoView());
+				return true;
+			} else {
+				const tr = state.tr;
+				state.doc.nodesBetween($from.pos, $to.pos, (node, pos) => {
+					if (node.type.isInGroup("list") && node.type !== type) tr.setNodeMarkup(pos, type, node.attrs);
+				});
+				dispatch?.(tr.scrollIntoView());
+				return true;
+			}
+			else {
+				const tr = state.tr;
+				state.doc.nodesBetween($from.pos, $to.pos, (node, pos) => {
+					if (!node.isTextblock) return;
+					const $node = tr.doc.resolve(tr.mapping.map(pos + 1));
+					sink(this.rte, type, $node, tr);
+				});
+				dispatch?.(tr.scrollIntoView());
+				return true;
+			}
+		}, (before, after) => before.type === type && after.type === type);
+	}
+	isSelectionInList(type, state) {
+		const { $from, $to } = asTextSelection(state.selection);
+		if (getSharedAncestor($from, $to).type.isInGroup("list")) return allListItemsAreOfType(state, $from, $to, type);
+		else return false;
+	}
+};
+var RteListFeature = require_slottable_request.featureFacade(RteListFeatureImpl);
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/alignment.ts
+var alignments = [
+	{
+		value: "left",
+		icon: "align-left-line",
+		label: "left"
+	},
+	{
+		value: "center",
+		icon: "align-center-line",
+		label: "center"
+	},
+	{
+		value: "right",
+		icon: "align-right-line",
+		label: "right"
+	}
+];
+var validTextAlign = (value) => alignments.find((a) => a.value === value)?.value ?? "left";
+var RteAlignmentFeatureImpl = class extends require_slottable_request.RteFeatureImpl {
+	constructor(..._args) {
+		super(..._args);
+		this.name = "RteAlignmentFeature";
+	}
+	getTextblockAttrs() {
+		return [this.contribution({
+			name: "textAlign",
+			default: "left",
+			fromDOM(dom) {
+				return validTextAlign(dom.style.textAlign);
+			},
+			toStyles(node) {
+				return [`text-align: ${validTextAlign(node.attrs.textAlign)}`];
+			}
+		})];
+	}
+	getPlugins() {
+		return [this.contribution((0, prosemirror_keymap.keymap)({
+			"Mod-L": this.setAlignment("left"),
+			"Mod-E": this.setAlignment("center"),
+			"Mod-R": this.setAlignment("right")
+		}))];
+	}
+	getToolbarItems() {
+		return [this.contribution({
+			section: "textblock",
+			render: (ctx) => createMenu(ctx, {
+				label: () => ctx.rte.getLocale().richTextEditor.alignment,
+				trigger: createButton(ctx, {
+					label: () => ctx.rte.getLocale().richTextEditor.alignment,
+					icon: () => {
+						const currentAlign = this.getAlignmentFromSelection(ctx.view.state);
+						return alignments.find((a) => a.value === currentAlign)?.icon ?? "align-left-line";
+					}
+				}),
+				children: [createButtonGroup(ctx, {
+					slot: "header",
+					children: alignments.map((align, index) => createButton(ctx, {
+						icon: align.icon,
+						label: () => ctx.rte.getLocale().richTextEditor.alignments[align.label],
+						noTooltip: true,
+						variant: "toolbar-menu",
+						autofocus: () => {
+							const currentAlign = this.getAlignmentFromSelection(ctx.view.state);
+							if ((currentAlign === "mixed" || currentAlign === null) && index === 0) return true;
+							return align.value === currentAlign;
+						},
+						active: () => this.getAlignmentFromSelection(ctx.view.state) === align.value,
+						disabled: () => this.getAlignmentFromSelection(ctx.view.state) === null,
+						onClick: () => {
+							const { state, dispatch } = ctx.view;
+							this.setAlignment(align.value)(state, dispatch);
+						}
+					}))
+				})]
+			})
+		}, 3)];
+	}
+	getAlignmentFromSelection(state) {
+		const { selection } = state;
+		const { from, to } = selection;
+		let align = null;
+		state.doc.nodesBetween(from, to, (node) => {
+			if (align === "mixed") return;
+			if (node.type.isTextblock) {
+				if (!align) align = node.attrs.textAlign;
+				else if (align !== node.attrs.textAlign) align = "mixed";
+			}
+		});
+		return align;
+	}
+	setAlignment(align) {
+		return (state, dispatch) => {
+			const { tr, selection } = state;
+			const { from, to } = selection;
+			state.doc.nodesBetween(from, to, (node, pos) => {
+				if (node.type.isTextblock) tr.setNodeMarkup(pos, node.type, {
+					...node.attrs,
+					textAlign: align
+				});
+			});
+			dispatch?.(tr.scrollIntoView());
+			return true;
+		};
+	}
+};
+var RteAlignmentFeature = require_slottable_request.featureFacade(RteAlignmentFeatureImpl);
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/link.style.scss?inline
+var link_style_default = ".link-popover{flex-direction:column;gap:8px;inline-size:450px;padding:16px;display:flex}.link-popover-header{justify-content:space-between;align-items:center;display:flex}.link-popover-label{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.link-popover-content{flex-direction:column;gap:16px;display:flex}.link,.rich-text a[href],.link:visited,.rich-text a[href]:visited{color:var(--vvd-color-cta-600)}.link:hover,.rich-text a[href]:hover{color:var(--vvd-color-cta-500)}.link:active,.rich-text a[href]:active{color:var(--vvd-color-cta-400)}.link-action-bar{justify-content:end;gap:8px;display:flex}.link-toolbar-menu{flex-direction:column;gap:16px;inline-size:368px;padding:8px;display:flex}";
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/link.ts
+var linkPattern = "(?:https?://|www\\.)[^\\s<]+";
+function convertToLink(state, matchedText, start, end) {
+	if (state.doc.rangeHasMark(start, start + 1, state.schema.marks.link)) return null;
+	const link = matchedText.replace(/[.,;:!?) ]+$/, "");
+	const href = link.startsWith("www.") ? `https://${link}` : link;
+	const linkMark = state.schema.marks.link.create({ href });
+	const linkEnd = start + link.length;
+	const trailingChars = matchedText.slice(link.length);
+	const tr = state.tr.addMark(start, linkEnd, linkMark);
+	if (trailingChars) tr.replaceWith(linkEnd, end, state.schema.text(trailingChars));
+	return tr;
+}
+var RteLinkFeatureImpl = class extends require_slottable_request.RteFeatureImpl {
+	constructor(..._args) {
+		super(..._args);
+		this.name = "RteLinkFeature";
+		this.removeLink = (state, dispatch) => {
+			const tr = state.tr;
+			const existingLink = this.getCurrentLink(state);
+			tr.removeMark(existingLink.start, existingLink.end, state.schema.marks.link);
+			dispatch?.(tr.scrollIntoView());
+			return true;
+		};
+	}
+	getStyles() {
+		return [this.contribution(link_style_default)];
+	}
+	getSchema() {
+		return [this.contribution({ marks: { link: {
+			attrs: { href: { validate: "string" } },
+			inclusive: false,
+			parseDOM: [{
+				tag: "a[href]",
+				getAttrs(dom) {
+					return { href: dom.getAttribute("href") };
+				}
+			}],
+			toDOM(node) {
+				const { href } = node.attrs;
+				return [
+					"a",
+					{ href: sanitizeLinkHref(href) },
+					0
+				];
+			}
+		} } }, require_slottable_request.contributionPriority.high)];
+	}
+	getTextblockMarks() {
+		return [this.contribution({ markName: "link" })];
+	}
+	getInputRules() {
+		const linkRegex = new RegExp(`${linkPattern}$`);
+		return [this.contribution({
+			rule: new prosemirror_inputrules.InputRule(new RegExp(`${linkPattern} $`), (state, match, start, end) => convertToLink(state, match[0], start, end)),
+			enterHandler: {
+				regex: linkRegex,
+				handler: (state, match, start, end) => convertToLink(state, match[0], start, end)
+			}
+		})];
+	}
+	getPlugins(rte) {
+		const insertLinkCommand = () => {
+			this.toolbarMenu.open = true;
+			return true;
+		};
+		let popup;
+		return [this.contribution(new prosemirror_state.Plugin({
+			props: { decorations: (state) => {
+				const link = this.getCurrentLink(state);
+				if (link) {
+					const deco = prosemirror_view.Decoration.inline(link.start, link.end, { id: "current-link" });
+					return prosemirror_view.DecorationSet.create(state.doc, [deco]);
+				}
+				return null;
+			} },
+			view: (view) => {
+				const ctx = new UiCtx(view, rte, {
+					popupPlacement: "bottom",
+					shouldReturnFocusToEditor: true
+				});
+				popup = rte.createComponent(Popover);
+				popup.anchorId = "current-link";
+				const content = createDiv(ctx, {
+					className: "link-popover",
+					children: [createDiv(ctx, {
+						className: "link-popover-header",
+						children: [createDiv(ctx, {
+							className: "link-popover-label",
+							children: [createText(ctx, { text: () => this.getCurrentLink(ctx.view.state)?.text || "" })]
+						}), createButton(ctx, {
+							icon: "close-line",
+							label: () => ctx.rte.getLocale().richTextEditor.close,
+							noTooltip: true,
+							onClick: () => {
+								popup.dismiss();
+							}
+						})]
+					}), createDiv(ctx, {
+						className: "link-popover-content",
+						children: [createAnchor(ctx, {
+							className: "link",
+							href: () => this.getCurrentLink(ctx.view.state)?.href || "",
+							target: "_blank",
+							rel: "noopener",
+							children: [createText(ctx, { text: () => this.getCurrentLink(ctx.view.state)?.href || "" })]
+						}), createDiv(ctx, {
+							className: "link-action-bar",
+							children: [createButton(ctx, {
+								icon: "delete-line",
+								label: () => ctx.rte.getLocale().richTextEditor.delete,
+								connotation: "alert",
+								variant: "popover",
+								noTooltip: true,
+								onClick: () => {
+									const { state, dispatch } = ctx.view;
+									this.removeLink(state, dispatch);
+								}
+							}), createButton(ctx, {
+								icon: "edit-line",
+								label: () => ctx.rte.getLocale().richTextEditor.edit,
+								variant: "popover",
+								noTooltip: true,
+								onClick: () => {
+									this.toolbarMenu.open = true;
+									popup.requestOpenState(false);
+									return true;
+								}
+							})]
+						})]
+					})]
+				});
+				popup.appendChild(content);
+				view.dom.getRootNode().querySelector(".popovers").appendChild(popup);
+				return {
+					update: (view) => {
+						const state = view.state;
+						ctx.updateBindings();
+						const link = this.getCurrentLink(state);
+						popup.requestOpenState(Boolean(link));
+					},
+					destroy: () => {
+						popup.remove();
+					}
+				};
+			}
+		})), this.contribution((0, prosemirror_keymap.keymap)({
+			Escape: (state) => {
+				if (this.getCurrentLink(state)) {
+					popup?.dismiss();
+					return true;
+				}
+				return false;
+			},
+			"Mod-k": insertLinkCommand
+		}))];
+	}
+	getToolbarItems(rte) {
+		const getSelectionText = (state) => {
+			const { from, to } = state.selection;
+			if (from === to) return "";
+			return state.doc.textBetween(from, to, " ");
+		};
+		const isValidUrl = (url) => {
+			try {
+				new URL(url);
+				return true;
+			} catch {
+				return false;
+			}
+		};
+		return [this.contribution({
+			section: "insert",
+			render: (ctx) => {
+				const textField = createTextField(ctx, {
+					label: () => ctx.rte.getLocale().richTextEditor.linkText,
+					placeholder: () => ctx.rte.getLocale().richTextEditor.linkTextPlaceholder,
+					slot: "header",
+					autofocus: true,
+					value: () => this.getCurrentLink(ctx.view.state)?.text || getSelectionText(ctx.view.state) || "",
+					onInput: () => {
+						updateValidation();
+					}
+				});
+				const urlField = createTextField(ctx, {
+					label: () => ctx.rte.getLocale().richTextEditor.linkUrl,
+					type: "url",
+					placeholder: () => ctx.rte.getLocale().richTextEditor.linkUrlPlaceholder,
+					helperText: () => ctx.rte.getLocale().richTextEditor.linkUrlHelperText,
+					slot: "header",
+					value: () => this.getCurrentLink(ctx.view.state)?.href || "",
+					onInput: () => {
+						updateValidation();
+					}
+				});
+				const applyButton = createButton(ctx, {
+					label: () => ctx.rte.getLocale().richTextEditor.apply,
+					variant: "popover-primary",
+					disabled: () => {
+						const link = this.getCurrentLink(ctx.view.state);
+						return !(link && link.text.length && isValidUrl(link.href));
+					},
+					onClick: () => {
+						const { state, dispatch } = ctx.view;
+						this.insertLink(rte, urlField.value, textField.value)(state, dispatch);
+						this.toolbarMenu.open = false;
+					}
+				});
+				const updateValidation = () => {
+					applyButton.querySelector("[data-vvd-component=\"button\"]").disabled = !(textField.value.length && isValidUrl(urlField.value));
+				};
+				const menu = createMenu(ctx, {
+					label: () => ctx.rte.getLocale().richTextEditor.hyperlink,
+					trigger: createButton(ctx, {
+						label: () => ctx.rte.getLocale().richTextEditor.hyperlink,
+						icon: "link-line"
+					}),
+					children: [createDiv(ctx, {
+						className: "link-toolbar-menu",
+						slot: "header",
+						children: [
+							textField,
+							urlField,
+							createDiv(ctx, {
+								className: "link-action-bar",
+								slot: "header",
+								children: [createButton(ctx, {
+									label: () => ctx.rte.getLocale().richTextEditor.cancel,
+									variant: "popover",
+									onClick: () => {
+										this.toolbarMenu.open = false;
+									}
+								}), applyButton]
+							})
+						]
+					})]
+				});
+				this.toolbarMenu = menu.lastElementChild;
+				return menu;
+			}
+		}, 1)];
+	}
+	getCurrentLink(state) {
+		const selection = state.selection;
+		if (!(selection instanceof prosemirror_state.TextSelection)) return null;
+		const linkMark = state.schema.marks.link;
+		const { $from, $to } = selection;
+		const selectionStartMarks = state.selection.empty ? $from.marks() : $from.nodeAfter?.marks ?? [];
+		const targetHref = linkMark.isInSet(selectionStartMarks)?.attrs.href;
+		if (!targetHref) return null;
+		const isTargetLink = (node) => linkMark.isInSet(node.marks)?.attrs.href === targetHref;
+		let currentRun = null;
+		const runs = [];
+		state.doc.nodesBetween($from.start(), $to.end(), (node, pos) => {
+			if (!node.isText) return true;
+			const nodeEnd = pos + node.nodeSize;
+			if (isTargetLink(node)) if (!currentRun) {
+				currentRun = {
+					start: pos,
+					end: nodeEnd
+				};
+				runs.push(currentRun);
+			} else currentRun.end = nodeEnd;
+			else currentRun = null;
+			return false;
+		});
+		const selectionRun = runs.find((run) => run.start <= selection.from && run.end >= selection.to);
+		if (!selectionRun) return null;
+		return {
+			text: state.doc.textBetween(selectionRun.start, selectionRun.end, " "),
+			href: targetHref,
+			start: selectionRun.start,
+			end: selectionRun.end
+		};
+	}
+	insertLink(rte, href, text) {
+		return (state, dispatch) => {
+			let { from, to } = state.selection;
+			const tr = state.tr;
+			const existingLink = this.getCurrentLink(state);
+			if (existingLink) {
+				from = existingLink.start;
+				to = existingLink.end;
+			}
+			tr.insertText(text, from, to);
+			tr.addMark(from, from + text.length, rte.schema.marks.link.create({ href }));
+			dispatch?.(tr.scrollIntoView());
+			return true;
+		};
+	}
+};
+var RteLinkFeature = require_slottable_request.featureFacade(RteLinkFeatureImpl);
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/inline-image.style.scss?inline
+var inline_image_style_default = ".inline-image-wrapper{vertical-align:text-bottom;display:inline-block}.inline-image{block-size:auto;display:block}.inline-image-popover{align-items:center;gap:4px;padding:8px;display:flex}.inline-image-placeholder{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);font-feature-settings:normal;font-variant-ligatures:normal;overflow-wrap:normal;pointer-events:none;white-space:normal}";
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/inline-image.ts
+var isGenerator$1 = (value) => value !== null && Boolean(value["next"]);
+var uniqueId = 1;
+var generateUniqueId = () => uniqueId++;
+var InlineImageView = class {
+	constructor(node, view, getPos, config) {
+		this.view = view;
+		this.getPos = getPos;
+		this.config = config;
+		this.content = null;
+		this.dom = document.createElement("div");
+		this.dom.className = "inline-image-wrapper";
+		this.imageUrl = node.attrs.imageUrl;
+		this.img = document.createElement("img");
+		this.initializeImg(node);
+		const resolveResult = this.config.resolveUrl ? this.config.resolveUrl(this.imageUrl) : this.imageUrl;
+		const initialResolvedUrl = isGenerator$1(resolveResult) ? null : resolveResult;
+		this.handleResolvedUrl(initialResolvedUrl);
+		if (isGenerator$1(resolveResult)) this.handleResolvedUrlGenerator(resolveResult);
+	}
+	setContent(content, { onDestroy, allowPopover } = {}) {
+		this.content?.remove();
+		this.onContentDestroy?.();
+		this.content = content;
+		if (content) {
+			this.onContentDestroy = onDestroy;
+			this.dom.appendChild(content);
+		}
+		Popover.setBlockPopover(this.dom, !allowPopover);
+	}
+	async handleResolvedUrlGenerator(generator) {
+		const iterator = generator[Symbol.asyncIterator]();
+		let result;
+		do {
+			result = await iterator.next();
+			this.handleResolvedUrl(result.value);
+		} while (!result.done);
+	}
+	handleResolvedUrl(result) {
+		if (typeof result === "string") this.renderImg(result);
+		else if (result?.type === "placeholder") {
+			const slotName = `inline-image-placeholder-${generateUniqueId()}`;
+			const slot = document.createElement("slot");
+			slot.className = "inline-image-placeholder";
+			slot.name = slotName;
+			const onDestroy = result.create?.(slotName);
+			const host = this.view.dom.getRootNode().host;
+			require_slottable_request.dispatchSlottableRequest(host, "inline-image-placeholder", slotName, { url: this.imageUrl });
+			this.setContent(slot, { onDestroy: () => {
+				require_slottable_request.dispatchSlottableRequest(host, "inline-image-placeholder", slotName, require_slottable_request.removeSymbol);
+				onDestroy?.();
+			} });
+		} else this.setContent(null);
+	}
+	initializeImg(node) {
+		this.img.className = "inline-image";
+		this.update(node);
+		this.img.addEventListener("load", () => {
+			const pos = this.getPos();
+			if (pos) {
+				const { state, dispatch } = this.view;
+				const currentNode = state.doc.nodeAt(pos);
+				if (!currentNode || currentNode.attrs.naturalWidth === this.img.naturalWidth && currentNode.attrs.naturalHeight === this.img.naturalHeight) return;
+				const tr = state.tr;
+				tr.setNodeAttribute(pos, "naturalWidth", this.img.naturalWidth);
+				tr.setNodeAttribute(pos, "naturalHeight", this.img.naturalHeight);
+				tr.setMeta("addToHistory", false);
+				dispatch(tr);
+			}
+		});
+	}
+	renderImg(src) {
+		this.img.src = sanitizeImageSrc(src);
+		this.setContent(this.img, { allowPopover: true });
+	}
+	update(node) {
+		this.img.alt = node.attrs.alt;
+		this.img.width = node.attrs.naturalWidth;
+		this.img.height = node.attrs.naturalHeight;
+		this.img.style.maxWidth = node.attrs.size;
+		return true;
+	}
+	destroy() {
+		this.setContent(null);
+	}
+};
+var RteInlineImageFeatureImpl = class extends require_slottable_request.RteFeatureImpl {
+	constructor(config = {}) {
+		super();
+		this.config = config;
+		this.name = "RteInlineImageFeature";
+	}
+	getStyles() {
+		return [this.contribution(inline_image_style_default)];
+	}
+	getSchema() {
+		return [this.contribution({ nodes: { inlineImage: {
+			inline: true,
+			group: "inline",
+			selectable: true,
+			atom: true,
+			attrs: {
+				imageUrl: { validate: "string" },
+				alt: {
+					validate: "string",
+					default: ""
+				},
+				size: {
+					validate: "string|null",
+					default: null
+				},
+				naturalWidth: {
+					validate: "number|null",
+					default: null
+				},
+				naturalHeight: {
+					validate: "number|null",
+					default: null
+				}
+			},
+			parseDOM: [{
+				tag: "img[src],img[data-src]",
+				getAttrs: (dom) => {
+					const parseDimension = (dim) => {
+						const value = parseInt(dim ?? "", 10);
+						return isNaN(value) ? null : value;
+					};
+					const srcAttr = dom.getAttribute("data-src") ?? dom.getAttribute("src");
+					const imageUrl = this.config.parseUrlFromHtml ? this.config.parseUrlFromHtml(srcAttr) : srcAttr;
+					if (imageUrl === null) return false;
+					return {
+						imageUrl,
+						alt: dom.getAttribute("alt") || "",
+						size: dom.style.maxWidth || null,
+						naturalWidth: parseDimension(dom.getAttribute("width")),
+						naturalHeight: parseDimension(dom.getAttribute("height"))
+					};
+				}
+			}],
+			/** Since we use a NodeView, this is only used for HTML serialization */
+			toDOM: (node) => {
+				const { imageUrl, alt, size, naturalWidth, naturalHeight } = node.attrs;
+				const resolvedUrl = this.config.serializeUrlToHtml ? this.config.serializeUrlToHtml(imageUrl) : imageUrl;
+				if (resolvedUrl === null) return document.createTextNode("");
+				const attrs = {
+					src: sanitizeImageSrc(resolvedUrl),
+					"data-src": resolvedUrl,
+					alt
+				};
+				if (size) attrs.style = `max-width: ${escapeCssProperty(size)}; height: auto;`;
+				if (naturalWidth) attrs.width = naturalWidth;
+				if (naturalHeight) attrs.height = naturalHeight;
+				return ["img", attrs];
+			}
+		} } })];
+	}
+	getPlugins(rte) {
+		let popover;
+		return [this.contribution(new prosemirror_state.Plugin({
+			props: { nodeViews: { inlineImage: (node, view, getPos) => new InlineImageView(node, view, getPos, this.config) } },
+			view: (view) => {
+				const ctx = new UiCtx(view, rte, {
+					popupPlacement: "bottom",
+					shouldReturnFocusToEditor: true
+				});
+				popover = rte.createComponent(Popover);
+				popover.kind = "imageOptions";
+				popover.offset = 4;
+				const content = createDiv(ctx, {
+					className: "inline-image-popover",
+					children: [
+						createButton(ctx, {
+							label: () => ctx.rte.getLocale().richTextEditor.imageSizes.small,
+							variant: "popover",
+							active: () => this.getSelectedImageSize(ctx.view.state) === "small",
+							onClick: () => {
+								this.setSelectedImageSize("small")(ctx.view.state, ctx.view.dispatch);
+							}
+						}),
+						createDivider(ctx),
+						createButton(ctx, {
+							label: () => ctx.rte.getLocale().richTextEditor.imageSizes.fit,
+							variant: "popover",
+							active: () => this.getSelectedImageSize(ctx.view.state) === "fit",
+							onClick: () => {
+								this.setSelectedImageSize("fit")(ctx.view.state, ctx.view.dispatch);
+							}
+						}),
+						createDivider(ctx),
+						createButton(ctx, {
+							label: () => ctx.rte.getLocale().richTextEditor.imageSizes.original,
+							variant: "popover",
+							active: () => this.getSelectedImageSize(ctx.view.state) === "original",
+							onClick: () => {
+								this.setSelectedImageSize("original")(ctx.view.state, ctx.view.dispatch);
+							}
+						})
+					]
+				});
+				popover.appendChild(content);
+				view.dom.getRootNode().querySelector(".popovers").appendChild(popover);
+				return {
+					update: (view) => {
+						ctx.updateBindings();
+						const selectedImage = this.getSelectedInlineImage(view.state);
+						if (selectedImage) {
+							popover.anchorEl = view.nodeDOM(selectedImage.pos);
+							popover.requestOpenState(true);
+						} else {
+							popover.anchorEl = void 0;
+							popover.requestOpenState(false);
+						}
+					},
+					destroy: () => {
+						popover.remove();
+					}
+				};
+			}
+		})), this.contribution((0, prosemirror_keymap.keymap)({ Escape: (state) => {
+			if (this.getSelectedInlineImage(state)) {
+				popover?.dismiss();
+				return true;
+			}
+			return false;
+		} }))];
+	}
+	calculateSmallWidth(naturalWidth) {
+		return `${Math.min(300, naturalWidth / 2)}px`;
+	}
+	getSelectedInlineImage(state) {
+		const sel = state.selection;
+		if (sel instanceof prosemirror_state.NodeSelection && sel.node.type === state.schema.nodes.inlineImage) return {
+			pos: sel.from,
+			node: sel.node
+		};
+		return null;
+	}
+	setSelectedImageSize(size) {
+		return (state, dispatch) => {
+			const selectedImage = this.getSelectedInlineImage(state);
+			if (!selectedImage) return false;
+			const { naturalWidth } = selectedImage.node.attrs;
+			if (size === "small" && naturalWidth === null) return false;
+			const tr = state.tr;
+			tr.setNodeAttribute(selectedImage.pos, "size", size === "small" ? this.calculateSmallWidth(naturalWidth) : size === "fit" ? "100%" : null);
+			dispatch?.(tr.scrollIntoView());
+			return true;
+		};
+	}
+	getSelectedImageSize(state) {
+		const selectedImage = this.getSelectedInlineImage(state);
+		if (!selectedImage) return null;
+		const { size, naturalWidth } = selectedImage.node.attrs;
+		if (naturalWidth !== null && size === this.calculateSmallWidth(naturalWidth)) return "small";
+		if (size === "100%") return "fit";
+		if (size === null) return "original";
+		return null;
+	}
+};
+var RteInlineImageFeature = require_slottable_request.featureFacade(RteInlineImageFeatureImpl);
+//#endregion
+//#region src/shared/utils/promise.ts
+var resolvePromise = async (promise) => {
+	try {
+		return {
+			type: "ok",
+			result: await promise
+		};
+	} catch (e) {
+		return {
+			type: "error",
+			error: e
+		};
+	}
+};
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/file-handler.ts
+var RteFileHandlerFeatureImpl = class extends require_slottable_request.RteFeatureImpl {
+	constructor(config) {
+		super();
+		this.config = config;
+		this.name = "RteFileHandlerFeature";
+	}
+	getPlugins(rte) {
+		const insertPointPlaceholderPlugin = new prosemirror_state.Plugin({
+			state: {
+				init() {
+					return prosemirror_view.DecorationSet.empty;
+				},
+				apply(tr, set) {
+					set = set.map(tr.mapping, tr.doc);
+					const action = tr.getMeta(insertPointPlaceholderPlugin);
+					if (action && action.add) {
+						const placeholder = document.createElement("placeholder");
+						const deco = prosemirror_view.Decoration.widget(action.add.pos, placeholder, {
+							id: action.add.id,
+							relaxedSide: true
+						});
+						set = set.add(tr.doc, [deco]);
+					} else if (action && action.remove) set = set.remove(set.find(void 0, void 0, (spec) => spec.id == action.remove.id));
+					return set;
+				}
+			},
+			props: { decorations(state) {
+				return this.getState(state);
+			} }
+		});
+		const createInsertPointPlaceholder = (tr, pos) => {
+			const id = require_randomId.generateRandomId();
+			tr.setMeta(insertPointPlaceholderPlugin, { add: {
+				id,
+				pos
+			} });
+			return {
+				getPos: (state) => {
+					const found = insertPointPlaceholderPlugin.getState(state).find(void 0, void 0, (spec) => spec.id == id);
+					return found.length ? found[0].from : null;
+				},
+				remove: (tr) => {
+					tr.setMeta(insertPointPlaceholderPlugin, { remove: { id } });
+				}
+			};
+		};
+		const insertFragment = (tr, fragment, insertPoint) => {
+			if (insertPoint.type === "selection") {
+				const parsed = prosemirror_model.Slice.fromJSON(rte.schema, { content: fragment });
+				tr.replaceSelection(parsed);
+			} else {
+				const parsed = prosemirror_model.Fragment.fromJSON(rte.schema, fragment);
+				tr.insert(insertPoint.pos, parsed);
+			}
+		};
+		const handleFiles = (files, insertPoint) => {
+			const result = this.config.handleFiles(files);
+			if (result === null) return;
+			else if (result instanceof Promise) handleAsyncResult(result, insertPoint);
+			else handleSyncResult(result, insertPoint);
+		};
+		const handleSyncResult = (result, insertPoint) => {
+			const tr = rte.state.tr;
+			insertFragment(tr, result, insertPoint);
+			rte.dispatchTransaction(tr);
+		};
+		const handleAsyncResult = async (promise, insertPoint) => {
+			const tr = rte.state.tr;
+			if (insertPoint.type === "selection" && !tr.selection.empty) tr.deleteSelection();
+			const placeholder = createInsertPointPlaceholder(tr, insertPoint.type === "selection" ? tr.selection.from : insertPoint.pos);
+			rte.dispatchTransaction(tr);
+			const resolved = await resolvePromise(promise);
+			const updatedPos = placeholder.getPos(rte.state);
+			const insertTr = rte.state.tr;
+			placeholder.remove(insertTr);
+			if (updatedPos !== null && resolved.type === "ok") insertFragment(insertTr, resolved.result, {
+				type: "pos",
+				pos: updatedPos
+			});
+			rte.dispatchTransaction(insertTr);
+			if (resolved.type === "error") console.error("Error in handleFiles handler:", resolved.error);
+		};
+		return [this.contribution(insertPointPlaceholderPlugin), this.contribution(new prosemirror_state.Plugin({ props: {
+			handlePaste: (_view, event) => {
+				const files = Array.from(event.clipboardData.files);
+				if (!files.length) return false;
+				handleFiles(files, { type: "selection" });
+				return true;
+			},
+			handleDrop: (view, event) => {
+				const files = Array.from(event.dataTransfer.files);
+				if (!files.length) return false;
+				let target = view.posAtCoords({
+					left: event.clientX,
+					top: event.clientY
+				}).pos;
+				if (view.dragging && view.dragging.slice) {
+					const point = (0, prosemirror_transform.dropPoint)(view.state.doc, target, view.dragging.slice);
+					if (point != null) target = point;
+				}
+				handleFiles(files, {
+					type: "pos",
+					pos: target
+				});
+				return true;
+			}
+		} }))];
+	}
+};
+var RteFileHandlerFeature = require_slottable_request.featureFacade(RteFileHandlerFeatureImpl);
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/drop-handler.ts
+var RteDropHandlerFeatureImpl = class extends require_slottable_request.RteFeatureImpl {
+	constructor(config) {
+		super();
+		this.config = config;
+		this.name = "RteDebugFeature";
+	}
+	getPlugins() {
+		const dragOverResults = /* @__PURE__ */ new WeakMap();
+		let lastResult = false;
+		const onDragOver = (event) => {
+			if (dragOverResults.get(event) !== void 0) return;
+			lastResult = this.config.onViewportDragOver?.(event) ?? false;
+		};
+		const onDrop = (event) => {
+			this.config.onViewportDrop?.(event);
+			this.config.onViewportDragFinish?.();
+		};
+		const onDragEnd = () => {
+			this.config.onViewportDragFinish?.();
+		};
+		let isEntering = false;
+		const onDragEnter = () => {
+			isEntering = true;
+			window.setTimeout(() => isEntering = false, 0);
+		};
+		const onDragLeave = () => {
+			if (isEntering) return;
+			this.config.onViewportDragFinish?.();
+		};
+		return [this.contribution(new prosemirror_state.Plugin({ view: (view) => {
+			const viewport = view.root.host.editorViewportElement;
+			viewport.addEventListener("dragover", onDragOver);
+			viewport.addEventListener("drop", onDrop);
+			viewport.addEventListener("dragend", onDragEnd);
+			viewport.addEventListener("dragenter", onDragEnter);
+			viewport.addEventListener("dragleave", onDragLeave);
+			return { destroy() {
+				viewport.removeEventListener("dragover", onDragOver);
+				viewport.removeEventListener("drop", onDrop);
+				viewport.removeEventListener("dragend", onDragEnd);
+				viewport.removeEventListener("dragenter", onDragEnter);
+				viewport.removeEventListener("dragleave", onDragLeave);
+			} };
+		} })), this.contribution(new prosemirror_state.Plugin({ props: { handleDOMEvents: {
+			dragover: (_view, event) => {
+				const result = this.config.onViewportDragOver?.(event) ?? false;
+				dragOverResults.set(event, result);
+				lastResult = result;
+				if (result) {
+					event.stopImmediatePropagation();
+					event.preventDefault();
+					return true;
+				}
+				return false;
+			},
+			drop: () => {
+				return lastResult;
+			}
+		} } }), require_slottable_request.contributionPriority.high)];
+	}
+};
+var RteDropHandlerFeature = require_slottable_request.featureFacade(RteDropHandlerFeatureImpl);
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/toolbar-button.ts
+var RteToolbarButtonFeatureImpl = class extends require_slottable_request.RteFeatureImpl {
+	constructor(featureId, options) {
+		super();
+		this.featureId = featureId;
+		this.options = options;
+		this.name = `RteToolbarButtonFeature[${featureId}]`;
+	}
+	getToolbarItems() {
+		return [this.contribution({
+			section: "insert",
+			render: (ctx) => createButton(ctx, {
+				label: this.options.label,
+				icon: this.options.icon,
+				onClick: () => {
+					this.executeAction(ctx);
+				}
+			})
+		}, 2 + (this.options.order ?? 0) / Number.MAX_SAFE_INTEGER)];
+	}
+	executeAction(ctx) {
+		const { action } = this.options;
+		switch (action.type) {
+			case "insert-text": {
+				const { state, dispatch } = ctx.view;
+				const { from, to } = state.selection;
+				dispatch(state.tr.insertText(action.text, from, to));
+				break;
+			}
+		}
+	}
+};
+var RteToolbarButtonFeature = require_slottable_request.featureFacade(RteToolbarButtonFeatureImpl);
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/atom.ts
+var isGenerator = (value) => value !== null && typeof value === "object" && "next" in value;
+var AtomView = class {
+	constructor(node, config, atomName) {
+		this.dom = document.createElement("span");
+		this.dom.className = "atom-wrapper";
+		this.dom.setAttribute("part", `node--${atomName}`);
+		const result = config.resolveValue ? config.resolveValue(node.attrs.value) : node.attrs.value;
+		if (isGenerator(result)) {
+			this.dom.textContent = "";
+			this.handleResolvedGenerator(result);
+		} else this.dom.textContent = result ?? "";
+	}
+	async handleResolvedGenerator(generator) {
+		const iterator = generator[Symbol.asyncIterator]();
+		let result;
+		do {
+			result = await iterator.next();
+			this.dom.textContent = result.value ?? "";
+		} while (!result.done);
+	}
+};
+var RteAtomFeatureImpl = class extends require_slottable_request.RteFeatureImpl {
+	constructor(atomName, config = {}) {
+		super();
+		this.atomName = atomName;
+		this.config = config;
+		this.name = `RteAtomFeature[${atomName}]`;
+	}
+	getSchema() {
+		const atomSpec = {
+			inline: true,
+			group: "inline",
+			selectable: true,
+			atom: true,
+			attrs: { value: { validate: "string" } },
+			parseDOM: [{
+				tag: `span[data-atom-type="${this.atomName}"][data-value]`,
+				getAttrs: (dom) => ({ value: dom.getAttribute("data-value") })
+			}],
+			/** Since we use a NodeView, toDOM is only used for Rich Text View */
+			toDOM: (node) => {
+				const serializedValue = this.config.serializeValueToHtml ? this.config.serializeValueToHtml(node.attrs.value) : node.attrs.value;
+				if (serializedValue === null) return document.createDocumentFragment();
+				return [
+					"span",
+					{ part: `node--${this.atomName}` },
+					serializedValue
+				];
+			},
+			serializeToDOM: (node) => {
+				const serializedValue = this.config.serializeValueToHtml ? this.config.serializeValueToHtml(node.attrs.value) : node.attrs.value;
+				if (serializedValue === null) return document.createTextNode("");
+				return [
+					"span",
+					{
+						"data-atom-type": this.atomName,
+						"data-value": node.attrs.value
+					},
+					serializedValue
+				];
+			}
+		};
+		return [this.contribution({ nodes: { [this.atomName]: atomSpec } })];
+	}
+	getPlugins(_rte) {
+		return [this.contribution(new prosemirror_state.Plugin({ props: { nodeViews: { [this.atomName]: (node) => new AtomView(node, this.config, this.atomName) } } }))];
+	}
+};
+var RteAtomFeature = require_slottable_request.featureFacade(RteAtomFeatureImpl);
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/input-rule.ts
+var RteInputRuleFeatureImpl = class extends require_slottable_request.RteFeatureImpl {
+	constructor(featureId, options) {
+		super();
+		this.featureId = featureId;
+		this.options = options;
+		this.name = `RteInputRuleFeature[${featureId}]`;
+	}
+	getInputRules(rte) {
+		const basePattern = `(?:${this.options.pattern.source})`;
+		const handler = (state, match, start, end) => {
+			const fragment = this.options.handler(match);
+			if (!fragment) return null;
+			return state.tr.replaceWith(start, end, prosemirror_model.Fragment.fromJSON(rte.schema, fragment));
+		};
+		const spec = { rule: new prosemirror_inputrules.InputRule(this.options.matchAfterWhitespace ? new RegExp(`${basePattern} $`) : new RegExp(`${basePattern}$`), handler) };
+		if (this.options.matchAfterWhitespace) spec.enterHandler = {
+			regex: new RegExp(`${basePattern}$`),
+			handler
+		};
+		return [this.contribution(spec)];
+	}
+};
+var RteInputRuleFeature = require_slottable_request.featureFacade(RteInputRuleFeatureImpl);
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/keyboard-shortcuts.ts
+function toCommand(handler, rteInstance) {
+	return (_state, _dispatch) => handler(rteInstance);
+}
+var RteKeyboardShortcutsFeatureImpl = class extends require_slottable_request.RteFeatureImpl {
+	constructor(featureId, options) {
+		super();
+		this.featureId = featureId;
+		this.options = options;
+		this.name = `RteKeyboardShortcutsFeature[${featureId}]`;
+	}
+	getPlugins(rte) {
+		const bindings = {};
+		for (const [key, handler] of Object.entries(this.options.shortcuts)) bindings[key] = toCommand(handler, rte.facade);
+		return [this.contribution((0, prosemirror_keymap.keymap)(bindings), require_slottable_request.contributionPriority.high)];
+	}
+};
+var RteKeyboardShortcutsFeature = require_slottable_request.featureFacade(RteKeyboardShortcutsFeatureImpl);
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/suggest.style.scss?inline
+var suggest_style_default = ".suggest-popover{flex-direction:column;gap:2px;max-block-size:408px;min-inline-size:128px;max-inline-size:248px;padding:4px;display:flex}.suggest-loading-widget{vertical-align:middle;white-space:normal;align-items:center;margin-inline-start:2px;display:inline-flex}.suggest-empty-message{color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);text-align:center;justify-content:center;align-items:center;min-block-size:40px;display:flex}";
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/suggest.ts
+var isPopoverOpen = (state) => Boolean(state?.suggestions && !state.dismissed);
+var popoverShowsResults = (state) => isPopoverOpen(state) && state.suggestions.items.length > 0;
+function findMatch(state, regex) {
+	const { $cursor } = state.selection;
+	if (!$cursor) return null;
+	const textBefore = textBeforeCursor($cursor);
+	const match = regex.exec(textBefore);
+	if (!match) return null;
+	const blockStart = $cursor.pos - $cursor.parentOffset;
+	return {
+		text: match[0],
+		groups: [...match],
+		start: blockStart + match.index,
+		end: blockStart + match.index + match[0].length
+	};
+}
+var replaceMatch = (view, match, fragment) => {
+	const { state } = view;
+	view.dispatch((0, prosemirror_history.closeHistory)(state.tr));
+	const tr = view.state.tr;
+	tr.replaceWith(match.start, match.end, prosemirror_model.Fragment.fromJSON(view.state.schema, fragment));
+	const newPos = tr.mapping.map(match.end);
+	tr.setSelection(prosemirror_state.TextSelection.create(tr.doc, newPos));
+	view.dispatch(tr.scrollIntoView());
+};
+var RteSuggestFeatureImpl = class extends require_slottable_request.RteFeatureImpl {
+	selectSuggestion(view, suggestState, suggestion) {
+		const fragment = this.options.select(suggestion);
+		replaceMatch(view, suggestState.match, fragment);
+		view.focus();
+	}
+	async startLoadingSuggestions(match, dispatch) {
+		const gen = ++this.loadGeneration;
+		const suggestions = await this.options.load(match);
+		if (gen !== this.loadGeneration) return;
+		dispatch({
+			type: "load",
+			generation: gen,
+			suggestions
+		});
+	}
+	constructor(featureId, options) {
+		super();
+		this.featureId = featureId;
+		this.options = options;
+		this.pluginKey = new prosemirror_state.PluginKey("suggest");
+		this.loadGeneration = 0;
+		this.name = `RteSuggestFeature[${featureId}]`;
+	}
+	getStyles() {
+		return [this.contribution(suggest_style_default)];
+	}
+	getPlugins(rte) {
+		const createSuggestActionTr = (action) => rte.state.tr.setMeta(this.pluginKey, action);
+		const dispatchSuggestAction = (action) => rte.dispatchTransaction(createSuggestActionTr(action));
+		const suggestPlugin = new prosemirror_state.Plugin({
+			key: this.pluginKey,
+			state: {
+				init: () => null,
+				apply: (tr, prevState, _prevEditor, newEditor) => {
+					const match = findMatch(newEditor, this.options.pattern);
+					if (!match) return null;
+					if (!prevState && !tr.docChanged) return null;
+					if (prevState?.dismissed) return prevState;
+					const loadingDecoration = (isLoading) => {
+						if (!isLoading) return prosemirror_view.DecorationSet.empty;
+						return Boolean(prevState?.loadingDecoration.find().length ?? 0) ? prevState.loadingDecoration.map(tr.mapping, tr.doc) : prosemirror_view.DecorationSet.create(tr.doc, [prosemirror_view.Decoration.widget(match.end, () => {
+							const wrapper = document.createElement("span");
+							wrapper.className = "suggest-loading-widget";
+							const spinner = rte.createComponent(require_definition.ProgressRing);
+							spinner.size = -6;
+							wrapper.appendChild(spinner);
+							return wrapper;
+						}, {
+							ignoreSelection: true,
+							side: 1
+						})]);
+					};
+					const action = tr.getMeta(this.pluginKey);
+					if (prevState && action) switch (action.type) {
+						case "load": return {
+							...prevState,
+							suggestions: {
+								generation: action.generation,
+								items: action.suggestions,
+								selectedIndex: 0,
+								visibleFocus: false
+							},
+							loadingDecoration: loadingDecoration(false)
+						};
+						case "navigate": {
+							/* v8 ignore next 3 -- defensive: navigate is only dispatched after results are loaded @preserve */
+							if (!prevState.suggestions?.items.length) return prevState;
+							if (!prevState.suggestions.visibleFocus) return {
+								...prevState,
+								suggestions: {
+									...prevState.suggestions,
+									visibleFocus: true
+								}
+							};
+							const newIndex = Math.max(0, Math.min(prevState.suggestions.items.length - 1, prevState.suggestions.selectedIndex + (action.action === "up" ? -1 : 1)));
+							return {
+								...prevState,
+								suggestions: {
+									...prevState.suggestions,
+									selectedIndex: newIndex
+								}
+							};
+						}
+						case "dismiss": return {
+							...prevState,
+							dismissed: true,
+							loadingDecoration: prosemirror_view.DecorationSet.empty
+						};
+					}
+					if (!prevState) {
+						this.startLoadingSuggestions(match.groups, dispatchSuggestAction);
+						return {
+							match,
+							loadingDecoration: loadingDecoration(true)
+						};
+					}
+					const matchChanged = match.groups[0] !== prevState.match.groups[0];
+					if (matchChanged) this.startLoadingSuggestions(match.groups, dispatchSuggestAction);
+					return {
+						...prevState,
+						match,
+						suggestions: prevState.suggestions ? {
+							...prevState.suggestions,
+							visibleFocus: false
+						} : void 0,
+						loadingDecoration: loadingDecoration(matchChanged)
+					};
+				}
+			},
+			props: { decorations: (state) => {
+				const suggestState = this.pluginKey.getState(state);
+				if (!suggestState) return null;
+				return suggestState.loadingDecoration.add(state.doc, [prosemirror_view.Decoration.inline(suggestState.match.start, suggestState.match.end, { id: `suggest-anchor-${this.featureId}` })]);
+			} },
+			view: (view) => {
+				const ctx = new UiCtx(view, rte, {
+					popupPlacement: "bottom",
+					shouldReturnFocusToEditor: true
+				});
+				const popover = rte.createComponent(Popover);
+				popover.anchorId = `suggest-anchor-${this.featureId}`;
+				popover.kind = "autocomplete";
+				popover.offset = 4;
+				const content = createDiv(ctx, {
+					className: "suggest-popover",
+					children: []
+				});
+				popover.appendChild(content);
+				view.dom.getRootNode().querySelector(".popovers").appendChild(popover);
+				const emptySlotName = `${this.featureId}-suggestions-empty`;
+				const host = view.dom.getRootNode().host;
+				let emptySlotShowing = false;
+				const updateEmptySlotShowing = (showing) => {
+					if (!emptySlotShowing && showing) require_slottable_request.dispatchSlottableRequest(host, "suggestions-empty-state", emptySlotName, { id: this.featureId });
+					if (emptySlotShowing && !showing) require_slottable_request.dispatchSlottableRequest(host, "suggestions-empty-state", emptySlotName, require_slottable_request.removeSymbol);
+					emptySlotShowing = showing;
+				};
+				const updatePopoverContent = (suggestState) => {
+					content.innerHTML = "";
+					const suggestions = suggestState.suggestions;
+					const showEmptyState = suggestions.items.length === 0;
+					updateEmptySlotShowing(showEmptyState);
+					if (showEmptyState) {
+						const emptySlot = document.createElement("slot");
+						emptySlot.name = emptySlotName;
+						emptySlot.textContent = rte.getLocale().richTextEditor.suggestNoResults;
+						content.appendChild(createDiv(ctx, {
+							className: "suggest-empty-message",
+							children: [emptySlot]
+						}));
+						return;
+					}
+					for (const [index, suggestion] of suggestions.items.entries()) {
+						const item = rte.createComponent(require_option.ListboxOption);
+						item.text = suggestion.text;
+						item.textSecondary = suggestion.textSecondary;
+						if (index === suggestions.selectedIndex) {
+							item.selected = true;
+							if (suggestions.visibleFocus) item._highlighted = true;
+							queueMicrotask(() => {
+								item.scrollIntoView({ block: "nearest" });
+							});
+						}
+						item.addEventListener("click", (e) => {
+							e.preventDefault();
+							e.stopPropagation();
+							this.selectSuggestion(view, suggestState, suggestion);
+						});
+						content.appendChild(item);
+					}
+				};
+				return {
+					update: (view) => {
+						ctx.updateBindings();
+						const suggestState = this.pluginKey.getState(view.state);
+						const showPopover = isPopoverOpen(suggestState);
+						popover.requestOpenState(showPopover);
+						if (showPopover) updatePopoverContent(suggestState);
+						else updateEmptySlotShowing(false);
+					},
+					destroy: () => {
+						updateEmptySlotShowing(false);
+						popover.remove();
+					}
+				};
+			}
+		});
+		return [this.contribution(suggestPlugin), this.contribution((0, prosemirror_keymap.keymap)({
+			ArrowUp: (state, dispatch) => {
+				if (!popoverShowsResults(this.pluginKey.getState(state))) return false;
+				dispatch?.(createSuggestActionTr({
+					type: "navigate",
+					action: "up"
+				}));
+				return true;
+			},
+			ArrowDown: (state, dispatch) => {
+				if (!popoverShowsResults(this.pluginKey.getState(state))) return false;
+				dispatch?.(createSuggestActionTr({
+					type: "navigate",
+					action: "down"
+				}));
+				return true;
+			},
+			Enter: (state, _dispatch, view) => {
+				const suggestState = this.pluginKey.getState(state);
+				if (!popoverShowsResults(suggestState)) return false;
+				const suggestion = suggestState.suggestions.items[suggestState.suggestions.selectedIndex];
+				/* v8 ignore next 3 -- defensive: view is always passed by keymap @preserve */
+				if (view) this.selectSuggestion(view, suggestState, suggestion);
+				return true;
+			},
+			Escape: (state, dispatch) => {
+				if (!isPopoverOpen(this.pluginKey.getState(state))) return false;
+				dispatch?.(createSuggestActionTr({ type: "dismiss" }));
+				return true;
+			}
+		}), require_slottable_request.contributionPriority.high)];
+	}
+};
+var RteSuggestFeature = require_slottable_request.featureFacade(RteSuggestFeatureImpl);
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/character-count.ts
+var countCharacters = (doc) => doc.textBetween(0, doc.content.size, void 0, " ").length;
+var RteCharacterCountFeatureImpl = class extends require_slottable_request.RteFeatureImpl {
+	constructor(config) {
+		super();
+		this.config = config;
+		this.name = "RteCharacterCountFeature";
+	}
+	getPlugins() {
+		const limit = this.config?.limit;
+		if (limit === void 0) return [];
+		return [this.contribution(new prosemirror_state.Plugin({ filterTransaction: (transaction, state) => {
+			if (!transaction.docChanged) return true;
+			const oldSize = countCharacters(state.doc);
+			const newSize = countCharacters(transaction.doc);
+			if (newSize <= limit) return true;
+			if (oldSize > limit) return newSize <= oldSize;
+			if (!transaction.getMeta("paste")) return false;
+			const pos = transaction.selection.$head.pos;
+			const from = pos - (newSize - limit);
+			const to = pos;
+			transaction.deleteRange(from, to);
+			return countCharacters(transaction.doc) <= limit;
+		} }))];
+	}
+	getPublicInterface(rte) {
+		const limit = this.config?.limit;
+		return {
+			get characters() {
+				return countCharacters(rte.state.doc);
+			},
+			get limit() {
+				return limit;
+			}
+		};
+	}
+};
+var RteCharacterCountFeature = require_slottable_request.featureFacade(RteCharacterCountFeatureImpl);
+//#endregion
+//#region src/lib/rich-text-editor/definition.ts
+var richTextEditorDefinition = require_vivid_element.defineVividComponent("rich-text-editor", RichTextEditor, RichTextEditorTemplate, [
+	require_definition$8.dividerDefinition,
+	require_definition$9.selectDefinition,
+	require_definition$7.listboxOptionDefinition,
+	require_definition$1.buttonDefinition,
+	require_definition$6.tooltipDefinition,
+	require_definition$4.menuDefinition,
+	require_definition$3.menuItemDefinition,
+	require_definition$5.textFieldDefinition,
+	popoverDefinition,
+	require_definition.progressRingDefinition
+], {
+	styles: rich_text_editor_default,
+	shadowOptions: { delegatesFocus: true }
+});
+/**
+* Registers the rich-text-editor element with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerRichTextEditor = require_vivid_element.createRegisterFunction(richTextEditorDefinition);
+//#endregion
+Object.defineProperty(exports, "RichTextEditor", {
+	enumerable: true,
+	get: function() {
+		return RichTextEditor;
+	}
+});
+Object.defineProperty(exports, "RteAlignmentFeature", {
+	enumerable: true,
+	get: function() {
+		return RteAlignmentFeature;
+	}
+});
+Object.defineProperty(exports, "RteAtomFeature", {
+	enumerable: true,
+	get: function() {
+		return RteAtomFeature;
+	}
+});
+Object.defineProperty(exports, "RteBase", {
+	enumerable: true,
+	get: function() {
+		return RteBase;
+	}
+});
+Object.defineProperty(exports, "RteBoldFeature", {
+	enumerable: true,
+	get: function() {
+		return RteBoldFeature;
+	}
+});
+Object.defineProperty(exports, "RteCharacterCountFeature", {
+	enumerable: true,
+	get: function() {
+		return RteCharacterCountFeature;
+	}
+});
+Object.defineProperty(exports, "RteConfig", {
+	enumerable: true,
+	get: function() {
+		return RteConfig;
+	}
+});
+Object.defineProperty(exports, "RteDropHandlerFeature", {
+	enumerable: true,
+	get: function() {
+		return RteDropHandlerFeature;
+	}
+});
+Object.defineProperty(exports, "RteFileHandlerFeature", {
+	enumerable: true,
+	get: function() {
+		return RteFileHandlerFeature;
+	}
+});
+Object.defineProperty(exports, "RteFontSizePickerFeature", {
+	enumerable: true,
+	get: function() {
+		return RteFontSizePickerFeature;
+	}
+});
+Object.defineProperty(exports, "RteHardBreakFeature", {
+	enumerable: true,
+	get: function() {
+		return RteHardBreakFeature;
+	}
+});
+Object.defineProperty(exports, "RteHtmlParser", {
+	enumerable: true,
+	get: function() {
+		return RteHtmlParser;
+	}
+});
+Object.defineProperty(exports, "RteHtmlSerializer", {
+	enumerable: true,
+	get: function() {
+		return RteHtmlSerializer;
+	}
+});
+Object.defineProperty(exports, "RteInlineImageFeature", {
+	enumerable: true,
+	get: function() {
+		return RteInlineImageFeature;
+	}
+});
+Object.defineProperty(exports, "RteInputRuleFeature", {
+	enumerable: true,
+	get: function() {
+		return RteInputRuleFeature;
+	}
+});
+Object.defineProperty(exports, "RteItalicFeature", {
+	enumerable: true,
+	get: function() {
+		return RteItalicFeature;
+	}
+});
+Object.defineProperty(exports, "RteKeyboardShortcutsFeature", {
+	enumerable: true,
+	get: function() {
+		return RteKeyboardShortcutsFeature;
+	}
+});
+Object.defineProperty(exports, "RteLinkFeature", {
+	enumerable: true,
+	get: function() {
+		return RteLinkFeature;
+	}
+});
+Object.defineProperty(exports, "RteListFeature", {
+	enumerable: true,
+	get: function() {
+		return RteListFeature;
+	}
+});
+Object.defineProperty(exports, "RteMonospaceFeature", {
+	enumerable: true,
+	get: function() {
+		return RteMonospaceFeature;
+	}
+});
+Object.defineProperty(exports, "RtePlaceholderFeature", {
+	enumerable: true,
+	get: function() {
+		return RtePlaceholderFeature;
+	}
+});
+Object.defineProperty(exports, "RteStrikethroughFeature", {
+	enumerable: true,
+	get: function() {
+		return RteStrikethroughFeature;
+	}
+});
+Object.defineProperty(exports, "RteSuggestFeature", {
+	enumerable: true,
+	get: function() {
+		return RteSuggestFeature;
+	}
+});
+Object.defineProperty(exports, "RteTextBlockPickerFeature", {
+	enumerable: true,
+	get: function() {
+		return RteTextBlockPickerFeature;
+	}
+});
+Object.defineProperty(exports, "RteTextColorPickerFeature", {
+	enumerable: true,
+	get: function() {
+		return RteTextColorPickerFeature;
+	}
+});
+Object.defineProperty(exports, "RteToolbarButtonFeature", {
+	enumerable: true,
+	get: function() {
+		return RteToolbarButtonFeature;
+	}
+});
+Object.defineProperty(exports, "RteToolbarFeature", {
+	enumerable: true,
+	get: function() {
+		return RteToolbarFeature;
+	}
+});
+Object.defineProperty(exports, "RteUnderlineFeature", {
 	enumerable: true,
 	get: function() {
-		return RichTextView;
+		return RteUnderlineFeature;
 	}
 });
-Object.defineProperty(exports, "registerRichTextView", {
+Object.defineProperty(exports, "registerRichTextEditor", {
 	enumerable: true,
 	get: function() {
-		return registerRichTextView;
+		return registerRichTextEditor;
 	}
 });
-Object.defineProperty(exports, "richTextViewDefinition", {
+Object.defineProperty(exports, "richTextEditorDefinition", {
 	enumerable: true,
 	get: function() {
-		return richTextViewDefinition;
+		return richTextEditorDefinition;
 	}
 });