fix: react 19 strict mode compatibility

[YousefED]

closes #1618

I think this was caused because in React 19, "refs" also quickly remount when in StrictMode.

We didn't correctly cleanup when the editor was unmounted, causing a nested flushSync here

Ideally we add a test for this, but this might be complicated with our setup (the main repo now uses React 18).

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
blocknote	✅ Ready (Inspect)	Visit Preview	Jun 20, 2025 9:08am
blocknote-website	✅ Ready (Inspect)	Visit Preview	Jun 20, 2025 9:08am

[YousefED]

@nperez0111 upon a second look it seems like unmount was added here: ueberdosis/tiptap@8de8e13#diff-9b7c004a70a95a9e7b2b49f3761403a4abfe14fae1490e32c86306794017e27dR171

I suppose the right solution would be to update tiptap and call unmount instead, right?

[pkg-pr-new]

Open in StackBlitz

@blocknote/ariakit

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/ariakit@1726

@blocknote/code-block

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/code-block@1726

@blocknote/core

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/core@1726

@blocknote/mantine

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/mantine@1726

@blocknote/react

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/react@1726

@blocknote/server-util

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/server-util@1726

@blocknote/shadcn

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/shadcn@1726

@blocknote/xl-ai

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-ai@1726

@blocknote/xl-docx-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-docx-exporter@1726

@blocknote/xl-multi-column

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-multi-column@1726

@blocknote/xl-odt-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-odt-exporter@1726

@blocknote/xl-pdf-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-pdf-exporter@1726

commit: 5c6c942

[nperez0111]

@YousefED in the future, yes. But, that is still on their v3 beta so will be part of the larger upgrade to v3. For now, this is a valid fix

[spacerrsdreams]

Hey guys I still experience the issue flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task.

This is for ReactNodeViewRenderer(CitationMarkComponent); ...

I am using latest version of tiptap/nextjs

package.json

    "@clerk/nextjs": "^6.35.5",
    "@clerk/themes": "^2.4.40",
    "@floating-ui/dom": "^1.7.4",
    "@hookform/resolvers": "^5.2.2",
    "@prisma/adapter-neon": "^7.0.1",
    "@prisma/client": "^7.0.1",
    "@radix-ui/react-accordion": "^1.2.12",
    "@radix-ui/react-alert-dialog": "^1.1.15",
    "@radix-ui/react-aspect-ratio": "^1.1.8",
    "@radix-ui/react-avatar": "^1.1.11",
    "@radix-ui/react-checkbox": "^1.3.3",
    "@radix-ui/react-collapsible": "^1.1.12",
    "@radix-ui/react-context-menu": "^2.2.16",
    "@radix-ui/react-dialog": "^1.1.15",
    "@radix-ui/react-dropdown-menu": "^2.1.16",
    "@radix-ui/react-hover-card": "^1.1.15",
    "@radix-ui/react-label": "^2.1.8",
    "@radix-ui/react-menubar": "^1.1.16",
    "@radix-ui/react-navigation-menu": "^1.2.14",
    "@radix-ui/react-popover": "^1.1.15",
    "@radix-ui/react-progress": "^1.1.8",
    "@radix-ui/react-radio-group": "^1.3.8",
    "@radix-ui/react-scroll-area": "^1.2.10",
    "@radix-ui/react-select": "^2.2.6",
    "@radix-ui/react-separator": "^1.1.8",
    "@radix-ui/react-slider": "^1.3.6",
    "@radix-ui/react-slot": "^1.2.4",
    "@radix-ui/react-switch": "^1.2.6",
    "@radix-ui/react-tabs": "^1.1.13",
    "@radix-ui/react-toggle": "^1.1.10",
    "@radix-ui/react-toggle-group": "^1.1.11",
    "@radix-ui/react-tooltip": "^1.2.8",
    "@radix-ui/react-use-controllable-state": "^1.2.2",
    "@tanstack/query-async-storage-persister": "^5.90.13",
    "@tanstack/react-query": "^5.90.11",
    "@tanstack/react-query-persist-client": "^5.90.13",
    "@tiptap/core": "^3.11.1",
    "@tiptap/extension-drag-handle-react": "^3.11.1",
    "@tiptap/extension-highlight": "^3.11.1",
    "@tiptap/extension-image": "^3.11.1",
    "@tiptap/extension-paragraph": "^3.11.1",
    "@tiptap/extension-text-style": "^3.11.1",
    "@tiptap/extension-unique-id": "^3.11.1",
    "@tiptap/extensions": "^3.11.1",
    "@tiptap/pm": "^3.11.1",
    "@tiptap/react": "^3.11.1",
    "@tiptap/starter-kit": "^3.11.1",
    "@tiptap/suggestion": "^3.11.1",
    "@xyflow/react": "^12.9.3",
    "ai": "^5.0.104",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "^1.1.1",
    "date-fns": "^4.1.0",
    "dotenv": "^17.2.3",
    "embla-carousel-react": "^8.6.0",
    "embla-carousel-wheel-gestures": "^8.1.0",
    "html2pdf.js": "^0.12.1",
    "input-otp": "^1.4.2",
    "lucide-react": "^0.555.0",
    "mammoth": "^1.11.0",
    "motion": "^12.23.24",
    "nanoid": "^5.1.6",
    "next": "16.0.5",
    "next-themes": "^0.4.6",
    "pdfjs-dist": "^5.4.394",
    "prisma": "^7.0.1",
    "react": "19.2.0",
    "react-day-picker": "^9.11.2",
    "react-dom": "19.2.0",
    "react-hook-form": "^7.66.1",
    "react-pdf": "^10.2.0",
    "react-resizable-panels": "^3.0.6",
    "react-syntax-highlighter": "^16.1.0",
    "recharts": "^3.5.0",
    "retry": "^0.13.1",
    "shiki": "^3.17.0",
    "sonner": "^2.0.7",
    "streamdown": "^1.6.8",
    "tailwind-merge": "^3.4.0",
    "tippy.js": "^6.3.7",
    "tokenlens": "^1.3.1",
    "use-stick-to-bottom": "^1.1.1",
    "uuid": "^13.0.0",
    "vaul": "^1.1.2",
    "word-extractor": "^1.0.4",
    "zod": "^4.1.13",
    "zustand": "^5.0.8"
    ```
    
    ```
    export const CitationMarkComponent = ({ node, editor, getPos }: NodeViewProps) => {
  // const [open, setOpen] = useState(false);

  const { citationId, text, citationData, isLinked } = node.attrs as CitationMarkAttributes;

  return (
    <NodeViewWrapper as="span" className="inline" contentEditable={false}>
      return <span>hey</span>
    </NodeViewWrapper>
  );
};