Fixed all npm errors

src/backend.js

-import { Editor } from "./editor/js/components/editor";
-
-import ReactDOM from "react-dom";
-import React from "react";
-
-ReactDOM.render(
-    <Editor />,
-    document.getElementById("knowledge-space-editor")
-);

src/backend.tsx

+import { Editor } from "./editor/js/components/editor";
+import * as Config from "./config";
+
+import { createRoot } from "react-dom/client";
+import React from "react";
+
+const container = document.getElementById("knowledge-space-editor");
+const root = createRoot(container);
+root.render(<Editor spaceId={Config.SPACE} />);

src/editor/js/components/editor.tsx

 import React from "react";
 import { Graph } from "../structures/graph/graph";
-import { loadGraphJson } from "../../../datasets";
+import { loadGraphJson } from "../../../common/datasets";
 import { NodeDetails } from "./nodedetails";
 import { SpaceSelect } from "./spaceselect";
 import "./editor.css";
-import ReactForceGraph2d from "react-force-graph-2d";
+import { ForceGraph2D } from "react-force-graph";
 import { Node } from "../structures/graph/node";
 import { HistoryNavigator } from "./historynavigator";
 import { GraphElement } from "../structures/graph/graphelement";
@@ -111,7 +111,7 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
             graph: newGraph,
         });
 
-        this.state.graph.onChangeCallbacks.push(this.onHistoryChange);
+        newGraph.onChangeCallbacks.push(this.onHistoryChange);
 
         // Subscribe to global events
         document.onkeydown = this.handleKeyDown;
@@ -450,7 +450,7 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
                 <div id="content">
                     <div id="force-graph-renderer" ref={this.graphContainer}>
                         {this.state.graph ? (
-                            <ReactForceGraph2d
+                            <ForceGraph2D
                                 ref={this.renderer}
                                 width={this.state.graphWidth}
                                 graphData={{
@@ -466,11 +466,11 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
                                 nodeCanvasObjectMode={() => "after"}
                                 linkCanvasObject={this.handleLinkCanvasObject}
                                 linkCanvasObjectMode={() => "replace"}
-                                nodeColor={(node) => (node as Node).type.color}
+                                nodeColor={(node: Node) => node.type.color}
                                 onNodeDrag={this.handleNodeDrag}
                                 onNodeDragEnd={this.handleNodeDragEnd}
                                 onLinkClick={this.handleLinkClick}
-                                onBackgroundClick={(event) =>
+                                onBackgroundClick={(event: any) =>
                                     this.handleBackgroundClick(
                                         event,
                                         this.extractPositions(event)

src/editor/js/components/historynavigator.tsx

 import React, { ChangeEvent } from "react";
-import { saveGraphJson } from "../../../datasets";
+import { saveGraphJson } from "../../../common/datasets";
 import ManagedData from "../structures/manageddata";
 import "./historynavigator.css";
 

src/editor/js/components/spaceselect.tsx

 import React, { ChangeEvent } from "react";
 import { ReactNode } from "react";
-import { listAllSpaces } from "../../../datasets";
+import { listAllSpaces } from "../../../common/datasets";
 import "./spaceselect.css";
 
 type propTypes = {

src/editor/js/structures/manageddata.ts

 import { SerializableItem } from "./helper/serializableitem";
-import jQuery from "jquery";
 
 const SAVE_BUTTON_ID = "div#ks-editor #toolbar-save";
 

webpack.common.js

@@ -10,7 +10,7 @@ const babelOptions = {
 module.exports = {
     entry: {
         frontend: "./src/frontend.tsx",
-        backend: "./src/backend.js",
+        backend: "./src/backend.tsx",
     },
     output: {
         filename: "[name].js",