[V0_FILE]typescriptreact:file="components/tiptap/rich-text-editor.tsx" "use client" import "./tiptap.css" import { cn } from "@/lib/utils" import { ImageExtension } from "@/components/tiptap/extensions/image" import { ImagePlaceholder } from "@/components/tiptap/extensions/image-placeholder" import SearchAndReplace from "@/components/tiptap/extensions/search-and-replace" import { Color } from "@tiptap/extension-color" import Highlight from "@tiptap/extension-highlight" import Link from "@tiptap/extension-link" import Subscript from "@tiptap/extension-subscript" import Superscript from "@tiptap/extension-superscript" import TextAlign from "@tiptap/extension-text-align" import TextStyle from "@tiptap/extension-text-style" import Typography from "@tiptap/extension-typography" import Underline from "@tiptap/extension-underline" import { EditorContent, type Extension, useEditor } from "@tiptap/react" import StarterKit from "@tiptap/starter-kit" import { TipTapFloatingMenu } from "@/components/tiptap/extensions/floating-menu" import { FloatingToolbar } from "@/components/tiptap/extensions/floating-toolbar" import { EditorToolbar } from "./toolbars/editor-toolbar" import Placeholder from "@tiptap/extension-placeholder" import { content } from "@/lib/content" const extensions = [ StarterKit.configure({ orderedList: { HTMLAttributes: { class: "list-decimal", }, }, bulletList: { HTMLAttributes: { class: "list-disc", }, }, heading: { levels: [1, 2, 3, 4], }, }), Placeholder.configure({ emptyNodeClass: "is-editor-empty", placeholder: ({ node }) => { switch (node.type.name) { case "heading": return `Heading ${node.attrs.level}` case "detailsSummary": return "Section title" case "codeBlock": // never show the placeholder when editing code return "" default: return "Write, type '/' for commands" } }, includeChildren: false, }), TextAlign.configure({ types: ["heading", "paragraph"], }), TextStyle, Subscript, Superscript, Underline, Link, Color, Highlight.configure({ multicolor: true, }), ImageExtension, ImagePlaceholder, SearchAndReplace, Typography, ] export function RichTextEditorDemo({ className }: { className?: string }) { const editor = useEditor({ immediatelyRender: false, extensions: extensions as Extension[], content, editorProps: { attributes: { class: "max-w-full focus:outline-none", }, }, onUpdate: ({ editor }) => { // do what you want to do with output // Update stats // saving as text/json/hmtml // const text = editor.getHTML(); console.log(editor.getText()) }, }) if (!editor) return null return (

) } [V0_FILE]typescriptreact:file="components/tiptap/tiptap.css" :root { /* Color System */ --editor-text-default: hsl(240 10% 3.9%); --editor-text-gray: hsl(240 3.8% 46.1%); --editor-text-brown: hsl(25 95% 53%); --editor-text-orange: hsl(24 95% 53%); --editor-text-yellow: hsl(48 96% 53%); --editor-text-green: hsl(142 71% 45%); --editor-text-blue: hsl(221 83% 53%); --editor-text-purple: hsl(269 97% 85%); --editor-text-pink: hsl(336 80% 58%); --editor-text-red: hsl(0 84% 60%); /* Background Colors */ --editor-bg-default: hsl(0 0% 100%); --editor-bg-subtle: hsl(0 0% 98%); --editor-bg-muted: hsl(240 5% 96%); /* Highlight Colors */ --editor-highlight-default: hsl(0 0% 98%); --editor-highlight-gray: hsl(240 5% 96%); --editor-highlight-brown: hsl(43 96% 96%); --editor-highlight-orange: hsl(33 100% 96%); --editor-highlight-yellow: hsl(54 100% 96%); --editor-highlight-green: hsl(142 71% 96%); --editor-highlight-blue: hsl(217 91% 96%); --editor-highlight-purple: hsl(269 97% 96%); --editor-highlight-pink: hsl(336 80% 96%); --editor-highlight-red: hsl(0 84% 96%); /* Border Colors */ --editor-border-default: hsl(240 5% 88%); --editor-border-strong: hsl(240 5% 65%); /* Spacing System */ --editor-spacing-1: 0.25rem; --editor-spacing-2: 0.5rem; --editor-spacing-3: 0.75rem; --editor-spacing-4: 1rem; --editor-spacing-6: 1.5rem; --editor-spacing-8: 2rem; --editor-spacing-12: 3rem; --editor-spacing-16: 4rem; /* Typography */ --editor-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --editor-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --editor-font-serif: Georgia, Cambria, "Times New Roman", Times, serif; /* Animation */ --editor-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --editor-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1); --editor-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); /* Shadows */ --editor-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --editor-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --editor-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); } /* Dark Mode Custom Properties */ .dark { --editor-text-default: hsl(0 0% 98%); --editor-text-gray: hsl(240 5% 64.9%); --editor-text-brown: hsl(25 95% 53%); --editor-text-orange: hsl(24 95% 53%); --editor-text-yellow: hsl(48 96% 53%); --editor-text-green: hsl(142 71% 45%); --editor-text-blue: hsl(221 83% 53%); --editor-text-purple: hsl(269 97% 85%); --editor-text-pink: hsl(336 80% 58%); --editor-text-red: hsl(0 84% 60%); --editor-bg-default: hsl(240 10% 3.9%); --editor-bg-subtle: hsl(240 3.7% 15.9%); --editor-bg-muted: hsl(240 5% 26%); --editor-highlight-default: hsl(240 3.7% 15.9%); --editor-highlight-gray: hsl(240 5% 26%); --editor-highlight-brown: hsl(43 96% 10%); --editor-highlight-orange: hsl(33 100% 10%); --editor-highlight-yellow: hsl(54 100% 10%); --editor-highlight-green: hsl(142 71% 10%); --editor-highlight-blue: hsl(217 91% 10%); --editor-highlight-purple: hsl(269 97% 10%); --editor-highlight-pink: hsl(336 80% 10%); --editor-highlight-red: hsl(0 84% 10%); --editor-border-default: hsl(240 5% 26%); --editor-border-strong: hsl(240 5% 64.9%); } /* Core Editor Styles */ .ProseMirror { caret-color: var(--editor-text-default); outline: none; padding: var(--editor-spacing-16) var(--editor-spacing-8); margin: 0 auto; max-width: 90ch; font-family: var(--editor-font-sans); position: relative; /* background-color: var(--editor-bg-default); */ color: var(--editor-text-default); transition: all var(--editor-transition-normal); min-height: 100vh; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .ProseMirror:focus { outline: none; box-shadow: none; } .ProseMirror .selection, .ProseMirror *::selection { background-color: var(--editor-highlight-blue); /* color: var(--editor-text-default); */ } .ProseMirror > .react-renderer { margin: var(--editor-spacing-12) 0; transition: all var(--editor-transition-normal); } .ProseMirror > .react-renderer:first-child { margin-top: 0; } .ProseMirror > .react-renderer:last-child { margin-bottom: 0; } /* Typography Styles */ .ProseMirror p { line-height: 1.75; margin: var(--editor-spacing-4) 0; color: var(--editor-text-default); font-size: 1.125rem; } .ProseMirror > p { margin: var(--editor-spacing-6) 0; } .ProseMirror h1, .ProseMirror h2, .ProseMirror h3, .ProseMirror h4 { font-family: var(--editor-font-sans); font-weight: 700; letter-spacing: -0.025em; color: var(--editor-text-default); scroll-margin-top: var(--editor-spacing-16); line-height: 1.2; } .ProseMirror h1 { font-size: 2.5rem; margin: var(--editor-spacing-8) 0 var(--editor-spacing-4); } .ProseMirror h2 { font-size: 2rem; margin: var(--editor-spacing-8) 0 var(--editor-spacing-4); } .ProseMirror h3 { font-size: 1.5rem; margin: var(--editor-spacing-6) 0 var(--editor-spacing-3); } .ProseMirror h4 { font-size: 1.25rem; margin: var(--editor-spacing-4) 0 var(--editor-spacing-2); } .ProseMirror a { color: var(--editor-text-blue); cursor: pointer; text-decoration: underline; text-decoration-thickness: 0.1em; text-underline-offset: 0.2em; transition: all var(--editor-transition-fast); } .ProseMirror a:hover { color: var(--editor-text-blue); text-decoration-thickness: 0.2em; } .ProseMirror code { font-family: var(--editor-font-mono); font-size: 0.9em; background-color: var(--editor-bg-muted); padding: 0.2em 0.4em; border-radius: 4px; color: var(--editor-text-default); border: 1px solid var(--editor-border-default); } .ProseMirror pre { margin: var(--editor-spacing-6) 0; padding: var(--editor-spacing-4); background-color: var(--editor-bg-subtle); border-radius: 8px; overflow-x: auto; border: 1px solid var(--editor-border-default); } .ProseMirror pre code { background-color: transparent; padding: 0; border: none; font-size: 0.875rem; line-height: 1.7; color: var(--editor-text-default); } .ProseMirror blockquote { margin: var(--editor-spacing-6) 0; padding: var(--editor-spacing-4) var(--editor-spacing-6); border-left: 4px solid var(--editor-border-strong); font-style: italic; color: var(--editor-text-gray); background-color: var(--editor-bg-subtle); border-radius: 0 8px 8px 0; } /* Lists */ .ProseMirror ul, .ProseMirror ol { margin: var(--editor-spacing-4) 0; padding-left: var(--editor-spacing-6); } .ProseMirror li { margin: var(--editor-spacing-2) 0; padding-left: var(--editor-spacing-2); } .ProseMirror ul { list-style-type: disc; } .ProseMirror ul ul { list-style-type: circle; } .ProseMirror ul ul ul { list-style-type: square; } .ProseMirror ol { list-style-type: decimal; } .ProseMirror ol ol { list-style-type: lower-alpha; } .ProseMirror ol ol ol { list-style-type: lower-roman; } /* Tables */ .ProseMirror table { width: 100%; border-collapse: separate; border-spacing: 0; margin: var(--editor-spacing-6) 0; border: 1px solid var(--editor-border-default); border-radius: 8px; overflow: hidden; } .ProseMirror th { background-color: var(--editor-bg-subtle); font-weight: 600; text-align: left; padding: var(--editor-spacing-3) var(--editor-spacing-4); border-bottom: 2px solid var(--editor-border-default); } .ProseMirror td { padding: var(--editor-spacing-3) var(--editor-spacing-4); border-bottom: 1px solid var(--editor-border-default); transition: background-color var(--editor-transition-fast); } .ProseMirror tr:last-child td { border-bottom: none; } .ProseMirror tr:hover td { background-color: var(--editor-bg-subtle); } /* Images */ .ProseMirror img { max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--editor-border-default); box-shadow: var(--editor-shadow-sm); transition: all var(--editor-transition-normal); display: block; margin: var(--editor-spacing-1) auto; } .ProseMirror img:hover { box-shadow: var(--editor-shadow-lg); transform: translateY(-2px); } /* Horizontal Rule */ .ProseMirror hr { margin: var(--editor-spacing-8) 0; border: none; border-top: 2px solid var(--editor-border-default); } /* Floating Menu & Toolbar */ .floating-menu { background-color: var(--editor-bg-default); border: 1px solid var(--editor-border-default); box-shadow: var(--editor-shadow-lg); border-radius: 8px; padding: var(--editor-spacing-1); display: flex; gap: var(--editor-spacing-1); align-items: center; animation: fadeIn var(--editor-transition-normal); backdrop-filter: blur(8px); } .toolbar-button { display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 0.875rem; font-weight: 500; height: 2.25rem; padding: 0 var(--editor-spacing-3); transition: all var(--editor-transition-fast); background-color: transparent; color: var(--editor-text-default); border: 1px solid transparent; } .toolbar-button:hover { background-color: var(--editor-bg-subtle); color: var(--editor-text-default); } .toolbar-button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--editor-border-strong); } .toolbar-button:disabled { opacity: 0.5; cursor: not-allowed; } .toolbar-button.active { background-color: var(--editor-bg-muted); color: var(--editor-text-blue); } /* Placeholder Styles .ProseMirror p.is-editor-empty:first-child::before { content: "Start writing or press '/' for commands..."; color: var(--editor-text-gray); pointer-events: none; float: left; height: 0; } */ /* Mobile Optimizations */ @media (max-width: 640px) { .ProseMirror { padding: var(--editor-spacing-8) var(--editor-spacing-4); } .ProseMirror h1 { font-size: 2rem; } .ProseMirror h2 { font-size: 1.75rem; } .ProseMirror h3 { font-size: 1.5rem; } .ProseMirror h4 { font-size: 1.25rem; } .ProseMirror p { font-size: 1rem; } } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* Print Styles */ @media print { .ProseMirror { padding: 0; max-width: none; } .floating-menu, .toolbar-button { display: none; } } .is-editor-empty::before { color: var(--editor-text-gray); content: attr(data-placeholder); float: left; height: 0; pointer-events: none; } [V0_FILE]typescriptreact:file="components/tiptap/extensions/floating-menu.tsx" "use client" import { Heading1, Heading2, Heading3, ListOrdered, List, Code2, ChevronRight, Quote, ImageIcon, Minus, AlignLeft, AlignCenter, AlignRight, CodeSquare, TextQuote, } from "lucide-react" import { FloatingMenu } from "@tiptap/react" import { Command, CommandEmpty, CommandGroup, CommandItem, CommandList } from "@/components/ui/command" import { useCallback, useEffect, useMemo, useRef, useState } from "react" import { cn } from "@/lib/utils" import type { Editor } from "@tiptap/core" import { ScrollArea } from "@/components/ui/scroll-area" import { useDebounce } from "@/hooks/use-debounce" interface CommandItemType { title: string description: string icon: React.ComponentType<{ className?: string }> keywords: string command: (editor: Editor) => void group: string } type CommandGroupType = { group: string items: Omit[] } const groups: CommandGroupType[] = [ { group: "Basic blocks", items: [ { title: "Text", description: "Just start writing with plain text", icon: ChevronRight, keywords: "paragraph text", command: (editor) => editor.chain().focus().clearNodes().run(), }, { title: "Heading 1", description: "Large section heading", icon: Heading1, keywords: "h1 title header", command: (editor) => editor.chain().focus().toggleHeading({ level: 1 }).run(), }, { title: "Heading 2", description: "Medium section heading", icon: Heading2, keywords: "h2 subtitle", command: (editor) => editor.chain().focus().toggleHeading({ level: 2 }).run(), }, { title: "Heading 3", description: "Small section heading", icon: Heading3, keywords: "h3 subheader", command: (editor) => editor.chain().focus().toggleHeading({ level: 3 }).run(), }, { title: "Bullet List", description: "Create a simple bullet list", icon: List, keywords: "unordered ul bullets", command: (editor) => editor.chain().focus().toggleBulletList().run(), }, { title: "Numbered List", description: "Create a ordered list", icon: ListOrdered, keywords: "numbered ol", command: (editor) => editor.chain().focus().toggleOrderedList().run(), }, { title: "Code Block", description: "Capture code snippets", icon: Code2, keywords: "code snippet pre", command: (editor) => editor.chain().focus().toggleCodeBlock().run(), }, { title: "Image", description: "Insert an image", icon: ImageIcon, keywords: "image picture photo", command: (editor) => editor.chain().focus().insertImagePlaceholder().run(), }, { title: "Horizontal Rule", description: "Add a horizontal divider", icon: Minus, keywords: "horizontal rule divider", command: (editor) => editor.chain().focus().setHorizontalRule().run(), }, ], }, { group: "Inline", items: [ { title: "Quote", description: "Capture a quotation", icon: Quote, keywords: "blockquote cite", command: (editor) => editor.chain().focus().toggleBlockquote().run(), }, { title: "Code", description: "Inline code snippet", icon: CodeSquare, keywords: "code inline", command: (editor) => editor.chain().focus().toggleCode().run(), }, { title: "Blockquote", description: "Block quote", icon: TextQuote, keywords: "blockquote quote", command: (editor) => editor.chain().focus().toggleBlockquote().run(), }, ], }, { group: "Alignment", items: [ { title: "Align Left", description: "Align text to the left", icon: AlignLeft, keywords: "align left", command: (editor) => editor.chain().focus().setTextAlign("left").run(), }, { title: "Align Center", description: "Center align text", icon: AlignCenter, keywords: "align center", command: (editor) => editor.chain().focus().setTextAlign("center").run(), }, { title: "Align Right", description: "Align text to the right", icon: AlignRight, keywords: "align right", command: (editor) => editor.chain().focus().setTextAlign("right").run(), }, ], }, ] export function TipTapFloatingMenu({ editor }: { editor: Editor }) { const [isOpen, setIsOpen] = useState(false) const [search, setSearch] = useState("") const debouncedSearch = useDebounce(search, 300) const commandRef = useRef(null) const [selectedIndex, setSelectedIndex] = useState(-1) const itemRefs = useRef<(HTMLDivElement | null)[]>([]) const filteredGroups = useMemo( () => groups .map((group) => ({ ...group, items: group.items.filter( (item) => item.title.toLowerCase().includes(debouncedSearch.toLowerCase()) || item.description.toLowerCase().includes(debouncedSearch.toLowerCase()) || item.keywords.toLowerCase().includes(debouncedSearch.toLowerCase()), ), })) .filter((group) => group.items.length > 0), [debouncedSearch], ) const flatFilteredItems = useMemo(() => filteredGroups.flatMap((g) => g.items), [filteredGroups]) const executeCommand = useCallback( (commandFn: (editor: Editor) => void) => { if (!editor) return try { const { from } = editor.state.selection const slashCommandLength = search.length + 1 editor .chain() .focus() .deleteRange({ from: Math.max(0, from - slashCommandLength), to: from, }) .run() commandFn(editor) } catch (error) { console.error("Error executing command:", error) } finally { setIsOpen(false) setSearch("") setSelectedIndex(-1) } }, [editor, search], ) const handleKeyDown = useCallback( (e: KeyboardEvent) => { if (!isOpen || !editor) return const preventDefault = () => { e.preventDefault() e.stopImmediatePropagation() } switch (e.key) { case "ArrowDown": preventDefault() setSelectedIndex((prev) => { if (prev === -1) return 0 return prev < flatFilteredItems.length - 1 ? prev + 1 : 0 }) break case "ArrowUp": preventDefault() setSelectedIndex((prev) => { if (prev === -1) return flatFilteredItems.length - 1 return prev > 0 ? prev - 1 : flatFilteredItems.length - 1 }) break case "Enter": preventDefault() const targetIndex = selectedIndex === -1 ? 0 : selectedIndex if (flatFilteredItems[targetIndex]) { executeCommand(flatFilteredItems[targetIndex].command) } break case "Escape": preventDefault() setIsOpen(false) setSelectedIndex(-1) break } }, [isOpen, selectedIndex, flatFilteredItems, executeCommand, editor], ) useEffect(() => { if (!editor?.options.element) return const editorElement = editor.options.element const handleEditorKeyDown = (e: Event) => handleKeyDown(e as KeyboardEvent) editorElement.addEventListener("keydown", handleEditorKeyDown) return () => editorElement.removeEventListener("keydown", handleEditorKeyDown) }, [handleKeyDown, editor]) // Add new effect for resetting selectedIndex useEffect(() => { setSelectedIndex(-1) }, [search]) useEffect(() => { if (selectedIndex >= 0 && itemRefs.current[selectedIndex]) { itemRefs.current[selectedIndex]?.focus() } }, [selectedIndex]) return ( { if (!editor) return false const { $from } = state.selection const currentLineText = $from.parent.textBetween(0, $from.parentOffset, "\n", " ") const isSlashCommand = currentLineText.startsWith("/") && $from.parent.type.name !== "codeBlock" && $from.parentOffset === currentLineText.length if (!isSlashCommand) { if (isOpen) setIsOpen(false) return false } const query = currentLineText.slice(1).trim() if (query !== search) setSearch(query) if (!isOpen) setIsOpen(true) return true }} tippyOptions={{ placement: "bottom-start", interactive: true, appendTo: () => document.body, onHide: () => { setIsOpen(false) setSelectedIndex(-1) }, }} > ) } [V0_FILE]typescriptreact:file="components/tiptap/extensions/floating-toolbar.tsx" "use client" import { BubbleMenu, type Editor } from "@tiptap/react" import { BoldToolbar } from "../toolbars/bold" import { ItalicToolbar } from "../toolbars/italic" import { UnderlineToolbar } from "../toolbars/underline" import { LinkToolbar } from "../toolbars/link" import { ColorHighlightToolbar } from "../toolbars/color-and-highlight" import { ToolbarProvider } from "../toolbars/toolbar-provider" import { TooltipProvider } from "@/components/ui/tooltip" import { useMediaQuery } from "@/hooks/use-media-querry" import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area" import { Separator } from "@/components/ui/separator" import { HeadingsToolbar } from "../toolbars/headings" import { BulletListToolbar } from "../toolbars/bullet-list" import { OrderedListToolbar } from "../toolbars/ordered-list" import { ImagePlaceholderToolbar } from "../toolbars/image-placeholder-toolbar" import { AlignmentTooolbar } from "../toolbars/alignment" import { BlockquoteToolbar } from "../toolbars/blockquote" import { useEffect } from "react" export function FloatingToolbar({ editor }: { editor: Editor | null }) { const isMobile = useMediaQuery("(max-width: 640px)") // Prevent default context menu on mobile useEffect(() => { if (!editor?.options.element || !isMobile) return const handleContextMenu = (e: Event) => { e.preventDefault() } const el = editor.options.element el.addEventListener("contextmenu", handleContextMenu) return () => el.removeEventListener("contextmenu", handleContextMenu) }, [editor, isMobile]) if (!editor) return null if (isMobile) { return ( { // Show toolbar when editor is focused and has selection return editor.isEditable && editor.isFocused }} editor={editor} className="w-full min-w-full mx-0 shadow-sm border rounded-sm bg-background" >

{/* Primary formatting */} {/* Structure controls */} {/* Rich formatting */} {/* Additional controls */}

) } return null } [V0_FILE]typescriptreact:file="components/tiptap/extensions/image.tsx" "use client" // @ts-nocheck /* eslint-disable */ import Image from "@tiptap/extension-image" import { type NodeViewProps, NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react" import { AlignCenter, AlignLeft, AlignRight, Maximize, MoreVertical, Trash, Edit, ImageIcon, Loader2, } from "lucide-react" import { useEffect, useRef, useState } from "react" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, } from "@/components/ui/dropdown-menu" import { Input } from "@/components/ui/input" import { Separator } from "@/components/ui/separator" import { cn } from "@/lib/utils" import { useImageUpload } from "@/hooks/use-image-upload" export const ImageExtension = Image.extend({ addAttributes() { return { src: { default: null, }, alt: { default: null, }, title: { default: null, }, width: { default: "100%", }, height: { default: null, }, align: { default: "center", }, caption: { default: "", }, aspectRatio: { default: null, }, } }, addNodeView: () => { return ReactNodeViewRenderer(TiptapImage) }, }) function TiptapImage(props: NodeViewProps) { const { node, editor, selected, deleteNode, updateAttributes } = props const imageRef = useRef(null) const nodeRef = useRef(null) const [resizing, setResizing] = useState(false) const [resizingPosition, setResizingPosition] = useState<"left" | "right">("left") const [resizeInitialWidth, setResizeInitialWidth] = useState(0) const [resizeInitialMouseX, setResizeInitialMouseX] = useState(0) const [editingCaption, setEditingCaption] = useState(false) const [caption, setCaption] = useState(node.attrs.caption || "") const [openedMore, setOpenedMore] = useState(false) const [imageUrl, setImageUrl] = useState("") const [altText, setAltText] = useState(node.attrs.alt || "") const { previewUrl, fileInputRef, handleFileChange, handleRemove, uploading, error } = useImageUpload({ onUpload: (imageUrl) => { updateAttributes({ src: imageUrl, alt: altText || fileInputRef.current?.files?.[0]?.name, }) handleRemove() setOpenedMore(false) }, }) function handleResizingPosition({ e, position, }: { e: React.MouseEvent position: "left" | "right" }) { startResize(e) setResizingPosition(position) } function startResize(event: React.MouseEvent) { event.preventDefault() setResizing(true) setResizeInitialMouseX(event.clientX) if (imageRef.current) { setResizeInitialWidth(imageRef.current.offsetWidth) } } function resize(event: MouseEvent) { if (!resizing) return let dx = event.clientX - resizeInitialMouseX if (resizingPosition === "left") { dx = resizeInitialMouseX - event.clientX } const newWidth = Math.max(resizeInitialWidth + dx, 150) const parentWidth = nodeRef.current?.parentElement?.offsetWidth ?? 0 if (newWidth < parentWidth) { updateAttributes({ width: newWidth, }) } } function endResize() { setResizing(false) setResizeInitialMouseX(0) setResizeInitialWidth(0) } function handleTouchStart(event: React.TouchEvent, position: "left" | "right") { event.preventDefault() setResizing(true) setResizingPosition(position) setResizeInitialMouseX(event.touches[0]?.clientX ?? 0) if (imageRef.current) { setResizeInitialWidth(imageRef.current.offsetWidth) } } function handleTouchMove(event: TouchEvent) { if (!resizing) return let dx = (event.touches[0]?.clientX ?? resizeInitialMouseX) - resizeInitialMouseX if (resizingPosition === "left") { dx = resizeInitialMouseX - (event.touches[0]?.clientX ?? resizeInitialMouseX) } const newWidth = Math.max(resizeInitialWidth + dx, 150) const parentWidth = nodeRef.current?.parentElement?.offsetWidth ?? 0 if (newWidth < parentWidth) { updateAttributes({ width: newWidth, }) } } function handleTouchEnd() { setResizing(false) setResizeInitialMouseX(0) setResizeInitialWidth(0) } function handleCaptionChange(e: React.ChangeEvent) { const newCaption = e.target.value setCaption(newCaption) } function handleCaptionBlur() { updateAttributes({ caption }) setEditingCaption(false) } function handleCaptionKeyDown(e: React.KeyboardEvent) { if (e.key === "Enter") { handleCaptionBlur() } } const handleImageUrlSubmit = () => { if (imageUrl) { updateAttributes({ src: imageUrl, alt: altText, }) setImageUrl("") setAltText("") setOpenedMore(false) } } useEffect(() => { window.addEventListener("mousemove", resize) window.addEventListener("mouseup", endResize) window.addEventListener("touchmove", handleTouchMove) window.addEventListener("touchend", handleTouchEnd) return () => { window.removeEventListener("mousemove", resize) window.removeEventListener("mouseup", endResize) window.removeEventListener("touchmove", handleTouchMove) window.removeEventListener("touchend", handleTouchEnd) } }, [resizing, resizeInitialMouseX, resizeInitialWidth]) return (

{editingCaption ? ( ) : (

editor?.isEditable && setEditingCaption(true)} > {caption || "Add a caption..."}

)} {editor?.isEditable && (

setEditingCaption(true)}> Edit Caption Replace Image

Upload Image

{uploading ? ( <> Uploading... ) : ( <> Choose Image )} {error &&

{error}

}

Or use URL

setImageUrl(e.target.value)} placeholder="Enter image URL..." className="text-xs" />

Alt Text

setAltText(e.target.value)} placeholder="Alt text (optional)" className="text-xs" />

{ const aspectRatio = node.attrs.aspectRatio if (aspectRatio) { const parentWidth = nodeRef.current?.parentElement?.offsetWidth ?? 0 updateAttributes({ width: parentWidth, height: parentWidth / aspectRatio, }) } }} > Full Width Delete Image

)}

) } [V0_FILE]typescriptreact:file="components/tiptap/extensions/image-placeholder.tsx" "use client" /* eslint-disable */ // @ts-nocheck import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { NODE_HANDLES_SELECTED_STYLE_CLASSNAME, isValidUrl } from "@/lib/tiptap-utils" import { type CommandProps, Node, type NodeViewProps, NodeViewWrapper, ReactNodeViewRenderer, mergeAttributes, } from "@tiptap/react" import { Image, Link, Upload, Loader2, X } from "lucide-react" import { type FormEvent, useState } from "react" import { useImageUpload } from "@/hooks/use-image-upload" import { cn } from "@/lib/utils" export interface ImagePlaceholderOptions { HTMLAttributes: Record onUpload?: (url: string) => void onError?: (error: string) => void } declare module "@tiptap/core" { interface Commands { imagePlaceholder: { /** * Inserts an image placeholder */ insertImagePlaceholder: () => ReturnType } } } export const ImagePlaceholder = Node.create({ name: "image-placeholder", addOptions() { return { HTMLAttributes: {}, onUpload: () => {}, onError: () => {}, } }, 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 [isExpanded, setIsExpanded] = useState(false) const [activeTab, setActiveTab] = useState<"upload" | "url">("upload") const [url, setUrl] = useState("") const [altText, setAltText] = useState("") const [urlError, setUrlError] = useState(false) const [isDragActive, setIsDragActive] = useState(false) const { previewUrl, fileInputRef, handleFileChange, handleRemove, uploading, error } = useImageUpload({ onUpload: (imageUrl) => { editor .chain() .focus() .setImage({ src: imageUrl, alt: altText || fileInputRef.current?.files?.[0]?.name, }) .run() handleRemove() setIsExpanded(false) }, }) const handleDragEnter = (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() setIsDragActive(true) } const handleDragLeave = (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() setIsDragActive(false) } const handleDragOver = (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() } const handleDrop = (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() setIsDragActive(false) const file = e.dataTransfer.files[0] if (file) { const input = fileInputRef.current if (input) { const dataTransfer = new DataTransfer() dataTransfer.items.add(file) input.files = dataTransfer.files handleFileChange({ target: input } as any) } } } const handleInsertEmbed = (e: FormEvent) => { e.preventDefault() const valid = isValidUrl(url) if (!valid) { setUrlError(true) return } if (url) { editor.chain().focus().setImage({ src: url, alt: altText }).run() setIsExpanded(false) setUrl("") setAltText("") } } return (

{!isExpanded ? (

setIsExpanded(true)} className={cn( "group relative flex cursor-pointer flex-col items-center gap-4 rounded-lg border-2 border-dashed p-8 transition-all hover:bg-accent", selected && "border-primary bg-primary/5", isDragActive && "border-primary bg-primary/5", error && "border-destructive bg-destructive/5", )} >

Click to upload or drag and drop

SVG, PNG, JPG or GIF

) : (

Add Image

setActiveTab(v)} className="w-full"> Upload URL

{previewUrl ? (

setAltText(e.target.value)} placeholder="Alt text (optional)" />

) : ( <>

Click to upload or drag and drop

SVG, PNG, JPG or GIF

)} {error &&

{error}

}

{ setUrl(e.target.value) if (urlError) setUrlError(false) }} placeholder="Enter image URL..." /> {urlError &&

Please enter a valid URL

}

setAltText(e.target.value)} placeholder="Alt text (optional)" />

)}

) } [V0_FILE]typescriptreact:file="components/tiptap/extensions/search-and-replace.tsx" /* eslint-disable */ // @ts-nocheck import { type Editor as CoreEditor, Extension, type Range } from "@tiptap/core" import type { Node as PMNode } from "@tiptap/pm/model" import { Plugin, PluginKey } from "@tiptap/pm/state" import { Decoration, DecorationSet, type EditorView } from "@tiptap/pm/view" declare module "@tiptap/core" { interface Commands { search: { /** * @description Set search term in extension. */ setSearchTerm: (searchTerm: string) => ReturnType /** * @description Set replace term in extension. */ setReplaceTerm: (replaceTerm: string) => ReturnType /** * @description Replace first instance of search result with given replace term. */ replace: () => ReturnType /** * @description Replace all instances of search result with given replace term. */ replaceAll: () => ReturnType /** * @description Select the next search result. */ selectNextResult: () => ReturnType /** * @description Select the previous search result. */ selectPreviousResult: () => ReturnType /** * @description Set case sensitivity in extension. */ setCaseSensitive: (caseSensitive: boolean) => ReturnType } } } interface TextNodeWithPosition { text: string pos: number } const getRegex = (searchString: string, disableRegex: boolean, caseSensitive: boolean): RegExp => { const escapedString = disableRegex ? searchString.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&") : searchString return new RegExp(escapedString, caseSensitive ? "gu" : "gui") } interface ProcessedSearches { decorationsToReturn: DecorationSet results: Range[] } function processSearches( doc: PMNode, searchTerm: RegExp, selectedResultIndex: number, searchResultClass: string, selectedResultClass: string, ): ProcessedSearches { const decorations: Decoration[] = [] const results: Range[] = [] const textNodesWithPosition: TextNodeWithPosition[] = [] if (!searchTerm) { return { decorationsToReturn: DecorationSet.empty, results: [] } } doc.descendants((node, pos) => { if (node.isText) { textNodesWithPosition.push({ text: node.text || "", pos }) } }) for (const { text, pos } of textNodesWithPosition) { const matches = Array.from(text.matchAll(searchTerm)).filter(([matchText]) => matchText.trim()) for (const match of matches) { if (match.index !== undefined) { results.push({ from: pos + match.index, to: pos + match.index + match[0].length, }) } } } for (let i = 0; i < results.length; i++) { const result = results[i] if (!result) continue const { from, to } = result decorations.push( Decoration.inline(from, to, { class: selectedResultIndex === i ? selectedResultClass : searchResultClass, }), ) } return { decorationsToReturn: DecorationSet.create(doc, decorations), results, } } const replace = (replaceTerm: string, results: Range[], { state, dispatch }: any) => { const firstResult = results[0] if (!firstResult) { return } const { from, to } = firstResult if (dispatch) { dispatch(state.tr.insertText(replaceTerm, from, to)) } } const rebaseNextResult = ( replaceTerm: string, index: number, lastOffset: number, results: Range[], ): [number, Range[]] | null => { const nextIndex = index + 1 if (!results[nextIndex]) { return null } const currentResult = results[index] if (!currentResult) { return null } const { from: currentFrom, to: currentTo } = currentResult const offset = currentTo - currentFrom - replaceTerm.length + lastOffset const { from, to } = results[nextIndex] results[nextIndex] = { to: to - offset, from: from - offset, } return [offset, results] } const replaceAll = (replaceTerm: string, results: Range[], { tr, dispatch }: { tr: any; dispatch: any }) => { if (!results.length) { return } let offset = 0 for (let i = 0; i < results.length; i++) { const result = results[i] if (!result) continue const { from, to } = result tr.insertText(replaceTerm, from, to) const rebaseResponse = rebaseNextResult(replaceTerm, i, offset, results) if (rebaseResponse) { offset = rebaseResponse[0] } } dispatch(tr) } const selectNext = (editor: CoreEditor) => { const { results } = editor.storage.searchAndReplace as SearchAndReplaceStorage if (!results.length) { return } const { selectedResult } = editor.storage.searchAndReplace if (selectedResult >= results.length - 1) { editor.storage.searchAndReplace.selectedResult = 0 } else { editor.storage.searchAndReplace.selectedResult += 1 } const result = results[editor.storage.searchAndReplace.selectedResult] if (!result) return const { from } = result const view: EditorView | undefined = editor.view if (view) { view .domAtPos(from) // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore .node.scrollIntoView({ behavior: "smooth", block: "center" }) } } const selectPrevious = (editor: CoreEditor) => { const { results } = editor.storage.searchAndReplace if (!results.length) { return } const { selectedResult } = editor.storage.searchAndReplace if (selectedResult <= 0) { editor.storage.searchAndReplace.selectedResult = results.length - 1 } else { editor.storage.searchAndReplace.selectedResult -= 1 } const { from } = results[editor.storage.searchAndReplace.selectedResult] const view: EditorView | undefined = editor.view if (view) { view .domAtPos(from) // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore .node.scrollIntoView({ behavior: "smooth", block: "center" }) } } export const searchAndReplacePluginKey = new PluginKey("searchAndReplacePlugin") export interface SearchAndReplaceOptions { searchResultClass: string selectedResultClass: string disableRegex: boolean } export interface SearchAndReplaceStorage { searchTerm: string replaceTerm: string results: Range[] lastSearchTerm: string selectedResult: number lastSelectedResult: number caseSensitive: boolean lastCaseSensitiveState: boolean } export const SearchAndReplace = Extension.create({ 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, } }, addCommands() { return { setSearchTerm: (searchTerm: string) => ({ editor }) => { editor.storage.searchAndReplace.searchTerm = searchTerm return false }, setReplaceTerm: (replaceTerm: string) => ({ editor }) => { editor.storage.searchAndReplace.replaceTerm = replaceTerm return false }, replace: () => ({ editor, state, dispatch }) => { const { replaceTerm, results } = editor.storage.searchAndReplace replace(replaceTerm, results, { state, dispatch }) return false }, replaceAll: () => ({ editor, tr, dispatch }) => { const { replaceTerm, results } = editor.storage.searchAndReplace replaceAll(replaceTerm, results, { tr, dispatch }) return false }, selectNextResult: () => ({ editor }) => { selectNext(editor) return false }, selectPreviousResult: () => ({ editor }) => { selectPrevious(editor) return false }, setCaseSensitive: (caseSensitive: boolean) => ({ editor }) => { editor.storage.searchAndReplace.caseSensitive = caseSensitive return false }, } }, addProseMirrorPlugins() { const editor = this.editor const { searchResultClass, selectedResultClass, disableRegex } = this.options const setLastSearchTerm = (t: string) => { editor.storage.searchAndReplace.lastSearchTerm = t } const setLastSelectedResult = (r: number) => { editor.storage.searchAndReplace.lastSelectedResult = r } const setLastCaseSensitiveState = (s: boolean) => { editor.storage.searchAndReplace.lastCaseSensitiveState = s } return [ new Plugin({ key: searchAndReplacePluginKey, state: { init: () => DecorationSet.empty, apply({ doc, docChanged }, oldState) { const { searchTerm, selectedResult, lastSearchTerm, lastSelectedResult, caseSensitive, lastCaseSensitiveState, } = editor.storage.searchAndReplace as SearchAndReplaceStorage if ( !docChanged && lastSearchTerm === searchTerm && selectedResult === lastSelectedResult && lastCaseSensitiveState === caseSensitive ) { return oldState } setLastSearchTerm(searchTerm) setLastSelectedResult(selectedResult) setLastCaseSensitiveState(caseSensitive) if (!searchTerm) { editor.storage.searchAndReplace.selectedResult = 0 editor.storage.searchAndReplace.results = [] return DecorationSet.empty } const { decorationsToReturn, results } = processSearches( doc, getRegex(searchTerm, disableRegex, caseSensitive), selectedResult, searchResultClass, selectedResultClass, ) editor.storage.searchAndReplace.results = results if (selectedResult > results.length) { editor.storage.searchAndReplace.selectedResult = 1 editor.commands.selectPreviousResult() } return decorationsToReturn }, }, props: { decorations(state) { return this.getState(state) }, }, }), ] }, }) export default SearchAndReplace [V0_FILE]typescriptreact:file="components/tiptap/toolbars/editor-toolbar.tsx" import { Separator } from "@/components/ui/separator" import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area" import { TooltipProvider } from "@/components/ui/tooltip" import { ToolbarProvider } from "./toolbar-provider" import type { Editor } from "@tiptap/core" import { UndoToolbar } from "./undo" import { RedoToolbar } from "./redo" import { HeadingsToolbar } from "./headings" import { BlockquoteToolbar } from "./blockquote" import { CodeToolbar } from "./code" import { BoldToolbar } from "./bold" import { ItalicToolbar } from "./italic" import { UnderlineToolbar } from "./underline" import { StrikeThroughToolbar } from "./strikethrough" import { LinkToolbar } from "./link" import { BulletListToolbar } from "./bullet-list" import { OrderedListToolbar } from "./ordered-list" import { HorizontalRuleToolbar } from "./horizontal-rule" import { AlignmentTooolbar } from "./alignment" import { ImagePlaceholderToolbar } from "./image-placeholder-toolbar" import { ColorHighlightToolbar } from "./color-and-highlight" import { SearchAndReplaceToolbar } from "./search-and-replace-toolbar" import { CodeBlockToolbar } from "./code-block" export const EditorToolbar = ({ editor }: { editor: Editor }) => { return (

{/* History Group */} {/* Text Structure Group */} {/* Basic Formatting Group */} {/* Lists & Structure Group */} {/* Alignment Group */} {/* Media & Styling Group */}

{/* Utility Group */}

) } [V0_FILE]typescriptreact:file="components/tiptap/toolbars/color-and-highlight.tsx" "use client" /* eslint-disable */ // @ts-nocheck import { Button } from "@/components/ui/button" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { ScrollArea } from "@/components/ui/scroll-area" import { Separator } from "@/components/ui/separator" import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip" import { cn } from "@/lib/utils" import { useToolbar } from "./toolbar-provider" import type { Extension } from "@tiptap/core" import type { ColorOptions } from "@tiptap/extension-color" import type { HighlightOptions } from "@tiptap/extension-highlight" import { CheckIcon, ChevronDownIcon } from "lucide-react" import { useMediaQuery } from "@/hooks/use-media-querry" import { MobileToolbarGroup, MobileToolbarItem } from "./mobile-toolbar-group" type TextStylingExtensions = Extension | Extension const TEXT_COLORS = [ { name: "Default", color: "var(--editor-text-default)" }, { name: "Gray", color: "var(--editor-text-gray)" }, { name: "Brown", color: "var(--editor-text-brown)" }, { name: "Orange", color: "var(--editor-text-orange)" }, { name: "Yellow", color: "var(--editor-text-yellow)" }, { name: "Green", color: "var(--editor-text-green)" }, { name: "Blue", color: "var(--editor-text-blue)" }, { name: "Purple", color: "var(--editor-text-purple)" }, { name: "Pink", color: "var(--editor-text-pink)" }, { name: "Red", color: "var(--editor-text-red)" }, ] const HIGHLIGHT_COLORS = [ { name: "Default", color: "var(--editor-highlight-default)" }, { name: "Gray", color: "var(--editor-highlight-gray)" }, { name: "Brown", color: "var(--editor-highlight-brown)" }, { name: "Orange", color: "var(--editor-highlight-orange)" }, { name: "Yellow", color: "var(--editor-highlight-yellow)" }, { name: "Green", color: "var(--editor-highlight-green)" }, { name: "Blue", color: "var(--editor-highlight-blue)" }, { name: "Purple", color: "var(--editor-highlight-purple)" }, { name: "Pink", color: "var(--editor-highlight-pink)" }, { name: "Red", color: "var(--editor-highlight-red)" }, ] interface ColorHighlightButtonProps { name: string color: string isActive: boolean onClick: () => void isHighlight?: boolean } const ColorHighlightButton = ({ name, color, isActive, onClick, isHighlight }: ColorHighlightButtonProps) => ( ) export const ColorHighlightToolbar = () => { const { editor } = useToolbar() const isMobile = useMediaQuery("(max-width: 640px)") const currentColor = editor?.getAttributes("textStyle").color const currentHighlight = editor?.getAttributes("highlight").color const handleSetColor = (color: string) => { editor ?.chain() .focus() .setColor(color === currentColor ? "" : color) .run() } const handleSetHighlight = (color: string) => { editor ?.chain() .focus() .setHighlight(color === currentHighlight ? { color: "" } : { color }) .run() } const isDisabled = !editor?.can().chain().setHighlight().run() || !editor?.can().chain().setColor("").run() if (isMobile) { return (

{TEXT_COLORS.map(({ name, color }) => ( handleSetColor(color)} active={currentColor === color}>

{name}

))} {HIGHLIGHT_COLORS.map(({ name, color }) => ( handleSetHighlight(color)} active={currentHighlight === color}>

{name}

))}

) } return (

Text Color & Highlight

Color

{TEXT_COLORS.map(({ name, color }) => ( handleSetColor(color)} /> ))}

Background

{HIGHLIGHT_COLORS.map(({ name, color }) => ( handleSetHighlight(color)} isHighlight /> ))}

) } [V0_FILE]typescriptreact:file="components/tiptap/toolbars/bold.tsx" "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 "./toolbar-provider" // import type { Extension } from "@tiptap/core"; // import type { StarterKitOptions } from "@tiptap/starter-kit"; // type StarterKitExtensions = Extension; const BoldToolbar = React.forwardRef( ({ className, onClick, children, ...props }, ref) => { const { editor } = useToolbar() return ( Bold (cmd + b) ) }, ) BoldToolbar.displayName = "BoldToolbar" export { BoldToolbar } [V0_FILE]typescriptreact:file="components/tiptap/toolbars/link.tsx" "use client" /* eslint-disable */ // @ts-nocheck import { PopoverClose } from "@radix-ui/react-popover" import { Trash2, X } from "lucide-react" import React, { type FormEvent } from "react" import { Button, type ButtonProps } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip" import { cn } from "@/lib/utils" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { useToolbar } from "./toolbar-provider" import { getUrlFromString } from "@/lib/tiptap-utils" const LinkToolbar = React.forwardRef(({ className, ...props }, ref) => { const { editor } = useToolbar() const [link, setLink] = React.useState("") const handleSubmit = (e: FormEvent) => { e.preventDefault() const url = getUrlFromString(link) url && editor?.chain().focus().setLink({ href: url }).run() } React.useEffect(() => { setLink(editor?.getAttributes("link").href ?? "") }, [editor]) return ( Link { e.preventDefault() }} asChild className="relative px-3 py-2.5" >

) }) LinkToolbar.displayName = "LinkToolbar" export { LinkToolbar } [V0_FILE]typescriptreact:file="components/tiptap/toolbars/search-and-replace-toolbar.tsx" "use client" /* eslint-disable */ // @ts-nocheck import { ArrowLeftIcon, ArrowRightIcon, X, Repeat } 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 { useToolbar } from "./toolbar-provider" import type { SearchAndReplaceStorage } from "../extensions/search-and-replace" 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 ( Search & Replace { e.preventDefault() }} onEscapeKeyDown={() => { setOpen(false) }} className="relative flex w-[400px] px-3 py-2.5" > {!replacing ? (

{ setSearchText(e.target.value) }} placeholder="Search..." /> {results?.length === 0 ? selectedResult : selectedResult + 1}/{results?.length}

) : (

{ setOpen(false) }} className="absolute right-3 top-3 h-4 w-4 cursor-pointer" />

Search and replace

Search { setSearchText(e.target.value) }} placeholder="Search..." /> {results?.length === 0 ? selectedResult : selectedResult + 1}/{results?.length}

Replace with { setReplaceText(e.target.value) }} placeholder="Replace..." />

{ setChecked(checked) }} id="match_case" /> Match case

)} ) } [V0_FILE]typescriptreact:file="components/tiptap/toolbars/code-block.tsx" "use client" import { Code } 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 "./toolbar-provider" const CodeBlockToolbar = React.forwardRef( ({ className, onClick, children, ...props }, ref) => { const { editor } = useToolbar() return (


        
          Code Block


    )
  },
)

CodeBlockToolbar.displayName = "CodeBlockToolbar"

export { CodeBlockToolbar }
[V0_FILE]typescriptreact:file="components/tiptap/toolbars/blockquote.tsx"
"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 "./toolbar-provider"

const BlockquoteToolbar = React.forwardRef(
  ({ className, onClick, children, ...props }, ref) => {
    const { editor } = useToolbar()
    return (
      
        
          
        
        
          Blockquote
        
      
    )
  },
)

BlockquoteToolbar.displayName = "BlockquoteToolbar"

export { BlockquoteToolbar }
[V0_FILE]typescriptreact:file="components/tiptap/toolbars/code.tsx"
"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 "./toolbar-provider"

const CodeToolbar = React.forwardRef(
  ({ className, onClick, children, ...props }, ref) => {
    const { editor } = useToolbar()
    return (
      
        
          
        
        
          Code
        
      
    )
  },
)

CodeToolbar.displayName = "CodeToolbar"

export { CodeToolbar }
[V0_FILE]typescriptreact:file="components/tiptap/toolbars/hard-break.tsx"
"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 "./toolbar-provider"

const HardBreakToolbar = React.forwardRef(
  ({ className, onClick, children, ...props }, ref) => {
    const { editor } = useToolbar()
    return (
      
        
          
        
        
          Hard break
        
      
    )
  },
)

HardBreakToolbar.displayName = "HardBreakToolbar"

export { HardBreakToolbar }
[V0_FILE]typescriptreact:file="components/tiptap/toolbars/horizontal-rule.tsx"
"use client"

import { SeparatorHorizontal } 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 "./toolbar-provider"

const HorizontalRuleToolbar = React.forwardRef(
  ({ className, onClick, children, ...props }, ref) => {
    const { editor } = useToolbar()
    return (
      
        
          
        
        
          Horizontal Rule
        
      
    )
  },
)

HorizontalRuleToolbar.displayName = "HorizontalRuleToolbar"

export { HorizontalRuleToolbar }
[V0_FILE]typescriptreact:file="components/tiptap/toolbars/image-placeholder-toolbar.tsx"
"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 "./toolbar-provider"

const ImagePlaceholderToolbar = React.forwardRef(
  ({ className, onClick, children, ...props }, ref) => {
    const { editor } = useToolbar()
    return (
      
        
          
        
        
          Image
        
      
    )
  },
)

ImagePlaceholderToolbar.displayName = "ImagePlaceholderToolbar"

export { ImagePlaceholderToolbar }
[V0_FILE]typescriptreact:file="components/tiptap/toolbars/italic.tsx"
"use client"

import { ItalicIcon } 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 "./toolbar-provider"

const ItalicToolbar = React.forwardRef(
  ({ className, onClick, children, ...props }, ref) => {
    const { editor } = useToolbar()
    return (
      
        
          
        
        
          Italic
          (cmd + i)
        
      
    )
  },
)

ItalicToolbar.displayName = "ItalicToolbar"

export { ItalicToolbar }
[V0_FILE]typescriptreact:file="components/tiptap/toolbars/ordered-list.tsx"
"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 "./toolbar-provider"

const OrderedListToolbar = React.forwardRef(
  ({ className, onClick, children, ...props }, ref) => {
    const { editor } = useToolbar()
    return (
      
        
          
        
        
          Ordered list
        
      
    )
  },
)

OrderedListToolbar.displayName = "OrderedListToolbar"

export { OrderedListToolbar }
[V0_FILE]typescriptreact:file="components/tiptap/toolbars/redo.tsx"
"use client"

import { Redo2 } 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 "./toolbar-provider"

const RedoToolbar = React.forwardRef(
  ({ className, onClick, children, ...props }, ref) => {
    const { editor } = useToolbar()

    return (
      
        
          
        
        
          Redo
        
      
    )
  },
)

RedoToolbar.displayName = "RedoToolbar"

export { RedoToolbar }
[V0_FILE]typescriptreact:file="components/tiptap/toolbars/strikethrough.tsx"
"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 "./toolbar-provider"

const StrikeThroughToolbar = React.forwardRef(
  ({ className, onClick, children, ...props }, ref) => {
    const { editor } = useToolbar()
    return (
      
        
          
        
        
          Strikethrough
          (cmd + shift + x)
        
      
    )
  },
)

StrikeThroughToolbar.displayName = "StrikeThroughToolbar"

export { StrikeThroughToolbar }
[V0_FILE]typescriptreact:file="components/tiptap/toolbars/undo.tsx"
"use client"

import { Button, type ButtonProps } from "@/components/ui/button"
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
import { cn } from "@/lib/utils"
import { useToolbar } from "./toolbar-provider"
import { Undo2 } from "lucide-react"
import React from "react"

const UndoToolbar = React.forwardRef(
  ({ className, onClick, children, ...props }, ref) => {
    const { editor } = useToolbar()

    return (
      
        
          
        
        
          Undo
        
      
    )
  },
)

UndoToolbar.displayName = "UndoToolbar"

export { UndoToolbar }
[V0_FILE]typescriptreact:file="components/tiptap/toolbars/bullet-list.tsx"
"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 "./toolbar-provider"

const BulletListToolbar = React.forwardRef(
  ({ className, onClick, children, ...props }, ref) => {
    const { editor } = useToolbar()

    return (
      
        
          
        
        
          Bullet list
        
      
    )
  },
)

BulletListToolbar.displayName = "BulletListToolbar"

export { BulletListToolbar }
[V0_FILE]typescriptreact:file="components/tiptap/toolbars/mobile-toolbar-group.tsx"
"use client"

import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"
import { ChevronDown } from "lucide-react"
import React, { useState } from "react"
import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from "@/components/ui/drawer"

interface MobileToolbarGroupProps {
  label: string
  children: React.ReactNode
  className?: string
}

export const MobileToolbarGroup = ({ label, children, className }: MobileToolbarGroupProps) => {
  const [isOpen, setIsOpen] = useState(false)

  const closeDrawer = () => setIsOpen(false)

  return (
    
      
        
      
      
        
          {label}
        
        
          {React.Children.map(children, (child) =>
            React.isValidElement(child)
              ? React.cloneElement(child, { closeDrawer } as {
                  closeDrawer: () => void
                })
              : child,
          )}
        
      
    
  )
}

export const MobileToolbarItem = ({
  children,
  active,
  onClick,
  closeDrawer,
  ...props
}: React.ButtonHTMLAttributes & {
  active?: boolean
  closeDrawer?: () => void
}) => (
  
)
[V0_FILE]typescriptreact:file="components/tiptap/toolbars/toolbar-provider.tsx"
"use client"

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

export interface ToolbarContextProps {
  editor: Editor
}

export const ToolbarContext = React.createContext(null)

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

export const ToolbarProvider = ({ editor, children }: ToolbarProviderProps) => {
  return {children}
}

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

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

  return context
}
[V0_FILE]typescriptreact:file="components/tiptap/toolbars/alignment.tsx"
"use client"

import { AlignCenter, AlignJustify, AlignLeft, AlignRight, Check, ChevronDown } from "lucide-react"
import { useMediaQuery } from "@/hooks/use-media-querry"
import { MobileToolbarGroup, MobileToolbarItem } from "./mobile-toolbar-group"

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
import { useToolbar } from "./toolbar-provider"

export const AlignmentTooolbar = () => {
  const { editor } = useToolbar()
  const isMobile = useMediaQuery("(max-width: 640px)")
  const handleAlign = (value: string) => {
    editor?.chain().focus().setTextAlign(value).run()
  }

  const isDisabled = editor?.isActive("image") ?? editor?.isActive("video") ?? !editor ?? false

  const currentTextAlign = () => {
    if (editor?.isActive({ textAlign: "left" })) {
      return "left"
    }
    if (editor?.isActive({ textAlign: "center" })) {
      return "center"
    }
    if (editor?.isActive({ textAlign: "right" })) {
      return "right"
    }
    if (editor?.isActive({ textAlign: "justify" })) {
      return "justify"
    }

    return "left"
  }

  const alignmentOptions = [
    {
      name: "Left Align",
      value: "left",
      icon: ,
    },
    {
      name: "Center Align",
      value: "center",
      icon: ,
    },
    {
      name: "Right Align",
      value: "right",
      icon: ,
    },
    {
      name: "Justify Align",
      value: "justify",
      icon: ,
    },
  ]

  const findIndex = (value: string) => {
    return alignmentOptions.findIndex((option) => option.value === value)
  }

  if (isMobile) {
    return (
      
        {alignmentOptions.map((option, index) => (
           handleAlign(option.value)}
            active={currentTextAlign() === option.value}
          >
            {option.icon}
            {option.name}
          
        ))}
      
    )
  }

  return (
    
      
        
          
            
          
        
        Text Alignment
      
       {
          e.preventDefault()
        }}
      >
        
          {alignmentOptions.map((option, index) => (
             {
                handleAlign(option.value)
              }}
              key={index}
            >
              {option.icon}
              {option.name}

              {option.value === currentTextAlign() && }
            
          ))}
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/tiptap/toolbars/headings.tsx"
"use client"

import React from "react"
import { ChevronDown } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { cn } from "@/lib/utils"
import { useToolbar } from "./toolbar-provider"
import { useMediaQuery } from "@/hooks/use-media-querry"
import { MobileToolbarGroup, MobileToolbarItem } from "./mobile-toolbar-group"

const levels = [1, 2, 3, 4] as const

export const HeadingsToolbar = React.forwardRef>(
  ({ className, ...props }, ref) => {
    const { editor } = useToolbar()
    const isMobile = useMediaQuery("(max-width: 640px)")
    const activeLevel = levels.find((level) => editor?.isActive("heading", { level }))

    if (isMobile) {
      return (
        
           editor?.chain().focus().setParagraph().run()}
            active={!editor?.isActive("heading")}
          >
            Normal
          
          {levels.map((level) => (
             editor?.chain().focus().toggleHeading({ level }).run()}
              active={editor?.isActive("heading", { level })}
            >
              H{level}
            
          ))}
        
      )
    }

    return (
      
        
          
            
              
            
            
               editor?.chain().focus().setParagraph().run()}
                className={cn("flex items-center gap-2 h-fit", !editor?.isActive("heading") && "bg-accent")}
              >
                Normal
              
              {levels.map((level) => (
                 editor?.chain().focus().toggleHeading({ level }).run()}
                  className={cn("flex items-center gap-2", editor?.isActive("heading", { level }) && "bg-accent")}
                >
                  H{level}
                
              ))}
            
          
        
        
          Headings
        
      
    )
  },
)

HeadingsToolbar.displayName = "HeadingsToolbar"
[V0_FILE]typescriptreact:file="components/tiptap/toolbars/underline.tsx"
"use client"

import { UnderlineIcon } 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 "./toolbar-provider"

const UnderlineToolbar = React.forwardRef(
  ({ className, onClick, children, ...props }, ref) => {
    const { editor } = useToolbar()
    return (
      
        
          
        
        
          Underline
          (cmd + u)
        
      
    )
  },
)

UnderlineToolbar.displayName = "UnderlineToolbar"

export { UnderlineToolbar }
[V0_FILE]typescriptreact:file="hooks/use-debounce.ts"
import { useState, useEffect } from "react"

export function useDebounce(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState(value)

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value)
    }, delay)

    return () => {
      clearTimeout(timer)
    }
  }, [value, delay])

  return debouncedValue
}
[V0_FILE]typescriptreact:file="hooks/use-image-upload.ts"
import { useCallback, useEffect, useRef, useState } from "react"

interface UseImageUploadProps {
  onUpload?: (url: string) => void
}

export function useImageUpload({ onUpload }: UseImageUploadProps = {}) {
  const previewRef = useRef(null)
  const fileInputRef = useRef(null)
  const [previewUrl, setPreviewUrl] = useState(null)
  const [fileName, setFileName] = useState(null)
  const [uploading, setUploading] = useState(false)
  const [error, setError] = useState(null)

  // Dummy upload function that simulates a delay and returns the local preview URL
  const dummyUpload = async (file: File, localUrl: string): Promise => {
    try {
      setUploading(true)
      // Simulate network delay
      await new Promise((resolve) => setTimeout(resolve, 1500))

      // Simulate random upload errors (20% chance)
      if (Math.random() < 0.2) {
        throw new Error("Upload failed - This is a demo error")
      }

      setError(null)
      // In a real implementation, this would be the URL from the server
      return localUrl
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : "Upload failed"
      setError(errorMessage)
      throw new Error(errorMessage)
    } finally {
      setUploading(false)
    }
  }

  const handleThumbnailClick = useCallback(() => {
    fileInputRef.current?.click()
  }, [])

  const handleFileChange = useCallback(
    async (event: React.ChangeEvent) => {
      const file = event.target.files?.[0]
      if (file) {
        setFileName(file.name)
        const localUrl = URL.createObjectURL(file)
        setPreviewUrl(localUrl)
        previewRef.current = localUrl

        try {
          const uploadedUrl = await dummyUpload(file, localUrl)
          onUpload?.(uploadedUrl)
        } catch (err) {
          URL.revokeObjectURL(localUrl)
          setPreviewUrl(null)
          setFileName(null)
          return console.error(err)
        }
      }
    },
    [onUpload],
  )

  const handleRemove = useCallback(() => {
    if (previewUrl) {
      URL.revokeObjectURL(previewUrl)
    }
    setPreviewUrl(null)
    setFileName(null)
    previewRef.current = null
    if (fileInputRef.current) {
      fileInputRef.current.value = ""
    }
    setError(null)
  }, [previewUrl])

  useEffect(() => {
    return () => {
      if (previewRef.current) {
        URL.revokeObjectURL(previewRef.current)
      }
    }
  }, [])

  return {
    previewUrl,
    fileName,
    fileInputRef,
    handleThumbnailClick,
    handleFileChange,
    handleRemove,
    uploading,
    error,
  }
}
[V0_FILE]typescriptreact:file="hooks/use-media-querry.ts"
import { useState, useEffect } from "react"

export function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState(false)

  useEffect(() => {
    const media = window.matchMedia(query)
    if (media.matches !== matches) {
      setMatches(media.matches)
    }
    const listener = () => setMatches(media.matches)
    window.addEventListener("resize", listener)
    return () => window.removeEventListener("resize", listener)
  }, [matches, query])

  return matches
}
[V0_FILE]typescriptreact:file="lib/content.ts"
export const content = `
  Explore the Tiptap rich text editor with Shadcn UI components 📝
  This is a powerful editor that supports many features:
  
      
          
              Rich text formatting with bold, italic, and
              underline
          
      
      
          Different heading levels
      
      
          Lists (ordered and unordered)
      
      
          Text alignment options
      
      
          Image uploads and management
      
  
  Try It Out!
  
      Type '/' to see available commands or use the toolbar above to format your
      content.
  
  
  
      You can also add links like
      this one
      and use text alignment options.
  
  // Example code block
const greeting = "Hello, World!";
console.log(greeting);
`
[V0_FILE]typescriptreact:file="lib/tiptap-utils.ts"
import type { Editor } from "@tiptap/core"

export const NODE_HANDLES_SELECTED_STYLE_CLASSNAME = "node-handles-selected-style"

export function isValidUrl(url: string) {
  return /^https?:\/\/\S+$/.test(url)
}

export const duplicateContent = (editor: Editor) => {
  const { view } = editor
  const { state } = view
  const { selection } = state

  editor
    .chain()
    .insertContentAt(
      selection.to,
      /* eslint-disable */
      // @ts-nocheck
      selection
        .content()
        .content.firstChild?.toJSON(),
      {
        updateSelection: true,
      },
    )
    .focus(selection.to)
    .run()
}

export function getUrlFromString(str: string) {
  if (isValidUrl(str)) {
    return str
  }
  try {
    if (str.includes(".") && !str.includes(" ")) {
      return new URL(`https://${str}`).toString()
    }
  } catch {
    return null
  }
}

export function absoluteUrl(path: string) {
  return `${process.env.NEXT_PUBLIC_APP_URL}${path}`
}
[V0_FILE]typescriptreact:file="app/app.tsx"
import { RichTextEditorDemo } from "@/components/tiptap/rich-text-editor"

export default function Page() {
  return (
    
      
    
  )
}
[V0_FILE]typescriptreact:file="components/hero.tsx"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Github } from "lucide-react"

export function Hero() {
  return (
    
      
        
          
            Build your rich-text editor
          
          Framework · Plugins · Components
          
            
            
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/footer.tsx"
export function Footer() {
  return (
    
      
        
          
            Built by{" "}
            
              Ehtisham Afzal
            {" "}
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx"
import { RichTextEditorDemo } from "@/components/tiptap/rich-text-editor"
import { Hero } from "@/components/hero"
import { Footer } from "@/components/footer"

export default function Page() {
  return (
    
      
      
        
      
      
    
  )
}