Skip to content

Conversation

@signadou
Copy link

Changes Overview

Fixed the bug where rendering <EditorContent /> conditionally (see the repro sandbox) would throw a flushSync() error.

Implementation Approach

Changed ReactRenderer's flushSync() condition to use a new isEditorContentInitialized boolean instead of isInitialized. This ensures that flushSync() is not called during the <EditorContent /> component lifecycle (i.e., during React's commit phase), which would violate React's rules.

Testing Done

Verification Steps

  1. Create a TipTap editor initialized with content that includes a node using a React component (node view)
  2. Create a conditional boolean to toggle rendering of <EditorContent />
  3. Toggle the boolean to mount/unmount the editor content
  4. Confirm that no flushSync() error appears in the console

Additional Notes

This is an updated version of #6691. The implementation is the same, just rebased onto the current develop branch.

Checklist

  • I have created a changeset for this PR if necessary.
  • My changes do not break the library.
  • I have added tests where applicable.
  • I have followed the project guidelines.
  • I have fixed any lint issues.

Related Issues

Closes #6315 and #6691

@changeset-bot
Copy link

changeset-bot bot commented Dec 21, 2025

🦋 Changeset detected

Latest commit: b79698f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 71 packages
Name Type
@tiptap/react Patch
@tiptap/extension-drag-handle-react Patch
@tiptap/core Patch
@tiptap/extension-blockquote Patch
@tiptap/extension-bold Patch
@tiptap/extension-bubble-menu Patch
@tiptap/extension-bullet-list Patch
@tiptap/extension-code-block-lowlight Patch
@tiptap/extension-code-block Patch
@tiptap/extension-code Patch
@tiptap/extension-collaboration-caret Patch
@tiptap/extension-collaboration Patch
@tiptap/extension-color Patch
@tiptap/extension-details Patch
@tiptap/extension-document Patch
@tiptap/extension-drag-handle-vue-2 Patch
@tiptap/extension-drag-handle-vue-3 Patch
@tiptap/extension-drag-handle Patch
@tiptap/extension-emoji Patch
@tiptap/extension-file-handler Patch
@tiptap/extension-floating-menu Patch
@tiptap/extension-font-family Patch
@tiptap/extension-hard-break Patch
@tiptap/extension-heading Patch
@tiptap/extension-highlight Patch
@tiptap/extension-horizontal-rule Patch
@tiptap/extension-image Patch
@tiptap/extension-invisible-characters Patch
@tiptap/extension-italic Patch
@tiptap/extension-link Patch
@tiptap/extension-list Patch
@tiptap/extension-mathematics Patch
@tiptap/extension-mention Patch
@tiptap/extension-node-range Patch
@tiptap/extension-ordered-list Patch
@tiptap/extension-paragraph Patch
@tiptap/extension-strike Patch
@tiptap/extension-subscript Patch
@tiptap/extension-superscript Patch
@tiptap/extension-table-of-contents Patch
@tiptap/extension-table Patch
@tiptap/extension-text-align Patch
@tiptap/extension-text-style Patch
@tiptap/extension-text Patch
@tiptap/extension-twitch Patch
@tiptap/extension-typography Patch
@tiptap/extension-underline Patch
@tiptap/extension-unique-id Patch
@tiptap/extension-youtube Patch
@tiptap/extensions Patch
@tiptap/html Patch
@tiptap/markdown Patch
@tiptap/pm Patch
@tiptap/starter-kit Patch
@tiptap/static-renderer Patch
@tiptap/suggestion Patch
@tiptap/vue-2 Patch
@tiptap/vue-3 Patch
@tiptap/extension-character-count Patch
@tiptap/extension-dropcursor Patch
@tiptap/extension-focus Patch
@tiptap/extension-gapcursor Patch
@tiptap/extension-history Patch
@tiptap/extension-list-item Patch
@tiptap/extension-list-keymap Patch
@tiptap/extension-placeholder Patch
@tiptap/extension-table-cell Patch
@tiptap/extension-table-header Patch
@tiptap/extension-table-row Patch
@tiptap/extension-task-item Patch
@tiptap/extension-task-list Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@netlify
Copy link

netlify bot commented Dec 21, 2025

Deploy Preview for tiptap-embed ready!

Name Link
🔨 Latest commit b79698f
🔍 Latest deploy log https://app.netlify.com/projects/tiptap-embed/deploys/6962f3bdb90fbb0008fa97ca
😎 Deploy Preview https://deploy-preview-7357--tiptap-embed.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@WilliamIPark
Copy link
Contributor

Thanks for doing this @signadou. It would be great to get this patch in.

@moekify
Copy link

moekify commented Jan 7, 2026

@bdbch Anything that can be done to get this merged? It's causing a bit of a stir for us still :(

@bdbch bdbch changed the base branch from develop to main January 24, 2026 06:46
@bdbch bdbch requested a review from Copilot January 24, 2026 06:50
@pkg-pr-new
Copy link

pkg-pr-new bot commented Jan 24, 2026

Open in StackBlitz

@tiptap/extension-character-count

npm i https://pkg.pr.new/@tiptap/extension-character-count@7357

@tiptap/extension-dropcursor

npm i https://pkg.pr.new/@tiptap/extension-dropcursor@7357

@tiptap/extension-focus

npm i https://pkg.pr.new/@tiptap/extension-focus@7357

@tiptap/extension-gapcursor

npm i https://pkg.pr.new/@tiptap/extension-gapcursor@7357

@tiptap/extension-list-item

npm i https://pkg.pr.new/@tiptap/extension-list-item@7357

@tiptap/extension-list-keymap

npm i https://pkg.pr.new/@tiptap/extension-list-keymap@7357

@tiptap/extension-history

npm i https://pkg.pr.new/@tiptap/extension-history@7357

@tiptap/extension-placeholder

npm i https://pkg.pr.new/@tiptap/extension-placeholder@7357

@tiptap/extension-table-cell

npm i https://pkg.pr.new/@tiptap/extension-table-cell@7357

@tiptap/extension-table-header

npm i https://pkg.pr.new/@tiptap/extension-table-header@7357

@tiptap/extension-task-item

npm i https://pkg.pr.new/@tiptap/extension-task-item@7357

@tiptap/extension-table-row

npm i https://pkg.pr.new/@tiptap/extension-table-row@7357

@tiptap/extension-task-list

npm i https://pkg.pr.new/@tiptap/extension-task-list@7357

@tiptap/core

npm i https://pkg.pr.new/@tiptap/core@7357

@tiptap/extension-blockquote

npm i https://pkg.pr.new/@tiptap/extension-blockquote@7357

@tiptap/extension-bubble-menu

npm i https://pkg.pr.new/@tiptap/extension-bubble-menu@7357

@tiptap/extension-bold

npm i https://pkg.pr.new/@tiptap/extension-bold@7357

@tiptap/extension-bullet-list

npm i https://pkg.pr.new/@tiptap/extension-bullet-list@7357

@tiptap/extension-code

npm i https://pkg.pr.new/@tiptap/extension-code@7357

@tiptap/extension-code-block

npm i https://pkg.pr.new/@tiptap/extension-code-block@7357

@tiptap/extension-code-block-lowlight

npm i https://pkg.pr.new/@tiptap/extension-code-block-lowlight@7357

@tiptap/extension-collaboration

npm i https://pkg.pr.new/@tiptap/extension-collaboration@7357

@tiptap/extension-collaboration-caret

npm i https://pkg.pr.new/@tiptap/extension-collaboration-caret@7357

@tiptap/extension-color

npm i https://pkg.pr.new/@tiptap/extension-color@7357

@tiptap/extension-details

npm i https://pkg.pr.new/@tiptap/extension-details@7357

@tiptap/extension-drag-handle

npm i https://pkg.pr.new/@tiptap/extension-drag-handle@7357

@tiptap/extension-drag-handle-react

npm i https://pkg.pr.new/@tiptap/extension-drag-handle-react@7357

@tiptap/extension-document

npm i https://pkg.pr.new/@tiptap/extension-document@7357

@tiptap/extension-drag-handle-vue-2

npm i https://pkg.pr.new/@tiptap/extension-drag-handle-vue-2@7357

@tiptap/extension-drag-handle-vue-3

npm i https://pkg.pr.new/@tiptap/extension-drag-handle-vue-3@7357

@tiptap/extension-emoji

npm i https://pkg.pr.new/@tiptap/extension-emoji@7357

@tiptap/extension-floating-menu

npm i https://pkg.pr.new/@tiptap/extension-floating-menu@7357

@tiptap/extension-file-handler

npm i https://pkg.pr.new/@tiptap/extension-file-handler@7357

@tiptap/extension-font-family

npm i https://pkg.pr.new/@tiptap/extension-font-family@7357

@tiptap/extension-hard-break

npm i https://pkg.pr.new/@tiptap/extension-hard-break@7357

@tiptap/extension-heading

npm i https://pkg.pr.new/@tiptap/extension-heading@7357

@tiptap/extension-highlight

npm i https://pkg.pr.new/@tiptap/extension-highlight@7357

@tiptap/extension-image

npm i https://pkg.pr.new/@tiptap/extension-image@7357

@tiptap/extension-horizontal-rule

npm i https://pkg.pr.new/@tiptap/extension-horizontal-rule@7357

@tiptap/extension-invisible-characters

npm i https://pkg.pr.new/@tiptap/extension-invisible-characters@7357

@tiptap/extension-italic

npm i https://pkg.pr.new/@tiptap/extension-italic@7357

@tiptap/extension-link

npm i https://pkg.pr.new/@tiptap/extension-link@7357

@tiptap/extension-mathematics

npm i https://pkg.pr.new/@tiptap/extension-mathematics@7357

@tiptap/extension-mention

npm i https://pkg.pr.new/@tiptap/extension-mention@7357

@tiptap/extension-list

npm i https://pkg.pr.new/@tiptap/extension-list@7357

@tiptap/extension-node-range

npm i https://pkg.pr.new/@tiptap/extension-node-range@7357

@tiptap/extension-ordered-list

npm i https://pkg.pr.new/@tiptap/extension-ordered-list@7357

@tiptap/extension-paragraph

npm i https://pkg.pr.new/@tiptap/extension-paragraph@7357

@tiptap/extension-strike

npm i https://pkg.pr.new/@tiptap/extension-strike@7357

@tiptap/extension-subscript

npm i https://pkg.pr.new/@tiptap/extension-subscript@7357

@tiptap/extension-superscript

npm i https://pkg.pr.new/@tiptap/extension-superscript@7357

@tiptap/extension-table-of-contents

npm i https://pkg.pr.new/@tiptap/extension-table-of-contents@7357

@tiptap/extension-table

npm i https://pkg.pr.new/@tiptap/extension-table@7357

@tiptap/extension-text-align

npm i https://pkg.pr.new/@tiptap/extension-text-align@7357

@tiptap/extension-text-style

npm i https://pkg.pr.new/@tiptap/extension-text-style@7357

@tiptap/extension-text

npm i https://pkg.pr.new/@tiptap/extension-text@7357

@tiptap/extension-twitch

npm i https://pkg.pr.new/@tiptap/extension-twitch@7357

@tiptap/extension-typography

npm i https://pkg.pr.new/@tiptap/extension-typography@7357

@tiptap/extension-underline

npm i https://pkg.pr.new/@tiptap/extension-underline@7357

@tiptap/extension-youtube

npm i https://pkg.pr.new/@tiptap/extension-youtube@7357

@tiptap/extension-unique-id

npm i https://pkg.pr.new/@tiptap/extension-unique-id@7357

@tiptap/extensions

npm i https://pkg.pr.new/@tiptap/extensions@7357

@tiptap/html

npm i https://pkg.pr.new/@tiptap/html@7357

@tiptap/markdown

npm i https://pkg.pr.new/@tiptap/markdown@7357

@tiptap/react

npm i https://pkg.pr.new/@tiptap/react@7357

@tiptap/pm

npm i https://pkg.pr.new/@tiptap/pm@7357

@tiptap/static-renderer

npm i https://pkg.pr.new/@tiptap/static-renderer@7357

@tiptap/suggestion

npm i https://pkg.pr.new/@tiptap/suggestion@7357

@tiptap/vue-2

npm i https://pkg.pr.new/@tiptap/vue-2@7357

@tiptap/vue-3

npm i https://pkg.pr.new/@tiptap/vue-3@7357

@tiptap/starter-kit

npm i https://pkg.pr.new/@tiptap/starter-kit@7357

commit: b79698f

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: flushSync error on dynamic rendering of EditorContent

3 participants