shadcn-tiptap

The ImageExtension is an extension of @tiptap/extension-image that adds the following attributes and capabilities:

Attributes

• src: The image source URL (default: null).
• alt: Alternative text (default: null).
• title: Image title/caption (default: null).
• width: The width of the image (default: 100%). Supports manual resizing.
• height: The height of the image (default: null).
• align: The alignment of the image (left, center, or right).

Features

• Resizing: Drag the handles on the left or right sides of the image to scale it (minimum width: 150px).
• Alignment: Use the toolbar buttons to align the image left, center, or right.
• Toolbar Actions: Access via the MoreVertical menu:
  • Duplicate: Duplicates the image node.
  • Full Screen: Sets the width to fit-content.
  • Delete Image: Removes the node from the editor.

To build custom toolbar components, use the useToolbar hook to access the Tiptap editor instance. Most toolbar components follow a pattern of using a Button wrapped in a Tooltip, where the onClick handler uses the editor's command chain (e.g., editor.chain().focus().toggleBold().run()).

Key logic for toolbar buttons:

• Active State: Use editor?.isActive('name') to apply active styling (e.g., bg-accent).
• Availability: Use editor?.can().chain().focus().command().run() to disable the button when the command is not applicable.
• Execution: Use editor?.chain().focus().command().run() to execute the command.

import { useToolbar } from "@/components/toolbars/toolbar-provider";

// Inside your component
const { editor } = useToolbar();

// Example usage in a button
<Button
  onClick={() => editor?.chain().focus().toggleBold().run()}
  disabled={!editor?.can().chain().focus().toggleBold().run()}
  className={editor?.isActive("bold") ? "bg-accent" : ""}
>
  Bold
</Button>

If you prefer manual installation, follow these steps:

1. Install the required @shadcn/ui components: Button and Tooltip.
2. Create a new file at components/toolbars/image-placeholder-toolbar.tsx and paste the component code provided below.

The component uses the useToolbar hook to access the editor instance and executes the insertImagePlaceholder() command when clicked.

"use client";

import { Image } from "lucide-react";
import React from "react";

import { Button, type ButtonProps } from "@/components/ui/button";
import {
	Tooltip,
	TooltipContent,
	TooltipTrigger,
} from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";
import { useToolbar } from "@/components/toolbars/toolbar-provider";

const ImagePlaceholderToolbar = React.forwardRef<
	HTMLButtonElement,
	ButtonProps
>(({ className, onClick, children, ...props }, ref) => {
	const { editor } = useToolbar();
	return (
		<Tooltip>
			<TooltipTrigger asChild>
				<Button
					variant="ghost"
					size="icon"
					className={cn(
						"h-8 w-8",
						editor?.isActive("image-placeholder") && "bg-accent",
						className,
					)
					onClick={(e) => {
						editor?.chain().focus().insertImagePlaceholder().run();
						oldClick?.(e);
					}
					ref={ref}
					{...props}
				>
					{children || <Image className="h-4 w-4" />}
				</Button>
			</TooltipTrigger>
			<TooltipContent>
				<span>Image</span>
			</TooltipContent>
		</Tooltip>
	);
});

ImagePlaceholderToolbar.displayName = "ImagePlaceholderToolbar";

export { ImagePlaceholderToolbar };