@questpie/admin 0.0.1

package/dist/components/fields/rich-text-editor/index.mjs

@@ -0,0 +1,897 @@
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../../ui/button";
+import { Input } from "../../ui/input";
+import { Label } from "../../ui/label";
+import { Popover, PopoverContent, PopoverHeader, PopoverTitle, PopoverTrigger } from "../../ui/popover";
+import { LocaleBadge } from "../locale-badge";
+import { cn } from "../../../utils";
+import { Extension } from "@tiptap/core";
+import { BubbleMenu, EditorContent, ReactRenderer, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Underline from "@tiptap/extension-underline";
+import Link from "@tiptap/extension-link";
+import Image from "@tiptap/extension-image";
+import Placeholder from "@tiptap/extension-placeholder";
+import TextAlign from "@tiptap/extension-text-align";
+import Table from "@tiptap/extension-table";
+import TableRow from "@tiptap/extension-table-row";
+import TableHeader from "@tiptap/extension-table-header";
+import TableCell from "@tiptap/extension-table-cell";
+import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
+import CharacterCount from "@tiptap/extension-character-count";
+import Suggestion from "@tiptap/suggestion";
+import tippy from "tippy.js";
+import { common, createLowlight } from "lowlight";
+
+//#region src/components/fields/rich-text-editor/index.tsx
+/**
+* RichTextEditor Component
+*
+* Tiptap-based rich text editor with toolbar controls.
+*/
+const lowlight = createLowlight(common);
+const defaultFeatures = {
+	toolbar: true,
+	bubbleMenu: true,
+	slashCommands: true,
+	history: true,
+	heading: true,
+	bold: true,
+	italic: true,
+	underline: true,
+	strike: true,
+	code: true,
+	codeBlock: true,
+	blockquote: true,
+	bulletList: true,
+	orderedList: true,
+	horizontalRule: true,
+	align: true,
+	link: true,
+	image: true,
+	table: true,
+	tableControls: true,
+	characterCount: true
+};
+function ToolbarButton({ active, disabled, title, onClick, children }) {
+	return /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: "ghost",
+		size: "xs",
+		"data-active": active,
+		title,
+		disabled,
+		onClick,
+		className: "data-[active=true]:bg-muted data-[active=true]:text-foreground",
+		children
+	});
+}
+function ToolbarGroup({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center gap-1 border-r border-border pr-2 last:border-r-0 last:pr-0",
+		children
+	});
+}
+const SlashCommandList = React$1.forwardRef(function SlashCommandList$1({ items, command }, ref) {
+	const [selectedIndex, setSelectedIndex] = React$1.useState(0);
+	React$1.useEffect(() => {
+		setSelectedIndex(0);
+	}, [items]);
+	const selectItem = React$1.useCallback((index) => {
+		const item = items[index];
+		if (item) command(item);
+	}, [command, items]);
+	React$1.useImperativeHandle(ref, () => ({ onKeyDown: ({ event }) => {
+		if (items.length === 0) return false;
+		if (event.key === "ArrowDown") {
+			setSelectedIndex((prev) => (prev + 1) % items.length);
+			return true;
+		}
+		if (event.key === "ArrowUp") {
+			setSelectedIndex((prev) => (prev - 1 + items.length) % items.length);
+			return true;
+		}
+		if (event.key === "Enter") {
+			selectItem(selectedIndex);
+			return true;
+		}
+		return false;
+	} }));
+	return /* @__PURE__ */ jsxs("div", {
+		className: "qp-rich-text-editor__slash",
+		children: [items.length === 0 && /* @__PURE__ */ jsx("div", {
+			className: "qp-rich-text-editor__slash-empty",
+			children: "No results"
+		}), items.map((item, index) => /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: cn("qp-rich-text-editor__slash-item", index === selectedIndex ? "qp-rich-text-editor__slash-item--active" : ""),
+			onClick: () => selectItem(index),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "qp-rich-text-editor__slash-title",
+				children: item.title
+			}), item.description && /* @__PURE__ */ jsx("span", {
+				className: "qp-rich-text-editor__slash-description",
+				children: item.description
+			})]
+		}, item.title))]
+	});
+});
+function getHeadingLevel(editor) {
+	if (!editor) return "paragraph";
+	for (let level = 1; level <= 6; level += 1) if (editor.isActive("heading", { level })) return String(level);
+	return "paragraph";
+}
+function getOutput(editor, outputFormat) {
+	if (outputFormat === "html") return editor.getHTML();
+	if (outputFormat === "markdown") {
+		const markdown = editor.storage?.markdown?.getMarkdown?.();
+		if (typeof markdown === "string") return markdown;
+		return editor.getHTML();
+	}
+	return editor.getJSON();
+}
+function isSameValue(a, b) {
+	if (a === b) return true;
+	if (!a || !b) return false;
+	if (typeof a === "string" && typeof b === "string") return a === b;
+	try {
+		return JSON.stringify(a) === JSON.stringify(b);
+	} catch {
+		return false;
+	}
+}
+function createSlashCommandExtension(getItems) {
+	return Extension.create({
+		name: "slashCommand",
+		addOptions() {
+			return { suggestion: {
+				char: "/",
+				startOfLine: true,
+				command: ({ editor, range, props }) => {
+					editor.chain().focus().deleteRange(range).run();
+					props.command(editor);
+				},
+				items: ({ query, editor }) => {
+					const items = getItems(editor);
+					if (!query) return items;
+					const search = query.toLowerCase();
+					return items.filter((item) => {
+						return item.title.toLowerCase().includes(search) || item.description?.toLowerCase().includes(search) || item.keywords?.some((keyword) => keyword.toLowerCase().includes(search));
+					});
+				},
+				render: () => {
+					let component = null;
+					let popup = null;
+					return {
+						onStart: (props) => {
+							component = new ReactRenderer(SlashCommandList, {
+								props,
+								editor: props.editor
+							});
+							if (!props.clientRect) return;
+							popup = tippy("body", {
+								getReferenceClientRect: props.clientRect,
+								appendTo: () => document.body,
+								content: component.element,
+								showOnCreate: true,
+								interactive: true,
+								trigger: "manual",
+								placement: "bottom-start",
+								theme: "qp-rich-text-editor"
+							});
+						},
+						onUpdate: (props) => {
+							component?.updateProps(props);
+							if (!props.clientRect) return;
+							popup?.[0].setProps({ getReferenceClientRect: props.clientRect });
+						},
+						onKeyDown: (props) => {
+							if (props.event.key === "Escape") {
+								popup?.[0].hide();
+								return true;
+							}
+							return component?.ref?.onKeyDown(props) ?? false;
+						},
+						onExit: () => {
+							popup?.[0].destroy();
+							component?.destroy();
+						}
+					};
+				}
+			} };
+		},
+		addProseMirrorPlugins() {
+			return [Suggestion(this.options.suggestion)];
+		}
+	});
+}
+function RichTextEditor({ name, value, onChange, disabled, readOnly, label, description, placeholder, required, error, localized, locale, outputFormat = "json", extensions, features, showCharacterCount, maxCharacters, enableImages, onImageUpload }) {
+	const [linkOpen, setLinkOpen] = React$1.useState(false);
+	const [linkUrl, setLinkUrl] = React$1.useState("");
+	const [imageOpen, setImageOpen] = React$1.useState(false);
+	const [imageUrl, setImageUrl] = React$1.useState("");
+	const [imageAlt, setImageAlt] = React$1.useState("");
+	const [uploadingImage, setUploadingImage] = React$1.useState(false);
+	const fileInputRef = React$1.useRef(null);
+	const resolvedFeatures = React$1.useMemo(() => ({
+		...defaultFeatures,
+		...features
+	}), [features]);
+	const allowImages = resolvedFeatures.image && (enableImages ?? true);
+	const allowLinks = resolvedFeatures.link;
+	const allowTables = resolvedFeatures.table;
+	const allowTableControls = resolvedFeatures.tableControls && allowTables;
+	const allowSlashCommands = resolvedFeatures.slashCommands;
+	const allowBubbleMenu = resolvedFeatures.bubbleMenu;
+	const allowToolbar = resolvedFeatures.toolbar;
+	const allowCharacterCount = resolvedFeatures.characterCount && (showCharacterCount || maxCharacters);
+	const editor = useEditor({
+		extensions: React$1.useMemo(() => {
+			const starterKitConfig = { codeBlock: false };
+			if (!resolvedFeatures.bold) starterKitConfig.bold = false;
+			if (!resolvedFeatures.italic) starterKitConfig.italic = false;
+			if (!resolvedFeatures.strike) starterKitConfig.strike = false;
+			if (!resolvedFeatures.code) starterKitConfig.code = false;
+			if (!resolvedFeatures.blockquote) starterKitConfig.blockquote = false;
+			if (!resolvedFeatures.heading) starterKitConfig.heading = false;
+			if (!resolvedFeatures.bulletList) starterKitConfig.bulletList = false;
+			if (!resolvedFeatures.orderedList) starterKitConfig.orderedList = false;
+			if (!resolvedFeatures.bulletList && !resolvedFeatures.orderedList) starterKitConfig.listItem = false;
+			if (!resolvedFeatures.horizontalRule) starterKitConfig.horizontalRule = false;
+			if (!resolvedFeatures.history) starterKitConfig.history = false;
+			const items = [StarterKit.configure(starterKitConfig), Placeholder.configure({ placeholder: placeholder || "Start writing..." })];
+			if (resolvedFeatures.underline) items.push(Underline);
+			if (allowLinks) items.push(Link.configure({
+				openOnClick: false,
+				autolink: true,
+				linkOnPaste: true
+			}));
+			if (resolvedFeatures.align) items.push(TextAlign.configure({ types: ["heading", "paragraph"] }));
+			if (allowImages) items.push(Image);
+			if (allowTables) items.push(Table.configure({ resizable: true }), TableRow, TableHeader, TableCell);
+			if (resolvedFeatures.codeBlock) items.push(CodeBlockLowlight.configure({ lowlight }));
+			if (allowCharacterCount) items.push(CharacterCount.configure({ limit: maxCharacters }));
+			if (allowSlashCommands) items.push(createSlashCommandExtension((editor$1) => {
+				const commands = [];
+				if (resolvedFeatures.heading) commands.push({
+					title: "Heading 1",
+					description: "Large section heading",
+					keywords: ["h1"],
+					command: (cmdEditor) => cmdEditor.chain().focus().toggleHeading({ level: 1 }).run()
+				}, {
+					title: "Heading 2",
+					description: "Medium section heading",
+					keywords: ["h2"],
+					command: (cmdEditor) => cmdEditor.chain().focus().toggleHeading({ level: 2 }).run()
+				}, {
+					title: "Heading 3",
+					description: "Small section heading",
+					keywords: ["h3"],
+					command: (cmdEditor) => cmdEditor.chain().focus().toggleHeading({ level: 3 }).run()
+				});
+				commands.push({
+					title: "Paragraph",
+					description: "Start with plain text",
+					keywords: ["text"],
+					command: (cmdEditor) => cmdEditor.chain().focus().setParagraph().run()
+				});
+				if (resolvedFeatures.bulletList) commands.push({
+					title: "Bullet list",
+					description: "Create a bulleted list",
+					keywords: ["list", "ul"],
+					command: (cmdEditor) => cmdEditor.chain().focus().toggleBulletList().run()
+				});
+				if (resolvedFeatures.orderedList) commands.push({
+					title: "Numbered list",
+					description: "Create an ordered list",
+					keywords: ["list", "ol"],
+					command: (cmdEditor) => cmdEditor.chain().focus().toggleOrderedList().run()
+				});
+				if (resolvedFeatures.blockquote) commands.push({
+					title: "Quote",
+					description: "Capture a quote",
+					keywords: ["blockquote"],
+					command: (cmdEditor) => cmdEditor.chain().focus().toggleBlockquote().run()
+				});
+				if (resolvedFeatures.codeBlock) commands.push({
+					title: "Code block",
+					description: "Insert code snippet",
+					keywords: ["code"],
+					command: (cmdEditor) => cmdEditor.chain().focus().toggleCodeBlock().run()
+				});
+				if (resolvedFeatures.horizontalRule) commands.push({
+					title: "Divider",
+					description: "Insert a horizontal rule",
+					keywords: ["hr"],
+					command: (cmdEditor) => cmdEditor.chain().focus().setHorizontalRule().run()
+				});
+				if (allowTables) commands.push({
+					title: "Table",
+					description: "Insert a 3x3 table",
+					keywords: ["grid"],
+					command: (cmdEditor) => cmdEditor.chain().focus().insertTable({
+						rows: 3,
+						cols: 3,
+						withHeaderRow: true
+					}).run()
+				});
+				return commands;
+			}));
+			if (extensions?.length) items.push(...extensions);
+			return items;
+		}, [
+			allowCharacterCount,
+			allowImages,
+			allowLinks,
+			allowSlashCommands,
+			allowTables,
+			extensions,
+			maxCharacters,
+			placeholder,
+			resolvedFeatures
+		]),
+		content: value ?? "",
+		editorProps: { attributes: { class: "qp-rich-text-editor__content" } },
+		editable: !disabled && !readOnly,
+		onUpdate: ({ editor: currentEditor }) => {
+			if (disabled || readOnly) return;
+			onChange(getOutput(currentEditor, outputFormat));
+		}
+	});
+	const isEditable = !disabled && !readOnly;
+	const headingValue = getHeadingLevel(editor);
+	const inTable = editor?.isActive("table") ?? false;
+	React$1.useEffect(() => {
+		if (!editor) return;
+		editor.setEditable(isEditable);
+	}, [editor, isEditable]);
+	React$1.useEffect(() => {
+		if (!editor) return;
+		if (value === void 0) return;
+		if (isSameValue(value, getOutput(editor, outputFormat))) return;
+		editor.commands.setContent(value ?? "", false);
+	}, [
+		editor,
+		outputFormat,
+		value
+	]);
+	React$1.useEffect(() => {
+		if (!linkOpen || !editor) return;
+		const currentLink = editor.getAttributes("link").href;
+		setLinkUrl(currentLink || "");
+	}, [editor, linkOpen]);
+	const handleApplyLink = React$1.useCallback(() => {
+		if (!editor) return;
+		if (!linkUrl) {
+			editor.chain().focus().unsetLink().run();
+			setLinkOpen(false);
+			return;
+		}
+		editor.chain().focus().setLink({
+			href: linkUrl,
+			target: "_blank",
+			rel: "noopener noreferrer"
+		}).run();
+		setLinkOpen(false);
+	}, [editor, linkUrl]);
+	const handleRemoveLink = React$1.useCallback(() => {
+		if (!editor) return;
+		editor.chain().focus().unsetLink().run();
+		setLinkOpen(false);
+	}, [editor]);
+	const handleInsertImageUrl = React$1.useCallback(() => {
+		if (!editor || !imageUrl) return;
+		editor.chain().focus().setImage({
+			src: imageUrl,
+			alt: imageAlt || void 0
+		}).run();
+		setImageUrl("");
+		setImageAlt("");
+		setImageOpen(false);
+	}, [
+		editor,
+		imageAlt,
+		imageUrl
+	]);
+	const handleImageUpload = React$1.useCallback(async (event) => {
+		const file = event.target.files?.[0];
+		if (!file || !editor || !onImageUpload) return;
+		try {
+			setUploadingImage(true);
+			const url = await onImageUpload(file);
+			if (url) {
+				editor.chain().focus().setImage({
+					src: url,
+					alt: imageAlt || void 0
+				}).run();
+				setImageUrl("");
+				setImageAlt("");
+				setImageOpen(false);
+			}
+		} finally {
+			setUploadingImage(false);
+			event.target.value = "";
+		}
+	}, [
+		editor,
+		imageAlt,
+		onImageUpload
+	]);
+	const characterCount = React$1.useMemo(() => {
+		if (!editor) return {
+			characters: 0,
+			words: 0
+		};
+		const storage = editor.storage;
+		if (storage?.characterCount) return {
+			characters: storage.characterCount.characters(),
+			words: storage.characterCount.words()
+		};
+		const text = editor.getText();
+		const words = text.trim().length ? text.trim().split(/\s+/).length : 0;
+		return {
+			characters: text.length,
+			words
+		};
+	}, [editor, value]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-2",
+		"data-disabled": disabled || readOnly,
+		children: [
+			label && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsxs(Label, {
+					htmlFor: name,
+					children: [label, required && /* @__PURE__ */ jsx("span", {
+						className: "text-destructive ml-1",
+						children: "*"
+					})]
+				}), localized && /* @__PURE__ */ jsx(LocaleBadge, { locale: locale || "i18n" })]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: cn("qp-rich-text-editor rounded-md border bg-background", disabled || readOnly ? "opacity-60" : "", error ? "border-destructive" : "border-input"),
+				children: [
+					editor && allowToolbar && /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-wrap items-center gap-2 border-b bg-muted/40 p-2",
+						children: [
+							resolvedFeatures.history && /* @__PURE__ */ jsxs(ToolbarGroup, { children: [/* @__PURE__ */ jsx(ToolbarButton, {
+								disabled: !isEditable || !editor.can().undo(),
+								title: "Undo",
+								onClick: () => editor.chain().focus().undo().run(),
+								children: "Undo"
+							}), /* @__PURE__ */ jsx(ToolbarButton, {
+								disabled: !isEditable || !editor.can().redo(),
+								title: "Redo",
+								onClick: () => editor.chain().focus().redo().run(),
+								children: "Redo"
+							})] }),
+							resolvedFeatures.heading && /* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsxs("select", {
+								className: "h-6 rounded-sm border bg-background px-2 text-xs",
+								value: headingValue,
+								onChange: (event) => {
+									if (!editor) return;
+									const nextValue = event.target.value;
+									if (nextValue === "paragraph") {
+										editor.chain().focus().setParagraph().run();
+										return;
+									}
+									editor.chain().focus().toggleHeading({ level: Number(nextValue) }).run();
+								},
+								disabled: !isEditable,
+								children: [
+									/* @__PURE__ */ jsx("option", {
+										value: "paragraph",
+										children: "Paragraph"
+									}),
+									/* @__PURE__ */ jsx("option", {
+										value: "1",
+										children: "Heading 1"
+									}),
+									/* @__PURE__ */ jsx("option", {
+										value: "2",
+										children: "Heading 2"
+									}),
+									/* @__PURE__ */ jsx("option", {
+										value: "3",
+										children: "Heading 3"
+									}),
+									/* @__PURE__ */ jsx("option", {
+										value: "4",
+										children: "Heading 4"
+									}),
+									/* @__PURE__ */ jsx("option", {
+										value: "5",
+										children: "Heading 5"
+									}),
+									/* @__PURE__ */ jsx("option", {
+										value: "6",
+										children: "Heading 6"
+									})
+								]
+							}) }),
+							/* @__PURE__ */ jsxs(ToolbarGroup, { children: [
+								resolvedFeatures.bold && /* @__PURE__ */ jsx(ToolbarButton, {
+									active: editor.isActive("bold"),
+									disabled: !isEditable,
+									title: "Bold",
+									onClick: () => editor.chain().focus().toggleBold().run(),
+									children: "Bold"
+								}),
+								resolvedFeatures.italic && /* @__PURE__ */ jsx(ToolbarButton, {
+									active: editor.isActive("italic"),
+									disabled: !isEditable,
+									title: "Italic",
+									onClick: () => editor.chain().focus().toggleItalic().run(),
+									children: "Italic"
+								}),
+								resolvedFeatures.underline && /* @__PURE__ */ jsx(ToolbarButton, {
+									active: editor.isActive("underline"),
+									disabled: !isEditable,
+									title: "Underline",
+									onClick: () => editor.chain().focus().toggleUnderline().run(),
+									children: "Underline"
+								}),
+								resolvedFeatures.strike && /* @__PURE__ */ jsx(ToolbarButton, {
+									active: editor.isActive("strike"),
+									disabled: !isEditable,
+									title: "Strikethrough",
+									onClick: () => editor.chain().focus().toggleStrike().run(),
+									children: "Strike"
+								}),
+								resolvedFeatures.code && /* @__PURE__ */ jsx(ToolbarButton, {
+									active: editor.isActive("code"),
+									disabled: !isEditable,
+									title: "Inline code",
+									onClick: () => editor.chain().focus().toggleCode().run(),
+									children: "Code"
+								}),
+								resolvedFeatures.codeBlock && /* @__PURE__ */ jsx(ToolbarButton, {
+									active: editor.isActive("codeBlock"),
+									disabled: !isEditable,
+									title: "Code block",
+									onClick: () => editor.chain().focus().toggleCodeBlock().run(),
+									children: "Code Block"
+								})
+							] }),
+							/* @__PURE__ */ jsxs(ToolbarGroup, { children: [
+								resolvedFeatures.bulletList && /* @__PURE__ */ jsx(ToolbarButton, {
+									active: editor.isActive("bulletList"),
+									disabled: !isEditable,
+									title: "Bullet list",
+									onClick: () => editor.chain().focus().toggleBulletList().run(),
+									children: "Bullet List"
+								}),
+								resolvedFeatures.orderedList && /* @__PURE__ */ jsx(ToolbarButton, {
+									active: editor.isActive("orderedList"),
+									disabled: !isEditable,
+									title: "Numbered list",
+									onClick: () => editor.chain().focus().toggleOrderedList().run(),
+									children: "Numbered List"
+								}),
+								resolvedFeatures.blockquote && /* @__PURE__ */ jsx(ToolbarButton, {
+									active: editor.isActive("blockquote"),
+									disabled: !isEditable,
+									title: "Blockquote",
+									onClick: () => editor.chain().focus().toggleBlockquote().run(),
+									children: "Quote"
+								}),
+								resolvedFeatures.horizontalRule && /* @__PURE__ */ jsx(ToolbarButton, {
+									disabled: !isEditable,
+									title: "Horizontal rule",
+									onClick: () => editor.chain().focus().setHorizontalRule().run(),
+									children: "Divider"
+								})
+							] }),
+							resolvedFeatures.align && /* @__PURE__ */ jsxs(ToolbarGroup, { children: [
+								/* @__PURE__ */ jsx(ToolbarButton, {
+									active: editor.isActive({ textAlign: "left" }),
+									disabled: !isEditable,
+									title: "Align left",
+									onClick: () => editor.chain().focus().setTextAlign("left").run(),
+									children: "Align Left"
+								}),
+								/* @__PURE__ */ jsx(ToolbarButton, {
+									active: editor.isActive({ textAlign: "center" }),
+									disabled: !isEditable,
+									title: "Align center",
+									onClick: () => editor.chain().focus().setTextAlign("center").run(),
+									children: "Align Center"
+								}),
+								/* @__PURE__ */ jsx(ToolbarButton, {
+									active: editor.isActive({ textAlign: "right" }),
+									disabled: !isEditable,
+									title: "Align right",
+									onClick: () => editor.chain().focus().setTextAlign("right").run(),
+									children: "Align Right"
+								}),
+								/* @__PURE__ */ jsx(ToolbarButton, {
+									active: editor.isActive({ textAlign: "justify" }),
+									disabled: !isEditable,
+									title: "Align justify",
+									onClick: () => editor.chain().focus().setTextAlign("justify").run(),
+									children: "Justify"
+								})
+							] }),
+							/* @__PURE__ */ jsxs(ToolbarGroup, { children: [
+								allowLinks && /* @__PURE__ */ jsxs(Popover, {
+									open: linkOpen,
+									onOpenChange: setLinkOpen,
+									children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: /* @__PURE__ */ jsx(Button, {
+										type: "button",
+										variant: "ghost",
+										size: "xs",
+										disabled: !isEditable,
+										"data-active": editor.isActive("link"),
+										children: "Link"
+									}) }), /* @__PURE__ */ jsxs(PopoverContent, {
+										className: "w-72",
+										children: [/* @__PURE__ */ jsx(PopoverHeader, { children: /* @__PURE__ */ jsx(PopoverTitle, { children: "Insert link" }) }), /* @__PURE__ */ jsxs("div", {
+											className: "space-y-2",
+											children: [/* @__PURE__ */ jsx(Input, {
+												value: linkUrl,
+												placeholder: "https://example.com",
+												onChange: (event) => setLinkUrl(event.target.value),
+												disabled: !isEditable
+											}), /* @__PURE__ */ jsxs("div", {
+												className: "flex justify-end gap-2",
+												children: [/* @__PURE__ */ jsx(Button, {
+													type: "button",
+													size: "xs",
+													variant: "outline",
+													onClick: handleRemoveLink,
+													disabled: !isEditable || !editor.isActive("link"),
+													children: "Remove"
+												}), /* @__PURE__ */ jsx(Button, {
+													type: "button",
+													size: "xs",
+													onClick: handleApplyLink,
+													disabled: !isEditable,
+													children: "Apply"
+												})]
+											})]
+										})]
+									})]
+								}),
+								allowImages && /* @__PURE__ */ jsxs(Popover, {
+									open: imageOpen,
+									onOpenChange: setImageOpen,
+									children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: /* @__PURE__ */ jsx(Button, {
+										type: "button",
+										variant: "ghost",
+										size: "xs",
+										disabled: !isEditable,
+										children: "Image"
+									}) }), /* @__PURE__ */ jsxs(PopoverContent, {
+										className: "w-80",
+										children: [/* @__PURE__ */ jsx(PopoverHeader, { children: /* @__PURE__ */ jsx(PopoverTitle, { children: "Insert image" }) }), /* @__PURE__ */ jsxs("div", {
+											className: "space-y-3",
+											children: [/* @__PURE__ */ jsxs("div", {
+												className: "space-y-2",
+												children: [
+													/* @__PURE__ */ jsx(Input, {
+														value: imageUrl,
+														placeholder: "https://example.com/image.jpg",
+														onChange: (event) => setImageUrl(event.target.value),
+														disabled: !isEditable
+													}),
+													/* @__PURE__ */ jsx(Input, {
+														value: imageAlt,
+														placeholder: "Alt text (optional)",
+														onChange: (event) => setImageAlt(event.target.value),
+														disabled: !isEditable
+													}),
+													/* @__PURE__ */ jsx("div", {
+														className: "flex justify-end gap-2",
+														children: /* @__PURE__ */ jsx(Button, {
+															type: "button",
+															size: "xs",
+															onClick: handleInsertImageUrl,
+															disabled: !isEditable || !imageUrl,
+															children: "Insert URL"
+														})
+													})
+												]
+											}), onImageUpload && /* @__PURE__ */ jsxs("div", {
+												className: "space-y-2",
+												children: [
+													/* @__PURE__ */ jsx("div", {
+														className: "text-xs font-medium",
+														children: "Upload file"
+													}),
+													/* @__PURE__ */ jsx("input", {
+														ref: fileInputRef,
+														type: "file",
+														accept: "image/*",
+														onChange: handleImageUpload,
+														className: "sr-only",
+														disabled: !isEditable || uploadingImage
+													}),
+													/* @__PURE__ */ jsx(Button, {
+														type: "button",
+														size: "xs",
+														variant: "outline",
+														onClick: () => fileInputRef.current?.click(),
+														disabled: !isEditable || uploadingImage,
+														children: uploadingImage ? "Uploading..." : "Choose file"
+													})
+												]
+											})]
+										})]
+									})]
+								}),
+								allowTableControls && /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: /* @__PURE__ */ jsx(Button, {
+									type: "button",
+									variant: "ghost",
+									size: "xs",
+									disabled: !isEditable,
+									children: "Table"
+								}) }), /* @__PURE__ */ jsxs(PopoverContent, {
+									className: "w-80",
+									children: [/* @__PURE__ */ jsx(PopoverHeader, { children: /* @__PURE__ */ jsx(PopoverTitle, { children: "Table tools" }) }), /* @__PURE__ */ jsxs("div", {
+										className: "grid grid-cols-2 gap-2",
+										children: [
+											/* @__PURE__ */ jsx(Button, {
+												type: "button",
+												size: "xs",
+												onClick: () => editor.chain().focus().insertTable({
+													rows: 3,
+													cols: 3,
+													withHeaderRow: true
+												}).run(),
+												disabled: !isEditable,
+												children: "Insert table"
+											}),
+											/* @__PURE__ */ jsx(Button, {
+												type: "button",
+												size: "xs",
+												variant: "outline",
+												onClick: () => editor.chain().focus().addRowBefore().run(),
+												disabled: !isEditable || !inTable,
+												children: "Add row before"
+											}),
+											/* @__PURE__ */ jsx(Button, {
+												type: "button",
+												size: "xs",
+												variant: "outline",
+												onClick: () => editor.chain().focus().addRowAfter().run(),
+												disabled: !isEditable || !inTable,
+												children: "Add row after"
+											}),
+											/* @__PURE__ */ jsx(Button, {
+												type: "button",
+												size: "xs",
+												variant: "outline",
+												onClick: () => editor.chain().focus().addColumnBefore().run(),
+												disabled: !isEditable || !inTable,
+												children: "Add column before"
+											}),
+											/* @__PURE__ */ jsx(Button, {
+												type: "button",
+												size: "xs",
+												variant: "outline",
+												onClick: () => editor.chain().focus().addColumnAfter().run(),
+												disabled: !isEditable || !inTable,
+												children: "Add column after"
+											}),
+											/* @__PURE__ */ jsx(Button, {
+												type: "button",
+												size: "xs",
+												variant: "outline",
+												onClick: () => editor.chain().focus().deleteRow().run(),
+												disabled: !isEditable || !inTable,
+												children: "Delete row"
+											}),
+											/* @__PURE__ */ jsx(Button, {
+												type: "button",
+												size: "xs",
+												variant: "outline",
+												onClick: () => editor.chain().focus().deleteColumn().run(),
+												disabled: !isEditable || !inTable,
+												children: "Delete column"
+											}),
+											/* @__PURE__ */ jsx(Button, {
+												type: "button",
+												size: "xs",
+												variant: "outline",
+												onClick: () => editor.chain().focus().toggleHeaderRow().run(),
+												disabled: !isEditable || !inTable,
+												children: "Toggle header row"
+											}),
+											/* @__PURE__ */ jsx(Button, {
+												type: "button",
+												size: "xs",
+												variant: "outline",
+												onClick: () => editor.chain().focus().toggleHeaderColumn().run(),
+												disabled: !isEditable || !inTable,
+												children: "Toggle header column"
+											}),
+											/* @__PURE__ */ jsx(Button, {
+												type: "button",
+												size: "xs",
+												variant: "outline",
+												onClick: () => editor.chain().focus().mergeCells().run(),
+												disabled: !isEditable || !inTable,
+												children: "Merge cells"
+											}),
+											/* @__PURE__ */ jsx(Button, {
+												type: "button",
+												size: "xs",
+												variant: "outline",
+												onClick: () => editor.chain().focus().splitCell().run(),
+												disabled: !isEditable || !inTable,
+												children: "Split cell"
+											}),
+											/* @__PURE__ */ jsx(Button, {
+												type: "button",
+												size: "xs",
+												variant: "outline",
+												onClick: () => editor.chain().focus().deleteTable().run(),
+												disabled: !isEditable || !inTable,
+												children: "Delete table"
+											})
+										]
+									})]
+								})] })
+							] })
+						]
+					}),
+					editor && allowBubbleMenu && /* @__PURE__ */ jsxs(BubbleMenu, {
+						editor,
+						className: "flex items-center gap-1 rounded-md border bg-background p-1 shadow",
+						children: [
+							resolvedFeatures.bold && /* @__PURE__ */ jsx(ToolbarButton, {
+								active: editor.isActive("bold"),
+								disabled: !isEditable,
+								title: "Bold",
+								onClick: () => editor.chain().focus().toggleBold().run(),
+								children: "Bold"
+							}),
+							resolvedFeatures.italic && /* @__PURE__ */ jsx(ToolbarButton, {
+								active: editor.isActive("italic"),
+								disabled: !isEditable,
+								title: "Italic",
+								onClick: () => editor.chain().focus().toggleItalic().run(),
+								children: "Italic"
+							}),
+							resolvedFeatures.underline && /* @__PURE__ */ jsx(ToolbarButton, {
+								active: editor.isActive("underline"),
+								disabled: !isEditable,
+								title: "Underline",
+								onClick: () => editor.chain().focus().toggleUnderline().run(),
+								children: "Underline"
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx(EditorContent, {
+						editor,
+						id: name
+					}),
+					allowCharacterCount && showCharacterCount && /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between border-t bg-muted/30 px-2 py-1 text-xs text-muted-foreground",
+						children: [/* @__PURE__ */ jsxs("span", { children: [
+							characterCount.words,
+							" word",
+							characterCount.words === 1 ? "" : "s"
+						] }), /* @__PURE__ */ jsxs("span", { children: [
+							characterCount.characters,
+							typeof maxCharacters === "number" ? ` / ${maxCharacters}` : "",
+							"characters"
+						] })]
+					})
+				]
+			}),
+			description && /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-xs",
+				children: description
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				className: "text-destructive text-xs",
+				children: error
+			})
+		]
+	});
+}
+
+//#endregion
+export { RichTextEditor };