@mantine-vue/tiptap 2.4.0 → 3.1.0

package/cjs/index.cjs

@@ -21,8 +21,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 	enumerable: true
 }) : target, mod));
 //#endregion
-let vue = require("vue");
 let _mantine_vue_core = require("@mantine-vue/core");
+let vue = require("vue");
 let _tiptap_vue_3 = require("@tiptap/vue-3");
 let _mantine_vue_hooks = require("@mantine-vue/hooks");
 let _tiptap_extension_link = require("@tiptap/extension-link");
@@ -95,158 +95,271 @@ var RichTextEditor_module_default = {
 	taskList: "_taskList_1ljoi_345"
 };
 //#endregion
-//#region src/RichTextEditorContent/RichTextEditorContent.ts
-var RichTextEditorContent = (0, vue.defineComponent)({
-	name: "RichTextEditorContent",
+//#region src/RichTextEditor.vue
+var RichTextEditor_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	name: "RichTextEditor",
 	inheritAttrs: false,
+	__name: "RichTextEditor",
 	props: {
-		classNames: {
-			type: [Object, Function],
-			default: void 0
+		editor: { default: null },
+		withCodeHighlightStyles: {
+			type: Boolean,
+			default: true
+		},
+		withTypographyStyles: {
+			type: Boolean,
+			default: true
 		},
-		styles: {
-			type: [Object, Function],
+		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(__props) {
+		const rawProps = __props;
+		const attrs = (0, vue.useAttrs)();
+		const props = (0, _mantine_vue_core.useProps)("RichTextEditor", null, rawProps);
+		const getStyles = (0, _mantine_vue_core.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 = (0, vue.computed)(() => ({
+			...DEFAULT_LABELS,
+			...props.labels
+		}));
+		const rootProps = (0, vue.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 (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Box), (0, vue.normalizeProps)((0, vue.guardReactiveProps)(rootProps.value)), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+//#region src/RichTextEditorContent/RichTextEditorContent.vue
+var RichTextEditorContent_default = /* @__PURE__ */ (0, vue.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(rawProps, { attrs }) {
+	setup(__props) {
+		const rawProps = __props;
+		const attrs = (0, vue.useAttrs)();
 		const props = (0, _mantine_vue_core.useProps)("RichTextEditorContent", null, rawProps);
 		const ctx = useRichTextEditorContext();
-		return () => {
-			const editorContent = (0, vue.h)(_mantine_vue_core.Box, {
-				component: _tiptap_vue_3.EditorContent,
-				editor: ctx.editor,
+		const contentProps = (0, vue.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 ? (0, vue.h)(_mantine_vue_core.Typography, {
-				...ctx.getStyles("Typography", {
-					className: attrs.class,
-					style: attrs.style,
-					styles: props.styles,
-					classNames: props.classNames
-				}),
-				unstyled: ctx.unstyled
-			}, () => editorContent) : editorContent;
+				...forwarded
+			};
+		});
+		const typographyProps = (0, vue.computed)(() => ctx.getStyles("Typography", {
+			className: attrs.class,
+			style: attrs.style,
+			styles: props.styles,
+			classNames: props.classNames
+		}));
+		return (_ctx, _cache) => {
+			return (0, vue.unref)(ctx).withTypographyStyles ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Typography), (0, vue.mergeProps)({ key: 0 }, typographyProps.value, { unstyled: (0, vue.unref)(ctx).unstyled }), {
+				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.Box), (0, vue.mergeProps)({
+					component: (0, vue.unref)(_tiptap_vue_3.EditorContent),
+					editor: (0, vue.unref)(ctx).editor
+				}, contentProps.value), null, 16, ["component", "editor"])]),
+				_: 1
+			}, 16, ["unstyled"])) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Box), (0, vue.mergeProps)({
+				key: 1,
+				component: (0, vue.unref)(_tiptap_vue_3.EditorContent),
+				editor: (0, vue.unref)(ctx).editor
+			}, contentProps.value), null, 16, ["component", "editor"]));
 		};
 	}
 });
-Object.assign(RichTextEditorContent, { classes: RichTextEditor_module_default });
 //#endregion
-//#region src/RichTextEditorControl/RichTextEditorControl.ts
-var defaultProps$1 = { interactive: true };
-var RichTextEditorControl = (0, vue.defineComponent)({
+//#region src/RichTextEditorContent/RichTextEditorContent.ts
+var RichTextEditorContent = (0, _mantine_vue_core.factory)(RichTextEditorContent_default, { classes: RichTextEditor_module_default });
+//#endregion
+//#region src/RichTextEditorControl/RichTextEditorControl.vue
+var RichTextEditorControl_default = /* @__PURE__ */ (0, vue.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 = (0, _mantine_vue_core.useProps)("RichTextEditorControl", defaultProps$1, rawProps);
+	setup(__props) {
+		const rawProps = __props;
+		const attrs = (0, vue.useAttrs)();
+		const props = (0, _mantine_vue_core.useProps)("RichTextEditorControl", null, rawProps);
 		const ctx = useRichTextEditorContext();
-		return () => (0, vue.h)(_mantine_vue_core.UnstyledButton, {
-			...attrs,
+		const forwardedAttrs = (0, vue.computed)(() => {
+			const result = { ...attrs };
+			delete result.onMousedown;
+			return result;
+		});
+		const controlProps = (0, vue.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 (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.UnstyledButton), (0, vue.mergeProps)(controlProps.value, {
+				disabled: (0, vue.unref)(props).disabled,
+				"data-rich-text-editor-control": "",
+				tabindex: (0, vue.unref)(props).interactive ? 0 : -1,
+				"data-interactive": (0, vue.unref)(props).interactive || void 0,
+				"data-disabled": (0, vue.unref)(props).disabled || void 0,
+				"data-active": (0, vue.unref)(props).active || void 0,
+				"aria-pressed": (0, vue.unref)(props).active && (0, vue.unref)(props).interactive ? true : void 0,
+				"aria-hidden": !(0, vue.unref)(props).interactive || void 0,
+				unstyled: (0, vue.unref)(ctx).unstyled,
+				variant: (0, vue.unref)(props).variant || (0, vue.unref)(ctx).variant || "default",
+				onMousedown
+			}), {
+				default: (0, vue.withCtx)(() => [(0, vue.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 = (0, vue.defineComponent)({
+//#endregion
+//#region src/RichTextEditorControl/RichTextEditorControlBase.vue
+var RichTextEditorControlBase_default = /* @__PURE__ */ (0, vue.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 = (0, vue.useAttrs)();
 		const ctx = useRichTextEditorContext();
-		return () => (0, vue.h)(RichTextEditorControl, {
-			...attrs,
-			...props
-		}, () => (0, vue.h)(props.icon, ctx.getStyles("controlIcon")));
+		const controlProps = (0, vue.computed)(() => ({
+			...props,
+			...attrs
+		}));
+		const iconProps = (0, vue.computed)(() => ctx.getStyles("controlIcon"));
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)(RichTextEditorControl_default, (0, vue.normalizeProps)((0, vue.guardReactiveProps)(controlProps.value)), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "icon", (0, vue.normalizeProps)((0, vue.guardReactiveProps)(iconProps.value)), () => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(props.icon), (0, vue.normalizeProps)((0, vue.guardReactiveProps)(iconProps.value)), null, 16))])]),
+				_: 3
+			}, 16);
+		};
 	}
 });
+//#endregion
+//#region src/RichTextEditorControl/use-editor-selector.ts
 function isSafeEditor(editor) {
 	return !!editor && !editor.isDestroyed;
 }
@@ -279,128 +392,177 @@ function useEditorSelector(editor, selector) {
 		return selector(editor());
 	});
 }
-function createControl({ label, isActive, operation, icon, isDisabled }) {
-	return (0, vue.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__ */ (0, vue.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 (0, vue.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 = (0, vue.useAttrs)();
+		const ctx = useRichTextEditorContext();
+		const label = (0, vue.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 (0, vue.h)(_mantine_vue_core.Box, {
-		component: Icon,
-		class: RichTextEditor_module_default.controlIcon
-	});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)(RichTextEditorControlBase_default, (0, vue.mergeProps)((0, vue.unref)(attrs), {
+				active: props.active ?? (0, vue.unref)(editorState).active,
+				interactive: props.interactive,
+				disabled: props.disabled ?? (0, vue.unref)(editorState).disabled,
+				variant: props.variant,
+				"class-names": props.classNames,
+				styles: props.styles,
+				"aria-label": label.value,
+				title: label.value,
+				onClick: runOperation
+			}), {
+				icon: (0, vue.withCtx)((iconProps) => [(0, vue.renderSlot)(_ctx.$slots, "icon", (0, vue.normalizeProps)((0, vue.guardReactiveProps)(iconProps)), () => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(props.icon), (0, vue.normalizeProps)((0, vue.guardReactiveProps)(iconProps)), null, 16))])]),
+				_: 3
+			}, 16, [
+				"active",
+				"interactive",
+				"disabled",
+				"variant",
+				"class-names",
+				"styles",
+				"aria-label",
+				"title"
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/RichTextEditorControl/RichTextEditorControl.ts
+var RichTextEditorControl = (0, _mantine_vue_core.factory)(RichTextEditorControl_default, { classes: RichTextEditor_module_default });
+var RichTextEditorControlBase = (0, _mantine_vue_core.factory)(RichTextEditorControlBase_default, { classes: RichTextEditor_module_default });
+var RichTextEditorGeneratedControl = (0, _mantine_vue_core.factory)(RichTextEditorGeneratedControl_default, { classes: RichTextEditor_module_default });
+function createControl(config) {
+	return RichTextEditorGeneratedControl.withProps(config);
 }
 //#endregion
-//#region src/RichTextEditorControl/RichTextEditorColorControl.ts
-var RichTextEditorColorControl = (0, vue.defineComponent)({
+//#region src/RichTextEditorControl/RichTextEditorColorControl.vue
+var RichTextEditorColorControl_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "RichTextEditorColorControl",
 	inheritAttrs: false,
-	props: { color: {
-		type: String,
-		required: true
-	} },
-	setup(rawProps, { attrs }) {
-		const props = (0, _mantine_vue_core.useProps)("RichTextEditorColorControl", null, rawProps);
+	__name: "RichTextEditorColorControl",
+	props: { color: {} },
+	setup(__props) {
+		const props = __props;
+		const attrs = (0, vue.useAttrs)();
 		const ctx = useRichTextEditorContext();
-		return () => {
-			const currentColor = ctx.editor?.getAttributes("textStyle").color || null;
-			const label = ctx.labels.colorControlLabel(props.color);
-			return (0, vue.h)(RichTextEditorControl, {
-				...attrs,
-				variant: ctx.variant,
-				active: currentColor === props.color,
-				"aria-label": label,
-				title: label,
-				onClick: () => (ctx.editor?.chain())?.focus().setColor(props.color).run()
-			}, () => (0, vue.h)(_mantine_vue_core.ColorSwatch, {
-				color: props.color,
-				size: 14
-			}));
+		const currentColor = useEditorSelector(() => ctx.editor, (editor) => String(editor?.getAttributes("textStyle").color || ""));
+		const label = (0, vue.computed)(() => ctx.labels.colorControlLabel(props.color));
+		function setColor() {
+			(ctx.editor?.chain())?.focus().setColor(props.color).run();
+		}
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)(RichTextEditorControl_default, (0, vue.mergeProps)((0, vue.unref)(attrs), {
+				variant: (0, vue.unref)(ctx).variant,
+				active: (0, vue.unref)(currentColor) === props.color,
+				"aria-label": label.value,
+				title: label.value,
+				onClick: setColor
+			}), {
+				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.ColorSwatch), {
+					color: props.color,
+					size: 14
+				}, null, 8, ["color"])]),
+				_: 1
+			}, 16, [
+				"variant",
+				"active",
+				"aria-label",
+				"title"
+			]);
 		};
 	}
 });
 //#endregion
-//#region src/icons/Icons.ts
-function createIcon(name, children) {
-	return (0, vue.defineComponent)({
-		name,
-		inheritAttrs: false,
-		setup(_, { attrs }) {
-			return () => (0, vue.h)("svg", {
-				...attrs,
+//#region src/RichTextEditorControl/RichTextEditorColorControl.ts
+var RichTextEditorColorControl = (0, _mantine_vue_core.factory)(RichTextEditorColorControl_default, { classes: RichTextEditor_module_default });
+//#endregion
+//#region src/icons/RichTextEditorIcon.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["d"];
+//#endregion
+//#region src/icons/RichTextEditorIcon.vue
+var RichTextEditorIcon_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	name: "RichTextEditorIcon",
+	inheritAttrs: false,
+	__name: "RichTextEditorIcon",
+	props: { paths: {} },
+	setup(__props) {
+		const attrs = (0, vue.useAttrs)();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", (0, vue.mergeProps)((0, vue.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"
-			}, [(0, vue.h)("path", {
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round"
+			}), [_cache[0] || (_cache[0] = (0, vue.createElementVNode)("path", {
 				stroke: "none",
 				d: "M0 0h24v24H0z",
 				fill: "none"
-			}), ...children]);
-		}
-	});
+			}, null, -1)), ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.paths, (path) => {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("path", {
+					key: path,
+					d: path
+				}, null, 8, _hoisted_1);
+			}), 128))], 16);
+		};
+	}
+});
+//#endregion
+//#region src/icons/RichTextEditorIcon.ts
+var RichTextEditorIcon = (0, _mantine_vue_core.factory)(RichTextEditorIcon_default);
+//#endregion
+//#region src/icons/Icons.ts
+function createIcon(_name, paths) {
+	return RichTextEditorIcon.withProps({ paths });
 }
-var path = (d) => (0, vue.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"),
@@ -595,142 +757,188 @@ var IconBraces = createIcon("IconBraces", [
 	path("M14 11l2 2-2 2")
 ]);
 //#endregion
-//#region src/RichTextEditorControl/RichTextEditorColorPickerControl.ts
-var RichTextEditorColorPickerControl = (0, vue.defineComponent)({
+//#region src/RichTextEditorControl/RichTextEditorColorPickerControl.vue
+var RichTextEditorColorPickerControl_default = /* @__PURE__ */ (0, vue.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 = (0, _mantine_vue_core.useProps)("RichTextEditorColorPickerControl", null, rawProps);
+	setup(__props) {
+		const props = __props;
+		const attrs = (0, vue.useAttrs)();
 		const ctx = useRichTextEditorContext();
 		const [opened, handlers] = (0, _mantine_vue_hooks.useDisclosure)(false);
 		const state = (0, vue.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 (0, vue.h)(_mantine_vue_core.Popover, {
-				opened: opened.value,
-				withinPortal: true,
-				trapFocus: true,
-				onChange: (nextOpened) => !nextOpened && handlers.close(),
-				...props.popoverProps
-			}, { default: () => [(0, vue.h)(_mantine_vue_core.Popover.Target, null, () => (0, vue.h)(RichTextEditorControl, {
-				...attrs,
-				variant: ctx.variant,
-				"aria-label": ctx.labels.colorPickerControlLabel,
-				title: ctx.labels.colorPickerControlLabel,
-				onClick: handlers.toggle
-			}, () => (0, vue.h)(_mantine_vue_core.ColorSwatch, {
-				color: currentColor,
-				size: 14
-			}))), (0, vue.h)(_mantine_vue_core.Popover.Dropdown, ctx.getStyles("linkEditorDropdown"), () => [
-				state.value === "palette" ? (0, vue.h)(_mantine_vue_core.SimpleGrid, {
-					cols: 7,
-					spacing: 2
-				}, () => props.colors.map((color, index) => (0, vue.h)(_mantine_vue_core.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" ? (0, vue.h)(_mantine_vue_core.ColorPicker, {
-					defaultValue: currentColor,
-					onChange: (value) => handleChange(value, false),
-					...props.colorPickerProps
-				}) : null,
-				(0, vue.h)(_mantine_vue_core.Group, {
-					justify: "flex-end",
-					gap: "xs",
-					mt: "sm"
-				}, () => [
-					state.value === "palette" ? (0, vue.h)(_mantine_vue_core.ActionIcon, {
-						variant: "default",
-						onClick: handlers.close,
-						title: ctx.labels.colorPickerCancel,
-						"aria-label": ctx.labels.colorPickerCancel
-					}, () => (0, vue.h)(IconX, { style: {
-						width: (0, _mantine_vue_core.rem)(16),
-						height: (0, _mantine_vue_core.rem)(16)
-					} })) : null,
-					(0, vue.h)(_mantine_vue_core.ActionIcon, {
-						variant: "default",
-						onClick: handleClear,
-						title: ctx.labels.colorPickerClear,
-						"aria-label": ctx.labels.colorPickerClear
-					}, () => (0, vue.h)(IconCircleOff, { style: {
-						width: (0, _mantine_vue_core.rem)(16),
-						height: (0, _mantine_vue_core.rem)(16)
-					} })),
-					state.value === "palette" ? (0, vue.h)(_mantine_vue_core.ActionIcon, {
-						variant: "default",
-						onClick: () => {
-							state.value = "colorPicker";
-						},
-						title: ctx.labels.colorPickerColorPicker,
-						"aria-label": ctx.labels.colorPickerColorPicker
-					}, () => (0, vue.h)(IconColorPicker, { style: {
-						width: (0, _mantine_vue_core.rem)(16),
-						height: (0, _mantine_vue_core.rem)(16)
-					} })) : (0, vue.h)(_mantine_vue_core.ActionIcon, {
-						variant: "default",
-						onClick: () => {
-							state.value = "palette";
-						},
-						title: ctx.labels.colorPickerPalette,
-						"aria-label": ctx.labels.colorPickerPalette
-					}, () => (0, vue.h)(IconPalette, { style: {
-						width: (0, _mantine_vue_core.rem)(16),
-						height: (0, _mantine_vue_core.rem)(16)
-					} })),
-					state.value === "colorPicker" ? (0, vue.h)(_mantine_vue_core.ActionIcon, {
-						variant: "default",
-						onClick: handlers.close,
-						title: ctx.labels.colorPickerSave,
-						"aria-label": ctx.labels.colorPickerSave
-					}, () => (0, vue.h)(IconCheck, { style: {
-						width: (0, _mantine_vue_core.rem)(16),
-						height: (0, _mantine_vue_core.rem)(16)
-					} })) : null
-				])
-			])] });
+		}
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Popover), (0, vue.mergeProps)({
+				opened: (0, vue.unref)(opened),
+				"within-portal": true,
+				"trap-focus": true
+			}, props.popoverProps, { onChange: _cache[2] || (_cache[2] = (value) => !value && (0, vue.unref)(handlers).close()) }), {
+				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.Popover).Target, null, {
+					default: (0, vue.withCtx)(() => [(0, vue.createVNode)(RichTextEditorControl_default, (0, vue.mergeProps)((0, vue.unref)(attrs), {
+						variant: (0, vue.unref)(ctx).variant,
+						"aria-label": (0, vue.unref)(ctx).labels.colorPickerControlLabel,
+						title: (0, vue.unref)(ctx).labels.colorPickerControlLabel,
+						onClick: (0, vue.unref)(handlers).toggle
+					}), {
+						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.ColorSwatch), {
+							color: (0, vue.unref)(currentColor),
+							size: 14
+						}, null, 8, ["color"])]),
+						_: 1
+					}, 16, [
+						"variant",
+						"aria-label",
+						"title",
+						"onClick"
+					])]),
+					_: 1
+				}), (0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.Popover).Dropdown, (0, vue.normalizeProps)((0, vue.guardReactiveProps)((0, vue.unref)(ctx).getStyles("linkEditorDropdown"))), {
+					default: (0, vue.withCtx)(() => [state.value === "palette" ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.SimpleGrid), {
+						key: 0,
+						cols: 7,
+						spacing: 2
+					}, {
+						default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(props.colors, (color) => {
+							return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.ColorSwatch), {
+								key: color,
+								component: "button",
+								color,
+								size: 26,
+								radius: "xs",
+								style: { cursor: "pointer" },
+								title: (0, vue.unref)(ctx).labels.colorPickerColorLabel(color),
+								"aria-label": (0, vue.unref)(ctx).labels.colorPickerColorLabel(color),
+								onClick: ($event) => handleChange(color)
+							}, null, 8, [
+								"color",
+								"title",
+								"aria-label",
+								"onClick"
+							]);
+						}), 128))]),
+						_: 1
+					})) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.ColorPicker), (0, vue.mergeProps)({
+						key: 1,
+						"model-value": (0, vue.unref)(currentColor)
+					}, props.colorPickerProps, { "onUpdate:modelValue": _cache[0] || (_cache[0] = (value) => handleChange(value, false)) }), null, 16, ["model-value"])), (0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.Tooltip).Group, { "close-delay": 200 }, {
+						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.Group), {
+							justify: "flex-end",
+							gap: "xs",
+							mt: "sm"
+						}, {
+							default: (0, vue.withCtx)(() => [
+								state.value === "palette" ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.ActionIcon), {
+									key: 0,
+									variant: "default",
+									title: (0, vue.unref)(ctx).labels.colorPickerCancel,
+									"aria-label": (0, vue.unref)(ctx).labels.colorPickerCancel,
+									onClick: (0, vue.unref)(handlers).close
+								}, {
+									default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(IconX), { style: (0, vue.normalizeStyle)({
+										width: (0, vue.unref)(_mantine_vue_core.rem)(16),
+										height: (0, vue.unref)(_mantine_vue_core.rem)(16)
+									}) }, null, 8, ["style"])]),
+									_: 1
+								}, 8, [
+									"title",
+									"aria-label",
+									"onClick"
+								])) : (0, vue.createCommentVNode)("", true),
+								(0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.ActionIcon), {
+									variant: "default",
+									title: (0, vue.unref)(ctx).labels.colorPickerClear,
+									"aria-label": (0, vue.unref)(ctx).labels.colorPickerClear,
+									onClick: handleClear
+								}, {
+									default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(IconCircleOff), { style: (0, vue.normalizeStyle)({
+										width: (0, vue.unref)(_mantine_vue_core.rem)(16),
+										height: (0, vue.unref)(_mantine_vue_core.rem)(16)
+									}) }, null, 8, ["style"])]),
+									_: 1
+								}, 8, ["title", "aria-label"]),
+								(0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.ActionIcon), {
+									variant: "default",
+									title: state.value === "palette" ? (0, vue.unref)(ctx).labels.colorPickerColorPicker : (0, vue.unref)(ctx).labels.colorPickerPalette,
+									"aria-label": state.value === "palette" ? (0, vue.unref)(ctx).labels.colorPickerColorPicker : (0, vue.unref)(ctx).labels.colorPickerPalette,
+									onClick: _cache[1] || (_cache[1] = ($event) => state.value = state.value === "palette" ? "colorPicker" : "palette")
+								}, {
+									default: (0, vue.withCtx)(() => [state.value === "palette" ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(IconColorPicker), {
+										key: 0,
+										style: (0, vue.normalizeStyle)({
+											width: (0, vue.unref)(_mantine_vue_core.rem)(16),
+											height: (0, vue.unref)(_mantine_vue_core.rem)(16)
+										})
+									}, null, 8, ["style"])) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(IconPalette), {
+										key: 1,
+										style: (0, vue.normalizeStyle)({
+											width: (0, vue.unref)(_mantine_vue_core.rem)(16),
+											height: (0, vue.unref)(_mantine_vue_core.rem)(16)
+										})
+									}, null, 8, ["style"]))]),
+									_: 1
+								}, 8, ["title", "aria-label"]),
+								state.value === "colorPicker" ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.ActionIcon), {
+									key: 1,
+									variant: "default",
+									title: (0, vue.unref)(ctx).labels.colorPickerSave,
+									"aria-label": (0, vue.unref)(ctx).labels.colorPickerSave,
+									onClick: (0, vue.unref)(handlers).close
+								}, {
+									default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(IconCheck), { style: (0, vue.normalizeStyle)({
+										width: (0, vue.unref)(_mantine_vue_core.rem)(16),
+										height: (0, vue.unref)(_mantine_vue_core.rem)(16)
+									}) }, null, 8, ["style"])]),
+									_: 1
+								}, 8, [
+									"title",
+									"aria-label",
+									"onClick"
+								])) : (0, vue.createCommentVNode)("", true)
+							]),
+							_: 1
+						})]),
+						_: 1
+					})]),
+					_: 1
+				}, 16)]),
+				_: 1
+			}, 16, ["opened"]);
 		};
 	}
 });
 //#endregion
-//#region src/RichTextEditorControl/RichTextEditorLinkControl.ts
-var RichTextEditorLinkControl = (0, vue.defineComponent)({
+//#region src/RichTextEditorControl/RichTextEditorColorPickerControl.ts
+var RichTextEditorColorPickerControl = (0, _mantine_vue_core.factory)(RichTextEditorColorPickerControl_default, { classes: RichTextEditor_module_default });
+//#endregion
+//#region src/RichTextEditorControl/RichTextEditorLinkControl.vue
+var RichTextEditorLinkControl_default = /* @__PURE__ */ (0, vue.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
@@ -739,148 +947,175 @@ var RichTextEditorLinkControl = (0, vue.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 = (0, _mantine_vue_core.useProps)("RichTextEditorLinkControl", null, rawProps);
+	setup(__props) {
+		const props = __props;
+		const attrs = (0, vue.useAttrs)();
 		const ctx = useRichTextEditorContext();
 		const url = (0, vue.ref)("");
 		const external = (0, vue.ref)(props.initialExternal);
 		const [opened, handlers] = (0, _mantine_vue_hooks.useDisclosure)(false);
-		const handleOpen = () => {
+		const stylesApiProps = (0, vue.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();
-		};
-		(0, _mantine_vue_hooks.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 (0, vue.h)(_mantine_vue_core.Popover, {
-				trapFocus: true,
+		}
+		function onKeydown(event) {
+			if (event.key === "Enter") {
+				event.preventDefault();
+				setLink();
+			}
+		}
+		function onPopoverChange(nextOpened) {
+			if (!nextOpened) close();
+		}
+		(0, vue.onMounted)(() => window.addEventListener("edit-link", open));
+		(0, vue.onBeforeUnmount)(() => window.removeEventListener("edit-link", open));
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Popover), (0, vue.mergeProps)({
+				"trap-focus": true,
 				shadow: "md",
-				withinPortal: true,
-				opened: opened.value,
-				onChange: (nextOpened) => !nextOpened && handleClose(),
+				"within-portal": true,
+				opened: (0, vue.unref)(opened),
 				offset: -44,
-				zIndex: 1e4,
-				...props.popoverProps
-			}, { default: () => [(0, vue.h)(_mantine_vue_core.Popover.Target, null, () => (0, vue.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
-			})), (0, vue.h)(_mantine_vue_core.Popover.Dropdown, ctx.getStyles("linkEditorDropdown", stylesApiProps), () => (0, vue.h)("div", ctx.getStyles("linkEditor", stylesApiProps), [(0, vue.h)(_mantine_vue_core.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: () => (0, vue.h)(_mantine_vue_core.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
-				}, () => (0, vue.h)(_mantine_vue_core.UnstyledButton, {
-					onClick: () => {
-						external.value = !external.value;
-					},
-					"data-active": external.value || void 0,
-					...ctx.getStyles("linkEditorExternalControl", stylesApiProps)
-				}, () => (0, vue.h)(IconExternalLink, { style: {
-					width: (0, _mantine_vue_core.rem)(14),
-					height: (0, _mantine_vue_core.rem)(14)
-				} })))
-			}), (0, vue.h)(_mantine_vue_core.Button, {
-				variant: "default",
-				onClick: setLink,
-				...ctx.getStyles("linkEditorSave", stylesApiProps)
-			}, () => ctx.labels.linkEditorSave)]))] });
+				"z-index": 1e4
+			}, props.popoverProps, { onChange: onPopoverChange }), {
+				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.Popover).Target, null, {
+					default: (0, vue.withCtx)(() => [(0, vue.createVNode)(RichTextEditorControlBase_default, (0, vue.mergeProps)((0, vue.unref)(attrs), {
+						"aria-label": (0, vue.unref)(ctx).labels.linkControlLabel,
+						title: (0, vue.unref)(ctx).labels.linkControlLabel,
+						active: (0, vue.unref)(active),
+						"class-names": props.classNames,
+						styles: props.styles,
+						variant: (0, vue.unref)(ctx).variant,
+						onClick: open
+					}), {
+						icon: (0, vue.withCtx)((iconProps) => [(0, vue.renderSlot)(_ctx.$slots, "icon", (0, vue.normalizeProps)((0, vue.guardReactiveProps)(iconProps)), () => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(props.icon || (0, vue.unref)(IconLink)), (0, vue.normalizeProps)((0, vue.guardReactiveProps)(iconProps)), null, 16))])]),
+						_: 3
+					}, 16, [
+						"aria-label",
+						"title",
+						"active",
+						"class-names",
+						"styles",
+						"variant"
+					])]),
+					_: 3
+				}), (0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.Popover).Dropdown, (0, vue.normalizeProps)((0, vue.guardReactiveProps)((0, vue.unref)(ctx).getStyles("linkEditorDropdown", stylesApiProps.value))), {
+					default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", (0, vue.normalizeProps)((0, vue.guardReactiveProps)((0, vue.unref)(ctx).getStyles("linkEditor", stylesApiProps.value))), [(0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.TextInput), {
+						modelValue: url.value,
+						"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => url.value = $event),
+						placeholder: (0, vue.unref)(ctx).labels.linkEditorInputPlaceholder,
+						"aria-label": (0, vue.unref)(ctx).labels.linkEditorInputLabel,
+						type: "url",
+						"class-names": { input: (0, vue.unref)(ctx).getStyles("linkEditorInput", stylesApiProps.value).class },
+						onKeydown
+					}, {
+						rightSection: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.Tooltip), {
+							label: external.value ? (0, vue.unref)(ctx).labels.linkEditorExternalLink : (0, vue.unref)(ctx).labels.linkEditorInternalLink,
+							events: {
+								hover: true,
+								focus: true,
+								touch: true
+							},
+							"within-portal": true,
+							"with-arrow": true,
+							disabled: props.disableTooltips,
+							"z-index": 1e4
+						}, {
+							default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.UnstyledButton), (0, vue.mergeProps)({ "data-active": external.value || void 0 }, (0, vue.unref)(ctx).getStyles("linkEditorExternalControl", stylesApiProps.value), { onClick: _cache[0] || (_cache[0] = ($event) => external.value = !external.value) }), {
+								default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(IconExternalLink), { style: (0, vue.normalizeStyle)({
+									width: (0, vue.unref)(_mantine_vue_core.rem)(14),
+									height: (0, vue.unref)(_mantine_vue_core.rem)(14)
+								}) }, null, 8, ["style"])]),
+								_: 1
+							}, 16, ["data-active"])]),
+							_: 1
+						}, 8, ["label", "disabled"])]),
+						_: 1
+					}, 8, [
+						"modelValue",
+						"placeholder",
+						"aria-label",
+						"class-names"
+					]), (0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.Button), (0, vue.mergeProps)({ variant: "default" }, (0, vue.unref)(ctx).getStyles("linkEditorSave", stylesApiProps.value), { onClick: setLink }), {
+						default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(ctx).labels.linkEditorSave), 1)]),
+						_: 1
+					}, 16)], 16)]),
+					_: 1
+				}, 16)]),
+				_: 3
+			}, 16, ["opened"]);
 		};
 	}
 });
-Object.assign(RichTextEditorLinkControl, { classes: RichTextEditor_module_default });
 //#endregion
-//#region src/RichTextEditorControl/RichTextEditorSourceCodeControl.ts
-var RichTextEditorSourceCodeControl = (0, vue.defineComponent)({
+//#region src/RichTextEditorControl/RichTextEditorLinkControl.ts
+var RichTextEditorLinkControl = (0, _mantine_vue_core.factory)(RichTextEditorLinkControl_default, { classes: RichTextEditor_module_default });
+//#endregion
+//#region src/RichTextEditorControl/RichTextEditorSourceCodeControl.vue
+var RichTextEditorSourceCodeControl_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "RichTextEditorSourceCodeControl",
 	inheritAttrs: false,
-	setup(rawProps, { attrs }) {
-		(0, _mantine_vue_core.useProps)("RichTextEditorSourceCodeControl", {}, rawProps);
+	__name: "RichTextEditorSourceCodeControl",
+	setup(__props) {
+		const attrs = (0, vue.useAttrs)();
 		const ctx = useRichTextEditorContext();
-		const isSourceCodeModeActive = (0, vue.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 = (0, vue.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 (0, vue.openBlock)(), (0, vue.createBlock)(RichTextEditorControl_default, (0, vue.mergeProps)((0, vue.unref)(attrs), {
+				variant: (0, vue.unref)(ctx).variant,
+				active: active.value,
+				"aria-label": (0, vue.unref)(ctx).labels.sourceCodeControlLabel,
+				title: (0, vue.unref)(ctx).labels.sourceCodeControlLabel,
+				onClick: toggleSourceCode
+			}), {
+				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(IconBraces), { style: (0, vue.normalizeStyle)({
+					width: (0, vue.unref)(_mantine_vue_core.rem)(16),
+					height: (0, vue.unref)(_mantine_vue_core.rem)(16)
+				}) }, null, 8, ["style"])]),
+				_: 1
+			}, 16, [
+				"variant",
+				"active",
+				"aria-label",
+				"title"
+			]);
 		};
-		return () => (0, vue.h)(RichTextEditorControl, {
-			...attrs,
-			variant: ctx.variant,
-			active: isSourceCodeModeActive.value,
-			"aria-label": ctx.labels.sourceCodeControlLabel,
-			title: ctx.labels.sourceCodeControlLabel,
-			onClick: handleStateChange
-		}, () => (0, vue.h)(IconBraces, { style: {
-			width: (0, _mantine_vue_core.rem)(16),
-			height: (0, _mantine_vue_core.rem)(16)
-		} }));
 	}
 });
 //#endregion
+//#region src/RichTextEditorControl/RichTextEditorSourceCodeControl.ts
+var RichTextEditorSourceCodeControl = (0, _mantine_vue_core.factory)(RichTextEditorSourceCodeControl_default, { classes: RichTextEditor_module_default });
+//#endregion
 //#region src/RichTextEditorControl/controls.ts
 var BoldControl = createControl({
 	label: "boldControlLabel",
@@ -1115,32 +1350,27 @@ var TaskListLiftControl = createControl({
 	isDisabled: (editor) => !editor?.can().liftListItem("taskItem")
 });
 //#endregion
-//#region src/RichTextEditorControlsGroup/RichTextEditorControlsGroup.ts
-var RichTextEditorControlsGroup = (0, vue.defineComponent)({
+//#region src/RichTextEditorControlsGroup/RichTextEditorControlsGroup.vue
+var RichTextEditorControlsGroup_default = /* @__PURE__ */ (0, vue.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 = (0, vue.useAttrs)();
 		const props = (0, _mantine_vue_core.useProps)("RichTextEditorControlsGroup", null, rawProps);
 		const ctx = useRichTextEditorContext();
-		return () => (0, vue.h)(_mantine_vue_core.Box, {
+		const rootProps = (0, vue.computed)(() => ({
 			...attrs,
 			variant: props.variant || ctx.variant,
 			...ctx.getStyles("controlsGroup", {
@@ -1149,49 +1379,46 @@ var RichTextEditorControlsGroup = (0, vue.defineComponent)({
 				styles: props.styles,
 				classNames: props.classNames
 			})
-		}, slots);
+		}));
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Box), (0, vue.normalizeProps)((0, vue.guardReactiveProps)(rootProps.value)), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16);
+		};
 	}
 });
-Object.assign(RichTextEditorControlsGroup, { classes: RichTextEditor_module_default });
 //#endregion
-//#region src/RichTextEditorToolbar/RichTextEditorToolbar.ts
-var RichTextEditorToolbar = (0, vue.defineComponent)({
+//#region src/RichTextEditorControlsGroup/RichTextEditorControlsGroup.ts
+var RichTextEditorControlsGroup = (0, _mantine_vue_core.factory)(RichTextEditorControlsGroup_default, { classes: RichTextEditor_module_default });
+//#endregion
+//#region src/RichTextEditorToolbar/RichTextEditorToolbar.vue
+var RichTextEditorToolbar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "RichTextEditorToolbar",
 	inheritAttrs: false,
+	__name: "RichTextEditorToolbar",
 	props: {
-		sticky: {
+		classNames: { default: void 0 },
+		styles: { default: void 0 },
+		vars: { default: void 0 },
+		unstyled: {
 			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
+		sticky: {
+			type: Boolean,
+			default: false
 		},
-		mod: {
-			type: [Object, Array],
-			default: void 0
-		}
+		stickyOffset: { default: void 0 },
+		mod: { default: void 0 },
+		variant: { default: void 0 }
 	},
-	setup(rawProps, { attrs, slots }) {
+	setup(__props) {
+		const rawProps = __props;
+		const attrs = (0, vue.useAttrs)();
 		const props = (0, _mantine_vue_core.useProps)("RichTextEditorToolbar", null, rawProps);
 		const ctx = useRichTextEditorContext();
-		return () => (0, vue.h)(_mantine_vue_core.Box, {
+		const rootProps = (0, vue.computed)(() => ({
 			...attrs,
 			mod: [{ sticky: props.sticky }, props.mod],
 			variant: props.variant || ctx.variant,
@@ -1201,110 +1428,21 @@ var RichTextEditorToolbar = (0, vue.defineComponent)({
 				styles: props.styles,
 				classNames: props.classNames
 			})
-		}, slots);
+		}));
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Box), (0, vue.normalizeProps)((0, vue.guardReactiveProps)(rootProps.value)), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16);
+		};
 	}
 });
-Object.assign(RichTextEditorToolbar, { classes: RichTextEditor_module_default });
+//#endregion
+//#region src/RichTextEditorToolbar/RichTextEditorToolbar.ts
+var RichTextEditorToolbar = (0, _mantine_vue_core.factory)(RichTextEditorToolbar_default, { classes: RichTextEditor_module_default });
 //#endregion
 //#region src/RichTextEditor.ts
-var defaultProps = {
-	withCodeHighlightStyles: true,
-	withTypographyStyles: true,
-	variant: "default"
-};
-var RichTextEditorBase = (0, vue.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 = (0, _mantine_vue_core.useProps)("RichTextEditor", defaultProps, rawProps);
-		const getStyles = (0, _mantine_vue_core.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 = (0, vue.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 () => (0, vue.h)(_mantine_vue_core.Box, {
-			...attrs,
-			...getStyles("root")
-		}, slots);
-	}
-});
-var RichTextEditor = Object.assign(RichTextEditorBase, {
+var RichTextEditor = (0, _mantine_vue_core.factory)(RichTextEditor_default, {
 	classes: RichTextEditor_module_default,
 	Content: RichTextEditorContent,
 	Control: RichTextEditorControl,
@@ -1407,7 +1545,6 @@ exports.UnlinkControl = UnlinkControl;
 exports.UnsetColorControl = UnsetColorControl;
 exports.createControl = createControl;
 exports.getTaskListExtension = getTaskListExtension;
-exports.renderControlIcon = renderControlIcon;
 exports.useRichTextEditorContext = useRichTextEditorContext;
 
 //# sourceMappingURL=index.cjs.map