@questpie/admin 0.0.1 → 1.0.0

package/src/components/fields/rich-text-editor/index.tsx

@@ -1,1337 +0,0 @@
-/**
- * RichTextEditor Component
- *
- * Tiptap-based rich text editor with toolbar controls.
- */
-
-import * as React from "react";
-import { Extension, type Editor, type Range } from "@tiptap/core";
-import type { Extension as TiptapExtension } 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, { type Instance } from "tippy.js";
-import { common, createLowlight } from "lowlight";
-
-const lowlight = createLowlight(common);
-import { Button } from "../../ui/button";
-import { Input } from "../../ui/input";
-import { Label } from "../../ui/label";
-import { LocaleBadge } from "../locale-badge";
-import {
-	Popover,
-	PopoverContent,
-	PopoverHeader,
-	PopoverTitle,
-	PopoverTrigger,
-} from "../../ui/popover";
-import type { FieldComponentProps } from "../../../config/component-registry";
-import { cn } from "../../../utils";
-
-export type RichTextFeatures = {
-	toolbar?: boolean;
-	bubbleMenu?: boolean;
-	slashCommands?: boolean;
-	history?: boolean;
-	heading?: boolean;
-	bold?: boolean;
-	italic?: boolean;
-	underline?: boolean;
-	strike?: boolean;
-	code?: boolean;
-	codeBlock?: boolean;
-	blockquote?: boolean;
-	bulletList?: boolean;
-	orderedList?: boolean;
-	horizontalRule?: boolean;
-	align?: boolean;
-	link?: boolean;
-	image?: boolean;
-	table?: boolean;
-	tableControls?: boolean;
-	characterCount?: boolean;
-};
-
-export interface RichTextEditorProps extends FieldComponentProps<any> {
-	/**
-	 * Output format
-	 */
-	outputFormat?: "json" | "html" | "markdown";
-
-	/**
-	 * Custom Tiptap extensions
-	 */
-	extensions?: TiptapExtension[];
-
-	/**
-	 * Feature toggles
-	 */
-	features?: RichTextFeatures;
-
-	/**
-	 * Show character count
-	 */
-	showCharacterCount?: boolean;
-
-	/**
-	 * Max character limit
-	 */
-	maxCharacters?: number;
-
-	/**
-	 * Enable image uploads
-	 */
-	enableImages?: boolean;
-
-	/**
-	 * Image upload handler
-	 */
-	onImageUpload?: (file: File) => Promise<string>;
-}
-
-type OutputValue = Record<string, any> | string;
-
-type ToolbarButtonProps = {
-	active?: boolean;
-	disabled?: boolean;
-	title?: string;
-	onClick: () => void;
-	children: React.ReactNode;
-};
-
-type SlashCommandItem = {
-	title: string;
-	description?: string;
-	keywords?: string[];
-	command: (editor: any) => void;
-};
-
-type SlashCommandListProps = {
-	items: SlashCommandItem[];
-	command: (item: SlashCommandItem) => void;
-};
-
-type SlashCommandListHandle = {
-	onKeyDown: (props: { event: KeyboardEvent }) => boolean;
-};
-
-const defaultFeatures: Required<RichTextFeatures> = {
-	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,
-}: ToolbarButtonProps) {
-	return (
-		<Button
-			type="button"
-			variant="ghost"
-			size="xs"
-			data-active={active}
-			title={title}
-			disabled={disabled}
-			onClick={onClick}
-			className="data-[active=true]:bg-muted data-[active=true]:text-foreground"
-		>
-			{children}
-		</Button>
-	);
-}
-
-function ToolbarGroup({ children }: { children: React.ReactNode }) {
-	return (
-		<div className="flex items-center gap-1 border-r border-border pr-2 last:border-r-0 last:pr-0">
-			{children}
-		</div>
-	);
-}
-
-const SlashCommandList = React.forwardRef<
-	SlashCommandListHandle,
-	SlashCommandListProps
->(function SlashCommandList({ items, command }, ref) {
-	const [selectedIndex, setSelectedIndex] = React.useState(0);
-
-	React.useEffect(() => {
-		setSelectedIndex(0);
-	}, [items]);
-
-	const selectItem = React.useCallback(
-		(index: number) => {
-			const item = items[index];
-			if (item) {
-				command(item);
-			}
-		},
-		[command, items],
-	);
-
-	React.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 (
-		<div className="qp-rich-text-editor__slash">
-			{items.length === 0 && (
-				<div className="qp-rich-text-editor__slash-empty">No results</div>
-			)}
-			{items.map((item, index) => (
-				<button
-					key={item.title}
-					type="button"
-					className={cn(
-						"qp-rich-text-editor__slash-item",
-						index === selectedIndex
-							? "qp-rich-text-editor__slash-item--active"
-							: "",
-					)}
-					onClick={() => selectItem(index)}
-				>
-					<span className="qp-rich-text-editor__slash-title">{item.title}</span>
-					{item.description && (
-						<span className="qp-rich-text-editor__slash-description">
-							{item.description}
-						</span>
-					)}
-				</button>
-			))}
-		</div>
-	);
-});
-
-function getHeadingLevel(editor: ReturnType<typeof useEditor>) {
-	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: NonNullable<ReturnType<typeof useEditor>>,
-	outputFormat: "json" | "html" | "markdown",
-) {
-	if (outputFormat === "html") {
-		return editor.getHTML();
-	}
-
-	if (outputFormat === "markdown") {
-		const markdown = (editor.storage as any)?.markdown?.getMarkdown?.();
-		if (typeof markdown === "string") {
-			return markdown;
-		}
-		return editor.getHTML();
-	}
-
-	return editor.getJSON();
-}
-
-function isSameValue(a: OutputValue | undefined, b: OutputValue | undefined) {
-	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: (editor: Editor) => SlashCommandItem[],
-) {
-	return Extension.create({
-		name: "slashCommand",
-		addOptions() {
-			return {
-				suggestion: {
-					char: "/",
-					startOfLine: true,
-					command: ({
-						editor,
-						range,
-						props,
-					}: {
-						editor: Editor;
-						range: Range;
-						props: SlashCommandItem;
-					}) => {
-						editor.chain().focus().deleteRange(range).run();
-						props.command(editor);
-					},
-					items: ({ query, editor }: { query: string; editor: 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: ReactRenderer<SlashCommandListHandle> | null = null;
-						let popup: Instance[] | null = null;
-
-						return {
-							onStart: (props: any) => {
-								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: any) => {
-								component?.updateProps(props);
-
-								if (!props.clientRect) {
-									return;
-								}
-
-								popup?.[0].setProps({
-									getReferenceClientRect: props.clientRect,
-								});
-							},
-
-							onKeyDown: (props: any) => {
-								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)];
-		},
-	});
-}
-
-export function RichTextEditor({
-	name,
-	value,
-	onChange,
-	disabled,
-	readOnly,
-	label,
-	description,
-	placeholder,
-	required,
-	error,
-	localized,
-	locale,
-	outputFormat = "json",
-	extensions,
-	features,
-	showCharacterCount,
-	maxCharacters,
-	enableImages,
-	onImageUpload,
-}: RichTextEditorProps) {
-	const [linkOpen, setLinkOpen] = React.useState(false);
-	const [linkUrl, setLinkUrl] = React.useState("");
-	const [imageOpen, setImageOpen] = React.useState(false);
-	const [imageUrl, setImageUrl] = React.useState("");
-	const [imageAlt, setImageAlt] = React.useState("");
-	const [uploadingImage, setUploadingImage] = React.useState(false);
-	const fileInputRef = React.useRef<HTMLInputElement | null>(null);
-
-	const resolvedFeatures = React.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 resolvedExtensions = React.useMemo(() => {
-		const starterKitConfig: Record<string, any> = {
-			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: any[] = [
-			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) => {
-					const commands: SlashCommandItem[] = [];
-
-					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,
-	]);
-
-	const editor = useEditor({
-		extensions: resolvedExtensions,
-		content: value ?? "",
-		editorProps: {
-			attributes: {
-				class: "qp-rich-text-editor__content",
-			},
-		},
-		editable: !disabled && !readOnly,
-		onUpdate: ({ editor: currentEditor }) => {
-			if (disabled || readOnly) return;
-			const nextValue = getOutput(currentEditor, outputFormat);
-			onChange(nextValue as OutputValue);
-		},
-	});
-
-	const isEditable = !disabled && !readOnly;
-	const headingValue = getHeadingLevel(editor);
-	const inTable = editor?.isActive("table") ?? false;
-
-	React.useEffect(() => {
-		if (!editor) return;
-		editor.setEditable(isEditable);
-	}, [editor, isEditable]);
-
-	React.useEffect(() => {
-		if (!editor) return;
-		if (value === undefined) return;
-
-		const currentValue = getOutput(editor, outputFormat);
-		if (isSameValue(value as OutputValue, currentValue as OutputValue)) {
-			return;
-		}
-
-		editor.commands.setContent(value ?? "", false);
-	}, [editor, outputFormat, value]);
-
-	React.useEffect(() => {
-		if (!linkOpen || !editor) return;
-		const currentLink = editor.getAttributes("link").href as string | undefined;
-		setLinkUrl(currentLink || "");
-	}, [editor, linkOpen]);
-
-	const handleApplyLink = React.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.useCallback(() => {
-		if (!editor) return;
-		editor.chain().focus().unsetLink().run();
-		setLinkOpen(false);
-	}, [editor]);
-
-	const handleInsertImageUrl = React.useCallback(() => {
-		if (!editor || !imageUrl) return;
-		editor
-			.chain()
-			.focus()
-			.setImage({ src: imageUrl, alt: imageAlt || undefined })
-			.run();
-		setImageUrl("");
-		setImageAlt("");
-		setImageOpen(false);
-	}, [editor, imageAlt, imageUrl]);
-
-	const handleImageUpload = React.useCallback(
-		async (event: React.ChangeEvent<HTMLInputElement>) => {
-			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 || undefined })
-						.run();
-					setImageUrl("");
-					setImageAlt("");
-					setImageOpen(false);
-				}
-			} finally {
-				setUploadingImage(false);
-				event.target.value = "";
-			}
-		},
-		[editor, imageAlt, onImageUpload],
-	);
-
-	const characterCount = React.useMemo(() => {
-		if (!editor) return { characters: 0, words: 0 };
-		const storage = editor.storage as any;
-		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 (
-		<div className="space-y-2" data-disabled={disabled || readOnly}>
-			{label && (
-				<div className="flex items-center gap-2">
-					<Label htmlFor={name}>
-						{label}
-						{required && <span className="text-destructive ml-1">*</span>}
-					</Label>
-					{localized && <LocaleBadge locale={locale || "i18n"} />}
-				</div>
-			)}
-
-			<div
-				className={cn(
-					"qp-rich-text-editor rounded-md border bg-background",
-					disabled || readOnly ? "opacity-60" : "",
-					error ? "border-destructive" : "border-input",
-				)}
-			>
-				{editor && allowToolbar && (
-					<div className="flex flex-wrap items-center gap-2 border-b bg-muted/40 p-2">
-						{resolvedFeatures.history && (
-							<ToolbarGroup>
-								<ToolbarButton
-									disabled={!isEditable || !editor.can().undo()}
-									title="Undo"
-									onClick={() => editor.chain().focus().undo().run()}
-								>
-									Undo
-								</ToolbarButton>
-								<ToolbarButton
-									disabled={!isEditable || !editor.can().redo()}
-									title="Redo"
-									onClick={() => editor.chain().focus().redo().run()}
-								>
-									Redo
-								</ToolbarButton>
-							</ToolbarGroup>
-						)}
-
-						{resolvedFeatures.heading && (
-							<ToolbarGroup>
-								<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) as 1 | 2 | 3 | 4 | 5 | 6,
-											})
-											.run();
-									}}
-									disabled={!isEditable}
-								>
-									<option value="paragraph">Paragraph</option>
-									<option value="1">Heading 1</option>
-									<option value="2">Heading 2</option>
-									<option value="3">Heading 3</option>
-									<option value="4">Heading 4</option>
-									<option value="5">Heading 5</option>
-									<option value="6">Heading 6</option>
-								</select>
-							</ToolbarGroup>
-						)}
-
-						<ToolbarGroup>
-							{resolvedFeatures.bold && (
-								<ToolbarButton
-									active={editor.isActive("bold")}
-									disabled={!isEditable}
-									title="Bold"
-									onClick={() => editor.chain().focus().toggleBold().run()}
-								>
-									Bold
-								</ToolbarButton>
-							)}
-							{resolvedFeatures.italic && (
-								<ToolbarButton
-									active={editor.isActive("italic")}
-									disabled={!isEditable}
-									title="Italic"
-									onClick={() => editor.chain().focus().toggleItalic().run()}
-								>
-									Italic
-								</ToolbarButton>
-							)}
-							{resolvedFeatures.underline && (
-								<ToolbarButton
-									active={editor.isActive("underline")}
-									disabled={!isEditable}
-									title="Underline"
-									onClick={() => editor.chain().focus().toggleUnderline().run()}
-								>
-									Underline
-								</ToolbarButton>
-							)}
-							{resolvedFeatures.strike && (
-								<ToolbarButton
-									active={editor.isActive("strike")}
-									disabled={!isEditable}
-									title="Strikethrough"
-									onClick={() => editor.chain().focus().toggleStrike().run()}
-								>
-									Strike
-								</ToolbarButton>
-							)}
-							{resolvedFeatures.code && (
-								<ToolbarButton
-									active={editor.isActive("code")}
-									disabled={!isEditable}
-									title="Inline code"
-									onClick={() => editor.chain().focus().toggleCode().run()}
-								>
-									Code
-								</ToolbarButton>
-							)}
-							{resolvedFeatures.codeBlock && (
-								<ToolbarButton
-									active={editor.isActive("codeBlock")}
-									disabled={!isEditable}
-									title="Code block"
-									onClick={() => editor.chain().focus().toggleCodeBlock().run()}
-								>
-									Code Block
-								</ToolbarButton>
-							)}
-						</ToolbarGroup>
-
-						<ToolbarGroup>
-							{resolvedFeatures.bulletList && (
-								<ToolbarButton
-									active={editor.isActive("bulletList")}
-									disabled={!isEditable}
-									title="Bullet list"
-									onClick={() =>
-										editor.chain().focus().toggleBulletList().run()
-									}
-								>
-									Bullet List
-								</ToolbarButton>
-							)}
-							{resolvedFeatures.orderedList && (
-								<ToolbarButton
-									active={editor.isActive("orderedList")}
-									disabled={!isEditable}
-									title="Numbered list"
-									onClick={() =>
-										editor.chain().focus().toggleOrderedList().run()
-									}
-								>
-									Numbered List
-								</ToolbarButton>
-							)}
-							{resolvedFeatures.blockquote && (
-								<ToolbarButton
-									active={editor.isActive("blockquote")}
-									disabled={!isEditable}
-									title="Blockquote"
-									onClick={() =>
-										editor.chain().focus().toggleBlockquote().run()
-									}
-								>
-									Quote
-								</ToolbarButton>
-							)}
-							{resolvedFeatures.horizontalRule && (
-								<ToolbarButton
-									disabled={!isEditable}
-									title="Horizontal rule"
-									onClick={() =>
-										editor.chain().focus().setHorizontalRule().run()
-									}
-								>
-									Divider
-								</ToolbarButton>
-							)}
-						</ToolbarGroup>
-
-						{resolvedFeatures.align && (
-							<ToolbarGroup>
-								<ToolbarButton
-									active={editor.isActive({ textAlign: "left" })}
-									disabled={!isEditable}
-									title="Align left"
-									onClick={() =>
-										editor.chain().focus().setTextAlign("left").run()
-									}
-								>
-									Align Left
-								</ToolbarButton>
-								<ToolbarButton
-									active={editor.isActive({ textAlign: "center" })}
-									disabled={!isEditable}
-									title="Align center"
-									onClick={() =>
-										editor.chain().focus().setTextAlign("center").run()
-									}
-								>
-									Align Center
-								</ToolbarButton>
-								<ToolbarButton
-									active={editor.isActive({ textAlign: "right" })}
-									disabled={!isEditable}
-									title="Align right"
-									onClick={() =>
-										editor.chain().focus().setTextAlign("right").run()
-									}
-								>
-									Align Right
-								</ToolbarButton>
-								<ToolbarButton
-									active={editor.isActive({ textAlign: "justify" })}
-									disabled={!isEditable}
-									title="Align justify"
-									onClick={() =>
-										editor.chain().focus().setTextAlign("justify").run()
-									}
-								>
-									Justify
-								</ToolbarButton>
-							</ToolbarGroup>
-						)}
-
-						<ToolbarGroup>
-							{allowLinks && (
-								<Popover open={linkOpen} onOpenChange={setLinkOpen}>
-									<PopoverTrigger
-										render={
-											<Button
-												type="button"
-												variant="ghost"
-												size="xs"
-												disabled={!isEditable}
-												data-active={editor.isActive("link")}
-											>
-												Link
-											</Button>
-										}
-									/>
-									<PopoverContent className="w-72">
-										<PopoverHeader>
-											<PopoverTitle>Insert link</PopoverTitle>
-										</PopoverHeader>
-										<div className="space-y-2">
-											<Input
-												value={linkUrl}
-												placeholder="https://example.com"
-												onChange={(event) => setLinkUrl(event.target.value)}
-												disabled={!isEditable}
-											/>
-											<div className="flex justify-end gap-2">
-												<Button
-													type="button"
-													size="xs"
-													variant="outline"
-													onClick={handleRemoveLink}
-													disabled={!isEditable || !editor.isActive("link")}
-												>
-													Remove
-												</Button>
-												<Button
-													type="button"
-													size="xs"
-													onClick={handleApplyLink}
-													disabled={!isEditable}
-												>
-													Apply
-												</Button>
-											</div>
-										</div>
-									</PopoverContent>
-								</Popover>
-							)}
-
-							{allowImages && (
-								<Popover open={imageOpen} onOpenChange={setImageOpen}>
-									<PopoverTrigger
-										render={
-											<Button
-												type="button"
-												variant="ghost"
-												size="xs"
-												disabled={!isEditable}
-											>
-												Image
-											</Button>
-										}
-									/>
-									<PopoverContent className="w-80">
-										<PopoverHeader>
-											<PopoverTitle>Insert image</PopoverTitle>
-										</PopoverHeader>
-										<div className="space-y-3">
-											<div className="space-y-2">
-												<Input
-													value={imageUrl}
-													placeholder="https://example.com/image.jpg"
-													onChange={(event) => setImageUrl(event.target.value)}
-													disabled={!isEditable}
-												/>
-												<Input
-													value={imageAlt}
-													placeholder="Alt text (optional)"
-													onChange={(event) => setImageAlt(event.target.value)}
-													disabled={!isEditable}
-												/>
-												<div className="flex justify-end gap-2">
-													<Button
-														type="button"
-														size="xs"
-														onClick={handleInsertImageUrl}
-														disabled={!isEditable || !imageUrl}
-													>
-														Insert URL
-													</Button>
-												</div>
-											</div>
-
-											{onImageUpload && (
-												<div className="space-y-2">
-													<div className="text-xs font-medium">Upload file</div>
-													<input
-														ref={fileInputRef}
-														type="file"
-														accept="image/*"
-														onChange={handleImageUpload}
-														className="sr-only"
-														disabled={!isEditable || uploadingImage}
-													/>
-													<Button
-														type="button"
-														size="xs"
-														variant="outline"
-														onClick={() => fileInputRef.current?.click()}
-														disabled={!isEditable || uploadingImage}
-													>
-														{uploadingImage ? "Uploading..." : "Choose file"}
-													</Button>
-												</div>
-											)}
-										</div>
-									</PopoverContent>
-								</Popover>
-							)}
-
-							{allowTableControls && (
-								<Popover>
-									<PopoverTrigger
-										render={
-											<Button
-												type="button"
-												variant="ghost"
-												size="xs"
-												disabled={!isEditable}
-											>
-												Table
-											</Button>
-										}
-									/>
-									<PopoverContent className="w-80">
-										<PopoverHeader>
-											<PopoverTitle>Table tools</PopoverTitle>
-										</PopoverHeader>
-										<div className="grid grid-cols-2 gap-2">
-											<Button
-												type="button"
-												size="xs"
-												onClick={() =>
-													editor
-														.chain()
-														.focus()
-														.insertTable({
-															rows: 3,
-															cols: 3,
-															withHeaderRow: true,
-														})
-														.run()
-												}
-												disabled={!isEditable}
-											>
-												Insert table
-											</Button>
-											<Button
-												type="button"
-												size="xs"
-												variant="outline"
-												onClick={() =>
-													editor.chain().focus().addRowBefore().run()
-												}
-												disabled={!isEditable || !inTable}
-											>
-												Add row before
-											</Button>
-											<Button
-												type="button"
-												size="xs"
-												variant="outline"
-												onClick={() =>
-													editor.chain().focus().addRowAfter().run()
-												}
-												disabled={!isEditable || !inTable}
-											>
-												Add row after
-											</Button>
-											<Button
-												type="button"
-												size="xs"
-												variant="outline"
-												onClick={() =>
-													editor.chain().focus().addColumnBefore().run()
-												}
-												disabled={!isEditable || !inTable}
-											>
-												Add column before
-											</Button>
-											<Button
-												type="button"
-												size="xs"
-												variant="outline"
-												onClick={() =>
-													editor.chain().focus().addColumnAfter().run()
-												}
-												disabled={!isEditable || !inTable}
-											>
-												Add column after
-											</Button>
-											<Button
-												type="button"
-												size="xs"
-												variant="outline"
-												onClick={() => editor.chain().focus().deleteRow().run()}
-												disabled={!isEditable || !inTable}
-											>
-												Delete row
-											</Button>
-											<Button
-												type="button"
-												size="xs"
-												variant="outline"
-												onClick={() =>
-													editor.chain().focus().deleteColumn().run()
-												}
-												disabled={!isEditable || !inTable}
-											>
-												Delete column
-											</Button>
-											<Button
-												type="button"
-												size="xs"
-												variant="outline"
-												onClick={() =>
-													editor.chain().focus().toggleHeaderRow().run()
-												}
-												disabled={!isEditable || !inTable}
-											>
-												Toggle header row
-											</Button>
-											<Button
-												type="button"
-												size="xs"
-												variant="outline"
-												onClick={() =>
-													editor.chain().focus().toggleHeaderColumn().run()
-												}
-												disabled={!isEditable || !inTable}
-											>
-												Toggle header column
-											</Button>
-											<Button
-												type="button"
-												size="xs"
-												variant="outline"
-												onClick={() =>
-													editor.chain().focus().mergeCells().run()
-												}
-												disabled={!isEditable || !inTable}
-											>
-												Merge cells
-											</Button>
-											<Button
-												type="button"
-												size="xs"
-												variant="outline"
-												onClick={() => editor.chain().focus().splitCell().run()}
-												disabled={!isEditable || !inTable}
-											>
-												Split cell
-											</Button>
-											<Button
-												type="button"
-												size="xs"
-												variant="outline"
-												onClick={() =>
-													editor.chain().focus().deleteTable().run()
-												}
-												disabled={!isEditable || !inTable}
-											>
-												Delete table
-											</Button>
-										</div>
-									</PopoverContent>
-								</Popover>
-							)}
-						</ToolbarGroup>
-					</div>
-				)}
-
-				{editor && allowBubbleMenu && (
-					<BubbleMenu
-						editor={editor}
-						className="flex items-center gap-1 rounded-md border bg-background p-1 shadow"
-					>
-						{resolvedFeatures.bold && (
-							<ToolbarButton
-								active={editor.isActive("bold")}
-								disabled={!isEditable}
-								title="Bold"
-								onClick={() => editor.chain().focus().toggleBold().run()}
-							>
-								Bold
-							</ToolbarButton>
-						)}
-						{resolvedFeatures.italic && (
-							<ToolbarButton
-								active={editor.isActive("italic")}
-								disabled={!isEditable}
-								title="Italic"
-								onClick={() => editor.chain().focus().toggleItalic().run()}
-							>
-								Italic
-							</ToolbarButton>
-						)}
-						{resolvedFeatures.underline && (
-							<ToolbarButton
-								active={editor.isActive("underline")}
-								disabled={!isEditable}
-								title="Underline"
-								onClick={() => editor.chain().focus().toggleUnderline().run()}
-							>
-								Underline
-							</ToolbarButton>
-						)}
-					</BubbleMenu>
-				)}
-
-				<EditorContent editor={editor} id={name} />
-
-				{allowCharacterCount && showCharacterCount && (
-					<div className="flex items-center justify-between border-t bg-muted/30 px-2 py-1 text-xs text-muted-foreground">
-						<span>
-							{characterCount.words} word{characterCount.words === 1 ? "" : "s"}
-						</span>
-						<span>
-							{characterCount.characters}
-							{typeof maxCharacters === "number" ? ` / ${maxCharacters}` : ""}
-							characters
-						</span>
-					</div>
-				)}
-			</div>
-
-			{description && (
-				<p className="text-muted-foreground text-xs">{description}</p>
-			)}
-			{error && <p className="text-destructive text-xs">{error}</p>}
-		</div>
-	);
-}