### Install @tiptap/extension-starter-kit via npm

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/extensions/starter-kit.mdx

Manually installs the starter kit extension for Tiptap using npm. This command is part of the manual setup process and requires additional steps for toolbar integration.

```bash
npm install @tiptap/extension-starter-kit
```

--------------------------------

### Install shadcn-tiptap Starter Kit via CLI

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/extensions/starter-kit.mdx

Installs the shadcn-tiptap starter kit and its associated toolbar components using a single npx command. This is the recommended and quickest method for integrating the starter kit.

```bash
npx shadcn add https://tiptap.niazmorshed.dev/r/starter-kit.json
```

--------------------------------

### Install shadcn-tiptap via CLI

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/toolbars/color-and-highlight.mdx

Use the npx command to add the shadcn-tiptap configuration directly to your project. This is the quickest way to get started.

```bash
npx shadcn add https://tiptap.niazmorshed.dev/r/color-and-highlight-toolbar.json
```

--------------------------------

### Install shadcn-tiptap Image Placeholder via CLI

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/extensions/image-placeholder.mdx

Use the provided npx command to directly install the image placeholder extension and its associated toolbar component into your project. This is the quickest method for integrating the functionality.

```bash
npx shadcn add https://tiptap.niazmorshed.dev/r/image-placeholder.json
```

--------------------------------

### Add ToolbarProvider using shadcn CLI

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/installation.mdx

Installs the ToolbarProvider component using the shadcn CLI. This command fetches the component configuration from a remote URL and integrates it into your project. Ensure you have the shadcn CLI installed and configured.

```bash
npx shadcn add https://tiptap.niazmorshed.dev/r/toolbar-provider.json
```

--------------------------------

### Install Core Tiptap Packages with npm

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/installation.mdx

Installs the fundamental Tiptap packages required for editor functionality. These include the core library, React integration, and the ProseMirror core. No specific inputs are needed beyond running the command in a project with npm.

```bash
npm install @tiptap/react @tiptap/core @tiptap/pm
```

--------------------------------

### Tiptap Editor Extensions Configuration with HTML Attributes

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/extensions/starter-kit.mdx

Configures Tiptap editor extensions, specifically StarterKit, to include custom HTML attributes for various elements like ordered lists, bullet lists, code, code blocks, and headings. This allows for custom styling via CSS classes. The example also shows basic editor initialization with content.

```javascript
const extensions = [
    StarterKit.configure({
		orderedList: {
			HTMLAttributes: {
				class: "list-decimal",
			},
		},
		bulletList: {
			HTMLAttributes: {
				class: "list-disc",
			},
		},
		code: {
			HTMLAttributes: {
				class: "bg-accent rounded-md p-1",
			},
		},
		horizontalRule: {
			HTMLAttributes: {
				class: "my-2",
			},
		},
		codeBlock: {
			HTMLAttributes: {
				class: "bg-primary text-primary-foreground p-2 text-sm rounded-md p-1",
			},
		},
		heading: {
			levels: [1, 2, 3, 4],
			HTMLAttributes: {
				class: "tiptap-heading",
			},
		},
	}),
    // ...rest of the extensions
];


const editor = useEditor({
    extensions,
    content: "<h2 class=\"tiptap-heading\" style=\"text-align: center\">Hello world 🌍</h2>",
});

```

--------------------------------

### Install Image Placeholder Extension (TypeScript)

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/app/extensions/image-placeholder/page.mdx

Provides the installation code for the custom image placeholder extension in TypeScript. This snippet likely involves importing necessary components and registering the extension within a Tiptap editor instance. No specific input or output is detailed, but it's a setup step.

```typescript
import CodeBlock from '../../_components/code-block';
import ComponentCodePreview from '../../_components/component-code-preview';
import ImagePlaceholderPlayground from "@/components/examples/image-placeholder-playground";


# Image placeholder

A custom extension for image placeholders like Notion. Enabling to embed image with a link or upload.

## Playground
<ComponentCodePreview
  component={<ImagePlaceholderPlayground />}
/>

## Installation code
<CodeBlock filePath='extensions/image-placeholder.tsx' />


## Dependencies

- [@tiptap/react](https://www.npmjs.com/package/@tiptap/react)
- [react-dropzone](https://react-dropzone.js.org/)
- [Button](https://ui.shadcn.com/docs/components/button)
- [Input](https://ui.shadcn.com/docs/components/input)
- [Popover](https://ui.shadcn.com/docs/components/popover)
- [Tabs](https://ui.shadcn.com/docs/components/tabs)
```

--------------------------------

### Configure onDrop Handler for ImagePlaceholder

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/extensions/image-placeholder.mdx

This code configures the onDrop handler for the image placeholder. It logs the files and editor objects to the console.

```jsx
ImagePlaceholder.configure({
	onDrop: (files, editor) => {
		console.log(files, editor);
	},
});
```

--------------------------------

### Configure onEmbed Handler for ImagePlaceholder

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/extensions/image-placeholder.mdx

This code configures the onEmbed handler for the image placeholder. It logs the URL and editor objects to the console.

```jsx
ImagePlaceholder.configure({
	onEmbed: (url, editor) => {
		console.log(url, editor);
	},
});
```

--------------------------------

### Image Extension Configuration and Usage in Tiptap

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/extensions/image.mdx

This snippet shows how to configure the Tiptap editor with the ImageExtension and ImagePlaceholder. It demonstrates the necessary setup within a React component using the useEditor hook. Ensure that StarterKit is also configured as shown.

```jsx
const extensions = [
	StarterKit.configure({
		// ...
	}),
	ImageExtension,
	ImagePlaceholder,
];

const editor = useEditor({
	extensions,
});
```

--------------------------------

### Install Image Extension for TipTap

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/app/extensions/color-highlight/page.mdx

Provides the installation code for the image extension in TipTap. This is a direct code snippet and may not require specific dependencies beyond the base TipTap setup.

```tsx
import CodeBlock from '../../_components/code-block';
import ComponentCodePreview from '../../_components/component-code-preview';
import ColorHighlightExample from "@/components/examples/color-highlight-example";


# Color & Highlight

An implementation of the color and highlight extensions for TipTap. Adding a toolbar for color and highlight using the css variables.

## Playground
<ComponentCodePreview
  component={<ColorHighlightExample />}
/>

## Installation code

<CodeBlock filePath='extensions/image.tsx' />

## Related Extension

- See [Image placeholder](/docs/extensions/image-placeholder) extension.

## Dependencies

- [@tiptap/react](https://www.npmjs.com/package/@tiptap/react)
- [@tiptap/extension-image](https://tiptap.dev/docs/editor/extensions/nodes/image)
- [Button](https://ui.shadcn.com/docs/components/button)
- [Dropdown](https://ui.shadcn.com/docs/components/dropdown)
- [Separator](https://ui.shadcn.com/docs/components/separator)
```

--------------------------------

### Configure onDropRejected Handler for ImagePlaceholder

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/extensions/image-placeholder.mdx

This code configures the onDropRejected handler for the image placeholder. It logs the files and editor objects to the console.

```jsx
ImagePlaceholder.configure({
	onDropRejected: (files, editor) => {
		console.log(files, editor);
	},
});
```

--------------------------------

### Install shadcn-tiptap using CLI

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/toolbars/search-and-replace.mdx

Quickly install shadcn-tiptap by running the provided npx command in your terminal. This is the recommended method for most users.

```bash
npx shadcn add https://tiptap.niazmorshed.dev/r/search-and-replace-toolbar.json
```

--------------------------------

### Tiptap Editor CSS Styling

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/installation.mdx

Provides essential CSS rules for styling the Tiptap editor, including base ProseMirror styles, heading styles, placeholder behavior, list indentation, and blockquote formatting. These styles are typically placed in a global CSS file.

```css
.ProseMirror {
	@apply px-4 pt-2;
	outline: none !important;
}

h1.tiptap-heading {
	@apply mb-6 mt-8 text-4xl font-bold;
}

h2.tiptap-heading {
	@apply mb-4 mt-6 text-3xl font-bold;
}

h3.tiptap-heading {
	@apply mb-3 mt-4 text-xl font-bold;
}

h1.tiptap-heading:first-child,
h2.tiptap-heading:first-child,
h3.tiptap-heading:first-child {
	margin-top: 0;
}

h1.tiptap-heading + h2.tiptap-heading,
h1.tiptap-heading + h3.tiptap-heading,
h2.tiptap-heading + h1.tiptap-heading,
h2.tiptap-heading + h3.tiptap-heading,
h3.tiptap-heading + h1.tiptap-heading,
h3.tiptap-heading + h2.tiptap-heading {
	margin-top: 0;
}

.tiptap p.is-editor-empty:first-child::before {
	@apply pointer-events-none float-left h-0 text-accent-foreground;
	content: attr(data-placeholder);
}

.tiptap ul,
.tiptap ol {
	padding: 0 1rem;
}

.tiptap blockquote {
	border-left: 3px solid gray;
	margin: 1.5rem 0;
	padding-left: 1rem;
}

```

--------------------------------

### Install Image Extension for TipTap

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/app/extensions/image/page.mdx

This code snippet shows how to install the Image extension for TipTap. It is typically used within a TipTap editor setup.

```tsx
import CodeBlock from '../../_components/code-block';
import ComponentCodePreview from '../../_components/component-code-preview';
import ImageExtendedPlayground from '@/components/examples/image-extended-playground';


# Image (Extended)

This extension enhances the standard image functionality provided by TipTap. This extension allows for more comprehensive interactions with image elements, enabling features such as resizing, positioning, and user interactions.

## Playground
<ComponentCodePreview
  component={<ImageExtendedPlayground />}
/>

## Installation code

<CodeBlock filePath='extensions/image.tsx' />
```

--------------------------------

### Configure HTML Attributes for ImagePlaceholder

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/extensions/image-placeholder.mdx

This code configures the HTML attributes for the image placeholder. It sets the class attribute to "w-full".

```jsx
ImagePlaceholder.configure({
	HTMLAttributes: {
		class: "w-full",
	},
});
```

--------------------------------

### Install Image Placeholder Toolbar via CLI

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/toolbars/image-placeholder.mdx

Installs the Image Placeholder Toolbar using the shadcn CLI. This command fetches the necessary configuration and code from a remote URL.

```bash
npx shadcn add https://tiptap.niazmorshed.dev/r/image-placeholder-toolbar.json
```

--------------------------------

### Install TipTap Search & Replace Extension

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/app/extensions/search-and-replace/page.mdx

This code snippet shows how to install the Search & Replace extension for TipTap. Ensure you have @tiptap/core and @tiptap/pm installed as dependencies.

```typescript
import CodeBlock from '../../_components/code-block';
import ComponentCodePreview from '../../_components/component-code-preview';
import SearchReplacePlayground from "@/components/examples/search-and-replace-playground";


# Search & Replace

The Search & Replace extension for TipTap allows to efficiently find and replace specific content within the editor. Key features include search functionality, case sensitivity, sequential navigation & replace option.

## Playground

<ComponentCodePreview
  component={<SearchReplacePlayground />} 
/>

## Installation code

<CodeBlock filePath='extensions/search-and-replace.tsx' />


## Dependencies

- [@tiptap/core](https://www.npmjs.com/package/@tiptap/core)
- [@tiptap/pm](https://www.npmjs.com/package/@tiptap/pm)
```

--------------------------------

### Install Color and Highlight Extensions via CLI

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/extensions/color-and-highlight.mdx

Installs the associated toolbar component for color and highlight extensions using the shadcn CLI. Ensure you have npx available to run this command. The command fetches configuration from a provided URL.

```bash
npx shadcn add https://tiptap.niazmorshed.dev/r/color-and-highlight.json
```

--------------------------------

### Add Strikethrough Toolbar Component (React/JSX)

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/extensions/starter-kit.mdx

Provides a 'Strikethrough' toolbar button component using React, shadcn/ui components, and Tiptap integration. It enables toggling strikethrough formatting and includes disabled state management.

```jsx
"use client";

import { Strikethrough } 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 StrikeThroughToolbar = 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("strike") && "bg-accent",
							className,
						)}
						onClick={(e) => {
							editor?.chain().focus().toggleStrike().run();
							onClick?.(e);
						}}
						disabled={!editor?.can().chain().focus().toggleStrike().run()}
						ref={ref}
						{...props}
					>
						{children || <Strikethrough className="h-4 w-4" />}
					</Button>
				</TooltipTrigger>
				<TooltipContent>
					<span>Strikethrough</span>
					<span className="ml-1 text-xs text-gray-11">(cmd + shift + x)</span>
				</TooltipContent>
			</Tooltip>
		);
	},
);

```

--------------------------------

### Handle Accepted Files in React

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/extensions/image-placeholder.mdx

This React function handles accepted files, reads their data URLs, and inserts them as images into the editor. It utilizes the FileReader API and editor methods to manage image insertion and triggers an optional onDrop event.

```typescript
const handleAcceptedFiles = (acceptedFiles: File[]) => {
		acceptedFiles.map((file) => {
			const reader = new FileReader();

			reader.onload = () => {
				const src = reader.result as string;
				editor.chain().focus().setImage({ src }).run();
			};

			reader.readAsDataURL(file);
		});

		if (extension.options.onDrop) {
			extension.options.onDrop(acceptedFiles, editor);
		}
	};
```

--------------------------------

### ToolbarProvider Component for Tiptap Editor

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/installation.mdx

A React component that provides the Tiptap editor instance to its children via context. It accepts the editor object as a prop and exports a `useToolbar` hook for accessing the editor. This component is crucial for managing toolbar functionality within the Tiptap editor.

```jsx
"use client";

import type { Editor } from "@tiptap/react";
import React from "react";

export interface ToolbarContextProps {
	editor: Editor;
}

export const ToolbarContext = React.createContext<ToolbarContextProps | null>(
	null,
);

interface ToolbarProviderProps {
	editor: Editor;
	children: React.ReactNode;
}

export const ToolbarProvider = ({ editor, children }: ToolbarProviderProps) => {
	return (
		<ToolbarContext.Provider value={{ editor }}>
			{children}
		</ToolbarContext.Provider>
	);
};

export const useToolbar = () => {
	const context = React.useContext(ToolbarContext);

	if (!context) {
		throw new Error("useToolbar must be used within a ToolbarProvider");
	}

	return context;
};

```

--------------------------------

### Image Placeholder Tiptap Extension Component

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/extensions/image-placeholder.mdx

This React component implements the Tiptap Image Placeholder extension. It handles file drops, URL embedding, and integrates with shadcn/ui components for user interaction. It requires several UI components and Tiptap core functionalities.

```typescriptreact
"use client";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
	Popover,
	PopoverContent,
	PopoverTrigger,
} from "@/components/ui/popover";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
	NODE_HANDLES_SELECTED_STYLE_CLASSNAME,
	cn,
	isValidUrl,
} from "@/lib/utils";
import {
	type CommandProps,
	type Editor,
	Node,
	type NodeViewProps,
	NodeViewWrapper,
	ReactNodeViewRenderer,
	mergeAttributes,
} from "@tiptap/react";
import { Image, Link, Upload } from "lucide-react";
import { type FormEvent, useState } from "react";

export interface ImagePlaceholderOptions {
	HTMLAttributes: Record<string, any>;
	onDrop: (files: File[], editor: Editor) => void;
	onDropRejected?: (files: File[], editor: Editor) => void;
	onEmbed: (url: string, editor: Editor) => void;
	allowedMimeTypes?: Record<string, string[]>;
	maxFiles?: number;
	maxSize?: number;
}

declare module "@tiptap/core" {
	interface Commands<ReturnType> {
		/**
		 * Inserts an image placeholder
		 */
		imagePlaceholder: {
			insertImagePlaceholder: () => ReturnType;
		};
	}
}

export const ImagePlaceholder = Node.create<ImagePlaceholderOptions>({
	name: "image-placeholder",

	addOptions() {
		return {
			HTMLAttributes: {},
			onDrop: () => {},
			onDropRejected: () => {},
			onEmbed: () => {},
		};
	},

	group: "block",

	parseHTML() {
		return [{ tag: `div[data-type="${this.name}"]` }];
	},

	renderHTML({ HTMLAttributes }) {
		return ["div", mergeAttributes(HTMLAttributes)];
	},

	addNodeView() {
		return ReactNodeViewRenderer(ImagePlaceholderComponent, {
			className: NODE_HANDLES_SELECTED_STYLE_CLASSNAME,
		});
	},

	addCommands() {
		return {
			insertImagePlaceholder: () => (props: CommandProps) => {
				return props.commands.insertContent({
					type: "image-placeholder",
				});
			},
		};
	},
});

function ImagePlaceholderComponent(props: NodeViewProps) {
	const { editor, extension, selected } = props;

	const [open, setOpen] = useState(false);
	const [url, setUrl] = useState("");
	const [urlError, setUrlError] = useState(false);
	const [isDragActive, setIsDragActive] = useState(false);
	const [isDragReject, setIsDragReject] = useState(false);

	const handleDragEnter = (e: React.DragEvent<HTMLDivElement>) => {
		e.preventDefault();
		e.stopPropagation();
		setIsDragActive(true);
	};

	const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
		e.preventDefault();
		e.stopPropagation();
		setIsDragActive(false);
		setIsDragReject(false);
	};

	const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
		e.preventDefault();
		e.stopPropagation();
	};

	const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
		e.preventDefault();
		e.stopPropagation();
		setIsDragActive(false);
		setIsDragReject(false);

		const { files } = e.dataTransfer;
		const acceptedFiles: File[] = [];
		const rejectedFiles: File[] = [];

		Array.from(files).map((file) => {
			if (
				extension.options.allowedMimeTypes &&
				!Object.keys(extension.options.allowedMimeTypes).some((type)
				) =>
					file.type.match(type),
			) {
				rejectedFiles.push(file);
			} else if (
				extension.options.maxSize &&
				file.size > extension.options.maxSize
			) {
				rejectedFiles.push(file);
			} else {
				acceptedFiles.push(file);
			}
		});

		if (rejectedFiles.length > 0) {
			setIsDragReject(true);
			extension.options.onDropRejected?.(rejectedFiles, editor);
		}

		if (acceptedFiles.length > 0) {
			handleAcceptedFiles(acceptedFiles);
		}
	};

```

--------------------------------

### Add Blockquote Toolbar using React

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/extensions/starter-kit.mdx

Implements a Blockquote toolbar button for a rich text editor. It uses shadcn-ui components for the button and tooltip, and integrates with Tiptap's editor instance to toggle blockquote formatting. Dependencies include React, shadcn-ui components, and Tiptap.

```jsx
"use client";

import { Blockquote } 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 BlockquoteToolbar = 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("blockquote") && "bg-accent",
							className,
						)}
						onClick={(e) => {
							editor?.chain().focus().toggleBlockquote().run();
							onClick?.(e);
						}}
						disabled={!editor?.can().chain().focus().toggleBlockquote().run()}
						ref={ref}
						{...props}
					>
						{children || <Blockquote className="h-4 w-4" />}
					</Button>
				</TooltipTrigger>
				<TooltipContent>
					<span>Blockquote</span>
				</TooltipContent>
			</Tooltip>
		);
	},
);

BlockquoteToolbar.displayName = "BlockquoteToolbar";

export { BlockquoteToolbar };

```

--------------------------------

### Insert Image Placeholder Command (React)

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/extensions/image-placeholder.mdx

Executes the command to insert an image placeholder into the editor content. This command is typically called when a user intends to add an image. It does not require any arguments.

```jsx
editor.commands.insertImagePlaceholder();
```

--------------------------------

### Install Shadcn-Tiptap Image Extension via CLI

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/extensions/image.mdx

Use this npx command to add the shadcn-tiptap image extension and its associated toolbar component directly via the command line interface.

```bash
npx shadcn add https://tiptap.niazmorshed.dev/r/image.json
```

--------------------------------

### Manual Installation of Search and Replace Toolbar for Tiptap

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/toolbars/search-and-replace.mdx

This snippet shows the manual installation process for the Search and Replace Toolbar component in a Tiptap editor using React and shadcn/ui. It requires installing several UI components and then copying the provided JSX code into a specific file path.

```jsx
"use client";

import { ArrowLeft, ArrowRight, Repeat, X } from "lucide-react";
import { useEffect, useState } from "react";

import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
	Popover,
	PopoverContent,
	PopoverTrigger,
} from "@/components/ui/popover";
import { Separator } from "@/components/ui/separator";
import {
	Tooltip,
	TooltipContent,
	TooltipTrigger,
} from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";
import type { SearchAndReplaceStorage } from "@/components/extensions/search-and-replace";
import { useToolbar } from "@/components/toolbars/toolbar-provider";

export function SearchAndReplaceToolbar() {
	const { editor } = useToolbar();

	const [open, setOpen] = useState(false);
	const [replacing, setReplacing] = useState(false);
	const [searchText, setSearchText] = useState("");
	const [replaceText, setReplaceText] = useState("");
	const [checked, setChecked] = useState(false);

	const results = editor?.storage?.searchAndReplace
		.results as SearchAndReplaceStorage["results"];
	const selectedResult = editor?.storage?.searchAndReplace
		.selectedResult as SearchAndReplaceStorage["selectedResult"];

	const replace = () => editor?.chain().replace().run();
	const replaceAll = () => editor?.chain().replaceAll().run();
	const selectNext = () => editor?.chain().selectNextResult().run();
	const selectPrevious = () => editor?.chain().selectPreviousResult().run();

	useEffect(() => {
		editor?.chain().setSearchTerm(searchText).run();
	}, [searchText, editor]);

	useEffect(() => {
		editor?.chain().setReplaceTerm(replaceText).run();
	}, [replaceText, editor]);

	useEffect(() => {
		editor?.chain().setCaseSensitive(checked).run();
	}, [checked, editor]);

	useEffect(() => {
		if (!open) {
			setReplaceText("");
			setSearchText("");
			setReplacing(false);
		}
	}, [open]);

	return (
		<Popover open={open}>
			<Tooltip>
				<TooltipTrigger asChild>
					<PopoverTrigger disabled={!editor} asChild>
						<Button
							variant="ghost"
							size="sm"
							onClick={() => {
								setOpen(!open);
							}}
							className={cn("h-8 w-max px-3 font-normal")}
						>
							<Repeat className="mr-2 h-4 w-4" />
							<p>Search & Replace</p>
						</Button>
					</PopoverTrigger>
				</TooltipTrigger>
				<TooltipContent>
					<span>Search & Replace</span>
				</TooltipContent>
			</Tooltip>

			<PopoverContent
				align="end"
				onCloseAutoFocus={(e) => {
					e.preventDefault();
				}}
				onEscapeKeyDown={() => {
					setOpen(false);
				}}
				className="relative flex w-[400px] px-3 py-2.5"
			>
				{!replacing ? (
					<div className={cn("relative flex gap-1.5 items-center")}>
						<Input
							value={searchText}
							className=" w-48"
							onChange={(e) => {
								setSearchText(e.target.value);
							}}
							placeholder="Search..."
						/>
						<span>
							{results?.length === 0 ? selectedResult : selectedResult + 1}/
							{results?.length}
						</span>
						<Button
							onClick={selectPrevious}
							size="icon"
							variant="ghost"
							className="size-7"
						>
							<ArrowLeft className="size-4" />
						</Button>
						<Button
							onClick={selectNext}
							size="icon"
							className="size-7"
							variant="ghost"
						>
							<ArrowRight className="h-4 w-4" />
						</Button>
						<Separator orientation="vertical" className="h-7 mx-0.5" />
						<Button
							onClick={() => {
								setReplacing(true);
							}}
							size="icon"
							className="size-7"
							variant="ghost"
						>
							<Repeat className="h-4 w-4" />
						</Button>
						<Button
							onClick={() => {
								setOpen(false);
							}}
							size="icon"
							className="size-7"
							variant="ghost"
						>
							<X className="h-4 w-4" />
						</Button>
					</div>
				) : (
					<div className={cn("relative w-full")}>
						<X
							onClick={() => {
								setOpen(false);
							}}

```

--------------------------------

### Install Highlight and Color Dependencies

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/extensions/color-and-highlight.mdx

Installs the necessary npm packages for Tiptap's text style, highlight, and color extensions. These dependencies are required for manual installation of the extensions.

```bash
npm install @tiptap/extension-text-style @tiptap/extension-highlight @tiptap/extension-color
```

--------------------------------

### Add Code Block Toolbar using React

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/extensions/starter-kit.mdx

Implements a Code Block toolbar button for a rich text editor. It utilizes shadcn-ui for UI elements and Tiptap for editor functionality, allowing users to toggle code block formatting. Requires React, shadcn-ui, and Tiptap dependencies.

```jsx
"use client";

import { Code, Code2 } 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 CodeBlockToolbar = 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("codeBlock") && "bg-accent",
							className,
						)}
						onClick={(e) => {
							editor?.chain().focus().toggleCodeBlock().run();
							onClick?.(e);
						}}
						disabled={!editor?.can().chain().focus().toggleCodeBlock().run()}
						ref={ref}
						{...props}
					>
						{children || <Code className="h-4 w-4" />}
					</Button>
				</TooltipTrigger>
				<TooltipContent>
					<span>Code Block</span>
				</TooltipContent>
			</Tooltip>
		);
	},
);

CodeBlockToolbar.displayName = "CodeBlockToolbar";

export { CodeBlockToolbar };

```

--------------------------------

### Install Tiptap Image Extension Dependencies

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/extensions/image.mdx

This command installs the core Tiptap image extension package using npm. It's a prerequisite for the manual installation of the shadcn-tiptap image component.

```bash
npm install @tiptap/extension-image
```

--------------------------------

### Install Search and Replace extension via CLI

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/extensions/search-and-replace.mdx

Installs the search and replace extension and associated toolbar component for the tiptap editor using the shadcn CLI. This command automates the installation process.

```bash
npx shadcn add https://tiptap.niazmorshed.dev/r/search-and-replace.json
```

--------------------------------

### Configure Image Placeholder Maximum Files (React)

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/extensions/image-placeholder.mdx

Defines the maximum number of files that can be uploaded through the image placeholder. This helps manage storage and user experience by limiting the quantity of uploads. The configuration takes a single integer value.

```jsx
ImagePlaceholder.configure({
	maxFiles: 1,
});
```

--------------------------------

### Handle File Input Change in React

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/extensions/image-placeholder.mdx

This React function handles the file input change event, extracting files from the event and passing them to the handleAcceptedFiles function. It converts the FileList to an array for easier processing.

```typescript
const handleFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
		const files = Array.from(e.target.files || []);
		handleAcceptedFiles(files);
	};
```

--------------------------------

### Add Hard Break Toolbar using React

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/extensions/starter-kit.mdx

Implements a toolbar button for inserting a hard line break within the text editor. This component leverages shadcn-ui for its appearance and Tiptap for editor functionality. It requires React, shadcn-ui, and Tiptap.

```jsx
"use client";

import { WrapText } 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 HardBreakToolbar = 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", className)}
						onClick={(e) => {
							editor?.chain().focus().setHardBreak().run();
							onClick?.(e);
						}}
						ref={ref}
						{...props}
					>
						{children || <WrapText className="h-4 w-4" />}
					</Button>
				</TooltipTrigger>
				<TooltipContent>
					<span>Hard break</span>
				</TooltipContent>
			</Tooltip>
		);
	},
);

HardBreakToolbar.displayName = "HardBreakToolbar";

export { HardBreakToolbar };

```

--------------------------------

### Add Redo Toolbar using React

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/extensions/starter-kit.mdx

Implements a Redo toolbar button for the rich text editor, enabling users to revert undo actions. This component is built with React, using shadcn-ui for the button and tooltip, and Tiptap for editor integration. Dependencies include React, shadcn-ui, and Tiptap.

```jsx
"use client";

import { CornerUpRight } 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 RedoToolbar = 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", className)}
						onClick={(e) => {
							editor?.chain().focus().redo().run();
							onClick?.(e);
						}}
						disabled={!editor?.can().chain().focus().redo().run()}
						ref={ref}
						{...props}
					>
						{children || <CornerUpRight className="h-4 w-4" />}
					</Button>
				</TooltipTrigger>
				<TooltipContent>
					<span>Redo</span>
				</TooltipContent>
			</Tooltip>
		);
	},
);

RedoToolbar.displayName = "RedoToolbar";

export { RedoToolbar };

```

--------------------------------

### Configure Image Placeholder Maximum Size (React)

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/extensions/image-placeholder.mdx

Specifies the maximum allowed file size for images uploaded via the placeholder, measured in bytes. This is crucial for performance and resource management. The configuration accepts an integer representing the size in bytes.

```jsx
ImagePlaceholder.configure({
	maxSize: 1024 * 1024, // 1MB
});
```

--------------------------------

### Add Code Toolbar Component (React)

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/extensions/starter-kit.mdx

Implements a 'Code' toolbar button for a Tiptap editor using React and shadcn/ui components. It allows users to toggle inline code formatting. Dependencies include 'lucide-react' for icons and shadcn/ui's Button, Tooltip, and utility components. It requires access to the Tiptap editor instance via a context provider.

```jsx
"use client";

import { Code2 } 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 CodeToolbar = 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("code") && "bg-accent",
							className,
						)}
						onClick={(e) => {
							editor?.chain().focus().toggleCode().run();
							onClick?.(e);
						}}
						disabled={!editor?.can().chain().focus().toggleCode().run()}
						ref={ref}
						{...props}
					>
						{children || <Code2 className="h-4 w-4" />}
					</Button>
				</TooltipTrigger>
				<TooltipContent>
					<span>Code</span>
				</TooltipContent>
			</Tooltip>
		);
	},
);

CodeToolbar.displayName = "CodeToolbar";

export { CodeToolbar };

```

--------------------------------

### Add Blockquote Toolbar Component (React)

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/extensions/starter-kit.mdx

This React component, 'BlockquoteToolbar', integrates a button for toggling blockquote formatting within a Tiptap editor using shadcn/ui. It relies on 'lucide-react' for icons and shadcn/ui's Button and Tooltip components. The editor's functionality is accessed through a context provider.

```jsx
"use client";

import { TextQuote } 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 BlockquoteToolbar = 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("blockquote") && "bg-accent",
							className,
						)}
						onClick={(e) => {
							editor?.chain().focus().toggleBlockquote().run();
							onClick?.(e);
						}}
						disabled={!editor?.can().chain().focus().toggleBlockquote().run()}
						ref={ref}
						{...props}
					>
						{children || <TextQuote className="h-4 w-4" />}
					</Button>
				</TooltipTrigger>
				<TooltipContent>
					<span>Blockquote</span>
				</TooltipContent>
			</Tooltip>
		);
	},
);

BlockquoteToolbar.displayName = "BlockquoteToolbar";

export { BlockquoteToolbar };

```

--------------------------------

### Add Bold Toolbar Component (React/JSX)

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/extensions/starter-kit.mdx

Implements a 'Bold' toolbar button component using React, shadcn/ui Button and Tooltip, and Tiptap's editor instance. It handles toggling bold formatting and disabling the button when the action is not possible.

```jsx
"use client";

import { BoldIcon } 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 BoldToolbar = 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("bold") && "bg-accent",
							className,
						)}
						onClick={(e) => {
							editor?.chain().focus().toggleBold().run();
							onClick?.(e);
						}}
						disabled={!editor?.can().chain().focus().toggleBold().run()}
						ref={ref}
						{...props}
					>
						{children || <BoldIcon className="h-4 w-4" />}
					</Button>
				</TooltipTrigger>
				<TooltipContent>
					<span>Bold</span>
					<span className="ml-1 text-xs text-gray-11">(cmd + b)</span>
				</TooltipContent>
			</Tooltip>
		);
	},
);

BoldToolbar.displayName = "BoldToolbar";

export { BoldToolbar };

```

--------------------------------

### Add Undo Toolbar using React

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/extensions/starter-kit.mdx

Implements an Undo toolbar button for the rich text editor, allowing users to reverse their last action. This component is built using React, shadcn-ui for UI elements, and Tiptap for editor integration. Dependencies include React, shadcn-ui, and Tiptap.

```jsx
"use client";

import { CornerUpLeft } 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 UndoToolbar = 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", className)}
						onClick={(e) => {
							editor?.chain().focus().undo().run();
							onClick?.(e);
						}}
						disabled={!editor?.can().chain().focus().undo().run()}
						ref={ref}
						{...props}
					>
						{children || <CornerUpLeft className="h-4 w-4" />}
					</Button>
				</TooltipTrigger>
				<TooltipContent>
					<span>Undo</span>
				</TooltipContent>
			</Tooltip>
		);
	},
);

UndoToolbar.displayName = "UndoToolbar";

export { UndoToolbar };

```

--------------------------------

### Tiptap Search and Replace Extension Setup

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/extensions/search-and-replace.mdx

Initializes the search and replace extension for Tiptap. It sets default options for highlighting CSS classes and regex disabling, and defines the initial storage state for search-related data.

```typescript
export const SearchAndReplace = Extension.create<
	SearchAndReplaceOptions,
	SearchAndReplaceStorage
>({
	name: "searchAndReplace",

	addOptions() {
		return {
			searchResultClass: " bg-yellow-200",
			selectedResultClass: "bg-yellow-500",
			disableRegex: true,
		};
	},

	addStorage() {
		return {
			searchTerm: "",
			replaceTerm: "",
			results: [],
			lastSearchTerm: "",
			selectedResult: 0,
			lastSelectedResult: 0,
			caseSensitive: false,
			lastCaseSensitiveState: false,
		};
	},
// ... rest of the extension
```

--------------------------------

### Add Ordered List Toolbar Component (React)

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/extensions/starter-kit.mdx

This React component, 'OrderedListToolbar', adds a button to toggle ordered list formatting in a Tiptap editor using shadcn/ui. It utilizes 'lucide-react' for the icon and shadcn/ui's Button and Tooltip components. Access to the editor instance is managed through a context provider.

```jsx
"use client";

import { ListOrdered } 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 OrderedListToolbar = 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("orderedList") && "bg-accent",
							className,
						)}
						onClick={(e) => {
							editor?.chain().focus().toggleOrderedList().run();
							onClick?.(e);
						}}
						disabled={!editor?.can().chain().focus().toggleOrderedList().run()}
						ref={ref}
						{...props}
					>
						{children || <ListOrdered className="h-4 w-4" />}
					</Button>
				</TooltipTrigger>
				<TooltipContent>
					<span>Ordered list</span>
				</TooltipContent>
			</Tooltip>
		);
	},
);

OrderedListToolbar.displayName = "OrderedListToolbar";

export { OrderedListToolbar };

```

--------------------------------

### Add Bullet List Toolbar Component (React)

Source: https://github.com/niazmorshed2007/shadcn-tiptap/blob/main/src/content/docs/extensions/starter-kit.mdx

Provides a 'Bullet List' toolbar button for a Tiptap editor, built with React and shadcn/ui. This component toggles bullet list formatting. It depends on 'lucide-react' for icons and shadcn/ui components for UI elements. The editor's state is accessed via a context provider.

```jsx
"use client";

import { List } 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 BulletListToolbar = 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("bulletList") && "bg-accent",
							className,
						)}
						onClick={(e) => {
							editor?.chain().focus().toggleBulletList().run();
							onClick?.(e);
						}}
						disabled={!editor?.can().chain().focus().toggleBulletList().run()}
						ref={ref}
						{...props}
					>
						{children || <List className="h-4 w-4" />}
					</Button>
				</TooltipTrigger>
				<TooltipContent>
					<span>Bullet list</span>
				</TooltipContent>
			</Tooltip>
		);
	},
);

BulletListToolbar.displayName = "BulletListToolbar";

export { BulletListToolbar };

```