| 1 | 'use client' |
| 2 | |
| 3 | import { Extension } from '@tiptap/core' |
| 4 | import { 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 } |
| 9 | import { Plugin, PluginKey |
| 10 | import type { Editor |
| 11 | import { EditorContent, useEditor |
| 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 |
| 32 | import { useCallback, useImperativeHandle |
| 33 | import { toast } |
| 34 | import CodeBlockShiki from 'tiptap-extension-code-block-shiki |
| 35 | import { Markdown, type |
| 36 | import { Separator } |
| 37 | import { Toggle } |
| 38 | import { uploadFile } |
| 39 | |
| 40 | // Blob URL -> File mapping for deferred upload |
| 41 | const blobFileMap = new |
| 42 | |
| 43 | const MAX_IMAGE_SIZE = 10 |
| 44 | |
| 45 | function insertImageFile(editor: |
| 46 | if (file.size |
| 47 | return false |
| 48 | } |
| 49 | const blobUrl = |
| 50 | blobFileMap.set(blobUrl |
| 51 | editor.chain().focus |
| 52 | return true |
| 53 | } |
| 54 | |
| 55 | // Custom extension to handle paste and drop of images |
| 56 | const ImageDropPaste = Extension |
| 57 | name: 'imageDropPaste', |
| 58 | |
| 59 | addProseMirrorPlugins() { |
| 60 | const editor = |
| 61 | |
| 62 | return [ |
| 63 | new Plugin({ |
| 64 | key: new PluginKey |
| 65 | props: { |
| 66 | handlePaste(_view, event |
| 67 | const items = |
| 68 | if (!items) |
| 69 | return false |
| 70 | } |
| 71 | |
| 72 | for (const item |
| 73 | if (item.type |
| 74 | event.preventDefault() |
| 75 | const file = |
| 76 | if (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 = |
| 86 | if (!files?.length |
| 87 | return false |
| 88 | } |
| 89 | |
| 90 | const imageFiles = |
| 91 | f.type.startsWith |
| 92 | ) |
| 93 | if (imageFiles.length |
| 94 | return false |
| 95 | } |
| 96 | |
| 97 | event.preventDefault() |
| 98 | for (const file |
| 99 | if (!insertImageFile(editor |
| 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: () |
| 113 | getHTML: () |
| 114 | getMarkdown: () |
| 115 | getText: () |
| 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: () |
| 122 | } |
| 123 | |
| 124 | interface TiptapEditorProps { |
| 125 | content?: string |
| 126 | editable?: boolean |
| 127 | onBlur?: () |
| 128 | onChange?: (content |
| 129 | onMarkdownChange?: (markdown |
| 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 |
| 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 = |
| 151 | const fileInputRef = |
| 152 | |
| 153 | const editor = |
| 154 | immediatelyRender: false, |
| 155 | extensions: [ |
| 156 | StarterKit.configure({ |
| 157 | heading: { levels: [ |
| 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({ |
| 170 | Typography, |
| 171 | Image.configure({ |
| 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 |
| 200 | ).markdown.getMarkdown() |
| 201 | onMarkdownChange(md) |
| 202 | } |
| 203 | }, |
| 204 | onBlur: () => |
| 205 | onBlur?.() |
| 206 | }, |
| 207 | }) |
| 208 | |
| 209 | const uploadImagesAndGetHTML = |
| 210 | if (!editor) |
| 211 | return '' |
| 212 | } |
| 213 | |
| 214 | let html = |
| 215 | |
| 216 | // Find all blob: URLs in the HTML |
| 217 | const blobUrlRegex = |
| 218 | const blobUrls = |
| 219 | |
| 220 | if (blobUrls.length |
| 221 | return html |
| 222 | } |
| 223 | |
| 224 | if (!projectId) |
| 225 | throw new Error( |
| 226 | } |
| 227 | |
| 228 | const uploads = |
| 229 | blobUrls.map(async |
| 230 | const file = |
| 231 | if (!file) |
| 232 | return { blobUrl, |
| 233 | } |
| 234 | |
| 235 | const { id |
| 236 | |
| 237 | URL.revokeObjectURL(blobUrl |
| 238 | blobFileMap.delete(blobUrl |
| 239 | |
| 240 | return { blobUrl, |
| 241 | }) |
| 242 | ) |
| 243 | |
| 244 | for (const result |
| 245 | if (result.status |
| 246 | const { blobUrl, |
| 247 | html = html. |
| 248 | } |
| 249 | } |
| 250 | |
| 251 | editor.commands.setContent |
| 252 | |
| 253 | return html |
| 254 | }, [editor, |
| 255 | |
| 256 | useImperativeHandle(ref, () |
| 257 | getHTML: () => |
| 258 | getMarkdown: () => |
| 259 | ( |
| 260 | editor?.storage as |
| 261 | )?.markdown?.getMarkdown() |
| 262 | getText: () => |
| 263 | getEditor: () => |
| 264 | uploadImagesAndGetHTML, |
| 265 | })) |
| 266 | |
| 267 | const addImageFromFile = |
| 268 | fileInputRef.current?.click |
| 269 | }, []) |
| 270 | |
| 271 | const handleFileSelect = |
| 272 | (e: React |
| 273 | const files = |
| 274 | if (!(files?. |
| 275 | return |
| 276 | } |
| 277 | |
| 278 | for (const file |
| 279 | if (file.type |
| 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 = |
| 291 | // biome-ignore lint/suspicious/noAlert: we need to prompt the user for a link |
| 292 | const url = |
| 293 | if (url && |
| 294 | editor.chain().focus |
| 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 |
| 317 | } |
| 318 | pressed={editor.isActive |
| 319 | size='sm' |
| 320 | > |
| 321 | <Heading1 className=' |
| 322 | </Toggle> |
| 323 | <Toggle |
| 324 | onPressedChange={() => |
| 325 | editor.chain().focus |
| 326 | } |
| 327 | pressed={editor.isActive |
| 328 | size='sm' |
| 329 | > |
| 330 | <Heading2 className=' |
| 331 | </Toggle> |
| 332 | <Toggle |
| 333 | onPressedChange={() => |
| 334 | editor.chain().focus |
| 335 | } |
| 336 | pressed={editor.isActive |
| 337 | size='sm' |
| 338 | > |
| 339 | <Heading3 className=' |
| 340 | </Toggle> |
| 341 | |
| 342 | <Separator className=' |
| 343 | |
| 344 | <Toggle |
| 345 | onPressedChange={() => |
| 346 | pressed={editor.isActive |
| 347 | size='sm' |
| 348 | > |
| 349 | <Bold className=' |
| 350 | </Toggle> |
| 351 | <Toggle |
| 352 | onPressedChange={() => |
| 353 | pressed={editor.isActive |
| 354 | size='sm' |
| 355 | > |
| 356 | <Italic className=' |
| 357 | </Toggle> |
| 358 | <Toggle |
| 359 | onPressedChange={() => |
| 360 | editor.chain().focus |
| 361 | } |
| 362 | pressed={editor.isActive |
| 363 | size='sm' |
| 364 | > |
| 365 | <UnderlineIcon className=' |
| 366 | </Toggle> |
| 367 | <Toggle |
| 368 | onPressedChange={() => |
| 369 | pressed={editor.isActive |
| 370 | size='sm' |
| 371 | > |
| 372 | <Strikethrough className=' |
| 373 | </Toggle> |
| 374 | <Toggle |
| 375 | onPressedChange={() => |
| 376 | pressed={editor.isActive |
| 377 | size='sm' |
| 378 | > |
| 379 | <Code className=' |
| 380 | </Toggle> |
| 381 | |
| 382 | <Separator className=' |
| 383 | |
| 384 | <Toggle |
| 385 | onPressedChange={() => |
| 386 | editor.chain().focus |
| 387 | } |
| 388 | pressed={editor.isActive |
| 389 | size='sm' |
| 390 | > |
| 391 | <List className=' |
| 392 | </Toggle> |
| 393 | <Toggle |
| 394 | onPressedChange={() => |
| 395 | editor.chain().focus |
| 396 | } |
| 397 | pressed={editor.isActive |
| 398 | size='sm' |
| 399 | > |
| 400 | <ListOrdered className=' |
| 401 | </Toggle> |
| 402 | <Toggle |
| 403 | onPressedChange={() => |
| 404 | editor.chain().focus |
| 405 | } |
| 406 | pressed={editor.isActive |
| 407 | size='sm' |
| 408 | > |
| 409 | <Quote className=' |
| 410 | </Toggle> |
| 411 | <Toggle |
| 412 | onPressedChange={() => |
| 413 | editor.chain().focus |
| 414 | } |
| 415 | pressed={false} |
| 416 | size='sm' |
| 417 | > |
| 418 | <Minus className=' |
| 419 | </Toggle> |
| 420 | |
| 421 | <Separator className=' |
| 422 | |
| 423 | <Toggle onPressedChange={ |
| 424 | <LinkIcon className=' |
| 425 | </Toggle> |
| 426 | <Toggle onPressedChange={ |
| 427 | <ImageIcon className=' |
| 428 | </Toggle> |
| 429 | |
| 430 | <Separator className=' |
| 431 | |
| 432 | <Toggle |
| 433 | disabled={!editor. |
| 434 | onPressedChange={() => |
| 435 | pressed={false} |
| 436 | size='sm' |
| 437 | > |
| 438 | <Undo className=' |
| 439 | </Toggle> |
| 440 | <Toggle |
| 441 | disabled={!editor. |
| 442 | onPressedChange={() => |
| 443 | pressed={false} |
| 444 | size='sm' |
| 445 | > |
| 446 | <Redo className=' |
| 447 | </Toggle> |
| 448 | </div> |
| 449 | )} |
| 450 | |
| 451 | <EditorContent editor={ |
| 452 | </div> |
| 453 | ) |
| 454 | } |