upgrade to react 18

examples/editor/package.json

@@ -10,12 +10,12 @@
   },
   "dependencies": {
     "@blocknote/core": "^0.1.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.12",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
     "@vitejs/plugin-react": "^1.0.7",
     "eslint": "^8.10.0",
     "eslint-config-react-app": "^7.0.0",

examples/editor/src/main.tsx

@@ -1,14 +1,13 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import App from "./App";
 import "./index.css";
 
 window.React = React;
-window.ReactDOM = ReactDOM;
 
-ReactDOM.render(
+const root = createRoot(document.getElementById("root")!);
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById("root")
+  </React.StrictMode>
 );

package.json

@@ -26,8 +26,8 @@
     "postpublish": "rm -rf packages/core/README.md"
   },
   "overrides": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "prosemirror-view": "1.26.2"
   }
 }

packages/core/package.json

@@ -72,21 +72,19 @@
     "prosemirror-model": "1.18.1",
     "prosemirror-state": "1.4.1",
     "prosemirror-view": "1.26.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-icons": "^4.3.1",
-    "styled-components": "^5.3.3",
     "uuid": "^8.3.2"
   },
-  "overrides": {
-    "react-dom": "$react-dom",
-    "react": "$react"
+  "peerDependencies": {
+    "react": "^18",
+    "react-dom": "^18"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.179",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.12",
-    "@types/styled-components": "^5.1.24",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
     "@types/uuid": "^8.3.4",
     "eslint": "^8.10.0",
     "eslint-config-react-app": "^7.0.0",

packages/core/src/extensions/BubbleMenu/BubbleMenuExtension.tsx

@@ -1,7 +1,7 @@
 import { MantineProvider } from "@mantine/core";
 import { Extension } from "@tiptap/core";
 import { PluginKey } from "prosemirror-state";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { BlockNoteTheme } from "../../BlockNoteTheme";
 import rootStyles from "../../root.module.css";
 import { createBubbleMenuPlugin } from "./BubbleMenuPlugin";
@@ -16,11 +16,11 @@ export const BubbleMenuExtension = Extension.create<{}>({
   addProseMirrorPlugins() {
     const element = document.createElement("div");
     element.className = rootStyles.bnRoot;
-    ReactDOM.render(
+    const root = createRoot(element);
+    root.render(
       <MantineProvider theme={BlockNoteTheme}>
         <BubbleMenu editor={this.editor} />
-      </MantineProvider>,
-      element
+      </MantineProvider>
     );
     return [
       createBubbleMenuPlugin({

packages/core/src/extensions/DraggableBlocks/DraggableBlocksPlugin.tsx

@@ -1,13 +1,13 @@
-import { NodeSelection, Plugin, PluginKey, Selection } from "prosemirror-state";
+import { MantineProvider } from "@mantine/core";
 import { Node } from "prosemirror-model";
+import { NodeSelection, Plugin, PluginKey, Selection } from "prosemirror-state";
 import * as pv from "prosemirror-view";
 import { EditorView } from "prosemirror-view";
-import ReactDOM from "react-dom";
-import { DragHandle } from "./components/DragHandle";
-import { MantineProvider } from "@mantine/core";
+import { Editor } from "@tiptap/core";
+import { createRoot, Root } from "react-dom/client";
 import { BlockNoteTheme } from "../../BlockNoteTheme";
 import { MultipleNodeSelection } from "../Blocks/MultipleNodeSelection";
-import { Editor } from "@tiptap/core";
+import { DragHandle } from "./components/DragHandle";
 
 const serializeForClipboard = (pv as any).__serializeForClipboard;
 // code based on https://github.com/ueberdosis/tiptap/issues/323#issuecomment-506637799
@@ -220,6 +220,7 @@ function dragStart(e: DragEvent, view: EditorView) {
 
 export const createDraggableBlocksPlugin = (editor: Editor) => {
   let dropElement: HTMLElement | undefined;
+  let dropElementRoot: Root | undefined;
 
   const WIDTH = 48;
 
@@ -253,7 +254,7 @@ export const createDraggableBlocksPlugin = (editor: Editor) => {
         dragStart(e, editorView)
       );
       dropElement.addEventListener("dragend", () => unsetDragImage());
-
+      dropElementRoot = createRoot(dropElement);
       return {
         // update(view, prevState) {},
         destroy() {
@@ -262,6 +263,7 @@ export const createDraggableBlocksPlugin = (editor: Editor) => {
           }
           dropElement.parentNode!.removeChild(dropElement);
           dropElement = undefined;
+          dropElementRoot = undefined;
         },
       };
     },
@@ -280,12 +282,12 @@ export const createDraggableBlocksPlugin = (editor: Editor) => {
       //       return true;
       //     },
       handleKeyDown(_view, _event) {
-        if (!dropElement) {
+        if (!dropElementRoot) {
           throw new Error("unexpected");
         }
         menuShown = false;
         addClicked = false;
-        ReactDOM.render(<></>, dropElement);
+        dropElementRoot.render(<></>);
         return false;
       },
       handleDOMEvents: {
@@ -302,16 +304,16 @@ export const createDraggableBlocksPlugin = (editor: Editor) => {
           return true;
         },
         mousedown(_view, _event: any) {
-          if (!dropElement) {
+          if (!dropElementRoot) {
             throw new Error("unexpected");
           }
           menuShown = false;
           addClicked = false;
-          ReactDOM.render(<></>, dropElement);
+          dropElementRoot.render(<></>);
           return false;
         },
         mousemove(view, event: any) {
-          if (!dropElement) {
+          if (!dropElementRoot || !dropElement) {
             throw new Error("unexpected");
           }
 
@@ -353,7 +355,7 @@ export const createDraggableBlocksPlugin = (editor: Editor) => {
           dropElement.style.left = left + "px";
           dropElement.style.top = rect.top + "px";
 
-          ReactDOM.render(
+          dropElementRoot.render(
             <MantineProvider theme={BlockNoteTheme}>
               <DragHandle
                 key={block.id + ""}
@@ -363,8 +365,7 @@ export const createDraggableBlocksPlugin = (editor: Editor) => {
                 onHide={onHide}
                 onAddClicked={onAddClicked}
               />
-            </MantineProvider>,
-            dropElement
+            </MantineProvider>
           );
           return true;
         },

packages/core/src/extensions/Hyperlinks/HyperlinkMenuPlugin.tsx

@@ -3,7 +3,7 @@ import Tippy from "@tippyjs/react";
 import { getMarkRange } from "@tiptap/core";
 import { Mark, ResolvedPos } from "prosemirror-model";
 import { Plugin, PluginKey } from "prosemirror-state";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { BlockNoteTheme } from "../../BlockNoteTheme";
 import { HyperlinkMenu } from "./menus/HyperlinkMenu";
 const PLUGIN_KEY = new PluginKey("HyperlinkMenuPlugin");
@@ -12,6 +12,7 @@ export const createHyperlinkMenuPlugin = () => {
   // as we always use Tippy appendTo(document.body), we can just create an element
   // that we use for ReactDOM, but it isn't used anywhere (except by React internally)
   const fakeRenderTarget = document.createElement("div");
+  const fakeRenderTargetRoot = createRoot(fakeRenderTarget);
 
   let hoveredLink: HTMLAnchorElement | undefined;
   let menuState: "cursor-based" | "mouse-based" | "hidden" = "hidden";
@@ -27,7 +28,7 @@ export const createHyperlinkMenuPlugin = () => {
             // don't show menu when we have an active selection
             if (menuState !== "hidden") {
               menuState = "hidden";
-              ReactDOM.render(<></>, fakeRenderTarget);
+              fakeRenderTargetRoot.render(<></>);
             }
             return;
           }
@@ -62,7 +63,7 @@ export const createHyperlinkMenuPlugin = () => {
             // if the cursor moves way
             if (menuState === "cursor-based") {
               menuState = "hidden";
-              ReactDOM.render(<></>, fakeRenderTarget);
+              fakeRenderTargetRoot.render(<></>);
             }
             return;
           }
@@ -86,7 +87,7 @@ export const createHyperlinkMenuPlugin = () => {
           // A URL has to begin with http(s):// to be interpreted as an absolute path
           const editHandler = (href: string, text: string) => {
             menuState = "hidden";
-            ReactDOM.render(<></>, fakeRenderTarget);
+            fakeRenderTargetRoot.render(<></>);
 
             // update the mark with new href
             (foundLinkMark as any).attrs = { ...foundLinkMark.attrs, href }; // TODO: invalid assign to attrs
@@ -133,7 +134,7 @@ export const createHyperlinkMenuPlugin = () => {
               </Tippy>
             </MantineProvider>
           );
-          ReactDOM.render(hyperlinkMenu, fakeRenderTarget);
+          fakeRenderTargetRoot.render(hyperlinkMenu);
           menuState = basedOnCursorPos ? "cursor-based" : "mouse-based";
         },
       };