Small tweaks before release

README.md

@@ -87,6 +87,7 @@ It's pretty self explanatory (click the "edit" icon to edit, etc.), but there ar
 - When opening/closing a node, hold down "Alt/Option" to open/close *all* child nodes at once
 - For Number inputs, arrow-up and down keys will increment/decrement the value
 - Drag and drop items to change the structure or modify display order
+- JSON text input can accept the more forgiving [JSON5](https://json5.org/) syntax as input
 
 ## Props overview
 
@@ -627,10 +628,13 @@ This component is heavily inspired by [react-json-view](https://github.com/mac-s
 
 ## Changelog
 
+- **1.13.0**:
+  - [Drag-n-drop](#drag-n-drop) editing!
+  - Remove unnecessary dependency
+  - Refactor some duplicate code into common hook
 - **1.12.0**:
   - Preserve editing mode when changing Data Type
   - [`onError` callback](#onerror-function) available for custom error handling
-  - option to display JSON text as [JSON5](https://json5.org/)
 - **1.11.8**: Fix regression for empty data root name introduces in 1.11.7
 - **1.11.7**: Handle \<empty-string\> object keys / prevent duplicate keys
 - **1.11.3**: Bug fix for invalid state when changing type to Collection node

demo/package.json

@@ -17,7 +17,7 @@
     "@types/react-dom": "^18.2.18",
     "firebase": "^10.7.2",
     "framer-motion": "^11.0.3",
-    "json-edit-react": "^1.12.0",
+    "json-edit-react": "^1.13.0",
     "just-compare": "^2.3.0",
     "react": "^18.2.0",
     "react-datepicker": "^5.0.0",

demo/src/App.tsx

@@ -33,7 +33,7 @@ import {
 } from '@chakra-ui/react'
 import logo from './image/logo_400.png'
 import { ArrowBackIcon, ArrowForwardIcon } from '@chakra-ui/icons'
-import { DemoData, demoData } from './demoData'
+import { demoData } from './demoData'
 import { useDatabase } from './useDatabase'
 import './style.css'
 import { version } from './version'

demo/src/demoData/data.tsx

@@ -9,6 +9,7 @@ export const data: Record<string, object> = {
       'You can change the type of any value',
       'You can add new values to objects or arrays',
       'You can edit individual values, or even a whole object node at once (as JSON text)',
+      'You can also drag and drop!',
       {
         nested: 'An object inside an array',
         basic: false,

demo/src/version.ts

@@ -1 +1 @@
-export const version = '1.13.0-rc1'
+export const version = '1.13.0-rc2'

demo/yarn.lock

@@ -7965,14 +7965,13 @@ json-buffer@3.0.1:
   resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
   integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
 
-json-edit-react@^1.12.0:
-  version "1.12.0"
-  resolved "https://registry.yarnpkg.com/json-edit-react/-/json-edit-react-1.12.0.tgz#15d016d46b1dd8dbcd66523052fd43a547b4d5dc"
-  integrity sha512-FOdVSqqZj1Hg1l7I3F/hnKMV5yyIOnNl6UC0WKhm1jpsk3ZLkPyGzfc5eXSLa9Lb2StY7euGni9swGjyjdYdDw==
+json-edit-react@^1.13.0:
+  version "1.13.0-rc2"
+  resolved "https://registry.yarnpkg.com/json-edit-react/-/json-edit-react-1.13.0-rc2.tgz#7a05d1e38ad055f9074590d7980c9c0f34aad9c0"
+  integrity sha512-yjoscKasFd41LPfvalsID8sj1B+f4dtQqi/Kzu5rX4/lB1biWDFGhpjV6++nzUJ2DyM8P4/VzdcHrkOWbUQlZw==
   dependencies:
     json5 "^2.2.3"
-    just-clone "^6.2.0"
-    object-property-assigner "^1.2.4"
+    object-property-assigner "^1.3.0"
     object-property-extractor "^1.0.11"
 
 json-parse-even-better-errors@^2.3.0, json-parse-even-better-errors@^2.3.1:
@@ -8045,11 +8044,6 @@ jsonpointer@^5.0.0:
     object.assign "^4.1.4"
     object.values "^1.1.6"
 
-just-clone@^6.2.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/just-clone/-/just-clone-6.2.0.tgz#a4614d9bf7e4bbdcae7f9ba904aea5ea9cae8ae5"
-  integrity sha512-1IynUYEc/HAwxhi3WDpIpxJbZpMCvvrrmZVqvj9EhpvbH8lls7HhdhiByjL7DkAaWlLIzpC0Xc/VPvy/UxLNjA==
-
 just-compare@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/just-compare/-/just-compare-2.3.0.tgz#a2adcc1d1940536263275f5a1ef1298bcacfeda7"
@@ -8599,10 +8593,10 @@ object-keys@^1.1.1:
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
   integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
 
-object-property-assigner@^1.2.4:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/object-property-assigner/-/object-property-assigner-1.2.4.tgz#1545f55e51b6b3b0eaf83ce2bfd1ea171e3949bb"
-  integrity sha512-wL4Y1ugqycyFu6ihfDM8BPhJR5NbaFXW7RXlt6ROmeAEyuBDI2XDctMUowQYlkj5LxQcxGC7NP6axENyZGge6A==
+object-property-assigner@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/object-property-assigner/-/object-property-assigner-1.3.0.tgz#c306d3388ee69bf306170be83dd34049d9f50087"
+  integrity sha512-19A0RsC9rP9klCKHDPL/MeERxeopV9wyMNfP+eD2uKOafzLjF+OUEN4FoP6RAlCFHmerBPJ4ohNv/WrgaNpeIA==
 
 object-property-extractor@^1.0.11:
   version "1.0.11"

src/ButtonPanels.tsx

@@ -71,7 +71,10 @@ export const EditButtons: React.FC<EditButtonProps> = ({
   }
 
   return (
-    <div className="jer-edit-buttons" style={isAdding ? { opacity: 1 } : undefined}>
+    <div
+      className="jer-edit-buttons"
+      style={{ opacity: isAdding ? 1 : undefined, zIndex: path.length + 1 }}
+    >
       {enableClipboard && (
         <div onClick={handleCopy} className="jer-copy-pulse">
           <Icon name="copy" nodeData={nodeData} />
@@ -135,7 +138,7 @@ export const InputButtons: React.FC<{
   nodeData: NodeData
 }> = ({ onOk, onCancel, nodeData }) => {
   return (
-    <div className="jer-confirm-buttons">
+    <div className="jer-confirm-buttons" style={{ zIndex: nodeData.path.length + 1 }}>
       <div onClick={onOk}>
         <Icon name="ok" nodeData={nodeData} />
       </div>

src/ValueNodeWrapper.tsx

@@ -251,7 +251,7 @@ export const ValueNodeWrapper: React.FC<ValueNodeProps> = (props) => {
       style={{
         marginLeft: `${indent / 2}em`,
         position: 'relative',
-        zIndex: 50,
+        zIndex: path.length + 1,
       }}
       draggable={canDrag && currentlyEditingElement === null}
       {...dragSourceProps}
@@ -313,7 +313,7 @@ export const ValueNodeWrapper: React.FC<ValueNodeProps> = (props) => {
             )
           )}
           {showTypeSelector && (
-            <div className="jer-select">
+            <div className="jer-select" style={{ zIndex: path.length + 1 }}>
               <select
                 name={`${name}-type-select`}
                 className="jer-type-select"

src/ValueNodes.tsx

@@ -114,7 +114,7 @@ export const NumberValue: React.FC<InputProps & { value: number }> = ({
       autoFocus
       onFocus={(e) => e.target.select()}
       onKeyDown={handleKeyPress}
-      style={{ width: `${String(value).length / 1.5 + 2}em` }}
+      style={{ width: `${String(value).length / 1.5 + 2}em`, ...getStyles('input', nodeData) }}
     />
   ) : (
     <span
@@ -157,6 +157,7 @@ export const BooleanValue: React.FC<InputProps & { value: boolean }> = ({
       name={toPathString(path)}
       checked={value}
       onChange={() => setValue(!value)}
+      style={{ zIndex: path.length + 2 }}
     />
   ) : (
     <span

src/types.ts

@@ -25,7 +25,7 @@ export interface JsonEditorProps {
   restrictDelete?: boolean | FilterFunction
   restrictAdd?: boolean | FilterFunction
   restrictTypeSelection?: boolean | DataType[] | TypeFilterFunction
-  restrictDrag: boolean | FilterFunction
+  restrictDrag?: boolean | FilterFunction
   // restrictKeyEdit?: boolean | FilterFunction
   searchText?: string
   searchFilter?: 'key' | 'value' | 'all' | SearchFilterFunction