| 1 | 'use client' |
| 2 | |
| 3 | import { Extension } from '@tiptap/core' |
| 4 | import { Image } from '@tiptap/extension-image' |
| 5 | import TipTapLink from '@tiptap/extension-link' |
| 6 | import Placeholder from '@tiptap/extension-placeholder' |
| 7 | import Typography from '@tiptap/extension-typography' |
| 8 | import { Underline } from '@tiptap/extension-underline' |
| 9 | import { Plugin, PluginKey } from '@tiptap/pm/state' |
| 10 | import type { Editor } from '@tiptap/react' |
| 11 | import { EditorContent, useEditor } from '@tiptap/react' |
| 12 | import StarterKit from '@tiptap/starter-kit' |
| 13 | import { |
| 14 | Bold, |
| 15 | Code, |
| 16 | Heading1, |
| 17 | Heading2, |
| 18 | Heading3, |
| 19 | ImageIcon, |
| 20 | Italic, |
| 21 | LinkIcon, |
| 22 | List, |
| 23 | ListOrdered, |
| 24 | Minus, |
| 25 | Quote, |
| 26 | Redo, |
| 27 | Strikethrough, |
| 28 | UnderlineIcon, |
| 29 | Undo, |
| 30 | } from 'lucide-react' |
| 31 | import type React from 'react' |
| 32 | import { useCallback, useImperativeHandle, useRef } from 'react' |
| 33 | import { toast } from 'sonner' |
| 34 | import CodeBlockShiki from 'tiptap-extension-code-block-shiki' |
| 35 | import { Markdown, type MarkdownStorage } from 'tiptap-markdown' |
| 36 | import { Separator } from '@/components/ui/separator' |
| 37 | import { Toggle } from '@/components/ui/toggle' |
| 38 | import { uploadFile } from '@/lib/upload' |
| 39 | |
| 40 | // Blob URL -> File mapping for deferred upload |
| 41 | const blobFileMap = new Map<string, File>() |
| 42 | |
| 43 | const MAX_IMAGE_SIZE = 10 * 1024 * 1024 // 10MB |
| 44 | |
| 45 | function insertImageFile(editor: Editor, file: File): boolean { |
| 46 | if (file.size > MAX_IMAGE_SIZE) { |
| 47 | return false |
| 48 | } |
| 49 | const blobUrl = URL.createObjectURL(file) |
| 50 | blobFileMap.set(blobUrl, file) |
| 51 | editor.chain().focus().setImage({ src: blobUrl }).run() |
| 52 | return true |
| 53 | } |
| 54 | |
| 55 | // Custom extension to handle paste and drop of images |
| 56 | const ImageDropPaste = Extension.create({ |
| 57 | name: 'imageDropPaste', |
| 58 | |
| 59 | addProseMirrorPlugins() { |
| 60 | const editor = this.editor |
| 61 | |
| 62 | return [ |
| 63 | new Plugin({ |
| 64 | key: new PluginKey('imageDropPaste'), |
| 65 | props: { |
| 66 | handlePaste(_view, event) { |
| 67 | const items = event.clipboardData?.items |
| 68 | if (!items) { |
| 69 | return false |
| 70 | } |
| 71 | |
| 72 | for (const item of items) { |
| 73 | if (item.type.startsWith('image/')) { |
| 74 | event.preventDefault() |
| 75 | const file = item.getAsFile() |
| 76 | if (file && !insertImageFile(editor, file)) { |
| 77 | toast.error('Image must be under 10MB') |
| 78 | } |
| 79 | return true |
| 80 | } |
| 81 | } |
| 82 | return false |
| 83 | }, |
| 84 | handleDrop(_view, event) { |
| 85 | const files = event.dataTransfer?.files |
| 86 | if (!files?.length) { |
| 87 | return false |
| 88 | } |
| 89 | |
| 90 | const imageFiles = Array.from(files).filter((f) => |
| 91 | f.type.startsWith('image/') |
| 92 | ) |
| 93 | if (imageFiles.length === 0) { |
| 94 | return false |
| 95 | } |
| 96 | |
| 97 | event.preventDefault() |
| 98 | for (const file of imageFiles) { |
| 99 | if (!insertImageFile(editor, file)) { |
| 100 | toast.error('Image must be under 10MB') |
| 101 | } |
| 102 | } |
| 103 | return true |
| 104 | }, |
| 105 | }, |
| 106 | }), |
| 107 | ] |
| 108 | }, |
| 109 | }) |
| 110 | |
| 111 | export interface EditorRef { |
| 112 | getEditor: () => Editor | null |
| 113 | getHTML: () => string |
| 114 | getMarkdown: () => string |
| 115 | getText: () => string |
| 116 | /** |
| 117 | * Uploads all pending blob images to S3 via the /api/upload endpoint, |
| 118 | * replaces blob URLs in the editor content with the returned S3 URLs, |
| 119 | * and returns the final HTML. |
| 120 | */ |
| 121 | uploadImagesAndGetHTML: () => Promise<string> |
| 122 | } |
| 123 | |
| 124 | interface TiptapEditorProps { |
| 125 | content?: string |
| 126 | editable?: boolean |
| 127 | onBlur?: () => void |
| 128 | onChange?: (content: string) => void |
| 129 | onMarkdownChange?: (markdown: string) => void |
| 130 | placeholder?: string |
| 131 | /** Project ID for scoping image uploads. Required for image upload support. */ |
| 132 | projectId?: string |
| 133 | /** Ref for imperative access to editor methods. */ |
| 134 | ref?: React.RefObject<EditorRef | null> | null |
| 135 | /** Show formatting toolbar. Defaults to true when editable. */ |
| 136 | toolbar?: boolean |
| 137 | } |
| 138 | |
| 139 | export default function TiptapEditor({ |
| 140 | content = '', |
| 141 | onChange, |
| 142 | onMarkdownChange, |
| 143 | onBlur, |
| 144 | placeholder = 'Start writing...', |
| 145 | editable = true, |
| 146 | toolbar, |
| 147 | projectId, |
| 148 | ref, |
| 149 | }: TiptapEditorProps) { |
| 150 | const showToolbar = toolbar ?? editable |
| 151 | const fileInputRef = useRef<HTMLInputElement>(null) |
| 152 | |
| 153 | const editor = useEditor({ |
| 154 | immediatelyRender: false, |
| 155 | extensions: [ |
| 156 | StarterKit.configure({ |
| 157 | heading: { levels: [1, 2, 3] }, |
| 158 | codeBlock: false, |
| 159 | }), |
| 160 | CodeBlockShiki.configure({ |
| 161 | themes: { |
| 162 | dark: 'ayu-dark', |
| 163 | light: 'min-light', |
| 164 | }, |
| 165 | HTMLAttributes: { |
| 166 | class: 'not-prose', |
| 167 | }, |
| 168 | }), |
| 169 | Placeholder.configure({ placeholder }), |
| 170 | Typography, |
| 171 | Image.configure({ allowBase64: true }), |
| 172 | Underline.configure(), |
| 173 | TipTapLink.configure({ |
| 174 | openOnClick: 'whenNotEditable', |
| 175 | defaultProtocol: 'https', |
| 176 | }), |
| 177 | Markdown.configure({ |
| 178 | breaks: true, |
| 179 | html: true, |
| 180 | linkify: true, |
| 181 | transformCopiedText: true, |
| 182 | transformPastedText: true, |
| 183 | tightLists: false, |
| 184 | }), |
| 185 | ImageDropPaste, |
| 186 | ], |
| 187 | content, |
| 188 | editable, |
| 189 | editorProps: { |
| 190 | attributes: { |
| 191 | class: |
| 192 | 'prose prose-sm dark:prose-invert prose-headings:text-foreground prose-p:text-foreground prose-strong:text-foreground prose-code:text-foreground prose-code:bg-muted prose-code:rounded prose-code:px-1 prose-code:py-0.5 prose-code:before:content-none prose-code:after:content-none prose-blockquote:border-border prose-hr:border-border max-w-none min-h-[300px] px-4 py-3 focus:outline-none', |
| 193 | }, |
| 194 | }, |
| 195 | onUpdate: ({ editor }) => { |
| 196 | onChange?.(editor.getHTML()) |
| 197 | if (onMarkdownChange) { |
| 198 | const md = ( |
| 199 | editor.storage as unknown as { markdown: MarkdownStorage } |
| 200 | ).markdown.getMarkdown() |
| 201 | onMarkdownChange(md) |
| 202 | } |
| 203 | }, |
| 204 | onBlur: () => { |
| 205 | onBlur?.() |
| 206 | }, |
| 207 | }) |
| 208 | |
| 209 | const uploadImagesAndGetHTML = useCallback(async (): Promise<string> => { |
| 210 | if (!editor) { |
| 211 | return '' |
| 212 | } |
| 213 | |
| 214 | let html = editor.getHTML() |
| 215 | |
| 216 | // Find all blob: URLs in the HTML |
| 217 | const blobUrlRegex = /blob:[^"'\s)]+/g |
| 218 | const blobUrls = [...new Set(html.match(blobUrlRegex) ?? [])] |
| 219 | |
| 220 | if (blobUrls.length === 0) { |
| 221 | return html |
| 222 | } |
| 223 | |
| 224 | if (!projectId) { |
| 225 | throw new Error('projectId is required to upload images') |
| 226 | } |
| 227 | |
| 228 | const uploads = await Promise.allSettled( |
| 229 | blobUrls.map(async (blobUrl) => { |
| 230 | const file = blobFileMap.get(blobUrl) |
| 231 | if (!file) { |
| 232 | return { blobUrl, finalUrl: blobUrl } |
| 233 | } |
| 234 | |
| 235 | const { id } = await uploadFile(file, projectId) |
| 236 | |
| 237 | URL.revokeObjectURL(blobUrl) |
| 238 | blobFileMap.delete(blobUrl) |
| 239 | |
| 240 | return { blobUrl, finalUrl: `/api/files/${id}` } |
| 241 | }) |
| 242 | ) |
| 243 | |
| 244 | for (const result of uploads) { |
| 245 | if (result.status === 'fulfilled') { |
| 246 | const { blobUrl, finalUrl } = result.value |
| 247 | html = html.replaceAll(blobUrl, finalUrl) |
| 248 | } |
| 249 | } |
| 250 | |
| 251 | editor.commands.setContent(html, { emitUpdate: false }) |
| 252 | |
| 253 | return html |
| 254 | }, [editor, projectId]) |
| 255 | |
| 256 | useImperativeHandle(ref, () => ({ |
| 257 | getHTML: () => editor?.getHTML() || '', |
| 258 | getMarkdown: () => |
| 259 | ( |
| 260 | editor?.storage as unknown as { markdown: MarkdownStorage } | undefined |
| 261 | )?.markdown?.getMarkdown() || '', |
| 262 | getText: () => editor?.getText() || '', |
| 263 | getEditor: () => editor, |
| 264 | uploadImagesAndGetHTML, |
| 265 | })) |
| 266 | |
| 267 | const addImageFromFile = useCallback(() => { |
| 268 | fileInputRef.current?.click() |
| 269 | }, []) |
| 270 | |
| 271 | const handleFileSelect = useCallback( |
| 272 | (e: React.ChangeEvent<HTMLInputElement>) => { |
| 273 | const files = e.target.files |
| 274 | if (!(files?.length && editor)) { |
| 275 | return |
| 276 | } |
| 277 | |
| 278 | for (const file of Array.from(files)) { |
| 279 | if (file.type.startsWith('image/') && !insertImageFile(editor, file)) { |
| 280 | toast.error('Image must be under 10MB') |
| 281 | } |
| 282 | } |
| 283 | |
| 284 | // Reset so same file can be re-selected |
| 285 | e.target.value = '' |
| 286 | }, |
| 287 | [editor] |
| 288 | ) |
| 289 | |
| 290 | const addLink = useCallback(() => { |
| 291 | // biome-ignore lint/suspicious/noAlert: we need to prompt the user for a link |
| 292 | const url = prompt('Link URL') |
| 293 | if (url && editor) { |
| 294 | editor.chain().focus().setLink({ href: url }).run() |
| 295 | } |
| 296 | }, [editor]) |
| 297 | |
| 298 | if (!editor) { |
| 299 | return null |
| 300 | } |
| 301 | return ( |
| 302 | <div className='rounded-lg border bg-background'> |
| 303 | <input |
| 304 | accept='image/*' |
| 305 | className='hidden' |
| 306 | multiple |
| 307 | onChange={handleFileSelect} |
| 308 | ref={fileInputRef} |
| 309 | type='file' |
| 310 | /> |
| 311 | |
| 312 | {showToolbar && ( |
| 313 | <div className='sticky top-0 z-10 flex flex-wrap items-center gap-0.5 overflow-hidden border-b bg-background px-2 py-1.5'> |
| 314 | <Toggle |
| 315 | onPressedChange={() => |
| 316 | editor.chain().focus().toggleHeading({ level: 1 }).run() |
| 317 | } |
| 318 | pressed={editor.isActive('heading', { level: 1 })} |
| 319 | > |
| 320 | <Heading1 className='size-4' /> |
| 321 | </Toggle> |
| 322 | <Toggle |
| 323 | onPressedChange={() => |
| 324 | editor.chain().focus().toggleHeading({ level: 2 }).run() |
| 325 | } |
| 326 | pressed={editor.isActive('heading', { level: 2 })} |
| 327 | > |
| 328 | <Heading2 className='size-4' /> |
| 329 | </Toggle> |
| 330 | <Toggle |
| 331 | onPressedChange={() => |
| 332 | editor.chain().focus().toggleHeading({ level: 3 }).run() |
| 333 | } |
| 334 | pressed={editor.isActive('heading', { level: 3 })} |
| 335 | > |
| 336 | <Heading3 className='size-4' /> |
| 337 | </Toggle> |
| 338 | |
| 339 | <Separator className='!h-5 mx-1' orientation='vertical' /> |
| 340 | |
| 341 | <Toggle |
| 342 | onPressedChange={() => editor.chain().focus().toggleBold().run()} |
| 343 | pressed={editor.isActive('bold')} |
| 344 | > |
| 345 | <Bold className='size-4' /> |
| 346 | </Toggle> |
| 347 | <Toggle |
| 348 | onPressedChange={() => editor.chain().focus().toggleItalic().run()} |
| 349 | pressed={editor.isActive('italic')} |
| 350 | > |
| 351 | <Italic className='size-4' /> |
| 352 | </Toggle> |
| 353 | <Toggle |
| 354 | onPressedChange={() => |
| 355 | editor.chain().focus().toggleUnderline().run() |
| 356 | } |
| 357 | pressed={editor.isActive('underline')} |
| 358 | > |
| 359 | <UnderlineIcon className='size-4' /> |
| 360 | </Toggle> |
| 361 | <Toggle |
| 362 | onPressedChange={() => editor.chain().focus().toggleStrike().run()} |
| 363 | pressed={editor.isActive('strike')} |
| 364 | > |
| 365 | <Strikethrough className='size-4' /> |
| 366 | </Toggle> |
| 367 | <Toggle |
| 368 | onPressedChange={() => editor.chain().focus().toggleCode().run()} |
| 369 | pressed={editor.isActive('code')} |
| 370 | > |
| 371 | <Code className='size-4' /> |
| 372 | </Toggle> |
| 373 | |
| 374 | <Separator className='!h-5 mx-1' orientation='vertical' /> |
| 375 | |
| 376 | <Toggle |
| 377 | onPressedChange={() => |
| 378 | editor.chain().focus().toggleBulletList().run() |
| 379 | } |
| 380 | pressed={editor.isActive('bulletList')} |
| 381 | > |
| 382 | <List className='size-4' /> |
| 383 | </Toggle> |
| 384 | <Toggle |
| 385 | onPressedChange={() => |
| 386 | editor.chain().focus().toggleOrderedList().run() |
| 387 | } |
| 388 | pressed={editor.isActive('orderedList')} |
| 389 | > |
| 390 | <ListOrdered className='size-4' /> |
| 391 | </Toggle> |
| 392 | <Toggle |
| 393 | onPressedChange={() => |
| 394 | editor.chain().focus().toggleBlockquote().run() |
| 395 | } |
| 396 | pressed={editor.isActive('blockquote')} |
| 397 | > |
| 398 | <Quote className='size-4' /> |
| 399 | </Toggle> |
| 400 | <Toggle |
| 401 | onPressedChange={() => |
| 402 | editor.chain().focus().setHorizontalRule().run() |
| 403 | } |
| 404 | pressed={false} |
| 405 | > |
| 406 | <Minus className='size-4' /> |
| 407 | </Toggle> |
| 408 | |
| 409 | <Separator className='!h-5 mx-1' orientation='vertical' /> |
| 410 | |
| 411 | <Toggle onPressedChange={addLink} pressed={false}> |
| 412 | <LinkIcon className='size-4' /> |
| 413 | </Toggle> |
| 414 | <Toggle onPressedChange={addImageFromFile} pressed={false}> |
| 415 | <ImageIcon className='size-4' /> |
| 416 | </Toggle> |
| 417 | |
| 418 | <Separator className='!h-5 mx-1' orientation='vertical' /> |
| 419 | |
| 420 | <Toggle |
| 421 | disabled={!editor.can().undo()} |
| 422 | onPressedChange={() => editor.chain().focus().undo().run()} |
| 423 | pressed={false} |
| 424 | > |
| 425 | <Undo className='size-4' /> |
| 426 | </Toggle> |
| 427 | <Toggle |
| 428 | disabled={!editor.can().redo()} |
| 429 | onPressedChange={() => editor.chain().focus().redo().run()} |
| 430 | pressed={false} |
| 431 | > |
| 432 | <Redo className='size-4' /> |
| 433 | </Toggle> |
| 434 | </div> |
| 435 | )} |
| 436 | |
| 437 | <EditorContent editor={editor} /> |
| 438 | </div> |
| 439 | ) |
| 440 | } |