From eeb9e07f932c33c94d06fe5602ad00dead510928 Mon Sep 17 00:00:00 2001
From: Lukasz 'Severiaan' Grela <lukasz.grela@gmail.com>
Date: Wed, 26 Oct 2022 10:10:56 +0200
Subject: [PATCH 1/9] version bump

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c98f56d..1369a6a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-json-editor-viewer",
-  "version": "1.0.7",
+  "version": "1.1.1",
   "description": "React JSON Editor and JSON Viewer",
   "main": "build/index.js",
   "scripts": {

From 6249f70b2b9a0d22aea8979aa467f0be2f1a76ed Mon Sep 17 00:00:00 2001
From: Lukasz 'Severiaan' Grela <lukasz.grela@gmail.com>
Date: Wed, 26 Oct 2022 10:16:33 +0200
Subject: [PATCH 2/9] WIP: Add type selector

---
 src/lib/components/editor/Input.js | 69 +++++++++++++++++++++++++-----
 src/lib/util.js                    |  3 ++
 2 files changed, 61 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/editor/Input.js b/src/lib/components/editor/Input.js
index f41e1fb..f83a642 100644
--- a/src/lib/components/editor/Input.js
+++ b/src/lib/components/editor/Input.js
@@ -11,6 +11,8 @@ export default class Input extends React.Component {
     this.state = {
       hovering: false,
       editableInput: null,
+      type: props.type,
+      value: props.value,
     };
   }
 
@@ -26,10 +28,22 @@ export default class Input extends React.Component {
     this.setState({ editableInput: event.target.value });
   };
 
+  onTypeChanged = (event) => {
+    this.setState((state) => ({ ...state, type: event.target.value }));
+  };
+
+  onValueChanged = (event) => {
+    this.setState({ value: event.target.value }, () => {
+      if(this.props.label !== EDIT_KEY || this.state.type === "text") {
+        this.props.onChange(event)
+      }
+    });
+  };
+
   onSaveElement = () => {
     let { saveElement, parent } = this.props;
-    let { editableInput } = this.state;
-    saveElement(parent, editableInput);
+    let { editableInput,type,value } = this.state;
+    saveElement(parent, editableInput, type,value);
   };
 
   render() {
@@ -37,9 +51,6 @@ export default class Input extends React.Component {
       marginLeft,
       marginBottom,
       label,
-      value,
-      type,
-      onChange,
       removeElement,
       parent,
       currentKey,
@@ -47,6 +58,7 @@ export default class Input extends React.Component {
       styles,
     } = this.props;
     let style = merge({ marginLeft, marginBottom }, styles.row);
+    const { type, value } = this.state;
     return (
       <div
         style={style}
@@ -59,13 +71,48 @@ export default class Input extends React.Component {
           onEditableInputChange={this.onEditableInputChange}
           marginLeft={0}
         />
+
+        <div hidden={label !== EDIT_KEY} style={styles.typeSelect}>
+          <label htmlFor="type-selector" hidden>
+            Select type:
+          </label>
+          <select
+            name="type"
+            id="type-selector"
+            style={styles.select}
+            onChange={this.onTypeChanged}
+          >
+            <option value="text">{'""'}</option>
+            <option value="object">{"{}"}</option>
+            <option value="array">[]</option>
+            <option value="boolean">T/F</option>
+            <option value="number">0-9</option>
+            <option value="null">null</option>
+          </select>
+        </div>
+
         <div style={styles.value}>
-          <input
-            style={styles.input}
-            type={type}
-            value={value}
-            onChange={onChange}
-          />
+          {type === "object" && <span style={styles.input}>{"{}"}</span>}
+          {type === "array" && <span style={styles.input}>{"[]"}</span>}
+          {type === "null" && <span style={styles.input}>{"null"}</span>}
+          {type === "boolean" && (
+            <select
+              style={styles.select}
+              value={value === 'true'}
+              onChange={this.onValueChanged}
+            >
+              <option value="true">True</option>
+              <option value="false">False</option>
+            </select>
+          )}
+          {(type === "text" || type === "number") && (
+            <input
+              style={styles.input}
+              type={type}
+              value={value}
+              onChange={this.onValueChanged}
+            />
+          )}
         </div>
         <div hidden={label !== EDIT_KEY}>
           <SaveIcon
diff --git a/src/lib/util.js b/src/lib/util.js
index aefd36f..9f36353 100644
--- a/src/lib/util.js
+++ b/src/lib/util.js
@@ -40,6 +40,9 @@ export const jsonEditorDefaultStyles = {
     borderRadius: 3,
     borderColor: "#d3d3d3",
   },
+  typeSelect: {
+    marginLeft: 10
+  },
   input: {
     borderRadius: 3,
     border: "1px solid #d3d3d3",

From 08dab5a4fd1fbc3c9d6d1fe7dce81bbb2f2e82e8 Mon Sep 17 00:00:00 2001
From: Lukasz 'Severiaan' Grela <lukasz.grela@gmail.com>
Date: Wed, 26 Oct 2022 10:17:20 +0200
Subject: [PATCH 3/9] Update save routine to use data type

---
 src/lib/JSONEditor.js | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/lib/JSONEditor.js b/src/lib/JSONEditor.js
index 7a4f04f..457dc14 100644
--- a/src/lib/JSONEditor.js
+++ b/src/lib/JSONEditor.js
@@ -277,11 +277,35 @@ export default class JSONEditor extends React.Component {
       this.props.onChange(removeKey, currentValue, parent, this.state.data);
   };
 
-  saveElement = (parent, saveKey) => {
+  saveElement = (parent, saveKey, type, newValue) => {
     let value = parent[EDIT_KEY];
+
+    // if type exists then it is a new item
+    if (type === "object") {
+      value = {};
+    }
+    if (type === "array") {
+      value = [];
+    }
+    if (type === "null") {
+      value = null;
+    }
+    if (type === "number") {
+      try {
+        value = parseFloat(newValue);
+      } catch (error) {
+        value = 0;
+      }
+    }
+    if(type === "boolean") {
+      value = newValue === "true"
+    }
+    // else string
+
     parent[saveKey] = value;
     delete parent[EDIT_KEY];
     this.setState(this.state.data);
+    
     if (this.props.onChange)
       this.props.onChange(saveKey, value, parent, this.state.data);
   };

From 8e267a1380a6964a70f8a61826ec316c4be00e2e Mon Sep 17 00:00:00 2001
From: Lukasz 'Severiaan' Grela <lukasz.grela@gmail.com>
Date: Mon, 31 Oct 2022 08:31:18 +0100
Subject: [PATCH 4/9] align react dependencies

---
 package-lock.json | 90 ++++++++++++++++++++++++++---------------------
 package.json      |  2 +-
 2 files changed, 51 insertions(+), 41 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2c3df91..476b6e8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,7 +43,7 @@
         "raf": "3.4.0",
         "react": "17.0.2",
         "react-dev-utils": "^4.2.1",
-        "react-dom": "^16.2.0",
+        "react-dom": "17.0.2",
         "style-loader": "0.19.0",
         "sw-precache-webpack-plugin": "0.11.4",
         "url-loader": "0.6.2",
@@ -2256,23 +2256,31 @@
       "dev": true
     },
     "node_modules/chokidar": {
-      "version": "3.5.1",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
-      "integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==",
-      "dev": true,
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://paulmillr.com/funding/"
+        }
+      ],
       "optional": true,
       "dependencies": {
-        "anymatch": "~3.1.1",
+        "anymatch": "~3.1.2",
         "braces": "~3.0.2",
-        "fsevents": "~2.3.1",
-        "glob-parent": "~5.1.0",
+        "glob-parent": "~5.1.2",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
         "normalize-path": "~3.0.0",
-        "readdirp": "~3.5.0"
+        "readdirp": "~3.6.0"
       },
       "engines": {
         "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
       }
     },
     "node_modules/chokidar/node_modules/anymatch": {
@@ -11828,15 +11836,17 @@
       }
     },
     "node_modules/react-dom": {
-      "version": "16.14.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
-      "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==",
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
+      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
       "dev": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2",
-        "scheduler": "^0.19.1"
+        "scheduler": "^0.20.2"
+      },
+      "peerDependencies": {
+        "react": "17.0.2"
       }
     },
     "node_modules/react-error-overlay": {
@@ -11919,9 +11929,9 @@
       }
     },
     "node_modules/readdirp": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz",
-      "integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==",
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
       "dev": true,
       "optional": true,
       "dependencies": {
@@ -12483,9 +12493,9 @@
       "dev": true
     },
     "node_modules/scheduler": {
-      "version": "0.19.1",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
-      "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
+      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
       "dev": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
@@ -15055,7 +15065,8 @@
     "node_modules/webpack-dev-server/node_modules/chokidar": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-1.7.0.tgz",
-      "integrity": "sha1-eY5ol3gVHIB2tLNg5e3SjNortGg=",
+      "integrity": "sha512-mk8fAWcRUOxY7btlLtitj3A45jOwSAxH4tOFOoEGbVsl6cL6pPMWUy7dwZ/canfj3QEdP6FHSnf/l1c6/WkzVg==",
+      "deprecated": "Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.",
       "dev": true,
       "dependencies": {
         "anymatch": "^1.3.0",
@@ -18102,20 +18113,20 @@
       "dev": true
     },
     "chokidar": {
-      "version": "3.5.1",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
-      "integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==",
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
       "dev": true,
       "optional": true,
       "requires": {
-        "anymatch": "~3.1.1",
+        "anymatch": "~3.1.2",
         "braces": "~3.0.2",
-        "fsevents": "~2.3.1",
-        "glob-parent": "~5.1.0",
+        "fsevents": "~2.3.2",
+        "glob-parent": "~5.1.2",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
         "normalize-path": "~3.0.0",
-        "readdirp": "~3.5.0"
+        "readdirp": "~3.6.0"
       },
       "dependencies": {
         "anymatch": {
@@ -26073,15 +26084,14 @@
       }
     },
     "react-dom": {
-      "version": "16.14.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
-      "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==",
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
+      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
       "dev": true,
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2",
-        "scheduler": "^0.19.1"
+        "scheduler": "^0.20.2"
       }
     },
     "react-error-overlay": {
@@ -26154,9 +26164,9 @@
       }
     },
     "readdirp": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz",
-      "integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==",
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
       "dev": true,
       "optional": true,
       "requires": {
@@ -26635,9 +26645,9 @@
       "dev": true
     },
     "scheduler": {
-      "version": "0.19.1",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
-      "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
+      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
       "dev": true,
       "requires": {
         "loose-envify": "^1.1.0",
@@ -28929,7 +28939,7 @@
         "chokidar": {
           "version": "1.7.0",
           "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-1.7.0.tgz",
-          "integrity": "sha1-eY5ol3gVHIB2tLNg5e3SjNortGg=",
+          "integrity": "sha512-mk8fAWcRUOxY7btlLtitj3A45jOwSAxH4tOFOoEGbVsl6cL6pPMWUy7dwZ/canfj3QEdP6FHSnf/l1c6/WkzVg==",
           "dev": true,
           "requires": {
             "anymatch": "^1.3.0",
diff --git a/package.json b/package.json
index 1369a6a..ddf8cbe 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,7 @@
     "raf": "3.4.0",
     "react": "17.0.2",
     "react-dev-utils": "^4.2.1",
-    "react-dom": "^16.2.0",
+    "react-dom": "17.0.2",
     "style-loader": "0.19.0",
     "sw-precache-webpack-plugin": "0.11.4",
     "url-loader": "0.6.2",

From 14be655a759962ba352840049e0918a92ec6789b Mon Sep 17 00:00:00 2001
From: Lukasz 'Severiaan' Grela <lukasz.grela@gmail.com>
Date: Mon, 31 Oct 2022 08:33:24 +0100
Subject: [PATCH 5/9] The TypeSelector component with a list of options of
 allowed JSON types

---
 src/lib/components/editor/TypeSelector.js | 47 +++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 src/lib/components/editor/TypeSelector.js

diff --git a/src/lib/components/editor/TypeSelector.js b/src/lib/components/editor/TypeSelector.js
new file mode 100644
index 0000000..dccaeee
--- /dev/null
+++ b/src/lib/components/editor/TypeSelector.js
@@ -0,0 +1,47 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export default class TypeSelector extends React.Component {
+  render() {
+    const { hidden, styles, onChange,type } = this.props;
+
+    return (
+      <div hidden={hidden} style={styles.typeSelect}>
+        <label htmlFor="type-selector" hidden>
+          Select type:
+        </label>
+        <select
+        value={type}
+          name="type"
+          id="type-selector"
+          style={styles.select}
+          onChange={onChange}
+        >
+          <option value="text">{'"abc"'}</option>
+          <option value="object">{"{}"}</option>
+          <option value="array">[]</option>
+          <option value="boolean">T/F</option>
+          <option value="number">0-9</option>
+          <option value="null">null</option>
+        </select>
+      </div>
+    );
+  }
+}
+
+TypeSelector.propTypes = {
+  type: PropTypes.oneOf([
+    "text",
+    "object",
+    "array",
+    "boolean",
+    "number",
+    "null",
+  ]).isRequired,
+  onChange: PropTypes.func.isRequired,
+  hidden: PropTypes.bool,
+  styles: PropTypes.shape({
+    typeSelect: PropTypes.object,
+    select: PropTypes.object,
+  }).isRequired,
+};

From 2149dd54ed887ff2ab5055fbf95ba9cdb38af819 Mon Sep 17 00:00:00 2001
From: Lukasz 'Severiaan' Grela <lukasz.grela@gmail.com>
Date: Mon, 31 Oct 2022 08:36:34 +0100
Subject: [PATCH 6/9] Use type selector

---
 src/lib/JSONEditor.js              |  6 ++---
 src/lib/components/editor/Input.js | 35 ++++++++++--------------------
 src/lib/util.js                    |  2 +-
 3 files changed, 16 insertions(+), 27 deletions(-)

diff --git a/src/lib/JSONEditor.js b/src/lib/JSONEditor.js
index 457dc14..43fdc88 100644
--- a/src/lib/JSONEditor.js
+++ b/src/lib/JSONEditor.js
@@ -297,15 +297,15 @@ export default class JSONEditor extends React.Component {
         value = 0;
       }
     }
-    if(type === "boolean") {
-      value = newValue === "true"
+    if (type === "boolean") {
+      value = newValue === "true";
     }
     // else string
 
     parent[saveKey] = value;
     delete parent[EDIT_KEY];
     this.setState(this.state.data);
-    
+
     if (this.props.onChange)
       this.props.onChange(saveKey, value, parent, this.state.data);
   };
diff --git a/src/lib/components/editor/Input.js b/src/lib/components/editor/Input.js
index f83a642..596c81a 100644
--- a/src/lib/components/editor/Input.js
+++ b/src/lib/components/editor/Input.js
@@ -4,6 +4,7 @@ import RemoveIcon from "./RemoveIcon";
 import SaveIcon from "./SaveIcon";
 import { EDIT_KEY } from "../../util";
 import Label from "./Label";
+import TypeSelector from "./TypeSelector";
 
 export default class Input extends React.Component {
   constructor(props) {
@@ -34,16 +35,16 @@ export default class Input extends React.Component {
 
   onValueChanged = (event) => {
     this.setState({ value: event.target.value }, () => {
-      if(this.props.label !== EDIT_KEY || this.state.type === "text") {
-        this.props.onChange(event)
+      if (this.props.label !== EDIT_KEY || this.state.type === "text") {
+        this.props.onChange(event);
       }
     });
   };
 
   onSaveElement = () => {
     let { saveElement, parent } = this.props;
-    let { editableInput,type,value } = this.state;
-    saveElement(parent, editableInput, type,value);
+    let { editableInput, type, value } = this.state;
+    saveElement(parent, editableInput, type, value);
   };
 
   render() {
@@ -72,24 +73,12 @@ export default class Input extends React.Component {
           marginLeft={0}
         />
 
-        <div hidden={label !== EDIT_KEY} style={styles.typeSelect}>
-          <label htmlFor="type-selector" hidden>
-            Select type:
-          </label>
-          <select
-            name="type"
-            id="type-selector"
-            style={styles.select}
-            onChange={this.onTypeChanged}
-          >
-            <option value="text">{'""'}</option>
-            <option value="object">{"{}"}</option>
-            <option value="array">[]</option>
-            <option value="boolean">T/F</option>
-            <option value="number">0-9</option>
-            <option value="null">null</option>
-          </select>
-        </div>
+        <TypeSelector
+          hidden={label !== EDIT_KEY}
+          styles={styles}
+          type={type}
+          onChange={this.onTypeChanged}
+        />
 
         <div style={styles.value}>
           {type === "object" && <span style={styles.input}>{"{}"}</span>}
@@ -98,7 +87,7 @@ export default class Input extends React.Component {
           {type === "boolean" && (
             <select
               style={styles.select}
-              value={value === 'true'}
+              value={value === "true"}
               onChange={this.onValueChanged}
             >
               <option value="true">True</option>
diff --git a/src/lib/util.js b/src/lib/util.js
index 9f36353..b40ae60 100644
--- a/src/lib/util.js
+++ b/src/lib/util.js
@@ -41,7 +41,7 @@ export const jsonEditorDefaultStyles = {
     borderColor: "#d3d3d3",
   },
   typeSelect: {
-    marginLeft: 10
+    marginLeft: 10,
   },
   input: {
     borderRadius: 3,

From edec4f0aa201daf858f20fb9a2bdcf79d4dcf209 Mon Sep 17 00:00:00 2001
From: Lukasz 'Severiaan' Grela <lukasz.grela@gmail.com>
Date: Mon, 31 Oct 2022 09:11:57 +0100
Subject: [PATCH 7/9] Ability to create typed array entry

---
 src/lib/JSONEditor.js                    | 10 +++---
 src/lib/components/editor/AddIcon.js     | 24 ++++++++++++--
 src/lib/components/editor/ParentLabel.js | 42 +++++++++++++++++++++---
 src/lib/util.js                          | 21 ++++++++++++
 4 files changed, 87 insertions(+), 10 deletions(-)

diff --git a/src/lib/JSONEditor.js b/src/lib/JSONEditor.js
index 43fdc88..5738c35 100644
--- a/src/lib/JSONEditor.js
+++ b/src/lib/JSONEditor.js
@@ -19,7 +19,7 @@ import ParentLabel from "./components/editor/ParentLabel";
 import Input from "./components/editor/Input";
 import { EDIT_KEY } from "./util";
 import { jsonEditorDefaultStyles } from "./util";
-import { getKey } from "./util";
+import { getKey, defaultValueByType } from "./util";
 
 export default class JSONEditor extends React.Component {
   static defaultProps = {
@@ -132,6 +132,7 @@ export default class JSONEditor extends React.Component {
         //special case to avoid showing root
         elems.push(
           <ParentLabel
+            parentType="array"
             key={getKey("parent_label", currentKey, parentKeyPath, marginLeft)}
             value={label}
             addElement={this.addElement}
@@ -165,6 +166,7 @@ export default class JSONEditor extends React.Component {
         //special case to avoid showing root
         elems.push(
           <ParentLabel
+            parentType="object"
             key={getKey("parent_label", currentKey, parentKeyPath, marginLeft)}
             value={label}
             addElement={this.addElement}
@@ -251,14 +253,14 @@ export default class JSONEditor extends React.Component {
     }
   }
 
-  addElement = (parent) => {
+  addElement = (parent, type = "text") => {
     let newKey = null;
     if (isArray(parent)) {
-      parent.push("");
+      parent.push(defaultValueByType(type));
       newKey = parent.length - 1;
     } else {
       newKey = EDIT_KEY;
-      parent[newKey] = "";
+      parent[newKey] = defaultValueByType(type);
     }
     this.setState({ data: this.state.data });
     if (this.props.onChange)
diff --git a/src/lib/components/editor/AddIcon.js b/src/lib/components/editor/AddIcon.js
index 013a10c..9eaeebe 100644
--- a/src/lib/components/editor/AddIcon.js
+++ b/src/lib/components/editor/AddIcon.js
@@ -1,12 +1,32 @@
 import React from "react";
+import PropTypes from "prop-types";
 
 const AddIcon = (props) => {
-  let { addElement, addTo, hidden, styles } = props;
+  let { addElement, addTo, hidden, styles, type } = props;
   return (
-    <span hidden={hidden} title="add item" onClick={() => addElement(addTo)}>
+    <span hidden={hidden} title="add item" onClick={() => addElement(addTo, type)}>
       <span style={styles.addButton}>&#43;</span>
     </span>
   );
 };
 
+AddIcon.displayName = "AddIcon";
+
+AddIcon.propTypes = {
+  type: PropTypes.oneOf([
+    "text",
+    "object",
+    "array",
+    "boolean",
+    "number",
+    "null",
+  ]),
+  addElement: PropTypes.func.isRequired,
+  addTo: PropTypes.any.isRequired,
+  hidden: PropTypes.bool,
+  styles: PropTypes.shape({
+    addButton: PropTypes.object,
+  }).isRequired,
+};
+
 export default AddIcon;
diff --git a/src/lib/components/editor/ParentLabel.js b/src/lib/components/editor/ParentLabel.js
index 4d3849f..9e74212 100644
--- a/src/lib/components/editor/ParentLabel.js
+++ b/src/lib/components/editor/ParentLabel.js
@@ -1,15 +1,21 @@
 import React from "react";
+import PropTypes from "prop-types";
 import { merge } from "lodash";
 import AddIcon from "./AddIcon";
 import RemoveIcon from "./RemoveIcon";
+import TypeSelector from "./TypeSelector";
 
 export default class ParentLabel extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       hovering: false,
+      type: "text",
     };
   }
+  onTypeChanged = (event) => {
+    this.setState((state) => ({ ...state, type: event.target.value }));
+  };
 
   hoverStarted = () => {
     this.setState({ hovering: true });
@@ -20,7 +26,7 @@ export default class ParentLabel extends React.Component {
   };
 
   render() {
-    let {
+    const {
       marginLeft,
       value,
       currentKey,
@@ -32,11 +38,13 @@ export default class ParentLabel extends React.Component {
       showRemoveButton,
       showAddButton,
       styles,
+      parentType,
     } = this.props;
-    let style = merge(
-      { marginLeft: marginLeft, display: "flex" },
+    const style = merge(
+      { marginLeft: marginLeft, display: "flex", alignItems: "baseline" },
       styles.label
     );
+    const { type, hovering } = this.state;
     return (
       <div
         style={style}
@@ -47,8 +55,16 @@ export default class ParentLabel extends React.Component {
         <div title="collapse node" style={{ marginLeft: 5 }}>
           {getCollapseIcon(marginLeft, currentKey)}
         </div>
-        <div hidden={!this.state.hovering} style={{ marginLeft: 10 }}>
+        {parentType === "array" && (
+          <TypeSelector
+            type={type}
+            onChange={this.onTypeChanged}
+            styles={styles}
+          />
+        )}
+        <div hidden={!hovering} style={{ marginLeft: 10 }}>
           <AddIcon
+            type={type}
             hidden={!showAddButton}
             addElement={addElement}
             addTo={current}
@@ -66,3 +82,21 @@ export default class ParentLabel extends React.Component {
     );
   }
 }
+
+ParentLabel.propTypes = {
+  parentType: PropTypes.oneOf(["array", "object"]).isRequired,
+  value: PropTypes.any.isRequired,
+  addElement: PropTypes.func.isRequired,
+  removeElement: PropTypes.func.isRequired,
+  currentKey: PropTypes.string.isRequired,
+  styles: PropTypes.shape({
+    addButton: PropTypes.object,
+  }).isRequired,
+  getCollapseIcon: PropTypes.func.isRequired,
+  current: PropTypes.any.isRequired,
+  parent: PropTypes.any.isRequired,
+
+  showRemoveButton: PropTypes.bool,
+  showAddButton: PropTypes.bool,
+  marginLeft: PropTypes.number,
+};
diff --git a/src/lib/util.js b/src/lib/util.js
index b40ae60..9234988 100644
--- a/src/lib/util.js
+++ b/src/lib/util.js
@@ -28,6 +28,7 @@ export const jsonEditorDefaultStyles = {
   },
   row: {
     display: "flex",
+    alignItems: "baseline",
   },
   root: {
     fontSize: 14,
@@ -42,6 +43,8 @@ export const jsonEditorDefaultStyles = {
   },
   typeSelect: {
     marginLeft: 10,
+    marginTop: 4,
+    marginBottom: 4,
   },
   input: {
     borderRadius: 3,
@@ -105,3 +108,21 @@ export const jsonViewerDefaultStyles = {
     cursor: "pointer",
   },
 };
+
+export const defaultValueByType = (type = "text") => {
+  switch (type) {
+    case "object":
+      return {};
+    case "array":
+      return [];
+    case "boolean":
+      return false;
+    case "number":
+      return 0;
+    case "null":
+      return null;
+    case "text": // fall-through
+    default:
+      return "";
+  }
+};

From 566d39b4bc6350357a3314176768c103faa4a06b Mon Sep 17 00:00:00 2001
From: Lukasz 'Severiaan' Grela <lukasz.grela@gmail.com>
Date: Thu, 30 Mar 2023 02:53:27 +0200
Subject: [PATCH 8/9] Add EmptyElement

---
 .husky/.gitignore                         |  1 +
 package-lock.json                         |  4 +-
 src/demo/App.js                           | 44 +++++++++++++++--
 src/lib/JSONEditor.js                     | 58 +++++++++++++++++------
 src/lib/components/editor/EmptyElement.js | 41 ++++++++++++++++
 5 files changed, 127 insertions(+), 21 deletions(-)
 create mode 100644 .husky/.gitignore
 create mode 100644 src/lib/components/editor/EmptyElement.js

diff --git a/.husky/.gitignore b/.husky/.gitignore
new file mode 100644
index 0000000..31354ec
--- /dev/null
+++ b/.husky/.gitignore
@@ -0,0 +1 @@
+_
diff --git a/package-lock.json b/package-lock.json
index 476b6e8..66c1208 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "react-json-editor-viewer",
-  "version": "1.0.7",
+  "version": "1.1.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "react-json-editor-viewer",
-      "version": "1.0.7",
+      "version": "1.1.1",
       "license": "MIT",
       "devDependencies": {
         "autoprefixer": "7.1.6",
diff --git a/src/demo/App.js b/src/demo/App.js
index 17ab120..54224d5 100644
--- a/src/demo/App.js
+++ b/src/demo/App.js
@@ -6,21 +6,57 @@ import { JSONEditor } from "../lib";
 
 const App = () => (
   <div>
-    <h3>Using default styles</h3>
+    <h3>Empty object</h3>
+    <JSONEditor
+      data={{}}
+      view="single"
+      collapsible
+      onChange={this.onJsonChange}
+    />{" "}
+    <h3>Empty array</h3>
+    <JSONEditor
+      data={[]}
+      view="single"
+      collapsible
+      onChange={this.onJsonChange}
+    />{" "}
+    <h3>Empty string</h3>
+    <JSONEditor
+      data={""}
+      view="single"
+      collapsible
+      onChange={this.onJsonChange}
+    />{" "}
+    <h3>A number</h3>
+    <JSONEditor
+      data={1}
+      view="single"
+      collapsible
+      onChange={this.onJsonChange}
+    />{" "}
+    <h3>A boolean</h3>
+    <JSONEditor
+      data={true}
+      view="single"
+      collapsible
+      onChange={this.onJsonChange}
+    />{" "}
+    <h3>Data</h3>
     <JSONEditor
       data={data}
-      view="dual"
+      view="single"
       collapsible
       onChange={this.onJsonChange}
     />
+    {/* 
     <h3>Using customized styles</h3>
     <JSONEditor
       data={data}
-      view="dual"
+      view="single"
       collapsible
       onChange={this.onJsonChange}
       styles={styles}
-    />
+    /> */}
   </div>
 );
 
diff --git a/src/lib/JSONEditor.js b/src/lib/JSONEditor.js
index 5738c35..07a9704 100644
--- a/src/lib/JSONEditor.js
+++ b/src/lib/JSONEditor.js
@@ -20,6 +20,7 @@ import Input from "./components/editor/Input";
 import { EDIT_KEY } from "./util";
 import { jsonEditorDefaultStyles } from "./util";
 import { getKey, defaultValueByType } from "./util";
+import EmptyElement from "./components/editor/EmptyElement";
 
 export default class JSONEditor extends React.Component {
   static defaultProps = {
@@ -152,14 +153,27 @@ export default class JSONEditor extends React.Component {
       if (isNodeCollapsed.call(this, marginLeft, currentKey, marginLeftStep))
         return; //this node is collapsed
 
-      for (let key = 0; key < data.length; key++) {
-        this.recursiveParseData(
-          key,
-          parentKeyPath,
-          data,
-          elems,
-          marginLeft + marginLeftStep
+      if (data.length === 0) {
+        elems.push(
+          <EmptyElement
+            key={getKey("empty_label", currentKey, parentKeyPath, marginLeft)}
+            marginLeft={marginLeft + marginLeftStep}
+            addElement={this.addElement}
+            current={data}
+            label="Add new element"
+            styles={styles}
+          />
         );
+      } else {
+        for (let key = 0; key < data.length; key++) {
+          this.recursiveParseData(
+            key,
+            parentKeyPath,
+            data,
+            elems,
+            marginLeft + marginLeftStep
+          );
+        }
       }
     } else if (isObject(data)) {
       if (marginLeft > 0) {
@@ -186,15 +200,29 @@ export default class JSONEditor extends React.Component {
       if (isNodeCollapsed.call(this, marginLeft, currentKey, marginLeftStep))
         return; //this node is collapsed
 
-      Object.keys(data).forEach((key) => {
-        this.recursiveParseData(
-          key,
-          parentKeyPath,
-          data,
-          elems,
-          marginLeft + marginLeftStep
+      const fields = Object.keys(data);
+      if (fields.length === 0 && marginLeft === 0) {
+        elems.push(
+          <EmptyElement
+            key={getKey("empty_label", currentKey, parentKeyPath, marginLeft)}
+            marginLeft={marginLeft + marginLeftStep}
+            addElement={this.addElement}
+            current={data}
+            label="Add new field"
+            styles={styles}
+          />
         );
-      });
+      } else {
+        fields.forEach((key) => {
+          this.recursiveParseData(
+            key,
+            parentKeyPath,
+            data,
+            elems,
+            marginLeft + marginLeftStep
+          );
+        });
+      }
     } else if (isNumber(data)) {
       elems.push(
         <Input
diff --git a/src/lib/components/editor/EmptyElement.js b/src/lib/components/editor/EmptyElement.js
new file mode 100644
index 0000000..9f5f814
--- /dev/null
+++ b/src/lib/components/editor/EmptyElement.js
@@ -0,0 +1,41 @@
+import React from "react";
+import merge from "lodash/merge";
+import Label from "./Label";
+import AddIcon from "./AddIcon";
+import TypeSelector from "./TypeSelector";
+
+export default class EmptyElement extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      type: "text",
+    };
+  }
+
+  onTypeChanged = (event) => {
+    this.setState((state) => ({ ...state, type: event.target.value }));
+  };
+
+  render() {
+    const { type } = this.state;
+    const { marginLeft, marginBottom, label, addElement, current, styles } =
+      this.props;
+    const style = merge({ marginLeft, marginBottom }, styles.row);
+    return (
+      <div style={style}>
+        <Label value={label} styles={styles} marginLeft={0} />
+        <TypeSelector
+          type={type}
+          onChange={this.onTypeChanged}
+          styles={styles}
+        />
+        <AddIcon
+          type={type}
+          addElement={addElement}
+          addTo={current}
+          styles={styles}
+        />
+      </div>
+    );
+  }
+}

From b8030ca3fb45dfa5340c71ef6ad6f4d13a34876a Mon Sep 17 00:00:00 2001
From: Lukasz 'Severiaan' Grela <lukasz.grela@gmail.com>
Date: Tue, 4 Apr 2023 20:02:34 +0200
Subject: [PATCH 9/9] Fix demo Add onJsonChange handler

---
 src/demo/App.js | 101 +++++++++++++++++++++++++-----------------------
 1 file changed, 53 insertions(+), 48 deletions(-)

diff --git a/src/demo/App.js b/src/demo/App.js
index 54224d5..4c053fd 100644
--- a/src/demo/App.js
+++ b/src/demo/App.js
@@ -4,61 +4,66 @@ import { JSONEditor } from "../lib";
 // to compile a production version
 //npm publish to publish
 
-const App = () => (
-  <div>
-    <h3>Empty object</h3>
-    <JSONEditor
-      data={{}}
-      view="single"
-      collapsible
-      onChange={this.onJsonChange}
-    />{" "}
-    <h3>Empty array</h3>
-    <JSONEditor
-      data={[]}
-      view="single"
-      collapsible
-      onChange={this.onJsonChange}
-    />{" "}
-    <h3>Empty string</h3>
-    <JSONEditor
-      data={""}
-      view="single"
-      collapsible
-      onChange={this.onJsonChange}
-    />{" "}
-    <h3>A number</h3>
-    <JSONEditor
-      data={1}
-      view="single"
-      collapsible
-      onChange={this.onJsonChange}
-    />{" "}
-    <h3>A boolean</h3>
-    <JSONEditor
-      data={true}
-      view="single"
-      collapsible
-      onChange={this.onJsonChange}
-    />{" "}
-    <h3>Data</h3>
-    <JSONEditor
-      data={data}
-      view="single"
-      collapsible
-      onChange={this.onJsonChange}
-    />
-    {/* 
+const App = () => {
+  const onJsonChange = (key, value, parent, data) => {
+    console.log(key, value, parent, data);
+  };
+  return (
+    <div>
+      <h3>Empty object</h3>
+      <JSONEditor
+        data={{}}
+        view="single"
+        collapsible
+        onChange={onJsonChange}
+      />{" "}
+      <h3>Empty array</h3>
+      <JSONEditor
+        data={[]}
+        view="single"
+        collapsible
+        onChange={onJsonChange}
+      />{" "}
+      <h3>Empty string</h3>
+      <JSONEditor
+        data={""}
+        view="single"
+        collapsible
+        onChange={onJsonChange}
+      />{" "}
+      <h3>A number</h3>
+      <JSONEditor
+        data={1}
+        view="single"
+        collapsible
+        onChange={onJsonChange}
+      />{" "}
+      <h3>A boolean</h3>
+      <JSONEditor
+        data={true}
+        view="single"
+        collapsible
+        onChange={onJsonChange}
+      />{" "}
+      <h3>Data</h3>
+      <JSONEditor
+        data={data}
+        view="single"
+        collapsible
+        onChange={onJsonChange}
+      />
+      {/* 
     <h3>Using customized styles</h3>
     <JSONEditor
       data={data}
       view="single"
       collapsible
-      onChange={this.onJsonChange}
+      onChange={onJsonChange}
       styles={styles}
     /> */}
-  </div>
-);
+    </div>
+  );
+};
 
 const styles = {
   dualView: {