import { n as __exportAll } from "./chunk-B-1-B7_t.js";
import { n as cn } from "./utils-DXzSsU1e.js";
import { n as Button_default } from "./button-B9CnnuTu.js";
import { t as FieldFrame_default } from "./field-frame-DhCOWcMP.js";
import { i as useEditor, r as EditorContent, t as index_default } from "./dist-CBjpcXtJ.js";
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, renderList, resolveDynamicComponent, unref, watch, withCtx } from "vue";
import { Bold, Code, Heading1, Heading2, Heading3, Italic, List, ListOrdered, Minus, Quote, Redo, Strikethrough, Undo } from "@lucide/vue";
//#region src/components/compositions/elements/editor/RichTextEditor.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = ["data-element-name"];
var RichTextEditor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "RichTextEditor",
	props: {
		modelValue: {},
		id: {},
		name: {},
		label: {},
		hideLabel: { type: Boolean },
		placeholder: {},
		required: { type: Boolean },
		readonly: { type: Boolean },
		disabled: { type: Boolean },
		helpText: {},
		errors: { default: () => [] },
		minHeight: { default: "12rem" },
		extensions: { default: () => [] }
	},
	emits: ["update:modelValue"],
	setup(__props, { emit: __emit }) {
		/**
		* Props-driven rich-text editor composition. Wraps Tiptap (`@tiptap/vue-3`
		* + StarterKit) inside a FieldFrame, exposing the standard input chrome:
		* label / required / helpText / errors / hideLabel.
		*
		* The model is HTML — emits `update:modelValue` with `editor.getHTML()` on
		* every internal change.
		*
		*   <RichTextEditor v-model="body" label="Body" />
		*/
		const props = __props;
		const emit = __emit;
		const editor = useEditor({
			content: props.modelValue ?? "",
			editable: !(props.disabled || props.readonly),
			extensions: [index_default, ...props.extensions],
			onUpdate: ({ editor }) => {
				emit("update:modelValue", editor.getHTML());
			}
		});
		watch(() => props.modelValue, (value) => {
			const instance = editor.value;
			if (!instance) return;
			const next = value ?? "";
			if (next === instance.getHTML()) return;
			instance.commands.setContent(next, { emitUpdate: false });
		});
		watch(() => [props.disabled, props.readonly], ([disabled, readonly]) => {
			editor.value?.setEditable(!(disabled || readonly));
		});
		onBeforeUnmount(() => {
			editor.value?.destroy();
		});
		const hasErrors = computed(() => props.errors.length > 0);
		const isDisabled = computed(() => Boolean(props.disabled));
		const isReadonly = computed(() => Boolean(props.readonly));
		const isInert = computed(() => isDisabled.value || isReadonly.value);
		const contentStyle = computed(() => ({ minHeight: props.minHeight }));
		function active(name, attrs) {
			const instance = editor.value;
			if (!instance) return false;
			return attrs ? instance.isActive(name, attrs) : instance.isActive(name);
		}
		const toolbarActions = computed(() => [
			{
				key: "bold",
				label: "Bold",
				icon: Bold,
				isActive: () => active("bold"),
				run: () => editor.value?.chain().focus().toggleBold().run()
			},
			{
				key: "italic",
				label: "Italic",
				icon: Italic,
				isActive: () => active("italic"),
				run: () => editor.value?.chain().focus().toggleItalic().run()
			},
			{
				key: "strike",
				label: "Strikethrough",
				icon: Strikethrough,
				isActive: () => active("strike"),
				run: () => editor.value?.chain().focus().toggleStrike().run()
			},
			{
				key: "code",
				label: "Inline code",
				icon: Code,
				isActive: () => active("code"),
				run: () => editor.value?.chain().focus().toggleCode().run()
			},
			{
				key: "h1",
				label: "Heading 1",
				icon: Heading1,
				isActive: () => active("heading", { level: 1 }),
				run: () => editor.value?.chain().focus().toggleHeading({ level: 1 }).run()
			},
			{
				key: "h2",
				label: "Heading 2",
				icon: Heading2,
				isActive: () => active("heading", { level: 2 }),
				run: () => editor.value?.chain().focus().toggleHeading({ level: 2 }).run()
			},
			{
				key: "h3",
				label: "Heading 3",
				icon: Heading3,
				isActive: () => active("heading", { level: 3 }),
				run: () => editor.value?.chain().focus().toggleHeading({ level: 3 }).run()
			},
			{
				key: "bullet-list",
				label: "Bullet list",
				icon: List,
				isActive: () => active("bulletList"),
				run: () => editor.value?.chain().focus().toggleBulletList().run()
			},
			{
				key: "ordered-list",
				label: "Ordered list",
				icon: ListOrdered,
				isActive: () => active("orderedList"),
				run: () => editor.value?.chain().focus().toggleOrderedList().run()
			},
			{
				key: "blockquote",
				label: "Blockquote",
				icon: Quote,
				isActive: () => active("blockquote"),
				run: () => editor.value?.chain().focus().toggleBlockquote().run()
			},
			{
				key: "horizontal-rule",
				label: "Horizontal rule",
				icon: Minus,
				isActive: () => false,
				run: () => editor.value?.chain().focus().setHorizontalRule().run()
			},
			{
				key: "undo",
				label: "Undo",
				icon: Undo,
				isActive: () => false,
				run: () => editor.value?.chain().focus().undo().run(),
				disabled: () => !editor.value?.can().chain().focus().undo().run()
			},
			{
				key: "redo",
				label: "Redo",
				icon: Redo,
				isActive: () => false,
				run: () => editor.value?.chain().focus().redo().run(),
				disabled: () => !editor.value?.can().chain().focus().redo().run()
			}
		]);
		return (_ctx, _cache) => {
			return openBlock(), createBlock(unref(FieldFrame_default), {
				label: __props.label,
				required: __props.required,
				"hide-label": __props.hideLabel,
				for: __props.id,
				"help-text": __props.helpText,
				errors: __props.errors,
				"data-testid": "rich-text-editor"
			}, {
				default: withCtx(() => [createElementVNode("div", {
					class: normalizeClass(unref(cn)("rounded-md border border-input bg-background shadow-sm overflow-hidden", hasErrors.value ? "border-destructive ring-1 ring-destructive" : "", isDisabled.value ? "opacity-60" : "")),
					"data-element-name": __props.name ?? void 0
				}, [createElementVNode("div", {
					class: normalizeClass(["flex flex-wrap items-center gap-1 border-b bg-muted/30 px-2 py-1", isInert.value ? "pointer-events-none opacity-50" : ""]),
					role: "toolbar",
					"aria-label": "Formatting",
					"data-testid": "rich-text-editor-toolbar"
				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(toolbarActions.value, (action) => {
					return openBlock(), createBlock(unref(Button_default), {
						key: action.key,
						type: "button",
						size: "icon-sm",
						variant: action.isActive() ? "secondary" : "ghost",
						disabled: isInert.value || (action.disabled ? action.disabled() : false),
						"aria-label": action.label,
						title: action.label,
						"data-testid": `rich-text-editor-toolbar-${action.key}`,
						"aria-pressed": action.isActive(),
						onClick: ($event) => action.run()
					}, {
						default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(action.icon)))]),
						_: 2
					}, 1032, [
						"variant",
						"disabled",
						"aria-label",
						"title",
						"data-testid",
						"aria-pressed",
						"onClick"
					]);
				}), 128))], 2), unref(editor) ? (openBlock(), createBlock(unref(EditorContent), {
					key: 0,
					editor: unref(editor),
					style: normalizeStyle(contentStyle.value),
					class: "prose prose-sm max-w-none px-3 py-2 focus-within:outline-none dark:prose-invert [&_.ProseMirror]:min-h-full [&_.ProseMirror]:outline-none",
					"data-testid": "rich-text-editor-content"
				}, null, 8, ["editor", "style"])) : createCommentVNode("", true)], 10, _hoisted_1)]),
				_: 1
			}, 8, [
				"label",
				"required",
				"hide-label",
				"for",
				"help-text",
				"errors"
			]);
		};
	}
});
//#endregion
//#region src/components/compositions/elements/editor/RichTextEditor.vue
var RichTextEditor_exports = /* @__PURE__ */ __exportAll({ default: () => RichTextEditor_default });
var RichTextEditor_default = RichTextEditor_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { RichTextEditor_exports as n, RichTextEditor_default as t };

//# sourceMappingURL=RichTextEditor-DQKa1_u4.js.map