DOCSEARCHbyAlgolia
Submit Docs

reactjs-tiptap-editor

repository·main·Indexed 20 days ago

https://github.com/hunghg255/reactjs-tiptap-editor

A modern WYSIWYG rich text editor for React applications, built on Tiptap and utilizing shadcn ui components. Version 1.0.31 provides a ready-to-use editor interface with various extensions including Attachment, Blockquote, Bold, BulletList, and Callout, each offering both core logic and corresponding toolbar UI components.

Tokens
71.4K
Snippets
186
Records
235
Agent score
71%

What's inside reactjs-tiptap-editor

  2. Keyboard shortcut behavior for Color

    main

    The default shortcut Mod-Shift-C (Cmd-Shift-C on Mac, Ctrl-Shift-C on Windows/Linux) features intelligent toggle logic:

    1. No color applied: Applies the currently selected color to the selection.
    2. Same color already applied: Removes the color (toggles it off).
    3. Different color applied: Replaces the existing color with the currently selected color.
    4. "No Fill" selected: Does nothing, preventing the application of an undefined color.

  3. Understand Inline vs Block images

    main

    The Image.configure() method registers two node types to ensure compatibility and flexibility:

    1. image: A legacy inline node used for ProseMirror JSON compatibility and when images are wrapped in <span> tags with inline="true" in HTML.
    2. imageBlock: A block-level node used when defaultInline is set to false or when using setImageBlock(). In HTML, these are parsed from <div class="image"><img ... /></div>.

    Migration Note: If you are migrating old JSON data where type: "image" is used, use the migrateImageJSONToImageBlock(json) function before saving the document to convert them to the new block format.

  4. Understand Highlight color synchronization

    main

    The Highlight extension maintains a shared state for the selected color across all UI components. This ensures a consistent user experience:

    • Selecting a color in the toolbar updates the bubble menu.
    • Selecting a color in the bubble menu updates the toolbar.
    • The keyboard shortcut always uses the last selected color.
    • All color pickers (palette, recent, custom) stay in sync.
    • Selecting "No Fill" clears the stored color state.

  5. Understand Video upload behavior and lifecycle

    main

    Upload Lifecycle

    • During Upload: The toolbar and slash-command dialogs remain open but the upload button is disabled.
    • Progress: If showUploadProgress is true, the editor displays overall and per-file progress. If the upload function ignores the onProgress callback, an indeterminate spinner is shown.
    • Completion: When all uploads resolve, URLs are inserted in the order files were selected, and the dialog closes. Files that reach 100% but are still resolving are marked as 'processing'.
    • Failures: If one upload fails, successful uploads are still inserted. The failed file remains visible in the dialog for retry. If no onError handler is provided, a default error toast is shown.

    Validation

    • acceptMimes and maxSize are checked before the upload begins.
    • With multiple: true, valid files are queued and processed according to uploadConcurrency.

  7. Understand Highlight keyboard shortcut behavior

    main

    The default shortcut Mod-Shift-H (Ctrl-Shift-H on Windows/Linux, Cmd-Shift-H on Mac) follows an intelligent toggle logic:

    1. No highlight applied: Applies the currently selected highlight color.
    2. Same color already applied: Removes the highlight (toggles off).
    3. Different color applied: Replaces the existing highlight with the currently selected color.
    4. "No Fill" selected: Does nothing (prevents applying an undefined highlight).

  8. Pair RichText components with their required extensions

    main

    The reactjs-tiptap-editor uses specific component-to-extension pairings. If you use a RichText UI component, you must include the corresponding Tiptap extension in your configuration:

    UI ComponentRequired Extension
    RichTextImageImage
    RichTextBubbleImageImage
    SlashCommandListSlashCommand
    RichTextUndo / RichTextRedoHistory
    RichTextBubbleCodeBlockCodeBlock
    RichTextTable / RichTextBubbleTableTable

  10. Avoid common reactjs-tiptap-editor anti-patterns

    main

    To ensure a stable and performant editor, avoid these common mistakes:

    • Missing Extensions: Never render a UI component like RichTextBold, RichTextImage, SlashCommandList, or RichTextBubble* without including its corresponding extension in the extensions array. The UI will exist, but it will not function.
    • Blind StarterKit Usage: Do not use @tiptap/starter-kit if you are already importing individual base extensions manually, as this can lead to redundancy.
    • Missing Styles: Always ensure reactjs-tiptap-editor/style.css is imported. Without it, the editor UI will be broken.
    • Server-Side Rendering Errors: Do not attempt to render editor code in a React Server Component. Use a client boundary ('use client') in frameworks like Next.js.
    • Bloated Bundles: Avoid importing every available extension "just in case". Only import what is strictly necessary for the requested features.
    • Incorrect Upload Handlers: In production, ensure upload callbacks return a Promise<string> representing the URL of the uploaded asset.

  11. How Color selection synchronization works

    main

    The Color extension implements a shared color state across all UI instances. This ensures a consistent user experience:

    • Toolbar & Bubble Menu: Selecting a color in the toolbar automatically updates the bubble menu, and vice versa.
    • Keyboard Shortcuts: The shortcut uses the most recently selected color.
    • Picker Consistency: All active color pickers in the editor will display the same currently selected color.

  12. Configure Feature-Specific Dependencies

    main

    Some features require additional third-party packages or specific configurations to function:

    • Image Crop UI: Install react-image-crop and import react-image-crop/dist/ReactCrop.css.
    • CodeBlock Syntax Highlighting: Install highlight.js and lowlight, then configure using CodeBlock.configure({ lowlight }).
    • ImageGif with Giphy: Configure using ImageGif.configure({ provider: 'giphy', API_KEY }).
    • Mandatory Styles: Always ensure you import reactjs-tiptap-editor/style.css.