Added effect to trigger checkpoint on selection change

src/editor/components/nodedetails.tsx

-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { DescriptiveReference, Node } from "../../common/graph/node";
 import { NodeType } from "../../common/graph/nodetype";
 import "./nodedetails.css";
@@ -23,10 +23,6 @@ function NodeDetails({
 }: NodeDetailsProps) {
     const [changed, setChanged] = useState(false);
 
-    if (selectedNodes.length == 0) {
-        return <div id="nodedetails">No node selected.</div>;
-    }
-
     const getCollectiveValue = function <ValueType>(
         getter: (n: Node) => ValueType,
         defaultValue: ValueType
@@ -38,18 +34,6 @@ function NodeDetails({
         return differentValueFound ? defaultValue : referenceValue;
     };
 
-    const referenceData: NodeDataChangeRequest = {
-        id: -1,
-        name: getCollectiveValue((n) => n.name, undefined),
-        description: getCollectiveValue((n) => n.description, undefined),
-        video: getCollectiveValue((n) => n.video, undefined),
-        icon: getCollectiveValue((n) => n.icon, undefined),
-        banner: getCollectiveValue((n) => n.banner, undefined),
-        references: getCollectiveValue((n) => n.references, undefined),
-        type: getCollectiveValue((n) => n.type, undefined),
-        visibleAfter: getCollectiveValue((n) => n.visibleAfter, undefined),
-    };
-
     const handleDataChange = function <ValueType>(
         key: keyof NodeDataChangeRequest,
         value: ValueType
@@ -108,6 +92,24 @@ function NodeDetails({
         setChanged(false);
     };
 
+    useEffect(handleBlur, [selectedNodes]);
+
+    if (selectedNodes.length == 0) {
+        return <div id="nodedetails">No node selected.</div>;
+    }
+
+    const referenceData: NodeDataChangeRequest = {
+        id: -1,
+        name: getCollectiveValue((n) => n.name, undefined),
+        description: getCollectiveValue((n) => n.description, undefined),
+        video: getCollectiveValue((n) => n.video, undefined),
+        icon: getCollectiveValue((n) => n.icon, undefined),
+        banner: getCollectiveValue((n) => n.banner, undefined),
+        references: getCollectiveValue((n) => n.references, undefined),
+        type: getCollectiveValue((n) => n.type, undefined),
+        visibleAfter: getCollectiveValue((n) => n.visibleAfter, undefined),
+    };
+
     return (
         <div id="nodedetails" onBlur={handleBlur}>
             {selectedNodes.length === 1 ? (