fix: avoid flushSync call during <EditorContent /> lifecycle

[signadou]

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

• Verified the fix using the reproduction sandbox from the original issue
• All existing tests pass

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]

🦋 Changeset detected

Latest commit: 025b092

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]

✅ Deploy Preview for tiptap-embed ready!

Name	Link
🔨 Latest commit	025b092
🔍 Latest deploy log	https://app.netlify.com/projects/tiptap-embed/deploys/69935a2a855dfa0007098ef1
😎 Deploy Preview	https://deploy-preview-7357--tiptap-embed.netlify.app
📱 Preview on mobile	Toggle 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]

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

[moekify]

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

[pkg-pr-new]

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

[Copilot]

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

[moekify]

@bdbch Any news? 🙏

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

[bdbch]

Before we go forward I'd need to test this PR extensively. We had a lot of back-and-forth with flushSync implementations where prior "fixes" broke other functionalities again.

I'll take a look tomorrow.