@questpie/admin 0.0.1 → 1.0.0

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

@@ -1,897 +0,0 @@
-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 };