Created drop down menu for editing NodeTypes

src/editor/components/nodetypeentry.css

-div#ks-editor .node-type-name {
-    width: 150px;
+div#ks-editor input,
+div#ks-editor button {
+    margin-bottom: 0.5em;
+}
+
+div#ks-editor input {
+    max-width: 100%;
 }
 
 div#ks-editor .node-type-color {
-    width: 5rem;
+    margin-bottom: 1em;
 }

src/editor/components/nodetypeentry.tsx

@@ -70,7 +70,9 @@ function NodeTypeEntry({
     };
 
     return (
-        <li className="node-type" onBlur={handleBlur}>
+        <div className="node-type" onBlur={handleBlur}>
+            <label htmlFor="node-type-name">Name</label>
+            <br />
             <input
                 className="node-type-name"
                 type={"text"}
@@ -79,21 +81,26 @@ function NodeTypeEntry({
                     handleDataChange("name", event.target.value)
                 }
             />
+            <br />
+            <label htmlFor="node-type-color">Color</label>
+            <br />
             <input
                 className="node-type-color"
                 type={"text"}
                 value={tmpColor !== undefined ? tmpColor : nodeType.color}
                 onChange={(event) => handleColorChange(event.target.value)}
             />
+            <br />
             <button onClick={() => onNodeTypeSelect(nodeType)}>
                 Select nodes
             </button>
+            <br />
             {enableDelete && (
                 <button onClick={() => onNodeTypeDelete([nodeType.id])}>
                     Delete
                 </button>
             )}
-        </li>
+        </div>
     );
 }
 

src/editor/components/nodetypeseditor.css

-div#ks-editor #node-types-editor ul {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
+div#ks-editor #node-types-editor select {
+    margin-bottom: 1em;
 }

src/editor/components/nodetypeseditor.tsx

-import React from "react";
+import React, { useState } from "react";
 import "./nodetypeseditor.css";
 import NodeTypeEntry from "./nodetypeentry";
 import { NodeType, NodeTypeData } from "../../common/graph/nodetype";
@@ -23,23 +23,55 @@ function NodeTypesEditor({
     onNodeTypeDataChange,
     createCheckpoint,
 }: NodeTypesEditorProps) {
+    const [selectedType, setSelectedType] = useState<NodeType>(nodeTypes[0]); // There should always exist at least one NodeType object
+
+    const selectTypeWithId = (id: number) =>
+        setSelectedType(nodeTypes.find((type: NodeType) => type.id == id));
+
+    const handleNodeTypeCreation = () => {
+        const newNodeType = onNodeTypeCreation();
+
+        // Select new type
+        setSelectedType(newNodeType);
+    };
+
+    const handleNodeTypeDelete = (ids: number[]) => {
+        onNodeTypeDelete(ids);
+
+        // Selete other type => Try first element that will not be delete
+        const newSelectedType = nodeTypes.find(
+            (nodeType: NodeType) => !ids.includes(nodeType.id)
+        );
+        setSelectedType(newSelectedType);
+    };
+
     return (
         <div id="node-types-editor">
-            <h3>Node types</h3>
-            <ul>
-                {nodeTypes.map((nodeType) => (
-                    <NodeTypeEntry
+            <button onClick={handleNodeTypeCreation}>Add type</button>
+            <br />
+            <select
+                onChange={(e) => selectTypeWithId(Number(e.target.value))}
+                value={selectedType.id}
+            >
+                {nodeTypes.map((nodeType: NodeType, index: number) => (
+                    <option
                         key={nodeType.id}
-                        nodeType={nodeType}
-                        onNodeTypeSelect={onNodeTypeSelect}
-                        onNodeTypeDelete={onNodeTypeDelete}
-                        onNodeTypeDataChange={onNodeTypeDataChange}
-                        enableDelete={nodeTypes.length > 1}
-                        createCheckpoint={createCheckpoint}
-                    />
+                        value={nodeType.id}
+                        selected={index === 0}
+                    >
+                        {nodeType.name}
+                    </option>
                 ))}
-            </ul>
-            <button onClick={onNodeTypeCreation}>Add type</button>
+            </select>
+            <hr />
+            <NodeTypeEntry
+                nodeType={selectedType}
+                onNodeTypeSelect={onNodeTypeSelect}
+                onNodeTypeDelete={handleNodeTypeDelete}
+                onNodeTypeDataChange={onNodeTypeDataChange}
+                enableDelete={nodeTypes.length > 1}
+                createCheckpoint={createCheckpoint}
+            />
         </div>
     );
 }