styles and startmenuItems

public/javascript/JSON.js

@@ -2,14 +2,17 @@
 createJsonTree({
     container: domElement,
     data: jsonData,
+    expandInitially = true // optional: expand all nodes
     onChange: (data) => { }, // optional: callback on change
     onSave: (data) => { } // optional: if set, a save button will be added
 });
-*/function createJsonTree({
+*/
+function createJsonTree({
     container,
     data,
     onChange = () => {},
-    onSave = null
+    onSave = null,
+    expandInitially = true
 }) {
     container.innerHTML = "";
     container.classList.add("json-tree-root");
@@ -19,6 +22,8 @@ createJsonTree({
 
     let lastSnapshot = clone(data);
 
+    const expandedPaths = new Set();
+
     function clone(obj) {
         return JSON.parse(JSON.stringify(obj));
     }
@@ -104,34 +109,53 @@ createJsonTree({
         render();
     }
 
+    function collectPaths(obj, path = "root") {
+        if (typeof obj !== "object" || obj === null) return;
+
+        expandedPaths.add(path);
+
+        const entries = Array.isArray(obj)
+            ? obj.map((v, i) => [i, v])
+            : Object.entries(obj);
+
+        for (const [k, v] of entries) {
+            collectPaths(v, `${path}.${k}`);
+        }
+    }
+
+    if (expandInitially) {
+        collectPaths(data);
+    }
+
     function render() {
         container.innerHTML = "";
 
-        const controls = document.createElement("div");
-        controls.className = "json-controls";
-
-        const undoBtn = document.createElement("button");
-        undoBtn.className = "monolyth";
-        undoBtn.textContent = "Undo";
-        undoBtn.onclick = undo;
-
-        const redoBtn = document.createElement("button");
-        redoBtn.className = "monolyth";
-        redoBtn.textContent = "Redo";
-        redoBtn.onclick = redo;
-
-        controls.appendChild(undoBtn);
-        controls.appendChild(redoBtn);
-
         if (onSave) {
+            const controls = document.createElement("div");
+            controls.className = "json-controls";
+
+            const undoBtn = document.createElement("button");
+            undoBtn.className = "monolyth";
+            undoBtn.textContent = "Undo";
+            undoBtn.onclick = undo;
+
+            const redoBtn = document.createElement("button");
+            redoBtn.className = "monolyth";
+            redoBtn.textContent = "Redo";
+            redoBtn.onclick = redo;
+
             const saveBtn = document.createElement("button");
             saveBtn.className = "monolyth";
             saveBtn.textContent = "Save";
             saveBtn.onclick = save;
+
+            controls.appendChild(undoBtn);
+            controls.appendChild(redoBtn);
             controls.appendChild(saveBtn);
+
+            container.appendChild(controls);
         }
 
-        container.appendChild(controls);
         container.appendChild(renderNode(data, null, null, "root", 0));
     }
 
@@ -177,10 +201,24 @@ createJsonTree({
             const children = document.createElement("div");
             children.className = "json-children";
 
-            keyLabel.onclick = toggle.onclick = () => {
-                children.classList.toggle("collapsed");
+            const toggleState = () => {
+                if (expandedPaths.has(path)) {
+                    expandedPaths.delete(path);
+                    children.classList.add("collapsed");
+                } else {
+                    expandedPaths.add(path);
+                    children.classList.remove("collapsed");
+                }
             };
 
+            keyLabel.onclick = toggle.onclick = toggleState;
+
+            if (expandedPaths.has(path)) {
+                children.classList.remove("collapsed");
+            } else {
+                children.classList.add("collapsed");
+            }
+
             addBtn.onclick = () => {
                 let newKey = "";
                 let newValue;
@@ -210,7 +248,6 @@ createJsonTree({
                                 if (!isArray) {
                                     const input = document.querySelector('#newJsonKeyName');
                                     newKey = input?.value?.trim();
-
                                     if (!newKey) return;
                                 }
 
@@ -331,6 +368,7 @@ createJsonTree({
 
         wrapper.appendChild(keySpan);
         wrapper.appendChild(span);
+
         if (key !== null) wrapper.appendChild(removeBtn);
 
         return wrapper;