React 18 upgrade

package.json

@@ -40,7 +40,6 @@
     "@aeaton/react-prosemirror": "^0.21.1",
     "@aeaton/react-prosemirror-config-default": "^0.11.0",
     "@babel/runtime": "^7.10.4",
-    "@bynder/compact-view": "^4.2.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-brands-svg-icons": "^5.15.3",
     "@fortawesome/free-solid-svg-icons": "^5.14.0",
@@ -71,13 +70,13 @@
     "moment-timezone": "^0.5.33",
     "monaco-editor": "^0.25.2",
     "notistack": "^3.0.1",
-    "react": "^17.0.2",
+    "react": "^18.0.0",
     "react-chartjs-2": "^4.3.1",
-    "react-codemirror2": "^7.2.1",
+    "react-codemirror2": "^8.0.1",
     "react-cool-onclickoutside": "^1.5.6",
     "react-dnd": "^14.0.2",
     "react-dnd-html5-backend": "^14.0.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.0.0",
     "react-dropzone": "^14.2.2",
     "react-flatpickr": "^3.10.7",
     "react-measure": "^2.5.2",
@@ -116,8 +115,8 @@
     "@types/cli-progress": "^3.11.6",
     "@types/history": "^4.7.11",
     "@types/lodash": "^4.14.182",
+    "@types/react-dom": "^18.0.0",
     "@types/react": "^17.0.85",
-    "@types/react-dom": "^17.0.11",
     "@types/react-is": "^19.0.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-virtualized-auto-sizer": "^1.0.1",

src/apps/active-preview/index.js

@@ -1,14 +1,16 @@
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { Preview } from "./Preview";
 import { ThemeProvider } from "@mui/material/styles";
 import { theme } from "@zesty-io/material";
 
 // interploated by webpack at build time
 window.CONFIG = __CONFIG__;
 
-ReactDOM.render(
+const container = document.getElementById("root");
+const root = createRoot(container);
+
+root.render(
   <ThemeProvider theme={theme}>
     <Preview />
-  </ThemeProvider>,
-  document.getElementById("root")
+  </ThemeProvider>
 );