@vonage/vivid 5.24.0 → 5.25.0

package/unbundled/definition62.js

@@ -1,795 +1,3619 @@
-import { d as createRegisterFunction, u as defineVividComponent } from "./vivid-element.js";
-import { t as iconDefinition } from "./definition.js";
+import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
-import { a as affixIconTemplateFactory, i as IconWrapper, n as AffixIconWithTrailing } from "./affix.js";
-import { n as FormAssociated } from "./form-associated.js";
-import { t as Localized } from "./localized.js";
-import { i as Button, r as chevronTemplateFactory, t as buttonDefinition } from "./definition6.js";
-import { t as handleEscapeKeyAndStopPropogation } from "./dialog.js";
-import { i as Popup, t as popupDefinition } from "./definition9.js";
-import { n as applyHostSemantics, t as HostSemantics } from "./host-semantics.js";
-import { n as WithLightDOMFeedback, r as feedbackMessageDefinition } from "./mixins.js";
-import { t as FormElement } from "./form-element.js";
-import { t as WithErrorText } from "./with-error-text.js";
-import { t as WithSuccessText } from "./with-success-text.js";
-import { t as WithContextualHelp } from "./with-contextual-help.js";
-import { r as ListboxOption, t as listboxOptionDefinition } from "./definition29.js";
-import { t as optgroupDefinition } from "./definition30.js";
-import { t as Listbox } from "./listbox.js";
-import { Observable, Updates, attr, html, observable, ref, slotted, volatile, when } from "@microsoft/fast-element";
-import { classNames, inRange, keyArrowDown, keyArrowUp, keyEnd, keyEnter, keyEscape, keyHome, keySpace, keyTab, uniqueId } from "@microsoft/fast-web-utilities";
-//#region src/lib/select/select.scss?inline
-var select_default = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}.chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;display:flex;transform:rotate(0)}@media (prefers-reduced-motion:no-preference){.chevron{transition:transform .2s}}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host(:focus-visible){outline:none}:host{--_low-ink-color:var(--vvd-color-neutral-600);--focus-stroke-gap-color:transparent;flex-direction:column;gap:4px;display:inline-flex}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-600);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.control{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.control.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.control.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control.error:where(:not(.disabled,:disabled)){--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:var(--vvd-color-alert-500)}.control.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.control.success:where(:not(.disabled,:disabled)){--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:var(--vvd-color-success-500)}.control.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.control{--_connotation-color-primary:var(--vvd-select-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-select-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-select-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-select-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-faint:var(--vvd-select-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-select-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-firm:var(--vvd-select-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-select-accent-fierce,var(--vvd-color-neutral-700));border-radius:var(--_select-control-border-radius);block-size:var(--_select-block-size);padding-inline:var(--_select-padding-inline);--_select-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);--_select-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_select-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);justify-content:space-between;align-items:center;gap:8px;transition:box-shadow .2s,background-color .2s;display:flex}.control.size-condensed{--_select-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_select-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_select-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2)}.control.size-condensed:not(.shape-pill){--_select-control-border-radius:4px}.control-wrapper{position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control:not(.shape-pill){--_select-control-border-radius:8px}.control.shape-pill{--_select-control-border-radius:24px}.listbox{max-height:var(--select-height,408px);flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}:host([multiple]:focus-visible) .listbox{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:8px}.selected-value{white-space:nowrap;flex-grow:1;align-items:center;column-gap:12px;display:flex;overflow:hidden}.selected-value .text{text-overflow:ellipsis;max-inline-size:100%;overflow:hidden}.control.shows-placeholder .selected-value .text{color:var(--vvd-color-neutral-600)}.selected-value slot[name=icon]{flex:0 0 var(--_select-icon-size);font-size:var(--_select-icon-size);line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}.feedback-wrapper{display:contents}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width,100%)}:host([multiple]) ::part(popup-base){position:static}@supports selector(:has(*)){:host(:focus-within) .control:not(.has-activedescendant,:has(.clear-button:focus)){--focus-stroke-gap-color:transparent;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))}}@supports not selector(:has(*)){:host(:focus-within) .control:not(.has-activedescendant){--focus-stroke-gap-color:transparent;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))}}:host([multiple]),:host(:not(:focus-visible)){--_suppressable-focus-shadow:none;--_suppressable-focus-outline:none;--_suppressable-focus-outline-offset:0}:host([multiple]) .clear-button{margin-inline-start:auto}:host([multiple][clearable]) .label-wrapper{min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}";
-//#endregion
-//#region src/lib/select/select.ts
+import { r as ProgressRing, t as progressRingDefinition } from "./definition5.js";
+import { n as WithObservableLocale } from "./localized.js";
+import { i as Button, t as buttonDefinition } from "./definition6.js";
+import { i as Popup, r as PlacementStrategy, t as popupDefinition } from "./definition9.js";
+import { i as MenuItem, t as menuItemDefinition } from "./definition11.js";
+import { r as Menu, t as menuDefinition } from "./definition12.js";
+import { t as Divider } from "./divider.js";
+import { t as generateRandomId } from "./randomId.js";
+import { n as textFieldDefinition, r as TextField } from "./definition26.js";
+import { n as tooltipDefinition, r as Tooltip } from "./definition27.js";
+import { t as ListboxOption } from "./option.js";
+import { t as listboxOptionDefinition } from "./definition29.js";
+import { t as dividerDefinition } from "./definition36.js";
+import { a as featureFacade, c as impl, i as contributionPriority, n as removeSymbol, o as getFeatureImpl, r as RteFeatureImpl, s as sortedContributions, t as dispatchSlottableRequest } from "./slottable-request.js";
+import { n as selectDefinition, r as Select } from "./definition63.js";
+import { ElementStyles, html, observable, ref, volatile } from "@microsoft/fast-element";
+import { DOMParser, DOMSerializer, Fragment, NodeRange, Schema, Slice } from "prosemirror-model";
+import { AllSelection, EditorState, NodeSelection, Plugin, PluginKey, TextSelection } from "prosemirror-state";
+import { Decoration, DecorationSet, EditorView } from "prosemirror-view";
+import { keymap } from "prosemirror-keymap";
+import { autoJoin, baseKeymap, chainCommands, createParagraphNear, liftEmptyBlock, newlineInCode, splitBlockAs, toggleMark } from "prosemirror-commands";
+import { dropCursor } from "prosemirror-dropcursor";
+import { gapCursor } from "prosemirror-gapcursor";
+import DOMPurify from "dompurify";
+import { closeHistory, history, redo, undo } from "prosemirror-history";
+import { InputRule, inputRules, undoInputRule } from "prosemirror-inputrules";
+import { RemoveMarkStep, ReplaceAroundStep, dropPoint } from "prosemirror-transform";
+import { marks } from "prosemirror-schema-basic";
+//#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-editor/rich-text-editor.ts
 /**
 * @public
-* @component select
-* @slot - Default slot.
-* @slot icon - The preferred way to add an icon to the select control.
-* @slot meta - Slot to add meta content to the select control.
-* @slot helper-text - Describes how to use the select. Alternative to the `helper-text` attribute.
-* @event {CustomEvent<undefined>} input - Fires a custom 'input' event when the value updates
-* @event {CustomEvent<HTMLElement>} change - Fires a custom 'change' event when the value updates
-* @vueModel modelValue value input,@lazy:change `event.currentTarget.value`
-* @testAction selectOptionByValue selectOptionByValue
-* @testAction selectOptionByText selectOptionByText
+* @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 Select = class extends WithLightDOMFeedback(WithContextualHelp(WithErrorText(WithSuccessText(Localized(FormElement(HostSemantics(AffixIconWithTrailing(FormAssociated(Listbox))))))))) {
+var RichTextEditor = class extends WithObservableLocale(VividElement) {
+	/** @internal */
+	instanceChanged(prevInstance) {
+		prevInstance?.[impl].destroyViewIfNeeded();
+		this._initViewIfNeeded();
+		prevInstance?.[impl].styles.removeStylesFrom(this.shadowRoot);
+		this.instance?.[impl].styles.addStylesTo(this.shadowRoot);
+	}
+	_initViewIfNeeded() {
+		const instance = this.instance?.[impl];
+		if (instance && this.$fastController.isConnected && !instance.view) {
+			this._syncStateIfNeeded();
+			instance.createView(this._editorEl);
+		}
+	}
+	_destroyViewIfNeeded() {
+		this.instance?.[impl].destroyViewIfNeeded();
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this._initViewIfNeeded();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._destroyViewIfNeeded();
+	}
+	/** @internal */
+	localeChanged() {
+		this._syncStateIfNeeded();
+	}
+	_syncStateIfNeeded() {
+		this.instance?.[impl].updateHostState({
+			locale: this.locale,
+			ctx: this._ctx
+		});
+	}
+};
+__decorate([observable], RichTextEditor.prototype, "instance", void 0);
+//#endregion
+//#region src/lib/rich-text-editor/rich-text-editor.template.ts
+var RichTextEditorTemplate = (ctx) => {
+	return html`<template :_ctx="${() => ctx}">
+		<div class="rte">
+			<slot name="editor-before"></slot>
+			<div class="editor-viewport" ${ref("editorViewportElement")}>
+				<div class="editor-scroll-area" part="editor-scrollable-area">
+					<slot name="editor-start"></slot>
+					<div class="editor rich-text" ${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: PlacementStrategy.AutoPlacementHorizontal,
+		shiftCrossAxis: false,
+		strategy: "absolute"
+	},
+	autocomplete: {
+		placement: "bottom-start",
+		placementStrategy: PlacementStrategy.Flip,
+		shiftCrossAxis: false,
+		strategy: "fixed"
+	},
+	imageOptions: {
+		placement: "bottom",
+		placementStrategy: PlacementStrategy.Flip,
+		shiftCrossAxis: true,
+		strategy: "absolute"
+	}
+};
+var popoverTemplate = (context) => {
+	const popup = context.tagFor(Popup);
+	return 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 VividElement {
 	constructor(..._args) {
 		super(..._args);
-		this.proxy = document.createElement("select");
-		this.activeIndex = -1;
-		this.rangeStartIndex = -1;
-		this.open = false;
-		this.listboxId = uniqueId("listbox-");
-		this.maxHeight = 0;
-		this.fixedDropdown = false;
-		this._feedbackWrapper = null;
-		this._isResetting = false;
-		this.clearable = false;
-		this._isClearButtonFocused = false;
+		this.kind = "default";
+		this.anchorBlocksPopover = false;
+		this.onAnchorBlockPopoverChanged = () => {
+			this.anchorBlocksPopover = this.anchorEl?.dataset.blockPopover === "true" || false;
+		};
+		this.requestedOpenState = false;
 	}
-	/**
-	* Returns the last checked option.
-	*
-	* @internal
-	*/
-	get activeOption() {
-		return this.options[this.activeIndex];
+	static setBlockPopover(onElement, block) {
+		onElement.dataset.blockPopover = block ? "true" : "false";
+		const event = new CustomEvent("block-popover-changed", {
+			bubbles: false,
+			composed: false
+		});
+		onElement.dispatchEvent(event);
 	}
-	/**
-	* Returns the list of checked options.
-	*
-	* @internal
-	*/
-	get checkedOptions() {
-		return this.options.filter((o) => o.checked);
+	/** Closes the popover. It reopens when anchorEl changes to a new element that does not block it. */
+	dismiss() {
+		this.anchorBlocksPopover = true;
 	}
-	/**
-	* Returns the index of the first selected option.
-	*
-	* @internal
-	*/
-	get firstSelectedOptionIndex() {
-		return this.options.indexOf(this.firstSelectedOption);
+	anchorElChanged(prev, next) {
+		prev?.removeEventListener("block-popover-changed", this.onAnchorBlockPopoverChanged);
+		next?.addEventListener("block-popover-changed", this.onAnchorBlockPopoverChanged);
+		this.onAnchorBlockPopoverChanged();
 	}
-	/**
-	* Updates the `ariaActiveDescendant` property when the active index changes.
-	*
-	* @internal
-	*/
-	activeIndexChanged(_, next) {
-		this._activeDescendant = this.options[next]?.id ?? "";
-		this.focusAndScrollOptionIntoView();
+	anchorIdChanged() {
+		this.updateAnchor();
 	}
-	/**
-	* Toggles the checked state for the currently active option.
-	*
-	* @remarks
-	* Multiple-selection mode only.
-	*
-	* @internal
-	*/
-	checkActiveIndex() {
-		const activeItem = this.activeOption;
-		/* v8 ignore else -- @preserve */
-		if (activeItem) activeItem.checked = true;
+	updateAnchor() {
+		if (this.anchorId && this.isConnected) this.anchorEl = this.getRootNode().getElementById(this.anchorId) || void 0;
+		else this.anchorEl = void 0;
 	}
-	/**
-	* Sets the active index to the first option and marks it as checked.
-	*
-	* @remarks
-	* Multi-selection mode only.
-	*
-	* @param preserveChecked - mark all options unchecked before changing the active index
-	*
-	* @internal
-	*/
-	checkFirstOption(preserveChecked) {
-		const firstSelectableIndex = this.getNextSelectableIndex(0);
-		if (firstSelectableIndex === -1) return;
-		if (preserveChecked) {
-			if (this.rangeStartIndex === -1) this.rangeStartIndex = this.activeIndex;
-			this.options.forEach((o, i) => {
-				o.checked = inRange(i, firstSelectableIndex, this.rangeStartIndex + 1) && !o.disabled;
-			});
-		} else this.uncheckAllOptions();
-		this.activeIndex = firstSelectableIndex;
-		this.checkActiveIndex();
+	requestOpenState(open) {
+		this.requestedOpenState = open;
 	}
-	/**
-	* Decrements the active index and sets the matching option as checked.
-	*
-	* @remarks
-	* Multi-selection mode only.
-	*
-	* @param preserveChecked - mark all options unchecked before changing the active index
-	*
-	* @internal
-	*/
-	checkLastOption(preserveChecked) {
-		const lastSelectableIndex = this.getPreviousSelectableIndex(this.length - 1);
-		if (lastSelectableIndex === -1) return;
-		if (preserveChecked) {
-			if (this.rangeStartIndex === -1) this.rangeStartIndex = this.activeIndex;
-			this.options.forEach((o, i) => {
-				o.checked = inRange(i, this.rangeStartIndex, lastSelectableIndex + 1) && !o.disabled;
-			});
-		} else this.uncheckAllOptions();
-		this.activeIndex = lastSelectableIndex;
-		this.checkActiveIndex();
+	get open() {
+		return this.requestedOpenState && !!this.anchorEl && !this.anchorBlocksPopover;
 	}
-	/**
-	* Increments the active index and marks the matching option as checked.
-	*
-	* @remarks
-	* Multiple-selection mode only.
-	*
-	* @param preserveChecked - mark all options unchecked before changing the active index
-	*
-	* @internal
-	*/
-	checkNextOption(preserveChecked) {
-		const nextIndex = this.getNextSelectableIndex(this.activeIndex + 1);
-		if (nextIndex === -1) return;
-		if (preserveChecked) {
-			if (this.rangeStartIndex === -1) this.rangeStartIndex = this.activeIndex;
-			this.options.forEach((o, i) => {
-				o.checked = inRange(i, this.rangeStartIndex, nextIndex + 1) && !o.disabled;
-			});
-		} else this.uncheckAllOptions();
-		this.activeIndex = nextIndex;
-		this.checkActiveIndex();
+	#observer;
+	connectedCallback() {
+		super.connectedCallback();
+		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
+		});
 	}
-	/**
-	* Decrements the active index and marks the matching option as checked.
-	*
-	* @remarks
-	* Multiple-selection mode only.
-	*
-	* @param preserveChecked - mark all options unchecked before changing the active index
-	*
-	* @internal
-	*/
-	checkPreviousOption(preserveChecked) {
-		const previousIndex = this.getPreviousSelectableIndex(this.activeIndex - 1);
-		if (previousIndex === -1) return;
-		if (preserveChecked) {
-			if (this.rangeStartIndex === -1) this.rangeStartIndex = this.activeIndex;
-			if (this.checkedOptions.length === 1) this.rangeStartIndex += 1;
-			this.options.forEach((o, i) => {
-				o.checked = inRange(i, previousIndex, this.rangeStartIndex + 1) && !o.disabled;
-			});
-		} else this.uncheckAllOptions();
-		this.activeIndex = previousIndex;
-		this.checkActiveIndex();
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#observer.disconnect();
 	}
-	/** @internal */
-	focusAndScrollOptionIntoView() {
-		super.focusAndScrollOptionIntoView(this.activeOption);
+};
+__decorate([observable], Popover.prototype, "kind", void 0);
+__decorate([observable], Popover.prototype, "offset", void 0);
+__decorate([observable], Popover.prototype, "anchorBlocksPopover", void 0);
+__decorate([observable], Popover.prototype, "anchorEl", void 0);
+__decorate([observable], Popover.prototype, "anchorId", void 0);
+__decorate([observable], Popover.prototype, "requestedOpenState", void 0);
+__decorate([volatile], Popover.prototype, "open", null);
+var popoverDefinition = defineVividComponent("rich-text-editor-popover", Popover, popoverTemplate, [popupDefinition], {});
+//#endregion
+//#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-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;
 	}
-	/**
-	* In multiple-selection mode:
-	* If any options are selected, the first selected option is checked when
-	* the listbox receives focus. If no options are selected, the first
-	* selectable option is checked.
-	*
-	* @internal
-	*/
-	focusinHandler(e) {
-		if (!this.multiple) {
-			super.focusinHandler(e);
-			return;
-		}
-		/* v8 ignore else -- @preserve */
-		if (!this.shouldSkipFocus && e.target === e.currentTarget) {
-			this.uncheckAllOptions();
-			if (this.activeIndex === -1) this.activeIndex = this.firstSelectedOptionIndex !== -1 ? this.firstSelectedOptionIndex : 0;
-			this.checkActiveIndex();
-			this.setSelectedOptions();
-			this.focusAndScrollOptionIntoView();
-		}
-		this.shouldSkipFocus = false;
+}
+//#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 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 RteFeatureImpl {
+	constructor(..._args) {
+		super(..._args);
+		this.name = "RteForeignHtmlFeature";
+	}
+	getPlugins(rte) {
+		return [this.contribution(new Plugin({ props: {
+			transformPastedHTML: (html) => rte.foreignHtmlParser[impl].transform(html),
+			clipboardParser: rte.foreignHtmlParser[impl].parser,
+			clipboardSerializer: rte.foreignHtmlSerializer[impl].serializer
+		} }))];
+	}
+};
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/internal/cursor-fix.ts
+/**
+* When the cursor is positioned after an inline atom node at the end of a line,
+* browsers may display the cursor inside the atom.
+*/
+var atomCursorFix = ($cursor) => {
+	if (!($cursor.parentOffset === $cursor.parent.content.size)) return null;
+	const nodeBefore = $cursor.nodeBefore;
+	if (nodeBefore && nodeBefore.isInline && nodeBefore.isAtom && !nodeBefore.isText) return {};
+	return null;
+};
+/**
+* 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 RteFeatureImpl {
+	constructor(..._args) {
+		super(..._args);
+		this.name = "RteCursorFix";
 	}
-	/** Sets an option as selected and gives it focus. */
-	setSelectedOptions() {
-		if (!this.multiple) {
-			super.setSelectedOptions();
-			return;
+	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);
 		}
-		/* v8 ignore else -- @preserve */
-		if (this.$fastController.isConnected && this.options) {
-			this.selectedOptions = this.options.filter((o) => o.selected);
-			this.focusAndScrollOptionIntoView();
+		return [this.contribution(new 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(Decoration.widget($cursor.pos, () => createZwspWidget(cursorFixStyles), { side: -1 }));
+			if (after) decorations.push(Decoration.widget($cursor.pos, () => createZwspWidget(cursorFixStyles), { side: 1 }));
+			if (decorations.length === 0) return null;
+			return DecorationSet.create(state.doc, decorations);
+		} } }))];
+	}
+};
+featureFacade(RteCursorFixFeatureImpl);
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/internal/core.ts
+/** Plugin to bring state from the host web component into ProseMirror. */
+var hostBridgePlugin = new Plugin({ state: {
+	init() {
+		return null;
+	},
+	apply(tr, value) {
+		const meta = tr.getMeta(hostBridgePlugin);
+		if (meta) return meta;
+		else return value;
+	}
+} });
+var RteCoreImpl = class extends RteFeatureImpl {
+	constructor(..._args) {
+		super(..._args);
+		this.name = "RteCore";
+		this.disabled = new FeatureState(false);
+		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 = 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 = chainCommands(newlineInCode, createParagraphNear, liftEmptyBlock, splitFnKeepMarks);
+		return [
+			this.contribution(this.disabled.plugin),
+			this.contribution(new Plugin({
+				props: {
+					editable: () => !this.disabled.getValue(rte),
+					handleDOMEvents: { click: (_view, event) => {
+						if (this.disabled.getValue(rte)) {
+							event.preventDefault();
+							return true;
+						}
+						return false;
+					} }
+				},
+				view: (view) => {
+					const popovers = view.dom.getRootNode().querySelector(".popovers");
+					const updateDisabled = () => {
+						const disabled = this.disabled.getValue(rte);
+						popovers.classList.toggle("popovers--disabled", disabled);
+						view.dom.parentElement.classList.toggle("editor--disabled", disabled);
+					};
+					updateDisabled();
+					return { update: () => {
+						updateDisabled();
+					} };
+				}
+			})),
+			this.contribution(keymap({
+				...baseKeymap,
+				Enter: enterKeyChainCommands,
+				"Shift-Enter": enterKeyChainCommands
+			})),
+			this.contribution(dropCursor()),
+			this.contribution(gapCursor()),
+			this.contribution(hostBridgePlugin)
+		];
+	}
+	getFeatures() {
+		return [
+			this,
+			new RteForeignHtmlFeatureImpl(),
+			new RteCursorFixFeatureImpl()
+		];
+	}
+};
+featureFacade(RteCoreImpl);
+//#endregion
+//#region src/lib/rich-text-editor/rte/utils/sanitization.ts
+var DEFAULT_ALLOWED_URI_REGEXP = /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i;
+var ALLOWED_URI_REGEXP_WITH_BLOB = /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp|blob):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i;
+var ATTR_WHITESPACE = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g;
+var domPurifyConfig = { ALLOWED_URI_REGEXP: ALLOWED_URI_REGEXP_WITH_BLOB };
+/**
+* Sanitize potentially dangerous URLs, like "javascript:", in anchor href attributes.
+* Returns empty string if the URL is unsafe.
+*/
+var sanitizeLinkHref = (url) => {
+	if (!DEFAULT_ALLOWED_URI_REGEXP.test(url.replace(ATTR_WHITESPACE, ""))) return "";
+	const anchor = document.createElement("a");
+	anchor.setAttribute("href", url);
+	/* v8 ignore next -- since href is already validated it's probably always present @preserve */
+	return DOMPurify.sanitize(anchor, {
+		RETURN_DOM: true,
+		...domPurifyConfig
+	}).querySelector("a").getAttribute("href") ?? "";
+};
+/**
+* Sanitize potentially dangerous URLs, like "javascript:", in image src attributes.
+* Returns empty string if the URL is unsafe.
+*/
+var sanitizeImageSrc = (url) => {
+	const img = document.createElement("img");
+	img.setAttribute("src", url);
+	return DOMPurify.sanitize(img, {
+		RETURN_DOM: true,
+		...domPurifyConfig
+	}).querySelector("img").getAttribute("src") ?? "";
+};
+/**
+* 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[impl] = new RteHtmlParserImpl(config[impl], options);
+	}
+	/** Converts an HTML string to an RteDocument. */
+	parseDocument(html, options) {
+		return this[impl].parser.parse(this.parseHtml(html, options), { preserveWhitespace: true }).toJSON();
+	}
+	/** Converts an HTML string to an RteFragment. */
+	parseFragment(html, options) {
+		return this[impl].parser.parseSlice(this.parseHtml(html, options), { preserveWhitespace: true }).content.toJSON() ?? [];
+	}
+	parseHtml(html, options) {
+		const dom = DOMPurify.sanitize(html, {
+			RETURN_DOM: true,
+			...domPurifyConfig
+		});
+		const container = document.createDocumentFragment();
+		container.appendChild(dom);
+		options?.modifyDom?.(container);
+		return container;
+	}
+};
+var 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.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);
 	}
-	/**
-	* Toggles the selected state of the provided options. If any provided items
-	* are in an unselected state, all items are set to selected. If every
-	* provided item is selected, they are all unselected.
-	*
-	* @internal
-	*/
-	toggleSelectedForAllCheckedOptions() {
-		const enabledCheckedOptions = this.checkedOptions.filter((o) => !o.disabled);
-		const force = !enabledCheckedOptions.every((o) => o.selected);
-		enabledCheckedOptions.forEach((o) => o.selected = force);
-		this.selectedIndex = this.options.indexOf(enabledCheckedOptions[enabledCheckedOptions.length - 1]);
-		this.setSelectedOptions();
-		this.updateValue(true);
+	for (const name in marks) marks[name]?.forEach((rule) => {
+		insert(rule = copy(rule));
+		if (!(rule.mark || rule.ignore || rule.clearMark)) rule.mark = name;
+	});
+	for (const name in nodes) nodes[name]?.forEach((rule) => {
+		insert(rule = copy(rule));
+		if (!(rule.node || rule.ignore || rule.mark)) rule.node = name;
+	});
+	parserRules.push({
+		tag: "br",
+		closeParent: true
+	});
+	return new DOMParser(schema, parserRules);
+};
+//#endregion
+//#region src/lib/rich-text-editor/rte/html-serializer.ts
+var RteHtmlSerializer = class {
+	constructor(config, options) {
+		this[impl] = new RteHtmlSerializerImpl(config[impl], options);
 	}
-	/** @internal */
-	typeaheadBufferChanged(prev, next) {
-		if (!this.multiple) {
-			super.typeaheadBufferChanged(prev, next);
-			return;
+	/** Converts an RteDocument to an HTML string. */
+	serializeDocument(doc, options) {
+		return this[impl].serializeFragment(doc.content, options);
+	}
+	/** Converts an RteFragment to an HTML string. */
+	serializeFragment(fragment, options) {
+		return this[impl].serializeFragment(fragment, options);
+	}
+};
+var RteHtmlSerializerImpl = class RteHtmlSerializerImpl {
+	constructor(config, options) {
+		this.config = config;
+		const serializers = RteHtmlSerializerImpl.domSerializersFromSchema(config.schema);
+		Object.assign(serializers.nodes, options?.serializers?.nodes ?? {});
+		Object.assign(serializers.marks, options?.serializers?.marks ?? {});
+		this.serializer = new DOMSerializer(serializers.nodes, serializers.marks);
+	}
+	static domSerializersFromSchema(schema) {
+		const result = {
+			nodes: {},
+			marks: {}
+		};
+		for (const name in schema.marks) {
+			const toDOM = schema.marks[name].spec.toDOM;
+			if (toDOM) result.marks[name] = toDOM;
 		}
-		/* v8 ignore if -- @preserve */
-		if (this.$fastController.isConnected) {
-			const typeaheadMatches = this.getTypeaheadMatches();
-			const activeIndex = this.options.indexOf(typeaheadMatches[0]);
-			if (activeIndex > -1) {
-				this.activeIndex = activeIndex;
-				this.uncheckAllOptions();
-				this.checkActiveIndex();
-			}
-			this.typeaheadExpired = false;
+		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;
 	}
-	/**
-	* Unchecks all options.
-	*
-	* @remarks
-	* Multiple-selection mode only.
-	*
-	* @param preserveChecked - reset the rangeStartIndex
-	*
-	* @internal
-	*/
-	uncheckAllOptions(preserveChecked = false) {
-		this.options.forEach((o) => o.checked = false);
-		/* v8 ignore else -- @preserve */
-		if (!preserveChecked) this.rangeStartIndex = -1;
+	serializeFragment(fragment, options) {
+		const parsedFragment = Fragment.fromJSON(this.config.schema, fragment);
+		const serializedFragment = this.serializer.serializeFragment(parsedFragment);
+		const container = document.createDocumentFragment();
+		container.appendChild(serializedFragment);
+		options?.modifyDom?.(container);
+		const output = document.createElement("div");
+		output.appendChild(container);
+		return output.innerHTML;
 	}
-	/**
-	* Sets focus when the open property changes.
-	*
-	* @internal
-	*/
-	openChanged(prev, next) {
-		if (!this.collapsible) return;
-		if (this.open) {
-			this.focusAndScrollOptionIntoView();
-			this.indexWhenOpened = this.selectedIndex;
-			Updates.enqueue(() => this.focus());
-			return;
-		}
-		const didClose = prev && !next;
-		const selectionChangedWhileOpen = this.indexWhenOpened !== this.selectedIndex;
-		if (didClose && selectionChangedWhileOpen) this.updateValue(true);
+};
+//#endregion
+//#region src/lib/rich-text-editor/rte/instance.ts
+var parseDocument = (schema, doc) => {
+	const node = schema.topNodeType.createAndFill(null, doc ? Fragment.fromJSON(schema, doc.content) : null);
+	if (!node) throw new Error("Document could not be parsed");
+	node.check();
+	return node;
+};
+var RteInstance = class {
+	constructor(config, options) {
+		this.options = options;
+		this.feature = (Feature, featureId) => {
+			return this[impl].getPublicInterface(Feature, featureId);
+		};
+		this[impl] = new RteInstanceImpl(this, config, options);
 	}
-	/**
-	* The component is collapsible when in single-selection mode.
-	*
-	* @internal
-	*/
-	get collapsible() {
-		return !this.multiple;
+	/** Returns the current document state. */
+	getDocument() {
+		return this[impl].state.doc.toJSON();
 	}
-	/** @internal */
-	valueChanged(prev, next) {
-		const nextSelectedIndex = this.options.findIndex((el) => el.value === next);
-		const validNextSelectedIndex = this._validSelectedIndex(nextSelectedIndex);
-		const nextValue = this.options[validNextSelectedIndex]?.value ?? "";
-		if (this.selectedIndex !== validNextSelectedIndex) this.selectedIndex = validNextSelectedIndex;
-		if (next !== nextValue) return;
-		super.valueChanged(prev, next);
-		this.updateDisplayValue();
+	/** Reset the editor to its initial state. Optionally, an initial document can be provided. */
+	reset(initialDocument) {
+		this[impl].reset(initialDocument);
 	}
 	/**
-	* Sets the value and display value to match the first selected option.
-	*
-	* @param shouldEmit - if true, the input and change events will be emitted
-	*
-	* @internal
+	* Replaces the current selection with the given content.
+	* If no text is selected, this inserts the content at the cursor position.
 	*/
-	updateValue(shouldEmit) {
-		if (this.$fastController.isConnected) this.value = this.firstSelectedOption?.value ?? "";
-		if (shouldEmit) {
-			this.$emit("input");
-			this.$emit("change", this, {
-				bubbles: true,
-				composed: void 0
-			});
-		}
+	replaceSelection(content, options) {
+		const { state, tr, schema, dispatchTransaction } = this[impl];
+		tr.replaceSelection(new Slice(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 AllSelection ? new AllSelection(tr.doc) : TextSelection.between($anchor, $head));
+		else tr.setSelection(TextSelection.between($head, $head));
+		dispatchTransaction(tr);
 	}
 	/**
-	* Updates the proxy value when the selected index changes.
-	*
-	* @param prev - the previous selected index
-	* @param next - the next selected index
-	*
-	* @internal
+	* 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.
 	*/
-	selectedIndexChanged(prev, next) {
-		super.selectedIndexChanged(prev, next);
-		this.updateValue();
+	replaceDocument(newDocument, options) {
+		const { state, tr, schema, dispatchTransaction } = this[impl];
+		tr.replaceWith(0, state.doc.content.size, parseDocument(schema, newDocument));
+		if (options?.selectContent) tr.setSelection(new AllSelection(tr.doc));
+		else if (options?.cursorPlacement === "end") tr.setSelection(TextSelection.atEnd(tr.doc));
+		else tr.setSelection(TextSelection.atStart(tr.doc));
+		dispatchTransaction(tr);
 	}
 	/**
-	* Handle opening and closing the listbox when the select is clicked.
-	*
-	* @param e - the mouse event
-	* @internal
+	* Scrolls the cursor into view.
+	* Has no effect if the editor is not currently mounted.
 	*/
-	clickHandler(e) {
-		if (this.disabled || this._isFromContextualHelp(e)) return;
-		const clickedOption = e.target.closest(`option,[role=option],[data-vvd-component=option]`);
-		if (clickedOption && clickedOption.disabled) return;
-		if (this.multiple) {
-			this.uncheckAllOptions();
-			this.activeIndex = this.options.indexOf(clickedOption);
-			this.checkActiveIndex();
-			this.toggleSelectedForAllCheckedOptions();
-		} else super.clickHandler(e);
-		if (this.collapsible) this.open = !this.open;
-		return true;
+	scrollIntoView() {
+		const instance = this[impl];
+		if (!instance.view) return;
+		instance.dispatchTransaction(instance.tr.scrollIntoView());
 	}
-	/**
-	* Handles focus state when the element or its children lose focus.
-	*
-	* @param e - The focus event
-	* @internal
-	*/
-	focusoutHandler(e) {
-		if (this.multiple) this.uncheckAllOptions();
-		if (!this.open) return true;
-		const focusTarget = e.relatedTarget;
-		if (this.isSameNode(focusTarget)) {
-			this.focus();
-			return;
-		}
-		/* v8 ignore else -- @preserve */
-		if (!this.options.includes(focusTarget)) {
-			this.open = false;
-			if (this.indexWhenOpened !== this.selectedIndex) this.updateValue(true);
-		}
+};
+var RteInstanceImpl = class {
+	getFeature(name) {
+		const f = this.config.featureMap.get(name);
+		if (!f) throw new Error(`Feature not found: ${name}`);
+		return f;
 	}
-	/**
-	* Updates the value when an option's value changes.
-	*
-	* @param source - the source object
-	* @param propertyName - the property to evaluate
-	*
-	* @internal
-	*/
-	handleChange(source, propertyName) {
-		super.handleChange(source, propertyName);
-		if (propertyName === "value") this.updateValue();
+	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);
 	}
-	/**
-	* Prevents focus when a scrollbar is clicked.
-	*
-	* @param e - the mouse event object
-	*
-	* @internal
-	*/
-	mousedownHandler(e) {
-		if (e.offsetX >= 0 && e.offsetX <= this.listbox.scrollWidth) return super.mousedownHandler(e);
-		return this.collapsible;
+	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[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 ElementStyles(sortedContributions(config.features.flatMap((f) => f.getStyles())));
+		this.initState(options?.initialDocument);
 	}
-	/** @internal */
-	multipleChanged(_, next) {
-		this.options.forEach((o) => {
-			o.checked = next ? false : void 0;
+	initState(initialDoc) {
+		this.state = EditorState.create({
+			doc: parseDocument(this.schema, initialDoc),
+			schema: this.config.schema,
+			plugins: sortedContributions(this.config.features.flatMap((feature) => feature.getPlugins(this)))
 		});
-		this.setSelectedOptions();
-		/* v8 ignore if -- @preserve */
-		if (this.proxy) this.proxy.multiple = next;
 	}
-	/**
-	* Updates the selectedness of each option when the list of selected options changes.
-	*
-	* @param prev - the previous list of selected options
-	* @param next - the current list of selected options
-	*
-	* @internal
-	*/
-	selectedOptionsChanged(prev, next) {
-		super.selectedOptionsChanged(prev, next);
-		this.options.forEach((o, i) => {
-			const proxyOption = this.proxy.options.item(i);
-			if (proxyOption) proxyOption.selected = o.selected;
+	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 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 }
 		});
 	}
-	/**
-	* Resets and fills the proxy to match the component's options.
-	*
-	* @internal
-	*/
-	setProxyOptions() {
-		/* v8 ignore else -- @preserve */
-		if (this.proxy instanceof HTMLSelectElement && this.options) {
-			this.proxy.length = 0;
-			this.options.forEach((option) => {
-				const proxyOption = option.proxy || (option instanceof HTMLOptionElement ? option.cloneNode() : null);
-				if (proxyOption) this.proxy.options.add(proxyOption);
-			});
+	destroyViewIfNeeded() {
+		if (this.view) {
+			this.view.destroy();
+			this.view = null;
 		}
 	}
-	/**
-	* Handles keydown actions when the select is in multiple selection mode.
-	*
-	* @internal
-	*/
-	multipleKeydownHandler(e) {
-		if (this.disabled) return;
-		const { key, shiftKey } = e;
-		this.shouldSkipFocus = false;
-		switch (key) {
-			case keyHome:
-				this.checkFirstOption(shiftKey);
-				return;
-			case keyArrowDown:
-				this.checkNextOption(shiftKey);
-				return;
-			case keyArrowUp:
-				this.checkPreviousOption(shiftKey);
-				return;
-			case keyEnd:
-				this.checkLastOption(shiftKey);
-				return;
-			case keyTab:
-				this.focusAndScrollOptionIntoView();
-				return;
-			case keyEscape:
-				this.uncheckAllOptions();
-				this.checkActiveIndex();
-				return;
-			case keySpace:
-				e.preventDefault();
-				/* v8 ignore else -- @preserve */
-				if (this.typeaheadExpired) {
-					this.toggleSelectedForAllCheckedOptions();
-					return;
-				}
-			default:
-				/* v8 ignore else -- @preserve */
-				if (key.length === 1) this.handleTypeAhead(key);
-				return;
-		}
+	createComponent(type) {
+		return document.createElement(this.hostState().ctx.tagFor(type, true));
 	}
-	/**
-	* Handle keyboard interaction for the select.
-	*
-	* @param e - the keyboard event
-	* @internal
-	*/
-	keydownHandler(e) {
-		const selectedIndexBefore = this.selectedIndex;
-		if (this.multiple) this.multipleKeydownHandler(e);
-		else super.keydownHandler(e);
-		switch (e.key) {
-			case keySpace:
-				e.preventDefault();
-				if (this.collapsible && this.typeaheadExpired) this.open = !this.open;
-				break;
-			case keyHome:
-			case keyEnd:
-				e.preventDefault();
-				break;
-			case keyEnter:
-				e.preventDefault();
-				this.open = !this.open;
-				break;
-			case keyEscape:
-				if (this.collapsible && this.open) {
-					e.preventDefault();
-					this.open = false;
-				}
-				break;
-			case keyTab:
-				if (this.collapsible && this.open) {
-					e.preventDefault();
-					this.open = false;
-				}
-				return true;
-		}
-		if (this.collapsible && !this.open && this.selectedIndex !== selectedIndexBefore) this.updateValue(true);
-		return !(e.key === keyArrowDown || e.key === keyArrowUp);
+	getLocale() {
+		return this.hostState().locale;
 	}
-	connectedCallback() {
-		super.connectedCallback();
-		this.addEventListener("focusout", this.focusoutHandler);
-		this.addEventListener("contentchange", this.updateDisplayValue);
+	get tr() {
+		return this.state.tr;
 	}
-	disconnectedCallback() {
-		this.removeEventListener("focusout", this.focusoutHandler);
-		this.removeEventListener("contentchange", this.updateDisplayValue);
-		super.disconnectedCallback();
+	hostState() {
+		const state = hostBridgePlugin.getState(this.state);
+		if (!state) throw new Error("No host state available");
+		return state;
 	}
-	/** @internal */
-	updateDisplayValue() {
-		if (this.collapsible) Observable.notify(this, "displayValue");
-	}
-	get displayValue() {
-		Observable.track(this, "displayValue");
-		return this.firstSelectedOption?.getAttribute("label") ?? this.firstSelectedOption?.text ?? this.placeholder ?? "";
-	}
-	_newDefaultSelectedIndex(prev, next, currentSelectIndex) {
-		const defaultSelectedIndex = super._newDefaultSelectedIndex(prev, next, currentSelectIndex);
-		if (defaultSelectedIndex === null && currentSelectIndex === -1 && !this.placeholder) {
-			const firstSelectableIndex = this.getNextSelectableIndex(0);
-			if (firstSelectableIndex !== -1) return firstSelectableIndex;
-		}
-		return defaultSelectedIndex;
+	updateHostState(hostState) {
+		this.dispatchTransaction(this.tr.setMeta(hostBridgePlugin, hostState));
 	}
-	_isDefaultSelected(option) {
-		return super._isDefaultSelected(option) || option.value === this.initialValue || !this._isResetting && option.value === this.value;
+};
+//#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 };
 	}
-	slottedOptionsChanged(prev, next) {
-		this.options.forEach((o) => {
-			Observable.getNotifier(o).unsubscribe(this, "value");
-		});
-		super.slottedOptionsChanged(prev, next);
-		this.options.forEach((o) => {
-			Observable.getNotifier(o).subscribe(this, "value");
-		});
-		this.setProxyOptions();
-		this.updateValue();
-		const scale = this.getAttribute("scale") || this.scale;
-		next.forEach((element) => {
-			if (scale) {
-				element.setAttribute("scale", scale);
-				element.scale = scale;
+	fromDOM(dom) {
+		return Object.assign({}, ...this.specs.map((s) => ({ [s.name]: s.fromDOM(dom) })));
+	}
+	getStyle(node) {
+		return this.specs.flatMap((s) => s.toStyles(node)).join("; ");
+	}
+	getDOMAttrsProperties(node) {
+		if (!this.specs.length) return {};
+		return { style: this.getStyle(node) };
+	}
+	getDOMAttrs(node) {
+		if (!this.specs.length) return [];
+		return [this.getDOMAttrsProperties(node)];
+	}
+	extractFromNode(node) {
+		return Object.assign({}, ...Object.keys(this.attrs).map((attr) => ({ [attr]: node.attrs[attr] })));
+	}
+};
+//#endregion
+//#region src/lib/rich-text-editor/rte/utils/textblock-marks.ts
+var TextblockMarks = class {
+	constructor(specs) {
+		this.specs = specs;
+	}
+	getAllowedMarksForNode(nodeName) {
+		return this.specs.filter((spec) => !spec.onNodeName || spec.onNodeName === nodeName).map((spec) => spec.markName);
+	}
+	getReferencedNodeNames() {
+		return new Set(this.specs.map((spec) => spec.onNodeName).filter(Boolean));
+	}
+};
+//#endregion
+//#region src/lib/rich-text-editor/rte/view.ts
+/**
+* Converts an RteDocument to an RteView tree for rendering outside the editor.
+* The logic is adapted from ProseMirror's DOM serialization to ensure the resulting structure
+* matches the editor's HTML structure.
+*/
+var convertToView = (doc, ctx) => {
+	const schema = ctx.config[impl].schema;
+	const getMarkRank = (mark) => schema.marks[mark.type].rank;
+	const marksEqual = (a, b) => {
+		if (a.type !== b.type) return false;
+		const attrsA = a.attrs;
+		const attrsB = b.attrs;
+		if (attrsA === attrsB) return true;
+		/* v8 ignore next -- not currently reachable since all attrs are required @preserve */
+		if (!attrsA || !attrsB) return false;
+		const keysA = Object.keys(attrsA);
+		const keysB = Object.keys(attrsB);
+		/* v8 ignore next -- not currently reachable since all attrs are required @preserve */
+		if (keysA.length !== keysB.length) return false;
+		for (const key of keysA) if (attrsA[key] !== attrsB[key]) return false;
+		return true;
+	};
+	const convertFragment = (nodes) => {
+		const result = [];
+		const active = [];
+		const activeContents = [result];
+		for (const node of nodes) {
+			const nodeMarks = [...node.marks ?? []].sort((a, b) => getMarkRank(a) - getMarkRank(b));
+			let keep = 0;
+			let rendered = 0;
+			while (keep < active.length && rendered < nodeMarks.length) {
+				if (!marksEqual(active[keep], nodeMarks[rendered])) break;
+				keep++;
+				rendered++;
+			}
+			while (active.length > keep) {
+				active.pop();
+				activeContents.pop();
 			}
+			while (rendered < nodeMarks.length) {
+				const mark = nodeMarks[rendered];
+				const markContent = [];
+				activeContents[activeContents.length - 1].push({
+					type: "mark",
+					mark,
+					children: {
+						type: "fragment",
+						content: markContent,
+						[impl]: ctx
+					},
+					[impl]: ctx
+				});
+				active.push(mark);
+				activeContents.push(markContent);
+				rendered++;
+			}
+			activeContents[activeContents.length - 1].push({
+				type: "node",
+				node,
+				children: convertFragment(node.content ?? []),
+				[impl]: ctx
+			});
+		}
+		return {
+			type: "fragment",
+			content: result,
+			[impl]: ctx
+		};
+	};
+	return {
+		type: "node",
+		node: doc,
+		children: convertFragment(doc.content),
+		[impl]: ctx
+	};
+};
+//#endregion
+//#region src/lib/rich-text-editor/rte/config.ts
+var RteConfig = class {
+	constructor(features) {
+		this[impl] = new RteConfigImpl(features);
+	}
+	instantiateEditor(options) {
+		return new RteInstance(this, options);
+	}
+	instantiateView(document, options) {
+		return convertToView(document, {
+			config: this,
+			options: { ...options }
 		});
-		this.proxy.value = this.value;
-		this.validate();
 	}
-	formResetCallback() {
-		this.setProxyOptions();
-		this._isResetting = true;
-		this.selectedIndex = this._newDefaultSelectedIndex([], this.options, -1) ?? -1;
-		this._isResetting = false;
+};
+var RteConfigImpl = class {
+	constructor(featuresFacades) {
+		const resolveFeatures = (features) => features.flatMap((f) => f.getFeatures().flatMap((subFeature) => subFeature === f ? f : resolveFeatures([subFeature])));
+		this.features = resolveFeatures(featuresFacades.map(getFeatureImpl));
+		this.featureMap = /* @__PURE__ */ new Map();
+		for (const f of this.features) {
+			if (this.featureMap.has(f.name)) throw new Error(`Duplicate feature: ${f.name}`);
+			this.featureMap.set(f.name, f);
+		}
+		this.featureFacadesMap = /* @__PURE__ */ new Map();
+		for (const facade of featuresFacades) {
+			const FacadeClass = facade.constructor;
+			const feature = getFeatureImpl(facade);
+			const instances = this.featureFacadesMap.get(FacadeClass);
+			if (instances) instances.push(feature);
+			else this.featureFacadesMap.set(FacadeClass, [feature]);
+		}
+		if (!this.featureMap.has("RteBase")) throw new Error("RteBase feature is required");
+		if (this.featureMap.has("RteLinkFeature") && !this.featureMap.has("RteToolbarFeature")) throw new Error("RteToolbarFeature is required for RteLinkFeature");
+		this.textblockAttrs = new TextblockAttrs(sortedContributions(this.features.flatMap((f) => f.getTextblockAttrs())));
+		this.textblockMarks = new TextblockMarks(sortedContributions(this.features.flatMap((f) => f.getTextblockMarks())));
+		const schemaContributions = sortedContributions(this.features.flatMap((f) => f.getSchema(this.textblockAttrs, this.textblockMarks)));
+		const schemaSpec = {
+			nodes: {},
+			marks: {}
+		};
+		for (const schema of schemaContributions) {
+			Object.assign(schemaSpec.nodes, schema.nodes ?? {});
+			Object.assign(schemaSpec.marks, schema.marks ?? {});
+		}
+		for (const referencedNodeName of this.textblockMarks.getReferencedNodeNames()) if (!(referencedNodeName in schemaSpec.nodes)) throw new Error(`Unknown node "${referencedNodeName}"`);
+		this.schema = new Schema(schemaSpec);
 	}
-	/** @internal */
-	get _shouldShowClearButton() {
-		if (!this.clearable) return false;
-		if (this.multiple) return this.selectedOptions?.length > 0;
-		return this.value !== "";
+};
+//#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 = [];
 	}
-	/** @internal */
-	_onClearButtonFocus() {
-		this._isClearButtonFocused = true;
-		this.activeIndex = -1;
-		this.uncheckAllOptions();
+	/** Evaluates a prop, returning its current value. */
+	evalProp(prop) {
+		return isPropBinding(prop) ? prop(this) : prop;
 	}
-	/** @internal */
-	_onClearButtonBlur() {
-		this._isClearButtonFocused = false;
+	/** 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);
 	}
-	/** @internal */
-	get _shouldShowLabelWrapper() {
-		return Boolean(this.label || this._hasContextualHelp || this.multiple && this._shouldShowClearButton);
+	/** To be called on each state update to refresh all bindings. */
+	updateBindings() {
+		for (const binding of this.bindings) binding();
 	}
-	/** @internal */
-	_onClearButtonClick() {
-		if (this.multiple) this.selectedOptions.forEach((o) => {
-			/* v8 ignore else -- @preserve */
-			if (!o.disabled) o.selected = false;
+	/** 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;
 		});
-		else this.selectedIndex = -1;
-		this.updateValue(true);
-	}
-};
-__decorate([observable], Select.prototype, "activeIndex", void 0);
-__decorate([attr({ mode: "boolean" })], Select.prototype, "multiple", void 0);
-__decorate([attr({
-	attribute: "open",
-	mode: "boolean"
-})], Select.prototype, "open", void 0);
-__decorate([volatile], Select.prototype, "collapsible", null);
-__decorate([observable], Select.prototype, "control", void 0);
-__decorate([observable], Select.prototype, "maxHeight", void 0);
-__decorate([observable], Select.prototype, "_anchor", void 0);
-__decorate([attr()], Select.prototype, "scale", void 0);
-__decorate([attr], Select.prototype, "appearance", void 0);
-__decorate([attr], Select.prototype, "shape", void 0);
-__decorate([attr({
-	mode: "boolean",
-	attribute: "fixed-dropdown"
-})], Select.prototype, "fixedDropdown", void 0);
-__decorate([attr], Select.prototype, "placeholder", void 0);
-__decorate([observable], Select.prototype, "_feedbackWrapper", void 0);
-__decorate([observable], Select.prototype, "metaSlottedContent", void 0);
-__decorate([attr({ mode: "boolean" })], Select.prototype, "clearable", void 0);
-__decorate([observable], Select.prototype, "_isClearButtonFocused", void 0);
-//#endregion
-//#region src/lib/select/select.template.ts
-function renderLabel() {
-	return html` <label
-		for="${(x) => x.multiple ? null : "control"}"
-		class="label"
-		id="label"
-	>
-		${(x) => x.label}
-	</label>`;
-}
-function renderPlaceholder(context) {
-	const optionTag = context.tagFor(ListboxOption);
-	return html`
-		<${optionTag} text="${(x) => x.placeholder}" hidden disabled>
-		</${optionTag}>`;
-}
-function renderClearButton(context) {
-	const buttonTag = context.tagFor(Button);
-	return html`
-		<${buttonTag}
-			aria-label="${(x) => x.locale.select.clearButtonLabel}"
-			aria-hidden="${(x) => x._isClearButtonFocused ? "false" : "true"}"
-			@click="${(x, c) => {
-		x._onClearButtonClick();
-		c.event.stopPropagation();
-	}}"
-			@mousedown="${() => false}"
-			@keydown="${(x, c) => {
-		/* v8 ignore next -- @preserve */
-		if (c.event.key === "Tab") x._onClearButtonBlur();
-		c.event.stopPropagation();
-		return true;
-	}}"
-			@focusin="${(x, c) => {
-		c.event.stopPropagation();
-		x._onClearButtonFocus();
-	}}"
-			@focusout="${(x) => x._onClearButtonBlur()}"
-			?disabled="${(x) => x.disabled}"
-			:shape="${(x) => x.shape}"
-			size="super-condensed"
-			icon="close-line"
-			appearance="ghost-light"
-			class="clear-button"
-			tabindex="0"
-		></${buttonTag}>
-	`;
-}
-function selectValue(context) {
-	const affixIconTemplate = affixIconTemplateFactory(context);
-	const chevronTemplate = chevronTemplateFactory(context);
-	return html` <div
-		class="control ${(x) => classNames(["has-activedescendant", Boolean(x._activeDescendant) && x.open], ["disabled", x.disabled], [`appearance-${x.appearance}`, Boolean(x.appearance)], [`shape-${x.shape}`, Boolean(x.shape)], ["has-meta", Boolean(x.metaSlottedContent?.length)], ["error", Boolean(x.errorValidationMessage)], ["success", !!x.successText], ["shows-placeholder", Boolean(x.placeholder) && !x.value], [`size-${x.scale}`, Boolean(x.scale)])}"
-		${ref("_anchor")}
-		id="control"
-		?disabled="${(x) => x.disabled}"
-	>
-		<div class="selected-value">
-			${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
-			<span class="text">${(x) => x.displayValue}</span>
-			<slot name="meta" ${slotted("metaSlottedContent")}></slot>
-		</div>
-		${when((x) => x._shouldShowClearButton, renderClearButton(context))}
-		${chevronTemplate}
-	</div>`;
-}
-function setFixedDropdownVarWidth(x) {
-	return x.open && x.fixedDropdown ? `--_select-fixed-width: ${Math.round(x.getBoundingClientRect().width)}px` : null;
-}
-/** @param context - element definition context */
-function renderControl(context) {
-	const popupTag = context.tagFor(Popup);
-	return html`
-			<div class="label-wrapper" ?hidden=${(x) => !x._shouldShowLabelWrapper}>
-				${when((x) => x.label, renderLabel())}
-				${when((x) => x.multiple && x._shouldShowClearButton, renderClearButton(context))}
-				<slot name="contextual-help" ${slotted("_contextualHelpSlottedContent")}></slot>
-			</div>
-			<div class="control-wrapper">
-				${when((x) => !x.multiple, selectValue(context))}
-				<${popupTag} class="popup"
-					style="${setFixedDropdownVarWidth}"
-					?open="${(x) => x.collapsible ? x.open : true}"
-					:anchor="${(x) => x._anchor}"
-					placement="bottom-start"
-					strategy="${(x) => x.fixedDropdown ? null : "absolute"}">
-					<div class="listbox"
-						id="${(x) => x.listboxId}"
-						role="listbox"
-						aria-multiselectable="${(x) => x.multiple}"
-						aria-label="${(x) => x.multiple && !x.label && x.ariaLabel ? x.ariaLabel : null}"
-						aria-labelledby="${(x) => x.multiple && x.label ? "label" : null}"
-						?disabled="${(x) => x.disabled}"
-						?hidden="${(x) => x.collapsible ? !x.open : false}"
-						${ref("listbox")}>
-						${when((x) => x.placeholder, renderPlaceholder(context))}
-						<slot
-							${slotted({
-		filter: Listbox.slottedOptionFilter,
-		flatten: true,
-		property: "slottedOptions"
-	})}>
-						</slot>
-				 	</div>
-				</${popupTag}>
-			</div>
-		`;
+		for (const [name, value, bindFn] of events) if (value) target.addEventListener(name, bindFn(value));
+		for (const child of children) target.appendChild(child);
+	}
+};
+var createDiv = (ctx, props) => {
+	const div = document.createElement("div");
+	ctx.bindToEl(div, {
+		className: props.className,
+		slot: props.slot
+	}, [], props.children);
+	return div;
+};
+var createAnchor = (ctx, props) => {
+	const anchor = document.createElement("a");
+	ctx.bindToEl(anchor, {
+		href: props.href,
+		target: props.target,
+		rel: props.rel,
+		className: props.className
+	}, [], props.children);
+	return anchor;
+};
+var wrapperTargets = /* @__PURE__ */ new WeakMap();
+var createOptionalTooltip = (ctx, props) => {
+	const tooltip = ctx.rte.createComponent(Tooltip);
+	tooltip.setAttribute("exportparts", "vvd-theme-alternate");
+	ctx.bindToEl(tooltip, {
+		className: "ui-tooltip",
+		text: props.label,
+		placement: ctx.props.popupPlacement
+	});
+	ctx.bindProp(props.enabled, (enabled) => {
+		if (!enabled) tooltip.open = false;
+		tooltip.anchor = enabled ? props.anchor : void 0;
+	});
+	const wrapper = createDiv(ctx, {
+		className: "ui-tooltip-wrapper",
+		slot: props.slot,
+		children: [props.anchor, tooltip]
+	});
+	wrapperTargets.set(wrapper, props.anchor);
+	return wrapper;
+};
+var createButton = (ctx, props) => {
+	const variant = () => ctx.evalProp(props.variant) ?? "toolbar";
+	const size = () => variant() === "toolbar" ? "super-condensed" : "condensed";
+	const appearanceInactive = () => variant() === "popover-primary" ? "outlined" : "ghost-light";
+	const appearanceActive = () => variant() === "toolbar-menu" || variant() === "popover" ? "filled" : appearanceInactive();
+	const appearance = () => ctx.evalProp(props.active) ? appearanceActive() : appearanceInactive();
+	const connotation = () => ctx.evalProp(props.connotation) ?? (variant() === "toolbar-menu" && ctx.evalProp(props.active) ? "cta" : void 0);
+	const disabled = () => Boolean(ctx.evalProp(ctx.props.disabled) || ctx.evalProp(props.disabled));
+	const button = ctx.rte.createComponent(Button);
+	ctx.bindToEl(button, {
+		size,
+		appearance,
+		disabled,
+		icon: props.icon,
+		autofocus: props.autofocus,
+		connotation,
+		[props.icon ? "ariaLabel" : "label"]: props.label,
+		pressed: () => Boolean(ctx.evalProp(props.active)),
+		ariaPressed: props.active !== void 0 ? () => ctx.evalProp(props.active) ? "true" : "false" : void 0
+	}, [on("click", props.onClick, (onClick) => () => {
+		if (!onClick() && ctx.shouldReturnFocusToEditor()) ctx.view.focus();
+	})]);
+	return createOptionalTooltip(ctx, {
+		enabled: () => Boolean(ctx.evalProp(props.icon) && !ctx.evalProp(props.noTooltip) && !disabled()),
+		label: props.label,
+		anchor: button,
+		slot: props.slot
+	});
+};
+var createMenu = (ctx, props) => {
+	const menu = ctx.rte.createComponent(Menu);
+	ctx.bindToEl(menu, {
+		className: "ui-menu",
+		autoDismiss: true,
+		ariaLabel: props.label,
+		anchor: wrapperTargets.get(props.trigger) ?? props.trigger,
+		placement: ctx.props.popupPlacement,
+		offset: () => ctx.evalProp(ctx.props.menuOffset) ?? null
+	}, [], props.children);
+	const fragment = document.createDocumentFragment();
+	fragment.appendChild(props.trigger);
+	fragment.appendChild(menu);
+	return fragment;
+};
+var createMenuItem = (ctx, props) => {
+	const disabled = () => Boolean(ctx.evalProp(ctx.props.disabled) || ctx.evalProp(props.disabled));
+	const item = ctx.rte.createComponent(MenuItem);
+	ctx.bindToEl(item, {
+		text: props.text,
+		checked: props.checked,
+		disabled,
+		controlType: "radio",
+		checkedAppearance: "tick-only"
+	}, [on("change", props.onSelect, (onSelect) => () => {
+		if (item.checked && !item.disabled) {
+			if (ctx.evalProp(props.checked) !== item.checked) {
+				onSelect();
+				if (ctx.shouldReturnFocusToEditor()) ctx.view.focus();
+			}
+		}
+	})]);
+	return item;
+};
+var createButtonGroup = (ctx, props) => createDiv(ctx, {
+	slot: props.slot,
+	className: "ui-button-group",
+	children: props.children
+});
+function markActive(state, type) {
+	const { from, $from, to, empty } = state.selection;
+	if (empty) return !!type.isInSet(state.storedMarks || $from.marks());
+	else return state.doc.rangeHasMark(from, to, type);
 }
-/** Ignore events that originate from feedback, e.g. a click on link */
-function ifNotFromFeedback(handler) {
-	return (x, c) => {
-		if (!c.event.composedPath().includes(x._feedbackWrapper)) {
-			handler(x, c.event);
-			return;
+var createMarkToggle = (ctx, props) => createButton(ctx, {
+	label: props.label,
+	icon: props.icon,
+	active: () => markActive(ctx.view.state, props.markType),
+	disabled: () => !toggleMark(props.markType)(ctx.view.state),
+	onClick: () => {
+		toggleMark(props.markType)(ctx.view.state, ctx.view.dispatch);
+	}
+});
+var createOption = (ctx, props) => {
+	const disabled = () => Boolean(ctx.evalProp(ctx.props.disabled) || ctx.evalProp(props.disabled));
+	const option = ctx.rte.createComponent(ListboxOption);
+	ctx.bindToEl(option, {
+		value: props.value,
+		text: props.text,
+		disabled
+	});
+	return option;
+};
+var createSelect = (ctx, props) => {
+	const disabled = () => Boolean(ctx.evalProp(ctx.props.disabled));
+	const select = ctx.rte.createComponent(Select);
+	select.setAttribute("data-class", "ui-select");
+	ctx.bindToEl(select, {
+		placeholder: " ",
+		ariaLabel: props.label,
+		appearance: "ghost",
+		disabled
+	}, [on("change", props.onSelect, (onSelect) => () => {
+		const value = select.value;
+		if (value) {
+			onSelect(value);
+			if (ctx.shouldReturnFocusToEditor()) ctx.view.focus();
+		}
+	})], props.children);
+	queueMicrotask(() => {
+		ctx.bindProp(props.value, (value) => select.value = value);
+	});
+	let hideTooltip = false;
+	select.addEventListener("vwc-popup:open", () => {
+		hideTooltip = true;
+		ctx.updateBindings();
+	});
+	select.addEventListener("vwc-popup:close", () => {
+		hideTooltip = false;
+		ctx.updateBindings();
+	});
+	return createOptionalTooltip(ctx, {
+		enabled: () => !hideTooltip && !disabled(),
+		label: props.label,
+		anchor: select
+	});
+};
+var createDivider = (ctx) => {
+	const divider = ctx.rte.createComponent(Divider);
+	ctx.bindToEl(divider, {
+		className: "ui-divider",
+		orientation: "vertical"
+	});
+	return divider;
+};
+var createTextField = (ctx, props) => {
+	const textField = ctx.rte.createComponent(TextField);
+	ctx.bindToEl(textField, {
+		label: props.label,
+		value: props.value,
+		placeholder: props.placeholder,
+		slot: props.slot,
+		autofocus: props.autofocus,
+		type: props.type,
+		helperText: props.helperText
+	}, [on("input", props.onInput, (onInput) => () => {
+		onInput(textField.value);
+	})]);
+	return textField;
+};
+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);
 		}
-		return true;
 	};
+	slot.addEventListener("slotchange", processSlot);
+	queueMicrotask(processSlot);
+	return slot;
+};
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/internal/history.ts
+var RteHistoryFeatureImpl = class extends RteFeatureImpl {
+	constructor(config) {
+		super();
+		this.config = config;
+		this.name = "RteHistoryFeature";
+	}
+	getPlugins() {
+		return [this.contribution(history()), this.contribution(keymap({
+			"Mod-z": undo,
+			"Ctrl-y": redo,
+			"Cmd-Z": 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) => !undo(ctx.view.state),
+				onClick: () => {
+					const { state, dispatch } = ctx.view;
+					undo(state, dispatch);
+				}
+			})
+		}, 1), this.contribution({
+			section: "history",
+			render: (ctx) => createButton(ctx, {
+				label: (ctx) => ctx.rte.getLocale().richTextEditor.redo,
+				icon: "redo-line",
+				disabled: (ctx) => !redo(ctx.view.state),
+				onClick: () => {
+					const { state, dispatch } = ctx.view;
+					redo(state, dispatch);
+				}
+			})
+		}, 2)];
+	}
+};
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/internal/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 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(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 RteFeatureImpl {
+	constructor(..._args) {
+		super(..._args);
+		this.name = "RteInputRulesFeature";
+	}
+	getPlugins(rte) {
+		const ruleSpecs = 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(inputRules({ rules })));
+		plugins.push(this.contribution(keymap({ Backspace: undoInputRule }), contributionPriority.high));
+		const enterHandlers = ruleSpecs.filter((spec) => spec.enterHandler).map((spec) => spec.enterHandler);
+		if (enterHandlers.length > 0) plugins.push(this.contribution(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;
+		} }), contributionPriority.highest));
+		return plugins;
+	}
+};
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/base.ts
+var RteBaseImpl = class extends 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 = featureFacade(RteBaseImpl);
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/text-block-picker.ts
+var RteTextBlockPickerFeatureImpl = class extends 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 = 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 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 sortedContributions(rte.features.flatMap((f) => f.getToolbarItems(rte)))) itemsBySection.get(toolbarItem.section).push(toolbarItem);
+		const core = rte.getFeature("RteCore");
+		return [this.contribution(this.hidden.plugin), this.contribution(new Plugin({ view: (view) => {
+			let focusCameFromEditorWithMouse = false;
+			const ctx = new UiCtx(view, rte, {
+				popupPlacement: this.config?.popupDirection === "outward" ? "bottom" : "top",
+				menuOffset: 8,
+				disabled: () => core.disabled.getValue(rte),
+				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 = 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 RteFeatureImpl {
+	constructor(config) {
+		super();
+		this.config = config;
+		this.name = "RtePlaceholderFeature";
+	}
+	getStyles() {
+		return [this.contribution(placeholder_style_default)];
+	}
+	getPlugins() {
+		const placeholderPlugin = new Plugin({ props: { decorations: (state) => {
+			if (state.doc.nodeSize === 4) {
+				const storedSize = state.schema.marks.fontSize?.isInSet(state.storedMarks ?? [])?.attrs.size;
+				return DecorationSet.create(state.doc, [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 = featureFacade(RtePlaceholderFeatureImpl);
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/hard-break.ts
+var RteHardBreakFeatureImpl = class extends 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(keymap(keyBindings), contributionPriority.high)];
+	}
+};
+var RteHardBreakFeature = featureFacade(RteHardBreakFeatureImpl);
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/font-size-picker.ts
+var mixedFontSize = Symbol("mixedFontSize");
+var RteFontSizePickerFeatureImpl = class extends 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(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 (!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 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 = featureFacade(RteFontSizePickerFeatureImpl);
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/internal/text-style.ts
+var RteTextStyleFeatureImpl = class extends 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
+//#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: marks.strong } })];
+	}
+	getPlugins(rte) {
+		return [this.contribution(keymap({ "Mod-b": 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 = 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: marks.em } })];
+	}
+	getPlugins(rte) {
+		return [this.contribution(keymap({ "Mod-i": 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 = 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(keymap({ "Mod-u": 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 = 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(keymap({
+			"Alt-Shift-5": toggleMark(rte.schema.marks.strikethrough),
+			"Cmd-Shift-X": 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 = 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(keymap({ "Mod-M": 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 = 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 SelectTemplate = (context) => {
-	return html`
-		<template
-			${applyHostSemantics({
-		role: "combobox",
-		ariaLabel: (x) => x.ariaLabel ?? x.label,
-		ariaHasPopup: (x) => x.collapsible ? "listbox" : "false",
-		ariaExpanded: (x) => x.open,
-		ariaDisabled: (x) => x.disabled
-	})}
-			aria-controls="${(x) => x.listboxId}"
-			aria-activedescendant="${(x) => x.open ? x._activeDescendant : null}"
-			aria-describedby="${(x) => x._feedbackDescribedBy}"
-			tabindex="${(x) => !x.disabled ? "0" : null}"
-			@click="${ifNotFromFeedback((x, e) => x.clickHandler(e))}"
-			@focusin="${ifNotFromFeedback((x, e) => x.focusinHandler(e))}"
-			@focusout="${ifNotFromFeedback((x, e) => x.focusoutHandler(e))}"
-			@keydown="${ifNotFromFeedback((x, e) => {
-		if (x.open) handleEscapeKeyAndStopPropogation(e);
-		return x.keydownHandler(e);
-	})}"
-			@mousedown="${ifNotFromFeedback((x, e) => x.mousedownHandler(e))}"
-		>
-			${renderControl(context)}
-			<div class="feedback-wrapper" ${ref("_feedbackWrapper")}>
-				${(x) => x._getFeedbackTemplate(context)}
-			</div>
-		</template>
-	`;
+var mixedColor = Symbol("mixedColor");
+var RteTextColorPickerFeatureImpl = class extends 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 RemoveMarkStep(pos, pos + node.nodeSize, mark));
+				});
+			}
+			dispatch?.(tr.scrollIntoView());
+			return true;
+		};
+	}
+};
+var RteTextColorPickerFeature = 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 AllSelection) {
+		const textSelection = 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 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 ReplaceAroundStep($li.before() - (atStart ? 1 : 0), $li.after() + (atEnd ? 1 : 0), $li.start(), $li.end(), new Slice((atStart ? Fragment.empty : Fragment.from(list.copy(Fragment.empty))).append(Fragment.from(defaultTextblock.create(rte.textblockAttrs.extractFromNode(getLi($li))))).append(atEnd ? Fragment.empty : Fragment.from(list.copy(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 ReplaceAroundStep($li.before() - (canJoinWithPrev ? 1 : 0), $li.after() + (canJoinWithNext ? 1 : 0), $li.before(), $li.after(), new Slice(Fragment.from(listType.create(null, [])), openStart, openEnd), 1 - openStart));
+};
+var sinkNode = (rte, listType, $node, tr) => {
+	tr.step(new ReplaceAroundStep($node.before(), $node.after(), $node.start(), $node.end(), new Slice(Fragment.from(listType.create(null, [rte.schema.nodes.listItem.create(rte.textblockAttrs.extractFromNode($node.parent))])), 0, 0), 2));
+};
+var RteListFeatureImpl = class extends 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(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) } : {}
+		}), 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 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 = 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 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(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 = 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 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
+				];
+			}
+		} } }, contributionPriority.high)];
+	}
+	getTextblockMarks() {
+		return [this.contribution({ markName: "link" })];
+	}
+	getInputRules() {
+		const linkRegex = new RegExp(`${linkPattern}$`);
+		return [this.contribution({
+			rule: new 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 Plugin({
+			props: { decorations: (state) => {
+				const link = this.getCurrentLink(state);
+				if (link) {
+					const deco = Decoration.inline(link.start, link.end, { id: "current-link" });
+					return 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(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 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 = 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;
+			dispatchSlottableRequest(host, "inline-image-placeholder", slotName, { url: this.imageUrl });
+			this.setContent(slot, { onDestroy: () => {
+				dispatchSlottableRequest(host, "inline-image-placeholder", slotName, 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 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 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(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 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 = 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 RteFeatureImpl {
+	constructor(config) {
+		super();
+		this.config = config;
+		this.name = "RteFileHandlerFeature";
+	}
+	getPlugins(rte) {
+		const insertPointPlaceholderPlugin = new Plugin({
+			state: {
+				init() {
+					return 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 = 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 = 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 = Slice.fromJSON(rte.schema, { content: fragment });
+				tr.replaceSelection(parsed);
+			} else {
+				const parsed = 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 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 = dropPoint(view.state.doc, target, view.dragging.slice);
+					if (point != null) target = point;
+				}
+				handleFiles(files, {
+					type: "pos",
+					pos: target
+				});
+				return true;
+			}
+		} }))];
+	}
+};
+var RteFileHandlerFeature = featureFacade(RteFileHandlerFeatureImpl);
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/drop-handler.ts
+var RteDropHandlerFeatureImpl = class extends 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 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 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;
+			}
+		} } }), contributionPriority.high)];
+	}
+};
+var RteDropHandlerFeature = featureFacade(RteDropHandlerFeatureImpl);
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/toolbar-button.ts
+var RteToolbarButtonFeatureImpl = class extends 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 = 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 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 Plugin({ props: { nodeViews: { [this.atomName]: (node) => new AtomView(node, this.config, this.atomName) } } }))];
+	}
+};
+var RteAtomFeature = featureFacade(RteAtomFeatureImpl);
+//#endregion
+//#region src/lib/rich-text-editor/rte/features/input-rule.ts
+var RteInputRuleFeatureImpl = class extends 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, Fragment.fromJSON(rte.schema, fragment));
+		};
+		const spec = { rule: new 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 = 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 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(keymap(bindings), contributionPriority.high)];
+	}
+};
+var RteKeyboardShortcutsFeature = 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(closeHistory(state.tr));
+	const tr = view.state.tr;
+	tr.replaceWith(match.start, match.end, Fragment.fromJSON(view.state.schema, fragment));
+	const newPos = tr.mapping.map(match.end);
+	tr.setSelection(TextSelection.create(tr.doc, newPos));
+	view.dispatch(tr.scrollIntoView());
+};
+var RteSuggestFeatureImpl = class extends 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 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 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 DecorationSet.empty;
+						return Boolean(prevState?.loadingDecoration.find().length ?? 0) ? prevState.loadingDecoration.map(tr.mapping, tr.doc) : DecorationSet.create(tr.doc, [Decoration.widget(match.end, () => {
+							const wrapper = document.createElement("span");
+							wrapper.className = "suggest-loading-widget";
+							const spinner = rte.createComponent(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: 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, [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) dispatchSlottableRequest(host, "suggestions-empty-state", emptySlotName, { id: this.featureId });
+					if (emptySlotShowing && !showing) dispatchSlottableRequest(host, "suggestions-empty-state", emptySlotName, 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(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(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;
+			}
+		}), contributionPriority.high)];
+	}
+};
+var RteSuggestFeature = 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 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 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 = featureFacade(RteCharacterCountFeatureImpl);
 //#endregion
-//#region src/lib/select/definition.ts
-/** @internal */
-var selectDefinition = defineVividComponent("select", Select, SelectTemplate, [
-	popupDefinition,
-	iconDefinition,
+//#region src/lib/rich-text-editor/definition.ts
+var richTextEditorDefinition = defineVividComponent("rich-text-editor", RichTextEditor, RichTextEditorTemplate, [
+	dividerDefinition,
+	selectDefinition,
 	listboxOptionDefinition,
-	optgroupDefinition,
 	buttonDefinition,
-	feedbackMessageDefinition
-], { styles: select_default });
+	tooltipDefinition,
+	menuDefinition,
+	menuItemDefinition,
+	textFieldDefinition,
+	popoverDefinition,
+	progressRingDefinition
+], {
+	styles: rich_text_editor_default,
+	shadowOptions: { delegatesFocus: true }
+});
 /**
-* Registers the select elements with the design system.
+* Registers the rich-text-editor element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerSelect = createRegisterFunction(selectDefinition);
+var registerRichTextEditor = createRegisterFunction(richTextEditorDefinition);
 //#endregion
-export { selectDefinition as n, Select as r, registerSelect as t };
+export { RichTextEditor as A, RtePlaceholderFeature as C, RteConfig as D, RteBase as E, RteHtmlSerializer as O, RteHardBreakFeature as S, RteTextBlockPickerFeature as T, RteStrikethroughFeature as _, RteKeyboardShortcutsFeature as a, RteBoldFeature as b, RteToolbarButtonFeature as c, RteInlineImageFeature as d, RteLinkFeature as f, RteMonospaceFeature as g, RteTextColorPickerFeature as h, RteSuggestFeature as i, RteHtmlParser as k, RteDropHandlerFeature as l, RteListFeature as m, richTextEditorDefinition as n, RteInputRuleFeature as o, RteAlignmentFeature as p, RteCharacterCountFeature as r, RteAtomFeature as s, registerRichTextEditor as t, RteFileHandlerFeature as u, RteUnderlineFeature as v, RteToolbarFeature as w, RteFontSizePickerFeature as x, RteItalicFeature as y };