@mantine-vue/tiptap 3.0.0 → 3.2.0

package/esm/index.mjs

@@ -1,7 +1,7 @@
-import { computed, defineComponent, h, onBeforeUnmount, ref, watch } from "vue";
-import { ActionIcon, Box, Button, ColorPicker, ColorSwatch, Group, Popover, SimpleGrid, TextInput, Tooltip, Typography, UnstyledButton, createSafeContext, rem, useProps, useStyles } from "@mantine-vue/core";
+import { ActionIcon, Box, Button, ColorPicker, ColorSwatch, Group, Popover, SimpleGrid, TextInput, Tooltip, Typography, UnstyledButton, createSafeContext, factory, rem, useProps, useStyles } from "@mantine-vue/core";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useAttrs, watch, withCtx } from "vue";
 import { EditorContent } from "@tiptap/vue-3";
-import { useDisclosure, useWindowEvent } from "@mantine-vue/hooks";
+import { useDisclosure } from "@mantine-vue/hooks";
 import TipTapLink from "@tiptap/extension-link";
 //#region src/labels.ts
 var DEFAULT_LABELS = {
@@ -71,158 +71,268 @@ var RichTextEditor_module_default = {
 	taskList: "_taskList_1ljoi_345"
 };
 //#endregion
-//#region src/RichTextEditorContent/RichTextEditorContent.ts
-var RichTextEditorContent = defineComponent({
-	name: "RichTextEditorContent",
+//#region src/RichTextEditor.vue
+var RichTextEditor_default = /* @__PURE__ */ defineComponent({
+	name: "RichTextEditor",
 	inheritAttrs: false,
+	__name: "RichTextEditor",
 	props: {
-		classNames: {
-			type: [Object, Function],
-			default: void 0
+		editor: { default: null },
+		withCodeHighlightStyles: {
+			type: Boolean,
+			default: true
 		},
-		styles: {
-			type: [Object, Function],
+		withTypographyStyles: {
+			type: Boolean,
+			default: true
+		},
+		onSourceCodeTextSwitch: {
+			type: Function,
 			default: void 0
 		},
-		vars: {
-			type: [Object, Function],
+		labels: { default: void 0 },
+		variant: { default: "default" },
+		classNames: { default: void 0 },
+		styles: { default: void 0 },
+		vars: { default: void 0 },
+		unstyled: {
+			type: Boolean,
 			default: void 0
 		}
 	},
-	setup(rawProps, { attrs }) {
+	setup(__props) {
+		const rawProps = __props;
+		const attrs = useAttrs();
+		const props = useProps("RichTextEditor", null, rawProps);
+		const getStyles = useStyles({
+			name: "RichTextEditor",
+			classes: RichTextEditor_module_default,
+			props,
+			className: attrs.class,
+			style: attrs.style,
+			classNames: props.classNames,
+			styles: props.styles,
+			vars: props.vars,
+			unstyled: props.unstyled
+		});
+		const mergedLabels = computed(() => ({
+			...DEFAULT_LABELS,
+			...props.labels
+		}));
+		const rootProps = computed(() => {
+			const forwarded = { ...attrs };
+			delete forwarded.class;
+			delete forwarded.style;
+			return {
+				...getStyles("root"),
+				...forwarded
+			};
+		});
+		provideRichTextEditorContext({
+			get editor() {
+				return props.editor;
+			},
+			getStyles,
+			get labels() {
+				return mergedLabels.value;
+			},
+			get withCodeHighlightStyles() {
+				return props.withCodeHighlightStyles;
+			},
+			get withTypographyStyles() {
+				return props.withTypographyStyles;
+			},
+			get onSourceCodeTextSwitch() {
+				return props.onSourceCodeTextSwitch;
+			},
+			get unstyled() {
+				return props.unstyled;
+			},
+			get variant() {
+				return props.variant;
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Box), normalizeProps(guardReactiveProps(rootProps.value)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+//#region src/RichTextEditorContent/RichTextEditorContent.ts
+var RichTextEditorContent = factory(/* @__PURE__ */ defineComponent({
+	name: "RichTextEditorContent",
+	inheritAttrs: false,
+	__name: "RichTextEditorContent",
+	props: {
+		classNames: { default: void 0 },
+		styles: { default: void 0 },
+		vars: { default: void 0 },
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		}
+	},
+	setup(__props) {
+		const rawProps = __props;
+		const attrs = useAttrs();
 		const props = useProps("RichTextEditorContent", null, rawProps);
 		const ctx = useRichTextEditorContext();
-		return () => {
-			const editorContent = h(Box, {
-				component: EditorContent,
-				editor: ctx.editor,
+		const contentProps = computed(() => {
+			const forwarded = { ...attrs };
+			delete forwarded.class;
+			delete forwarded.style;
+			return {
 				...ctx.getStyles("content", {
 					classNames: props.classNames,
 					styles: props.styles,
 					className: ctx.withTypographyStyles ? void 0 : attrs.class,
 					style: ctx.withTypographyStyles ? void 0 : attrs.style
 				}),
-				...attrs
-			});
-			return ctx.withTypographyStyles ? h(Typography, {
-				...ctx.getStyles("Typography", {
-					className: attrs.class,
-					style: attrs.style,
-					styles: props.styles,
-					classNames: props.classNames
-				}),
-				unstyled: ctx.unstyled
-			}, () => editorContent) : editorContent;
+				...forwarded
+			};
+		});
+		const typographyProps = computed(() => ctx.getStyles("Typography", {
+			className: attrs.class,
+			style: attrs.style,
+			styles: props.styles,
+			classNames: props.classNames
+		}));
+		return (_ctx, _cache) => {
+			return unref(ctx).withTypographyStyles ? (openBlock(), createBlock(unref(Typography), mergeProps({ key: 0 }, typographyProps.value, { unstyled: unref(ctx).unstyled }), {
+				default: withCtx(() => [createVNode(unref(Box), mergeProps({
+					component: unref(EditorContent),
+					editor: unref(ctx).editor
+				}, contentProps.value), null, 16, ["component", "editor"])]),
+				_: 1
+			}, 16, ["unstyled"])) : (openBlock(), createBlock(unref(Box), mergeProps({
+				key: 1,
+				component: unref(EditorContent),
+				editor: unref(ctx).editor
+			}, contentProps.value), null, 16, ["component", "editor"]));
 		};
 	}
-});
-Object.assign(RichTextEditorContent, { classes: RichTextEditor_module_default });
+}), { classes: RichTextEditor_module_default });
 //#endregion
-//#region src/RichTextEditorControl/RichTextEditorControl.ts
-var defaultProps$1 = { interactive: true };
-var RichTextEditorControl = defineComponent({
+//#region src/RichTextEditorControl/RichTextEditorControl.vue
+var RichTextEditorControl_default = /* @__PURE__ */ defineComponent({
 	name: "RichTextEditorControl",
 	inheritAttrs: false,
+	__name: "RichTextEditorControl",
 	props: {
+		classNames: { default: void 0 },
+		styles: { default: void 0 },
+		vars: { default: void 0 },
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
 		active: {
 			type: Boolean,
 			default: void 0
 		},
 		interactive: {
 			type: Boolean,
-			default: void 0
+			default: true
 		},
 		disabled: {
 			type: Boolean,
 			default: void 0
 		},
-		variant: {
-			type: String,
-			default: void 0
-		},
-		classNames: {
-			type: [Object, Function],
-			default: void 0
-		},
-		styles: {
-			type: [Object, Function],
-			default: void 0
-		},
-		vars: {
-			type: [Object, Function],
-			default: void 0
-		}
+		variant: { default: void 0 }
 	},
-	setup(rawProps, { attrs, slots }) {
-		const props = useProps("RichTextEditorControl", defaultProps$1, rawProps);
+	setup(__props) {
+		const rawProps = __props;
+		const attrs = useAttrs();
+		const props = useProps("RichTextEditorControl", null, rawProps);
 		const ctx = useRichTextEditorContext();
-		return () => h(UnstyledButton, {
-			...attrs,
+		const forwardedAttrs = computed(() => {
+			const result = { ...attrs };
+			delete result.onMousedown;
+			return result;
+		});
+		const controlProps = computed(() => ({
+			...forwardedAttrs.value,
 			...ctx.getStyles("control", {
 				className: attrs.class,
 				style: attrs.style,
 				classNames: props.classNames,
 				styles: props.styles
-			}),
-			disabled: props.disabled,
-			"data-rich-text-editor-control": "",
-			tabindex: props.interactive ? 0 : -1,
-			"data-interactive": props.interactive || void 0,
-			"data-disabled": props.disabled || void 0,
-			"data-active": props.active || void 0,
-			"aria-pressed": props.active && props.interactive ? true : void 0,
-			"aria-hidden": !props.interactive || void 0,
-			unstyled: ctx.unstyled,
-			variant: props.variant || ctx.variant || "default",
-			onMousedown: (event) => {
-				event.preventDefault();
-				attrs.onMousedown?.(event);
-			}
-		}, slots);
+			})
+		}));
+		function onMousedown(event) {
+			event.preventDefault();
+			const handler = attrs.onMousedown;
+			if (typeof handler === "function") handler(event);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(UnstyledButton), mergeProps(controlProps.value, {
+				disabled: unref(props).disabled,
+				"data-rich-text-editor-control": "",
+				tabindex: unref(props).interactive ? 0 : -1,
+				"data-interactive": unref(props).interactive || void 0,
+				"data-disabled": unref(props).disabled || void 0,
+				"data-active": unref(props).active || void 0,
+				"aria-pressed": unref(props).active && unref(props).interactive ? true : void 0,
+				"aria-hidden": !unref(props).interactive || void 0,
+				unstyled: unref(ctx).unstyled,
+				variant: unref(props).variant || unref(ctx).variant || "default",
+				onMousedown
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, [
+				"disabled",
+				"tabindex",
+				"data-interactive",
+				"data-disabled",
+				"data-active",
+				"aria-pressed",
+				"aria-hidden",
+				"unstyled",
+				"variant"
+			]);
+		};
 	}
 });
-Object.assign(RichTextEditorControl, { classes: RichTextEditor_module_default });
-var RichTextEditorControlBase = defineComponent({
+//#endregion
+//#region src/RichTextEditorControl/RichTextEditorControlBase.vue
+var RichTextEditorControlBase_default = /* @__PURE__ */ defineComponent({
 	name: "RichTextEditorControlBase",
 	inheritAttrs: false,
+	__name: "RichTextEditorControlBase",
 	props: {
-		icon: {
-			type: [Object, Function],
-			required: true
-		},
-		active: {
-			type: Boolean,
-			default: void 0
-		},
-		interactive: {
-			type: Boolean,
-			default: void 0
-		},
-		disabled: {
-			type: Boolean,
-			default: void 0
-		},
-		variant: {
-			type: String,
-			default: void 0
-		},
-		classNames: {
-			type: [Object, Function],
-			default: void 0
-		},
-		styles: {
-			type: [Object, Function],
-			default: void 0
-		}
+		icon: {},
+		classNames: {},
+		styles: {},
+		vars: {},
+		unstyled: { type: Boolean },
+		active: { type: Boolean },
+		interactive: { type: Boolean },
+		disabled: { type: Boolean },
+		variant: {}
 	},
-	setup(props, { attrs }) {
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
 		const ctx = useRichTextEditorContext();
-		return () => h(RichTextEditorControl, {
-			...attrs,
-			...props
-		}, () => h(props.icon, ctx.getStyles("controlIcon")));
+		const controlProps = computed(() => ({
+			...props,
+			...attrs
+		}));
+		const iconProps = computed(() => ctx.getStyles("controlIcon"));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(RichTextEditorControl_default, normalizeProps(guardReactiveProps(controlProps.value)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "icon", normalizeProps(guardReactiveProps(iconProps.value)), () => [(openBlock(), createBlock(resolveDynamicComponent(props.icon), normalizeProps(guardReactiveProps(iconProps.value)), null, 16))])]),
+				_: 3
+			}, 16);
+		};
 	}
 });
+//#endregion
+//#region src/RichTextEditorControl/use-editor-selector.ts
 function isSafeEditor(editor) {
 	return !!editor && !editor.isDestroyed;
 }
@@ -255,128 +365,171 @@ function useEditorSelector(editor, selector) {
 		return selector(editor());
 	});
 }
-function createControl({ label, isActive, operation, icon, isDisabled }) {
-	return defineComponent({
-		name: `RichTextEditor${String(label)}`,
-		inheritAttrs: false,
-		props: {
-			icon: {
-				type: [Object, Function],
-				default: void 0
-			},
-			active: {
-				type: Boolean,
-				default: void 0
-			},
-			interactive: {
-				type: Boolean,
-				default: void 0
-			},
-			disabled: {
-				type: Boolean,
-				default: void 0
-			},
-			variant: {
-				type: String,
-				default: void 0
-			},
-			classNames: {
-				type: [Object, Function],
-				default: void 0
-			},
-			styles: {
-				type: [Object, Function],
-				default: void 0
-			}
+//#endregion
+//#region src/RichTextEditorControl/RichTextEditorGeneratedControl.vue
+var RichTextEditorGeneratedControl_default = /* @__PURE__ */ defineComponent({
+	name: "RichTextEditorGeneratedControl",
+	inheritAttrs: false,
+	__name: "RichTextEditorGeneratedControl",
+	props: {
+		classNames: { default: void 0 },
+		styles: { default: void 0 },
+		vars: { default: void 0 },
+		unstyled: {
+			type: Boolean,
+			default: void 0
 		},
-		setup(props, { attrs }) {
-			const ctx = useRichTextEditorContext();
-			const editorState = useEditorSelector(() => ctx.editor, (editor) => {
-				const safeEditor = isSafeEditor(editor) ? editor : null;
-				return {
-					active: safeEditor && isActive?.name ? safeEditor.isActive(isActive.name, isActive.attributes) : false,
-					disabled: safeEditor ? isDisabled?.(safeEditor) ?? false : true
-				};
-			});
-			return () => {
-				const controlLabel = ctx.labels[label];
-				return h(RichTextEditorControlBase, {
-					...attrs,
-					...props,
-					"aria-label": controlLabel,
-					title: controlLabel,
-					active: props.active ?? editorState.value.active,
-					icon: props.icon || icon,
-					disabled: props.disabled ?? editorState.value.disabled,
-					onClick: () => {
-						if (!isSafeEditor(ctx.editor)) return;
-						ctx.editor.chain().focus()[operation.name](operation.attributes).run();
-					}
-				});
+		active: {
+			type: Boolean,
+			default: void 0
+		},
+		interactive: {
+			type: Boolean,
+			default: true
+		},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		variant: { default: void 0 },
+		label: {},
+		icon: {},
+		isActive: { default: void 0 },
+		isDisabled: {
+			type: Function,
+			default: void 0
+		},
+		operation: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const ctx = useRichTextEditorContext();
+		const label = computed(() => ctx.labels[props.label]);
+		const editorState = useEditorSelector(() => ctx.editor, (editor) => {
+			const safeEditor = isSafeEditor(editor) ? editor : null;
+			return {
+				active: safeEditor && props.isActive?.name ? safeEditor.isActive(props.isActive.name, props.isActive.attributes) : false,
+				disabled: safeEditor ? props.isDisabled?.(safeEditor) ?? false : true
 			};
+		});
+		function runOperation() {
+			if (!isSafeEditor(ctx.editor)) return;
+			ctx.editor.chain().focus()[props.operation.name](props.operation.attributes).run();
 		}
-	});
-}
-function renderControlIcon(Icon) {
-	return h(Box, {
-		component: Icon,
-		class: RichTextEditor_module_default.controlIcon
-	});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(RichTextEditorControlBase_default, mergeProps(unref(attrs), {
+				active: props.active ?? unref(editorState).active,
+				interactive: props.interactive,
+				disabled: props.disabled ?? unref(editorState).disabled,
+				variant: props.variant,
+				"class-names": props.classNames,
+				styles: props.styles,
+				"aria-label": label.value,
+				title: label.value,
+				onClick: runOperation
+			}), {
+				icon: withCtx((iconProps) => [renderSlot(_ctx.$slots, "icon", normalizeProps(guardReactiveProps(iconProps)), () => [(openBlock(), createBlock(resolveDynamicComponent(props.icon), normalizeProps(guardReactiveProps(iconProps)), null, 16))])]),
+				_: 3
+			}, 16, [
+				"active",
+				"interactive",
+				"disabled",
+				"variant",
+				"class-names",
+				"styles",
+				"aria-label",
+				"title"
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/RichTextEditorControl/RichTextEditorControl.ts
+var RichTextEditorControl = factory(RichTextEditorControl_default, { classes: RichTextEditor_module_default });
+var RichTextEditorControlBase = factory(RichTextEditorControlBase_default, { classes: RichTextEditor_module_default });
+var RichTextEditorGeneratedControl = factory(RichTextEditorGeneratedControl_default, { classes: RichTextEditor_module_default });
+function createControl(config) {
+	return RichTextEditorGeneratedControl.withProps(config);
 }
 //#endregion
 //#region src/RichTextEditorControl/RichTextEditorColorControl.ts
-var RichTextEditorColorControl = defineComponent({
+var RichTextEditorColorControl = factory(/* @__PURE__ */ defineComponent({
 	name: "RichTextEditorColorControl",
 	inheritAttrs: false,
-	props: { color: {
-		type: String,
-		required: true
-	} },
-	setup(rawProps, { attrs }) {
-		const props = useProps("RichTextEditorColorControl", null, rawProps);
+	__name: "RichTextEditorColorControl",
+	props: { color: {} },
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
 		const ctx = useRichTextEditorContext();
-		return () => {
-			const currentColor = ctx.editor?.getAttributes("textStyle").color || null;
-			const label = ctx.labels.colorControlLabel(props.color);
-			return h(RichTextEditorControl, {
-				...attrs,
-				variant: ctx.variant,
-				active: currentColor === props.color,
-				"aria-label": label,
-				title: label,
-				onClick: () => (ctx.editor?.chain())?.focus().setColor(props.color).run()
-			}, () => h(ColorSwatch, {
-				color: props.color,
-				size: 14
-			}));
+		const currentColor = useEditorSelector(() => ctx.editor, (editor) => String(editor?.getAttributes("textStyle").color || ""));
+		const label = computed(() => ctx.labels.colorControlLabel(props.color));
+		function setColor() {
+			(ctx.editor?.chain())?.focus().setColor(props.color).run();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(RichTextEditorControl_default, mergeProps(unref(attrs), {
+				variant: unref(ctx).variant,
+				active: unref(currentColor) === props.color,
+				"aria-label": label.value,
+				title: label.value,
+				onClick: setColor
+			}), {
+				default: withCtx(() => [createVNode(unref(ColorSwatch), {
+					color: props.color,
+					size: 14
+				}, null, 8, ["color"])]),
+				_: 1
+			}, 16, [
+				"variant",
+				"active",
+				"aria-label",
+				"title"
+			]);
 		};
 	}
-});
+}), { classes: RichTextEditor_module_default });
 //#endregion
-//#region src/icons/Icons.ts
-function createIcon(name, children) {
-	return defineComponent({
-		name,
-		inheritAttrs: false,
-		setup(_, { attrs }) {
-			return () => h("svg", {
-				...attrs,
+//#region src/icons/RichTextEditorIcon.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["d"];
+//#endregion
+//#region src/icons/RichTextEditorIcon.ts
+var RichTextEditorIcon = factory(/* @__PURE__ */ defineComponent({
+	name: "RichTextEditorIcon",
+	inheritAttrs: false,
+	__name: "RichTextEditorIcon",
+	props: { paths: {} },
+	setup(__props) {
+		const attrs = useAttrs();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("svg", mergeProps(unref(attrs), {
 				xmlns: "http://www.w3.org/2000/svg",
 				viewBox: "0 0 24 24",
-				strokeWidth: "1.5",
+				"stroke-width": "1.5",
 				stroke: "currentColor",
 				fill: "none",
-				strokeLinecap: "round",
-				strokeLinejoin: "round"
-			}, [h("path", {
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round"
+			}), [_cache[0] || (_cache[0] = createElementVNode("path", {
 				stroke: "none",
 				d: "M0 0h24v24H0z",
 				fill: "none"
-			}), ...children]);
-		}
-	});
+			}, null, -1)), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.paths, (path) => {
+				return openBlock(), createElementBlock("path", {
+					key: path,
+					d: path
+				}, null, 8, _hoisted_1);
+			}), 128))], 16);
+		};
+	}
+}));
+//#endregion
+//#region src/icons/Icons.ts
+function createIcon(_name, paths) {
+	return RichTextEditorIcon.withProps({ paths });
 }
-var path = (d) => h("path", { d });
+var path = (d) => d;
 var IconBold = createIcon("IconBold", [path("M7 5h6a3.5 3.5 0 0 1 0 7h-6z"), path("M13 12h1a3.5 3.5 0 0 1 0 7h-7v-7")]);
 var IconItalic = createIcon("IconItalic", [
 	path("M11 5l6 0"),
@@ -572,141 +725,184 @@ var IconBraces = createIcon("IconBraces", [
 ]);
 //#endregion
 //#region src/RichTextEditorControl/RichTextEditorColorPickerControl.ts
-var RichTextEditorColorPickerControl = defineComponent({
+var RichTextEditorColorPickerControl = factory(/* @__PURE__ */ defineComponent({
 	name: "RichTextEditorColorPickerControl",
 	inheritAttrs: false,
+	__name: "RichTextEditorColorPickerControl",
 	props: {
-		popoverProps: {
-			type: Object,
-			default: void 0
-		},
-		colorPickerProps: {
-			type: Object,
-			default: void 0
-		},
-		colors: {
-			type: Array,
-			required: true
-		}
+		popoverProps: {},
+		colorPickerProps: {},
+		colors: {}
 	},
-	setup(rawProps, { attrs }) {
-		const props = useProps("RichTextEditorColorPickerControl", null, rawProps);
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
 		const ctx = useRichTextEditorContext();
 		const [opened, handlers] = useDisclosure(false);
 		const state = ref("palette");
-		const handleChange = (value, shouldClose = true) => {
+		const currentColor = useEditorSelector(() => ctx.editor, (editor) => String(editor?.getAttributes("textStyle").color || "var(--mantine-color-text)"));
+		function handleChange(value, shouldClose = true) {
 			(ctx.editor?.chain())?.focus().setColor(value).run();
 			if (shouldClose) handlers.close();
-		};
-		const handleClear = () => {
+		}
+		function handleClear() {
 			(ctx.editor?.chain())?.focus().unsetColor().run();
 			handlers.close();
-		};
-		return () => {
-			const currentColor = ctx.editor?.getAttributes("textStyle").color || "var(--mantine-color-text)";
-			return h(Popover, {
-				opened: opened.value,
-				withinPortal: true,
-				trapFocus: true,
-				onChange: (nextOpened) => !nextOpened && handlers.close(),
-				...props.popoverProps
-			}, { default: () => [h(Popover.Target, null, () => h(RichTextEditorControl, {
-				...attrs,
-				variant: ctx.variant,
-				"aria-label": ctx.labels.colorPickerControlLabel,
-				title: ctx.labels.colorPickerControlLabel,
-				onClick: handlers.toggle
-			}, () => h(ColorSwatch, {
-				color: currentColor,
-				size: 14
-			}))), h(Popover.Dropdown, ctx.getStyles("linkEditorDropdown"), () => [
-				state.value === "palette" ? h(SimpleGrid, {
-					cols: 7,
-					spacing: 2
-				}, () => props.colors.map((color, index) => h(ColorSwatch, {
-					key: index,
-					component: "button",
-					color,
-					onClick: () => handleChange(color),
-					size: 26,
-					radius: "xs",
-					style: { cursor: "pointer" },
-					title: ctx.labels.colorPickerColorLabel(color),
-					"aria-label": ctx.labels.colorPickerColorLabel(color)
-				}))) : null,
-				state.value === "colorPicker" ? h(ColorPicker, {
-					defaultValue: currentColor,
-					onChange: (value) => handleChange(value, false),
-					...props.colorPickerProps
-				}) : null,
-				h(Group, {
-					justify: "flex-end",
-					gap: "xs",
-					mt: "sm"
-				}, () => [
-					state.value === "palette" ? h(ActionIcon, {
-						variant: "default",
-						onClick: handlers.close,
-						title: ctx.labels.colorPickerCancel,
-						"aria-label": ctx.labels.colorPickerCancel
-					}, () => h(IconX, { style: {
-						width: rem(16),
-						height: rem(16)
-					} })) : null,
-					h(ActionIcon, {
-						variant: "default",
-						onClick: handleClear,
-						title: ctx.labels.colorPickerClear,
-						"aria-label": ctx.labels.colorPickerClear
-					}, () => h(IconCircleOff, { style: {
-						width: rem(16),
-						height: rem(16)
-					} })),
-					state.value === "palette" ? h(ActionIcon, {
-						variant: "default",
-						onClick: () => {
-							state.value = "colorPicker";
-						},
-						title: ctx.labels.colorPickerColorPicker,
-						"aria-label": ctx.labels.colorPickerColorPicker
-					}, () => h(IconColorPicker, { style: {
-						width: rem(16),
-						height: rem(16)
-					} })) : h(ActionIcon, {
-						variant: "default",
-						onClick: () => {
-							state.value = "palette";
-						},
-						title: ctx.labels.colorPickerPalette,
-						"aria-label": ctx.labels.colorPickerPalette
-					}, () => h(IconPalette, { style: {
-						width: rem(16),
-						height: rem(16)
-					} })),
-					state.value === "colorPicker" ? h(ActionIcon, {
-						variant: "default",
-						onClick: handlers.close,
-						title: ctx.labels.colorPickerSave,
-						"aria-label": ctx.labels.colorPickerSave
-					}, () => h(IconCheck, { style: {
-						width: rem(16),
-						height: rem(16)
-					} })) : null
-				])
-			])] });
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Popover), mergeProps({
+				opened: unref(opened),
+				"within-portal": true,
+				"trap-focus": true
+			}, props.popoverProps, { onChange: _cache[2] || (_cache[2] = (value) => !value && unref(handlers).close()) }), {
+				default: withCtx(() => [createVNode(unref(Popover).Target, null, {
+					default: withCtx(() => [createVNode(RichTextEditorControl_default, mergeProps(unref(attrs), {
+						variant: unref(ctx).variant,
+						"aria-label": unref(ctx).labels.colorPickerControlLabel,
+						title: unref(ctx).labels.colorPickerControlLabel,
+						onClick: unref(handlers).toggle
+					}), {
+						default: withCtx(() => [createVNode(unref(ColorSwatch), {
+							color: unref(currentColor),
+							size: 14
+						}, null, 8, ["color"])]),
+						_: 1
+					}, 16, [
+						"variant",
+						"aria-label",
+						"title",
+						"onClick"
+					])]),
+					_: 1
+				}), createVNode(unref(Popover).Dropdown, normalizeProps(guardReactiveProps(unref(ctx).getStyles("linkEditorDropdown"))), {
+					default: withCtx(() => [state.value === "palette" ? (openBlock(), createBlock(unref(SimpleGrid), {
+						key: 0,
+						cols: 7,
+						spacing: 2
+					}, {
+						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(props.colors, (color) => {
+							return openBlock(), createBlock(unref(ColorSwatch), {
+								key: color,
+								component: "button",
+								color,
+								size: 26,
+								radius: "xs",
+								style: { cursor: "pointer" },
+								title: unref(ctx).labels.colorPickerColorLabel(color),
+								"aria-label": unref(ctx).labels.colorPickerColorLabel(color),
+								onClick: ($event) => handleChange(color)
+							}, null, 8, [
+								"color",
+								"title",
+								"aria-label",
+								"onClick"
+							]);
+						}), 128))]),
+						_: 1
+					})) : (openBlock(), createBlock(unref(ColorPicker), mergeProps({
+						key: 1,
+						"model-value": unref(currentColor)
+					}, props.colorPickerProps, { "onUpdate:modelValue": _cache[0] || (_cache[0] = (value) => handleChange(value, false)) }), null, 16, ["model-value"])), createVNode(unref(Tooltip).Group, { "close-delay": 200 }, {
+						default: withCtx(() => [createVNode(unref(Group), {
+							justify: "flex-end",
+							gap: "xs",
+							mt: "sm"
+						}, {
+							default: withCtx(() => [
+								state.value === "palette" ? (openBlock(), createBlock(unref(ActionIcon), {
+									key: 0,
+									variant: "default",
+									title: unref(ctx).labels.colorPickerCancel,
+									"aria-label": unref(ctx).labels.colorPickerCancel,
+									onClick: unref(handlers).close
+								}, {
+									default: withCtx(() => [createVNode(unref(IconX), { style: normalizeStyle({
+										width: unref(rem)(16),
+										height: unref(rem)(16)
+									}) }, null, 8, ["style"])]),
+									_: 1
+								}, 8, [
+									"title",
+									"aria-label",
+									"onClick"
+								])) : createCommentVNode("", true),
+								createVNode(unref(ActionIcon), {
+									variant: "default",
+									title: unref(ctx).labels.colorPickerClear,
+									"aria-label": unref(ctx).labels.colorPickerClear,
+									onClick: handleClear
+								}, {
+									default: withCtx(() => [createVNode(unref(IconCircleOff), { style: normalizeStyle({
+										width: unref(rem)(16),
+										height: unref(rem)(16)
+									}) }, null, 8, ["style"])]),
+									_: 1
+								}, 8, ["title", "aria-label"]),
+								createVNode(unref(ActionIcon), {
+									variant: "default",
+									title: state.value === "palette" ? unref(ctx).labels.colorPickerColorPicker : unref(ctx).labels.colorPickerPalette,
+									"aria-label": state.value === "palette" ? unref(ctx).labels.colorPickerColorPicker : unref(ctx).labels.colorPickerPalette,
+									onClick: _cache[1] || (_cache[1] = ($event) => state.value = state.value === "palette" ? "colorPicker" : "palette")
+								}, {
+									default: withCtx(() => [state.value === "palette" ? (openBlock(), createBlock(unref(IconColorPicker), {
+										key: 0,
+										style: normalizeStyle({
+											width: unref(rem)(16),
+											height: unref(rem)(16)
+										})
+									}, null, 8, ["style"])) : (openBlock(), createBlock(unref(IconPalette), {
+										key: 1,
+										style: normalizeStyle({
+											width: unref(rem)(16),
+											height: unref(rem)(16)
+										})
+									}, null, 8, ["style"]))]),
+									_: 1
+								}, 8, ["title", "aria-label"]),
+								state.value === "colorPicker" ? (openBlock(), createBlock(unref(ActionIcon), {
+									key: 1,
+									variant: "default",
+									title: unref(ctx).labels.colorPickerSave,
+									"aria-label": unref(ctx).labels.colorPickerSave,
+									onClick: unref(handlers).close
+								}, {
+									default: withCtx(() => [createVNode(unref(IconCheck), { style: normalizeStyle({
+										width: unref(rem)(16),
+										height: unref(rem)(16)
+									}) }, null, 8, ["style"])]),
+									_: 1
+								}, 8, [
+									"title",
+									"aria-label",
+									"onClick"
+								])) : createCommentVNode("", true)
+							]),
+							_: 1
+						})]),
+						_: 1
+					})]),
+					_: 1
+				}, 16)]),
+				_: 1
+			}, 16, ["opened"]);
 		};
 	}
-});
+}), { classes: RichTextEditor_module_default });
 //#endregion
 //#region src/RichTextEditorControl/RichTextEditorLinkControl.ts
-var RichTextEditorLinkControl = defineComponent({
+var RichTextEditorLinkControl = factory(/* @__PURE__ */ defineComponent({
 	name: "RichTextEditorLinkControl",
 	inheritAttrs: false,
+	__name: "RichTextEditorLinkControl",
 	props: {
-		popoverProps: {
-			type: Object,
+		classNames: { default: void 0 },
+		styles: { default: void 0 },
+		vars: { default: void 0 },
+		unstyled: {
+			type: Boolean,
 			default: void 0
 		},
+		popoverProps: { default: void 0 },
 		disableTooltips: {
 			type: Boolean,
 			default: false
@@ -715,147 +911,168 @@ var RichTextEditorLinkControl = defineComponent({
 			type: Boolean,
 			default: false
 		},
-		icon: {
-			type: [Object, Function],
-			default: void 0
-		},
-		classNames: {
-			type: [Object, Function],
-			default: void 0
-		},
-		styles: {
-			type: [Object, Function],
-			default: void 0
-		},
-		vars: {
-			type: [Object, Function],
-			default: void 0
-		}
+		icon: { default: void 0 }
 	},
-	setup(rawProps, { attrs }) {
-		const props = useProps("RichTextEditorLinkControl", null, rawProps);
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
 		const ctx = useRichTextEditorContext();
 		const url = ref("");
 		const external = ref(props.initialExternal);
 		const [opened, handlers] = useDisclosure(false);
-		const handleOpen = () => {
+		const stylesApiProps = computed(() => ({
+			classNames: props.classNames,
+			styles: props.styles
+		}));
+		const active = useEditorSelector(() => ctx.editor, (editor) => isSafeEditor(editor) ? editor.isActive("link") : false);
+		function open() {
 			handlers.open();
-			const linkData = ctx.editor?.getAttributes("link");
-			url.value = linkData?.href || "";
-			external.value = linkData?.href ? linkData?.target === "_blank" : !!props.initialExternal;
-		};
-		const handleClose = () => {
+			const link = isSafeEditor(ctx.editor) ? ctx.editor.getAttributes("link") : void 0;
+			url.value = link?.href || "";
+			external.value = link?.href ? link.target === "_blank" : props.initialExternal;
+		}
+		function close() {
 			handlers.close();
 			url.value = "";
-			external.value = !!props.initialExternal;
-		};
-		const setLink = () => {
-			handleClose();
-			if (url.value === "") ctx.editor?.chain().focus().extendMarkRange("link").unsetLink().run();
-			else ctx.editor?.chain().focus().extendMarkRange("link").setLink({
+			external.value = props.initialExternal;
+		}
+		function setLink() {
+			close();
+			if (!isSafeEditor(ctx.editor)) return;
+			if (url.value === "") ctx.editor.chain().focus().extendMarkRange("link").unsetLink().run();
+			else ctx.editor.chain().focus().extendMarkRange("link").setLink({
 				href: url.value,
 				target: external.value ? "_blank" : null
 			}).run();
-		};
-		useWindowEvent("edit-link", handleOpen);
-		return () => {
-			const stylesApiProps = {
-				classNames: props.classNames,
-				styles: props.styles
-			};
-			const active = ctx.editor && !ctx.editor.isDestroyed ? ctx.editor.isActive("link") : false;
-			return h(Popover, {
-				trapFocus: true,
+		}
+		function onKeydown(event) {
+			if (event.key === "Enter") {
+				event.preventDefault();
+				setLink();
+			}
+		}
+		function onPopoverChange(nextOpened) {
+			if (!nextOpened) close();
+		}
+		onMounted(() => window.addEventListener("edit-link", open));
+		onBeforeUnmount(() => window.removeEventListener("edit-link", open));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Popover), mergeProps({
+				"trap-focus": true,
 				shadow: "md",
-				withinPortal: true,
-				opened: opened.value,
-				onChange: (nextOpened) => !nextOpened && handleClose(),
+				"within-portal": true,
+				opened: unref(opened),
 				offset: -44,
-				zIndex: 1e4,
-				...props.popoverProps
-			}, { default: () => [h(Popover.Target, null, () => h(RichTextEditorControlBase, {
-				...attrs,
-				icon: props.icon || IconLink,
-				"aria-label": ctx.labels.linkControlLabel,
-				title: ctx.labels.linkControlLabel,
-				onClick: handleOpen,
-				active,
-				classNames: props.classNames,
-				styles: props.styles,
-				variant: ctx.variant
-			})), h(Popover.Dropdown, ctx.getStyles("linkEditorDropdown", stylesApiProps), () => h("div", ctx.getStyles("linkEditor", stylesApiProps), [h(TextInput, {
-				placeholder: ctx.labels.linkEditorInputPlaceholder,
-				"aria-label": ctx.labels.linkEditorInputLabel,
-				type: "url",
-				value: url.value,
-				onInput: (event) => {
-					url.value = event.currentTarget.value;
-				},
-				classNames: { input: ctx.getStyles("linkEditorInput", stylesApiProps).class },
-				onKeydown: (event) => {
-					if (event.key === "Enter") {
-						event.preventDefault();
-						setLink();
-					}
-				},
-				rightSection: () => h(Tooltip, {
-					label: external.value ? ctx.labels.linkEditorExternalLink : ctx.labels.linkEditorInternalLink,
-					events: {
-						hover: true,
-						focus: true,
-						touch: true
-					},
-					withinPortal: true,
-					withArrow: true,
-					disabled: props.disableTooltips,
-					zIndex: 1e4
-				}, () => h(UnstyledButton, {
-					onClick: () => {
-						external.value = !external.value;
-					},
-					"data-active": external.value || void 0,
-					...ctx.getStyles("linkEditorExternalControl", stylesApiProps)
-				}, () => h(IconExternalLink, { style: {
-					width: rem(14),
-					height: rem(14)
-				} })))
-			}), h(Button, {
-				variant: "default",
-				onClick: setLink,
-				...ctx.getStyles("linkEditorSave", stylesApiProps)
-			}, () => ctx.labels.linkEditorSave)]))] });
+				"z-index": 1e4
+			}, props.popoverProps, { onChange: onPopoverChange }), {
+				default: withCtx(() => [createVNode(unref(Popover).Target, null, {
+					default: withCtx(() => [createVNode(RichTextEditorControlBase_default, mergeProps(unref(attrs), {
+						"aria-label": unref(ctx).labels.linkControlLabel,
+						title: unref(ctx).labels.linkControlLabel,
+						active: unref(active),
+						"class-names": props.classNames,
+						styles: props.styles,
+						variant: unref(ctx).variant,
+						onClick: open
+					}), {
+						icon: withCtx((iconProps) => [renderSlot(_ctx.$slots, "icon", normalizeProps(guardReactiveProps(iconProps)), () => [(openBlock(), createBlock(resolveDynamicComponent(props.icon || unref(IconLink)), normalizeProps(guardReactiveProps(iconProps)), null, 16))])]),
+						_: 3
+					}, 16, [
+						"aria-label",
+						"title",
+						"active",
+						"class-names",
+						"styles",
+						"variant"
+					])]),
+					_: 3
+				}), createVNode(unref(Popover).Dropdown, normalizeProps(guardReactiveProps(unref(ctx).getStyles("linkEditorDropdown", stylesApiProps.value))), {
+					default: withCtx(() => [createElementVNode("div", normalizeProps(guardReactiveProps(unref(ctx).getStyles("linkEditor", stylesApiProps.value))), [createVNode(unref(TextInput), {
+						modelValue: url.value,
+						"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => url.value = $event),
+						placeholder: unref(ctx).labels.linkEditorInputPlaceholder,
+						"aria-label": unref(ctx).labels.linkEditorInputLabel,
+						type: "url",
+						"class-names": { input: unref(ctx).getStyles("linkEditorInput", stylesApiProps.value).class },
+						onKeydown
+					}, {
+						rightSection: withCtx(() => [createVNode(unref(Tooltip), {
+							label: external.value ? unref(ctx).labels.linkEditorExternalLink : unref(ctx).labels.linkEditorInternalLink,
+							events: {
+								hover: true,
+								focus: true,
+								touch: true
+							},
+							"within-portal": true,
+							"with-arrow": true,
+							disabled: props.disableTooltips,
+							"z-index": 1e4
+						}, {
+							default: withCtx(() => [createVNode(unref(UnstyledButton), mergeProps({ "data-active": external.value || void 0 }, unref(ctx).getStyles("linkEditorExternalControl", stylesApiProps.value), { onClick: _cache[0] || (_cache[0] = ($event) => external.value = !external.value) }), {
+								default: withCtx(() => [createVNode(unref(IconExternalLink), { style: normalizeStyle({
+									width: unref(rem)(14),
+									height: unref(rem)(14)
+								}) }, null, 8, ["style"])]),
+								_: 1
+							}, 16, ["data-active"])]),
+							_: 1
+						}, 8, ["label", "disabled"])]),
+						_: 1
+					}, 8, [
+						"modelValue",
+						"placeholder",
+						"aria-label",
+						"class-names"
+					]), createVNode(unref(Button), mergeProps({ variant: "default" }, unref(ctx).getStyles("linkEditorSave", stylesApiProps.value), { onClick: setLink }), {
+						default: withCtx(() => [createTextVNode(toDisplayString(unref(ctx).labels.linkEditorSave), 1)]),
+						_: 1
+					}, 16)], 16)]),
+					_: 1
+				}, 16)]),
+				_: 3
+			}, 16, ["opened"]);
 		};
 	}
-});
-Object.assign(RichTextEditorLinkControl, { classes: RichTextEditor_module_default });
+}), { classes: RichTextEditor_module_default });
 //#endregion
 //#region src/RichTextEditorControl/RichTextEditorSourceCodeControl.ts
-var RichTextEditorSourceCodeControl = defineComponent({
+var RichTextEditorSourceCodeControl = factory(/* @__PURE__ */ defineComponent({
 	name: "RichTextEditorSourceCodeControl",
 	inheritAttrs: false,
-	setup(rawProps, { attrs }) {
-		useProps("RichTextEditorSourceCodeControl", {}, rawProps);
+	__name: "RichTextEditorSourceCodeControl",
+	setup(__props) {
+		const attrs = useAttrs();
 		const ctx = useRichTextEditorContext();
-		const isSourceCodeModeActive = ref(false);
-		const handleStateChange = () => {
-			if (isSourceCodeModeActive.value) ctx.editor?.commands.setContent(ctx.editor.getText(), { emitUpdate: true });
-			else ctx.editor?.commands.setContent(`<textarea>${ctx.editor.getHTML()}</textarea>`);
-			isSourceCodeModeActive.value = !isSourceCodeModeActive.value;
-			ctx.onSourceCodeTextSwitch?.(isSourceCodeModeActive.value);
+		const active = ref(false);
+		function toggleSourceCode() {
+			if (!isSafeEditor(ctx.editor)) return;
+			if (active.value) ctx.editor.commands.setContent(ctx.editor.getText(), { emitUpdate: true });
+			else ctx.editor.commands.setContent(`<textarea>${ctx.editor.getHTML()}</textarea>`);
+			active.value = !active.value;
+			ctx.onSourceCodeTextSwitch?.(active.value);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(RichTextEditorControl_default, mergeProps(unref(attrs), {
+				variant: unref(ctx).variant,
+				active: active.value,
+				"aria-label": unref(ctx).labels.sourceCodeControlLabel,
+				title: unref(ctx).labels.sourceCodeControlLabel,
+				onClick: toggleSourceCode
+			}), {
+				default: withCtx(() => [createVNode(unref(IconBraces), { style: normalizeStyle({
+					width: unref(rem)(16),
+					height: unref(rem)(16)
+				}) }, null, 8, ["style"])]),
+				_: 1
+			}, 16, [
+				"variant",
+				"active",
+				"aria-label",
+				"title"
+			]);
 		};
-		return () => h(RichTextEditorControl, {
-			...attrs,
-			variant: ctx.variant,
-			active: isSourceCodeModeActive.value,
-			"aria-label": ctx.labels.sourceCodeControlLabel,
-			title: ctx.labels.sourceCodeControlLabel,
-			onClick: handleStateChange
-		}, () => h(IconBraces, { style: {
-			width: rem(16),
-			height: rem(16)
-		} }));
 	}
-});
+}), { classes: RichTextEditor_module_default });
 //#endregion
 //#region src/RichTextEditorControl/controls.ts
 var BoldControl = createControl({
@@ -1092,31 +1309,26 @@ var TaskListLiftControl = createControl({
 });
 //#endregion
 //#region src/RichTextEditorControlsGroup/RichTextEditorControlsGroup.ts
-var RichTextEditorControlsGroup = defineComponent({
+var RichTextEditorControlsGroup = factory(/* @__PURE__ */ defineComponent({
 	name: "RichTextEditorControlsGroup",
 	inheritAttrs: false,
+	__name: "RichTextEditorControlsGroup",
 	props: {
-		variant: {
-			type: String,
-			default: void 0
-		},
-		classNames: {
-			type: [Object, Function],
-			default: void 0
-		},
-		styles: {
-			type: [Object, Function],
+		classNames: { default: void 0 },
+		styles: { default: void 0 },
+		vars: { default: void 0 },
+		unstyled: {
+			type: Boolean,
 			default: void 0
 		},
-		vars: {
-			type: [Object, Function],
-			default: void 0
-		}
+		variant: { default: void 0 }
 	},
-	setup(rawProps, { attrs, slots }) {
+	setup(__props) {
+		const rawProps = __props;
+		const attrs = useAttrs();
 		const props = useProps("RichTextEditorControlsGroup", null, rawProps);
 		const ctx = useRichTextEditorContext();
-		return () => h(Box, {
+		const rootProps = computed(() => ({
 			...attrs,
 			variant: props.variant || ctx.variant,
 			...ctx.getStyles("controlsGroup", {
@@ -1125,166 +1337,65 @@ var RichTextEditorControlsGroup = defineComponent({
 				styles: props.styles,
 				classNames: props.classNames
 			})
-		}, slots);
-	}
-});
-Object.assign(RichTextEditorControlsGroup, { classes: RichTextEditor_module_default });
-//#endregion
-//#region src/RichTextEditorToolbar/RichTextEditorToolbar.ts
-var RichTextEditorToolbar = defineComponent({
-	name: "RichTextEditorToolbar",
-	inheritAttrs: false,
-	props: {
-		sticky: {
-			type: Boolean,
-			default: false
-		},
-		stickyOffset: {
-			type: [String, Number],
-			default: void 0
-		},
-		variant: {
-			type: String,
-			default: void 0
-		},
-		classNames: {
-			type: [Object, Function],
-			default: void 0
-		},
-		styles: {
-			type: [Object, Function],
-			default: void 0
-		},
-		vars: {
-			type: [Object, Function],
-			default: void 0
-		},
-		mod: {
-			type: [Object, Array],
-			default: void 0
-		}
-	},
-	setup(rawProps, { attrs, slots }) {
-		const props = useProps("RichTextEditorToolbar", null, rawProps);
-		const ctx = useRichTextEditorContext();
-		return () => h(Box, {
-			...attrs,
-			mod: [{ sticky: props.sticky }, props.mod],
-			variant: props.variant || ctx.variant,
-			...ctx.getStyles("toolbar", {
-				className: attrs.class,
-				style: [attrs.style, { "--rte-sticky-offset": rem(props.stickyOffset) }],
-				styles: props.styles,
-				classNames: props.classNames
-			})
-		}, slots);
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Box), normalizeProps(guardReactiveProps(rootProps.value)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16);
+		};
 	}
-});
-Object.assign(RichTextEditorToolbar, { classes: RichTextEditor_module_default });
+}), { classes: RichTextEditor_module_default });
 //#endregion
 //#region src/RichTextEditor.ts
-var defaultProps = {
-	withCodeHighlightStyles: true,
-	withTypographyStyles: true,
-	variant: "default"
-};
-var RichTextEditorBase = defineComponent({
-	name: "RichTextEditor",
-	inheritAttrs: false,
-	props: {
-		editor: {
-			type: Object,
-			default: null
-		},
-		withCodeHighlightStyles: {
-			type: Boolean,
-			default: void 0
-		},
-		withTypographyStyles: {
-			type: Boolean,
-			default: void 0
-		},
-		onSourceCodeTextSwitch: {
-			type: Function,
-			default: void 0
-		},
-		labels: {
-			type: Object,
-			default: void 0
-		},
-		variant: {
-			type: String,
-			default: void 0
-		},
-		classNames: {
-			type: [Object, Function],
-			default: void 0
-		},
-		styles: {
-			type: [Object, Function],
-			default: void 0
-		},
-		vars: {
-			type: [Object, Function],
-			default: void 0
-		},
-		unstyled: {
-			type: Boolean,
-			default: false
-		}
-	},
-	setup(rawProps, { attrs, slots }) {
-		const props = useProps("RichTextEditor", defaultProps, rawProps);
-		const getStyles = useStyles({
-			name: "RichTextEditor",
-			classes: RichTextEditor_module_default,
-			props,
-			className: attrs.class,
-			style: attrs.style,
-			classNames: props.classNames,
-			styles: props.styles,
-			vars: props.vars,
-			unstyled: props.unstyled
-		});
-		const mergedLabels = computed(() => ({
-			...DEFAULT_LABELS,
-			...props.labels
-		}));
-		provideRichTextEditorContext({
-			get editor() {
-				return props.editor;
-			},
-			getStyles,
-			get labels() {
-				return mergedLabels.value;
-			},
-			get withCodeHighlightStyles() {
-				return props.withCodeHighlightStyles;
-			},
-			get withTypographyStyles() {
-				return props.withTypographyStyles;
-			},
-			get onSourceCodeTextSwitch() {
-				return props.onSourceCodeTextSwitch;
-			},
-			get unstyled() {
-				return props.unstyled;
-			},
-			get variant() {
-				return props.variant;
-			}
-		});
-		return () => h(Box, {
-			...attrs,
-			...getStyles("root")
-		}, slots);
-	}
-});
-var RichTextEditor = Object.assign(RichTextEditorBase, {
+var RichTextEditor = factory(RichTextEditor_default, {
 	classes: RichTextEditor_module_default,
 	Content: RichTextEditorContent,
 	Control: RichTextEditorControl,
-	Toolbar: RichTextEditorToolbar,
+	Toolbar: factory(/* @__PURE__ */ defineComponent({
+		name: "RichTextEditorToolbar",
+		inheritAttrs: false,
+		__name: "RichTextEditorToolbar",
+		props: {
+			classNames: { default: void 0 },
+			styles: { default: void 0 },
+			vars: { default: void 0 },
+			unstyled: {
+				type: Boolean,
+				default: void 0
+			},
+			sticky: {
+				type: Boolean,
+				default: false
+			},
+			stickyOffset: { default: void 0 },
+			mod: { default: void 0 },
+			variant: { default: void 0 }
+		},
+		setup(__props) {
+			const rawProps = __props;
+			const attrs = useAttrs();
+			const props = useProps("RichTextEditorToolbar", null, rawProps);
+			const ctx = useRichTextEditorContext();
+			const rootProps = computed(() => ({
+				...attrs,
+				mod: [{ sticky: props.sticky }, props.mod],
+				variant: props.variant || ctx.variant,
+				...ctx.getStyles("toolbar", {
+					className: attrs.class,
+					style: [attrs.style, { "--rte-sticky-offset": rem(props.stickyOffset) }],
+					styles: props.styles,
+					classNames: props.classNames
+				})
+			}));
+			return (_ctx, _cache) => {
+				return openBlock(), createBlock(unref(Box), normalizeProps(guardReactiveProps(rootProps.value)), {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+					_: 3
+				}, 16);
+			};
+		}
+	}), { classes: RichTextEditor_module_default }),
 	ControlsGroup: RichTextEditorControlsGroup,
 	Bold: BoldControl,
 	Italic: ItalicControl,
@@ -1341,6 +1452,6 @@ var getTaskListExtension = (TipTapTaskList) => TipTapTaskList.extend({ addKeyboa
 	}
 }) }).configure({ HTMLAttributes: { class: `${RichTextEditor_module_default.taskList} mantine-RichTextEditor-taskList` } });
 //#endregion
-export { AlignCenterControl, AlignJustifyControl, AlignLeftControl, AlignRightControl, BlockquoteControl, BoldControl, BulletListControl, ClearFormattingControl, CodeBlockControl, CodeControl, DEFAULT_LABELS, H1Control, H2Control, H3Control, H4Control, H5Control, H6Control, HighlightControl, HrControl, ItalicControl, Link, OrderedListControl, RedoControl, RichTextEditor, RichTextEditorColorControl, RichTextEditorColorPickerControl, RichTextEditorControl, RichTextEditorControlBase, RichTextEditorLinkControl, RichTextEditorSourceCodeControl, StrikeThroughControl, SubscriptControl, SuperscriptControl, TaskListControl, TaskListLiftControl, TaskListSinkControl, UnderlineControl, UndoControl, UnlinkControl, UnsetColorControl, createControl, getTaskListExtension, renderControlIcon, useRichTextEditorContext };
+export { AlignCenterControl, AlignJustifyControl, AlignLeftControl, AlignRightControl, BlockquoteControl, BoldControl, BulletListControl, ClearFormattingControl, CodeBlockControl, CodeControl, DEFAULT_LABELS, H1Control, H2Control, H3Control, H4Control, H5Control, H6Control, HighlightControl, HrControl, ItalicControl, Link, OrderedListControl, RedoControl, RichTextEditor, RichTextEditorColorControl, RichTextEditorColorPickerControl, RichTextEditorControl, RichTextEditorControlBase, RichTextEditorLinkControl, RichTextEditorSourceCodeControl, StrikeThroughControl, SubscriptControl, SuperscriptControl, TaskListControl, TaskListLiftControl, TaskListSinkControl, UnderlineControl, UndoControl, UnlinkControl, UnsetColorControl, createControl, getTaskListExtension, useRichTextEditorContext };
 
 //# sourceMappingURL=index.mjs.map