@uiw/react-json-view 2.0.0-alpha.7 → 2.0.0-alpha.9

package/cjs/types/index.js

@@ -27,8 +27,9 @@ var _excluded = ["as", "render"],
   _excluded11 = ["as", "render"],
   _excluded12 = ["as", "render"],
   _excluded13 = ["as", "render"];
-var SetComp = function SetComp(_ref) {
-  var value = _ref.value;
+var SetComp = exports.SetComp = function SetComp(_ref) {
+  var value = _ref.value,
+    keyName = _ref.keyName;
   var _useTypesStore = (0, _Types.useTypesStore)(),
     _useTypesStore$Set = _useTypesStore.Set,
     Comp = _useTypesStore$Set === void 0 ? {} : _useTypesStore$Set,
@@ -41,16 +42,17 @@ var SetComp = function SetComp(_ref) {
   var isRender = render && typeof render === 'function';
   var type = isRender && render(reset, {
     type: 'type',
-    value: value
+    value: value,
+    keyName: keyName
   });
   if (type) return type;
   var Elm = as || 'span';
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])({}, reset));
 };
-exports.SetComp = SetComp;
 SetComp.displayName = 'JVR.SetComp';
-var MapComp = function MapComp(_ref2) {
-  var value = _ref2.value;
+var MapComp = exports.MapComp = function MapComp(_ref2) {
+  var value = _ref2.value,
+    keyName = _ref2.keyName;
   var _useTypesStore2 = (0, _Types.useTypesStore)(),
     _useTypesStore2$Map = _useTypesStore2.Map,
     Comp = _useTypesStore2$Map === void 0 ? {} : _useTypesStore2$Map,
@@ -63,19 +65,19 @@ var MapComp = function MapComp(_ref2) {
   var isRender = render && typeof render === 'function';
   var type = isRender && render(reset, {
     type: 'type',
-    value: value
+    value: value,
+    keyName: keyName
   });
   if (type) return type;
   var Elm = as || 'span';
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])({}, reset));
 };
-exports.MapComp = MapComp;
 MapComp.displayName = 'JVR.MapComp';
 var defalutStyle = {
   opacity: 0.75,
   paddingRight: 4
 };
-var TypeString = function TypeString(_ref3) {
+var TypeString = exports.TypeString = function TypeString(_ref3) {
   var _ref3$children = _ref3.children,
     children = _ref3$children === void 0 ? '' : _ref3$children,
     expandKey = _ref3.expandKey,
@@ -116,14 +118,16 @@ var TypeString = function TypeString(_ref3) {
     style: style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName: keyName
   });
   var child = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
     children: text,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName: keyName
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
@@ -140,9 +144,8 @@ var TypeString = function TypeString(_ref3) {
     })]
   });
 };
-exports.TypeString = TypeString;
 TypeString.displayName = 'JVR.TypeString';
-var TypeTrue = function TypeTrue(_ref4) {
+var TypeTrue = exports.TypeTrue = function TypeTrue(_ref4) {
   var children = _ref4.children,
     expandKey = _ref4.expandKey,
     keyName = _ref4.keyName;
@@ -160,14 +163,16 @@ var TypeTrue = function TypeTrue(_ref4) {
     style: style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName: keyName
   });
   var child = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
     children: children,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName: keyName
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
@@ -182,9 +187,8 @@ var TypeTrue = function TypeTrue(_ref4) {
     })]
   });
 };
-exports.TypeTrue = TypeTrue;
 TypeTrue.displayName = 'JVR.TypeTrue';
-var TypeFalse = function TypeFalse(_ref5) {
+var TypeFalse = exports.TypeFalse = function TypeFalse(_ref5) {
   var children = _ref5.children,
     expandKey = _ref5.expandKey,
     keyName = _ref5.keyName;
@@ -202,14 +206,16 @@ var TypeFalse = function TypeFalse(_ref5) {
     style: style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName: keyName
   });
   var child = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
     children: children,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName: keyName
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
@@ -224,9 +230,8 @@ var TypeFalse = function TypeFalse(_ref5) {
     })]
   });
 };
-exports.TypeFalse = TypeFalse;
 TypeFalse.displayName = 'JVR.TypeFalse';
-var TypeFloat = function TypeFloat(_ref6) {
+var TypeFloat = exports.TypeFloat = function TypeFloat(_ref6) {
   var children = _ref6.children,
     expandKey = _ref6.expandKey,
     keyName = _ref6.keyName;
@@ -244,14 +249,16 @@ var TypeFloat = function TypeFloat(_ref6) {
     style: style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName: keyName
   });
   var child = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
     children: children,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName: keyName
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
@@ -266,9 +273,8 @@ var TypeFloat = function TypeFloat(_ref6) {
     })]
   });
 };
-exports.TypeFloat = TypeFloat;
 TypeFloat.displayName = 'JVR.TypeFloat';
-var TypeInt = function TypeInt(_ref7) {
+var TypeInt = exports.TypeInt = function TypeInt(_ref7) {
   var children = _ref7.children,
     expandKey = _ref7.expandKey,
     keyName = _ref7.keyName;
@@ -286,14 +292,16 @@ var TypeInt = function TypeInt(_ref7) {
     style: style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName: keyName
   });
   var child = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
     children: children,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName: keyName
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
@@ -308,9 +316,8 @@ var TypeInt = function TypeInt(_ref7) {
     })]
   });
 };
-exports.TypeInt = TypeInt;
 TypeInt.displayName = 'JVR.TypeInt';
-var TypeBigint = function TypeBigint(_ref8) {
+var TypeBigint = exports.TypeBigint = function TypeBigint(_ref8) {
   var children = _ref8.children,
     expandKey = _ref8.expandKey,
     keyName = _ref8.keyName;
@@ -328,14 +335,16 @@ var TypeBigint = function TypeBigint(_ref8) {
     style: style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName: keyName
   });
   var child = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
     children: children,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName: keyName
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
@@ -350,9 +359,8 @@ var TypeBigint = function TypeBigint(_ref8) {
     })]
   });
 };
-exports.TypeBigint = TypeBigint;
 TypeBigint.displayName = 'JVR.TypeFloat';
-var TypeUrl = function TypeUrl(_ref9) {
+var TypeUrl = exports.TypeUrl = function TypeUrl(_ref9) {
   var children = _ref9.children,
     expandKey = _ref9.expandKey,
     keyName = _ref9.keyName;
@@ -370,14 +378,16 @@ var TypeUrl = function TypeUrl(_ref9) {
     style: style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName: keyName
   });
   var child = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
     children: children === null || children === void 0 ? void 0 : children.href,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName: keyName
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
@@ -395,9 +405,8 @@ var TypeUrl = function TypeUrl(_ref9) {
     })]
   });
 };
-exports.TypeUrl = TypeUrl;
 TypeUrl.displayName = 'JVR.TypeUrl';
-var TypeDate = function TypeDate(_ref10) {
+var TypeDate = exports.TypeDate = function TypeDate(_ref10) {
   var children = _ref10.children,
     expandKey = _ref10.expandKey,
     keyName = _ref10.keyName;
@@ -415,7 +424,8 @@ var TypeDate = function TypeDate(_ref10) {
     style: style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName: keyName
   });
   var childStr = children instanceof Date ? children.toLocaleString() : children;
   var child = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
@@ -423,7 +433,8 @@ var TypeDate = function TypeDate(_ref10) {
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName: keyName
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
@@ -438,9 +449,8 @@ var TypeDate = function TypeDate(_ref10) {
     })]
   });
 };
-exports.TypeDate = TypeDate;
 TypeDate.displayName = 'JVR.TypeDate';
-var TypeUndefined = function TypeUndefined(_ref11) {
+var TypeUndefined = exports.TypeUndefined = function TypeUndefined(_ref11) {
   var children = _ref11.children,
     expandKey = _ref11.expandKey,
     keyName = _ref11.keyName;
@@ -458,14 +468,16 @@ var TypeUndefined = function TypeUndefined(_ref11) {
     style: style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName: keyName
   });
   var child = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
     children: children,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName: keyName
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
@@ -477,9 +489,8 @@ var TypeUndefined = function TypeUndefined(_ref11) {
     })]
   });
 };
-exports.TypeUndefined = TypeUndefined;
 TypeUndefined.displayName = 'JVR.TypeUndefined';
-var TypeNull = function TypeNull(_ref12) {
+var TypeNull = exports.TypeNull = function TypeNull(_ref12) {
   var children = _ref12.children,
     expandKey = _ref12.expandKey,
     keyName = _ref12.keyName;
@@ -497,14 +508,16 @@ var TypeNull = function TypeNull(_ref12) {
     style: style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName: keyName
   });
   var child = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
     children: children,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName: keyName
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
@@ -516,9 +529,8 @@ var TypeNull = function TypeNull(_ref12) {
     })]
   });
 };
-exports.TypeNull = TypeNull;
 TypeNull.displayName = 'JVR.TypeNull';
-var TypeNan = function TypeNan(_ref13) {
+var TypeNan = exports.TypeNan = function TypeNan(_ref13) {
   var children = _ref13.children,
     expandKey = _ref13.expandKey,
     keyName = _ref13.keyName;
@@ -536,14 +548,16 @@ var TypeNan = function TypeNan(_ref13) {
     style: style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName: keyName
   });
   var child = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
     children: children === null || children === void 0 ? void 0 : children.toString(),
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName: keyName
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
@@ -555,5 +569,4 @@ var TypeNan = function TypeNan(_ref13) {
     })]
   });
 };
-exports.TypeNan = TypeNan;
 TypeNan.displayName = 'JVR.TypeNan';

package/editor.d.ts

@@ -2,35 +2,37 @@
 
 declare module '@uiw/react-json-view/editor' {
   import { JsonViewProps } from '@uiw/react-json-view';
-  import type { CountInfoExtraProps } from '@uiw/react-json-view/cjs/editor/countInfoExtra';
+  // import type { CountInfoExtraProps } from '@uiw/react-json-view/cjs/editor/countInfoExtra';
   type Option = {
-      value: string;
-      prevValue: string;
-      keyName: string | number;
+    value: string;
+    prevValue: string;
+    keyName: string | number;
   };
 
   export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T> {
     /** Callback when value edit functionality */
     onEdit?: (option: {
-        value: unknown;
-        oldValue: unknown;
-        keyName?: string | number;
-        parentName?: string | number;
-        type?: 'value' | 'key';
+      value: unknown;
+      oldValue: unknown;
+      keyName?: string | number;
+      parentName?: string | number;
+      type?: 'value' | 'key';
     }) => void;
-    /**
-     * When a callback function is passed in, add functionality is enabled. The callback is invoked before additions are completed.
-     * @returns {boolean} Returning false from onAdd will prevent the change from being made.
-     */
-    onAdd?: CountInfoExtraProps<T>['onAdd'];
-    /**
-     * When a callback function is passed in, delete functionality is enabled. The callback is invoked before deletions are completed. 
-     * @returns Returning false from onDelete will prevent the change from being made. 
-     */
-    onDelete?: CountInfoExtraProps<T>['onDelete'];
+    // /**
+    //  * When a callback function is passed in, add functionality is enabled. The callback is invoked before additions are completed.
+    //  * @returns {boolean} Returning false from onAdd will prevent the change from being made.
+    //  */
+    // onAdd?: CountInfoExtraProps<T>['onAdd'];
+    // /**
+    //  * When a callback function is passed in, delete functionality is enabled. The callback is invoked before deletions are completed.
+    //  * @returns Returning false from onDelete will prevent the change from being made.
+    //  */
+    // onDelete?: CountInfoExtraProps<T>['onDelete'];
     /** Whether enable edit feature. @default true */
     editable?: boolean;
   }
-  const JsonViewEditor: import("react").ForwardRefExoticComponent<Omit<JsonViewEditorProps<object>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  const JsonViewEditor: import('react').ForwardRefExoticComponent<
+    Omit<JsonViewEditorProps<object>, 'ref'> & import('react').RefAttributes<HTMLDivElement>
+  >;
   export default JsonViewEditor;
 }

package/esm/comps/KeyValues.js

@@ -64,6 +64,7 @@ KeyValues.displayName = 'JVR.KeyValues';
 export var KayName = props => {
   var {
     keyName,
+    parentValue,
     value
   } = props;
   var {
@@ -85,6 +86,7 @@ export var KayName = props => {
       }), /*#__PURE__*/_jsx(KeyNameComp, {
         keyName: keyName,
         value: value,
+        parentValue: parentValue,
         children: keyName
       }), /*#__PURE__*/_jsx(Quote, {
         isNumber: isNumber,
@@ -133,7 +135,8 @@ export var KeyValuesItem = props => {
   }, reset, {
     children: [/*#__PURE__*/_jsx(KayName, {
       keyName: keyName,
-      value: value
+      value: value,
+      parentValue: parentValue
     }), /*#__PURE__*/_jsx(Value, {
       keyName: keyName,
       value: value,

package/esm/comps/NestedOpen.js

@@ -64,9 +64,11 @@ export var NestedOpen = props => {
     }), (keyName || typeof keyName === 'number') && /*#__PURE__*/_jsx(KayName, {
       keyName: keyName
     }), /*#__PURE__*/_jsx(SetComp, {
-      value: initialValue
+      value: initialValue,
+      keyName: keyName
     }), /*#__PURE__*/_jsx(MapComp, {
-      value: initialValue
+      value: initialValue,
+      keyName: keyName
     }), /*#__PURE__*/_jsx(BracketsOpen, {
       isBrackets: isArray || isMySet
     }), /*#__PURE__*/_jsx(EllipsisComp, {

package/esm/editor/KeyName.d.ts

@@ -0,0 +1,2 @@
+import { SectionElementProps } from '../store/Section';
+export declare const KeyNameRender: SectionElementProps['render'];

package/esm/editor/KeyName.js

@@ -0,0 +1,77 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["children"],
+  _excluded2 = ["value", "parentValue", "keyName"];
+import { useRef, useState } from 'react';
+import { useStore } from './store';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var KeyNameRender = (_ref, _ref2) => {
+  var {
+      children
+    } = _ref,
+    reset = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var {
+    value,
+    parentValue,
+    keyName
+  } = _ref2;
+  if (typeof children === 'number') {
+    return /*#__PURE__*/_jsx("span", _extends({}, reset, {
+      children: children
+    }));
+  }
+  return /*#__PURE__*/_jsx(Child, _extends({}, reset, {
+    value: value,
+    parentValue: parentValue,
+    keyName: keyName,
+    children: children
+  }));
+};
+var Child = props => {
+  var {
+      value,
+      keyName
+    } = props,
+    reset = _objectWithoutPropertiesLoose(props, _excluded2);
+  var $dom = useRef(null);
+  var [currentValue, setCurrentValue] = useState(props.children);
+  var {
+    onEdit
+  } = useStore();
+  var onKeyDown = evn => {
+    if (evn.key === 'Enter') {
+      var _$dom$current;
+      (_$dom$current = $dom.current) == null || _$dom$current.setAttribute('contentEditable', 'false');
+    }
+  };
+  var onClick = evn => {
+    var _$dom$current2, _$dom$current3;
+    evn.stopPropagation();
+    (_$dom$current2 = $dom.current) == null || _$dom$current2.setAttribute('contentEditable', 'true');
+    (_$dom$current3 = $dom.current) == null || _$dom$current3.focus();
+  };
+  var onBlur = evn => {
+    var _$dom$current4;
+    (_$dom$current4 = $dom.current) == null || _$dom$current4.setAttribute('contentEditable', 'false');
+    var callback = onEdit && onEdit({
+      value: evn.target.textContent,
+      oldValue: value,
+      keyName
+    });
+    if (callback) {
+      setCurrentValue(evn.target.textContent);
+    }
+  };
+  var spanProps = _extends({}, reset, {
+    onKeyDown,
+    onClick,
+    onBlur,
+    spellCheck: false,
+    contentEditable: 'false',
+    suppressContentEditableWarning: true,
+    children: currentValue
+  });
+  return /*#__PURE__*/_jsx("span", _extends({}, spanProps, {
+    ref: $dom
+  }));
+};

package/esm/editor/index.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { type JsonViewProps } from '../';
+export interface JsonViewEditorProps<T extends object> extends Omit<JsonViewProps<T>, 'shortenTextAfterLength'> {
+    /**
+     * When a callback function is passed in, edit functionality is enabled. The callback is invoked before edits are completed.
+     * @returns {boolean}  Returning false from onEdit will prevent the change from being made.
+     */
+    onEdit?: (option: {
+        value: unknown;
+        oldValue: unknown;
+        keyName?: string | number;
+        parentName?: string | number;
+        type?: 'value' | 'key';
+    }) => boolean;
+    /** Whether enable edit feature. @default true */
+    editable?: boolean;
+}
+declare const JsonViewEditor: import("react").ForwardRefExoticComponent<Omit<JsonViewEditorProps<object>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default JsonViewEditor;

package/esm/editor/index.js

@@ -0,0 +1,34 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["children", "onEdit", "editable"];
+import { forwardRef } from 'react';
+import JsonView from '../';
+import { KeyNameRender } from './KeyName';
+import { Context, Dispatch, useStoreReducer } from './store';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var JsonViewEditor = /*#__PURE__*/forwardRef((props, ref) => {
+  var {
+      children,
+      onEdit,
+      editable = true
+    } = props,
+    reset = _objectWithoutPropertiesLoose(props, _excluded);
+  var [state, dispatch] = useStoreReducer({
+    onEdit
+  });
+  return /*#__PURE__*/_jsx(Context.Provider, {
+    value: state,
+    children: /*#__PURE__*/_jsx(Dispatch.Provider, {
+      value: dispatch,
+      children: /*#__PURE__*/_jsxs(JsonView, _extends({}, reset, {
+        shortenTextAfterLength: 0,
+        ref: ref,
+        children: [editable && /*#__PURE__*/_jsx(JsonView.KeyName, {
+          render: KeyNameRender
+        }), children]
+      }))
+    })
+  });
+});
+export default JsonViewEditor;

package/esm/editor/store.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+type InitialState = {
+    /**
+     * When a callback function is passed in, edit functionality is enabled. The callback is invoked before edits are completed.
+     * @returns {boolean}  Returning false from onEdit will prevent the change from being made.
+     */
+    onEdit?: (option: {
+        value: unknown;
+        oldValue: unknown;
+        keyName?: string | number;
+        parentName?: string | number;
+        type?: 'value' | 'key';
+    }) => boolean;
+};
+type Dispatch = React.Dispatch<InitialState>;
+export declare const Context: import("react").Context<InitialState>;
+export declare const Dispatch: import("react").Context<Dispatch>;
+export declare const useStore: () => InitialState;
+export declare function useStoreReducer(initialState: InitialState): [{
+    onEdit?: ((option: {
+        value: unknown;
+        oldValue: unknown;
+        keyName?: string | number | undefined;
+        parentName?: string | number | undefined;
+        type?: "value" | "key" | undefined;
+    }) => boolean) | undefined;
+}, import("react").Dispatch<InitialState>];
+export {};

package/esm/editor/store.js

@@ -0,0 +1,13 @@
+import _extends from "@babel/runtime/helpers/extends";
+import { createContext, useContext, useReducer } from 'react';
+var initialState = {};
+export var Context = /*#__PURE__*/createContext(initialState);
+var reducer = (state, action) => _extends({}, state, action);
+export var Dispatch = /*#__PURE__*/createContext(() => {});
+Dispatch.displayName = 'JVR.Editor.Dispatch';
+export var useStore = () => {
+  return useContext(Context);
+};
+export function useStoreReducer(initialState) {
+  return useReducer(reducer, initialState);
+}

package/esm/section/KeyName.d.ts

@@ -8,6 +8,7 @@ export declare const KeyName: {
 type KeyNameCompProps = {
     keyName: string | number;
     value?: unknown;
+    parentValue?: unknown;
 };
 export declare const KeyNameComp: FC<PropsWithChildren<KeyNameCompProps>>;
 export {};

package/esm/section/KeyName.js

@@ -16,6 +16,7 @@ export var KeyNameComp = props => {
   var {
     children,
     value,
+    parentValue,
     keyName
   } = props;
   var isNumber = typeof children === 'number';
@@ -36,6 +37,7 @@ export var KeyNameComp = props => {
     children
   }), {
     value,
+    parentValue,
     keyName
   });
   if (child) return child;