rich-text-editor.tsx

"use client";
import {
	EditorBubble,
	EditorCommand,
	EditorCommandEmpty,
	EditorCommandItem,
	EditorCommandList,
	EditorContent,
	type EditorContentProps,
	EditorRoot,
	ImageResizer,
} from "novel";
import { useState } from "react";
import { defaultExtensions } from "./extensions";
import { ColorSelector } from "./selectors/color-selector";
import { LinkSelector } from "./selectors/link-selector";
import { NodeSelector } from "./selectors/node-selector";
import { TextButtons } from "./selectors/text-buttons";
import { Separator } from "./ui/separator";

import { slashCommand, suggestionItems } from "./slash-command";

const extensions = [...defaultExtensions, slashCommand];

interface CoreEditorProps extends Omit<EditorContentProps, "extensions" | "slotAfter" | "slotBefore" | "className"> {}

const RichTextEditor = (props: CoreEditorProps) => {
	const [openNodeTypeDropdown, setOpenNodeTypeDropdown] = useState(false);
	const [openColor, setOpenColor] = useState(false);
	const [openLink, setOpenLink] = useState(false);

	if (!props.initialContent) return null;

	return (
		<EditorRoot>
			<EditorContent
				{...props}
				editorProps={{
					attributes: {
						class:
							"prose prose-lg dark:prose-invert prose-headings:font-title font-default focus:outline-none max-w-full",
					},
					// Paste-time HTML transform. We don't allow body H1 (the page-level
					// title lives in the post title field, not the prose), but a user
					// pasting from a rendered blog post / Google Doc / Notion typically
					// brings an <h1> with them. Rewriting to <h2> at paste time means
					// the paste lands as a clean heading inside the editor's "Heading 1"
					// register (which is <h2> in the schema — see slash-command.tsx for
					// the label-vs-element mapping rationale). Belt-and-suspenders with
					// the heading.levels: [2, 3] restriction in extensions.ts.
					transformPastedHTML: (html) =>
						html.replace(/<h1(\s[^>]*)?>/gi, "<h2>").replace(/<\/h1>/gi, "</h2>"),
					...props.editorProps,
				}}
				immediatelyRender={false}
				extensions={extensions}
				className="relative min-h-[500px] w-full max-w-screen-lg bg-background sm:mb-[calc(10vh)]"
				slotAfter={<ImageResizer />}
			>
				<EditorCommand className="z-50 h-auto max-h-[330px] overflow-y-auto rounded-md border border-muted bg-background px-1 py-2 shadow-md transition-all">
					<EditorCommandEmpty className="px-2 text-muted-foreground">No results</EditorCommandEmpty>
					<EditorCommandList>
						{suggestionItems.map((item) => (
							<EditorCommandItem
								value={item.title}
								onCommand={(val) => item.command(val)}
								className="flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm hover:bg-accent aria-selected:bg-accent"
								key={item.title}
							>
								<div className="flex h-10 w-10 items-center justify-center rounded-md border border-muted bg-background">
									{item.icon}
								</div>
								<div>
									<p className="font-medium">{item.title}</p>
									<p className="text-xs text-muted-foreground">{item.description}</p>
								</div>
							</EditorCommandItem>
						))}
					</EditorCommandList>
				</EditorCommand>

				<EditorBubble
					tippyOptions={{ placement: "top" }}
					className="flex w-fit max-w-[90vw] overflow-hidden rounded-md border border-muted bg-background shadow-xl"
				>
					<NodeSelector open={openNodeTypeDropdown} onOpenChange={setOpenNodeTypeDropdown} />
					<Separator orientation="vertical" />
					<LinkSelector open={openLink} onOpenChange={setOpenLink} />
					<Separator orientation="vertical" />
					<TextButtons />
					<Separator orientation="vertical" />
					<ColorSelector open={openColor} onOpenChange={setOpenColor} />
				</EditorBubble>
			</EditorContent>
		</EditorRoot>
	);
};

export default RichTextEditor;