@uiw/react-json-view 1.4.0 → 1.5.0

package/cjs/value.d.ts

@@ -1,6 +1,8 @@
 import { FC, PropsWithChildren } from 'react';
-import { MetaProps } from './node';
+import { MetaProps } from './comps/meta';
+import { JsonViewProps } from './';
 export declare const Line: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>>;
+export declare const isFloat: (n: number) => boolean;
 export declare const typeMap: {
     string: {
         color: string;
@@ -26,6 +28,10 @@ export declare const typeMap: {
         color: string;
         label: string;
     };
+    url: {
+        color: string;
+        label: string;
+    };
     null: {
         color: string;
         label: string;
@@ -40,20 +46,29 @@ export declare const typeMap: {
     };
 };
 export declare const Colon: FC<PropsWithChildren<React.HTMLAttributes<HTMLSpanElement>>>;
-export interface ValueViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
+export interface ValueViewProps<T extends object> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
     keyName?: string | number;
-    value?: T;
+    value?: unknown;
     displayDataTypes: boolean;
     displayObjectSize: boolean;
     enableClipboard: boolean;
     indentWidth: number;
+    quotes?: JsonViewProps<T>['quotes'];
     renderKey?: JSX.Element;
     renderBraces?: MetaProps['render'];
     renderValue?: (props: React.HTMLAttributes<HTMLSpanElement> & {
         type: TypeProps['type'];
+        value?: unknown;
+        visible?: boolean;
+        quotes?: JsonViewProps<T>['quotes'];
+        keyName?: ValueViewProps<T>['keyName'];
     }) => JSX.Element;
 }
-export declare function ValueView<T = object>(props: ValueViewProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function getValueString<T>(value: T): {
+    type: "string" | "number" | "bigint" | "boolean" | "undefined" | "date" | "url" | "float" | "null" | "NaN";
+    content: string;
+};
+export declare function ValueView<T extends object>(props: ValueViewProps<T>): import("react/jsx-runtime").JSX.Element;
 export interface LabelProps extends React.HTMLAttributes<HTMLSpanElement> {
     color?: string;
     fontSize?: number;

package/cjs/value.js

@@ -6,17 +6,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Type = exports.Line = exports.Label = exports.Colon = void 0;
 exports.ValueView = ValueView;
-exports.typeMap = void 0;
+exports.getValueString = getValueString;
+exports.typeMap = exports.isFloat = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _react = require("react");
 var _node = require("./node");
+var _meta = require("./comps/meta");
 var _copied = require("./copied");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["children", "style"],
-  _excluded2 = ["value", "keyName", "indentWidth", "renderKey", "renderValue", "renderBraces", "enableClipboard", "displayObjectSize", "displayDataTypes"],
+  _excluded2 = ["value", "keyName", "indentWidth", "renderKey", "quotes", "renderValue", "renderBraces", "enableClipboard", "displayObjectSize", "displayDataTypes"],
   _excluded3 = ["children", "color", "fontSize", "opacity", "paddingRight", "style"];
 var Line = function Line(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2["default"])({}, props));
@@ -25,6 +27,7 @@ exports.Line = Line;
 var isFloat = function isFloat(n) {
   return Number(n) === n && n % 1 !== 0 || isNaN(n);
 };
+exports.isFloat = isFloat;
 var typeMap = {
   string: {
     color: 'var(--w-rjv-type-string-color, #cb4b16)',
@@ -50,6 +53,10 @@ var typeMap = {
     color: 'var(--w-rjv-type-date-color, #586e75)',
     label: 'date'
   },
+  url: {
+    color: 'var(--w-rjv-type-url-color, #0969da)',
+    label: 'URL'
+  },
   "null": {
     color: 'var(--w-rjv-type-null-color, #d33682)',
     label: 'null'
@@ -79,22 +86,9 @@ var Colon = function Colon(_ref) {
   }));
 };
 exports.Colon = Colon;
-function ValueView(props) {
-  var _typeMap$type;
-  var value = props.value,
-    keyName = props.keyName,
-    indentWidth = props.indentWidth,
-    renderKey = props.renderKey,
-    renderValue = props.renderValue,
-    renderBraces = props.renderBraces,
-    enableClipboard = props.enableClipboard,
-    displayObjectSize = props.displayObjectSize,
-    displayDataTypes = props.displayDataTypes,
-    reset = (0, _objectWithoutProperties2["default"])(props, _excluded2);
+function getValueString(value) {
   var type = (0, _typeof2["default"])(value);
   var content = '';
-  var color = '';
-  var style = {};
   if (typeof value === 'number') {
     type = isFloat(value) ? 'float' : 'number';
     content = value.toString();
@@ -107,29 +101,62 @@ function ValueView(props) {
     type = 'date';
     content = value.toString();
   }
-  var typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
-    type: type
-  });
   if (value === null) {
     type = 'null';
     content = "".concat(value).toLocaleUpperCase();
-    typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
-    style = {
-      fontWeight: 'bold'
-    };
   }
   if (value === undefined) {
     type = 'undefined';
     content = String(value);
-    typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
   }
   if (typeof value === 'bigint') {
     type = 'bigint';
     content = "".concat(value, "n");
   }
+  var isURL = value instanceof URL;
+  if (isURL) {
+    type = 'url';
+    content = "\"".concat(value.href, "\"");
+  }
   if (typeof value === 'string') {
     content = "\"".concat(value, "\"");
   }
+  return {
+    type: type,
+    content: content
+  };
+}
+function ValueView(props) {
+  var _typeMap$type;
+  var value = props.value,
+    keyName = props.keyName,
+    indentWidth = props.indentWidth,
+    renderKey = props.renderKey,
+    quotes = props.quotes,
+    renderValue = props.renderValue,
+    renderBraces = props.renderBraces,
+    enableClipboard = props.enableClipboard,
+    displayObjectSize = props.displayObjectSize,
+    displayDataTypes = props.displayDataTypes,
+    reset = (0, _objectWithoutProperties2["default"])(props, _excluded2);
+  var color = '';
+  var style = {};
+  var _getValueString = getValueString(value),
+    type = _getValueString.type,
+    content = _getValueString.content;
+  var typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+    type: type
+  });
+  if (value === null) {
+    typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
+    style = {
+      fontWeight: 'bold'
+    };
+  }
+  if (value === undefined) {
+    typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
+  }
+  var isURL = value instanceof URL;
   if (!displayDataTypes) {
     typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
   }
@@ -163,14 +190,26 @@ function ValueView(props) {
         color: color
       }, style),
       type: type,
+      value: value,
+      quotes: quotes,
+      keyName: keyName,
+      visible: showTools,
       content: content,
-      children: value
+      children: content
     });
     var valueView = reView ? reView : /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
       color: color,
       style: style,
       className: "w-rjv-value",
-      children: content
+      children: isURL ? /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+        href: value.href,
+        style: {
+          color: color
+        },
+        target: "_blank",
+        rel: "noopener noreferrer",
+        children: content
+      }) : content
     });
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, eventProps), {}, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Label, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
@@ -181,11 +220,11 @@ function ValueView(props) {
   }
   var length = Array.isArray(value) ? value.length : Object.keys(value).length;
   var empty = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_node.Meta, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_meta.Meta, {
       render: renderBraces,
       start: true,
       isArray: Array.isArray(value)
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_node.Meta, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_meta.Meta, {
       render: renderBraces,
       isArray: Array.isArray(value)
     }), displayObjectSize && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_node.CountInfo, {

package/editor.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+
+declare module '@uiw/react-json-view/editor' {
+  import { JsonViewProps } from '@uiw/react-json-view';
+  type Option = {
+      value: string;
+      prevValue: string;
+      keyName: string | number;
+  };
+
+  export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T> {
+    onEdit?: (option: Option) => void;
+  }
+  const JsonViewEditor: import("react").ForwardRefExoticComponent<Omit<JsonViewEditorProps<object>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  export default JsonViewEditor;
+}

package/esm/comps/ellipsis.d.ts

@@ -0,0 +1,5 @@
+import { FC, PropsWithChildren } from 'react';
+export interface EllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {
+    render?: (props: EllipsisProps) => JSX.Element;
+}
+export declare const Ellipsis: FC<PropsWithChildren<EllipsisProps>>;

package/esm/comps/ellipsis.js

@@ -0,0 +1,26 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["style", "render"];
+import { jsx as _jsx } from "react/jsx-runtime";
+export var Ellipsis = _ref => {
+  var {
+      style,
+      render
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var styl = _extends({
+    cursor: 'pointer'
+  }, style);
+  var className = "w-rjv-ellipsis " + (props.className || '');
+  if (render) return render(_extends({
+    style: styl
+  }, props, {
+    className
+  }));
+  return /*#__PURE__*/_jsx("span", _extends({
+    className: className,
+    style: styl
+  }, props, {
+    children: "..."
+  }));
+};

package/esm/comps/meta.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { LabelProps } from '../value';
+export interface MetaProps extends LabelProps {
+    isArray?: boolean;
+    start?: boolean;
+    render?: (props: Pick<MetaProps, 'start' | 'isArray' | 'className' | 'children'>) => JSX.Element;
+}
+export declare function Meta(props: MetaProps): JSX.Element;

package/esm/comps/meta.js

@@ -0,0 +1,31 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["isArray", "start", "className", "render"];
+import { Label } from '../value';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Meta(props) {
+  var {
+      isArray = false,
+      start = false,
+      className,
+      render
+    } = props,
+    reset = _objectWithoutPropertiesLoose(props, _excluded);
+  var mark = isArray ? '[]' : '{}';
+  var cls = "w-rjv-" + (isArray ? 'brackets' : 'curlybraces') + "-" + (start ? 'start' : 'end') + " " + (className || '');
+  var color = "var(--w-rjv-" + (isArray ? 'brackets' : 'curlybraces') + "-color, #236a7c)";
+  if (render) return render(_extends({
+    isArray,
+    className: cls,
+    style: {
+      color
+    },
+    children: start ? mark.charAt(0) : mark.charAt(1)
+  }, reset));
+  return /*#__PURE__*/_jsx(Label, _extends({
+    color: color,
+    className: cls
+  }, reset, {
+    children: start ? mark.charAt(0) : mark.charAt(1)
+  }));
+}

package/esm/copied.js

@@ -34,6 +34,7 @@ export function Copied(props) {
   };
   var defalutStyle = _extends({}, style, {
     cursor: 'pointer',
+    verticalAlign: 'middle',
     marginLeft: 5
   });
   var svgProps = _extends({
@@ -47,19 +48,19 @@ export function Copied(props) {
   if (render) return render(_extends({}, props, svgProps));
   if (copied) {
     return /*#__PURE__*/_jsx("svg", _extends({
-      viewBox: "0 0 38 38"
+      viewBox: "0 0 32 36"
     }, svgProps, {
       fill: "var(--w-rjv-copied-success-color, #28a745)",
       children: /*#__PURE__*/_jsx("path", {
-        d: "M27.5,35 L2.5,35 L2.5,12.5 L27.5,12.5 L27.5,15.2249049 C29.1403264,13.8627542 29.9736597,13.1778155 30,13.1700887 C30,11.9705278 30,10.0804982 30,7.5 C30,6.1 28.9,5 27.5,5 L20,5 C20,2.2 17.8,0 15,0 C12.2,0 10,2.2 10,5 L2.5,5 C1.1,5 0,6.1 0,7.5 L0,35 C0,36.4 1.1,37.5 2.5,37.5 L27.5,37.5 C28.9,37.5 30,36.4 30,35 L30,30 L27.5,30 L27.5,35 Z M7.5,7.5 L10,7.5 C10,7.5 12.5,6.4 12.5,5 C12.5,3.6 13.6,2.5 15,2.5 C16.4,2.5 17.5,3.6 17.5,5 C17.5,6.4 18.8,7.5 20,7.5 L22.5,7.5 C22.5,7.5 25,8.6 25,10 L5,10 C5,8.5 6.1,7.5 7.5,7.5 Z M5,27.5 L10,27.5 L10,25 L5,25 L5,27.5 Z M31.5589286,15 L35.1589286,18.6 L21.0160714,33 L12.5303571,24.2571429 L16.1303571,20.6571429 L21.0160714,25.5428571 L31.5589286,15 Z M12.5,30 L12.5,32.5 L5,32.5 L5,30 L12.5,30 Z M17.5,15 L5,15 L5,17.5 L17.5,17.5 L17.5,15 Z M10,20 L5,20 L5,22.5 L10,22.5 L10,20 Z"
+        d: "M27.5,33 L2.5,33 L2.5,12.5 L27.5,12.5 L27.5,15.2249049 C29.1403264,13.8627542 29.9736597,13.1778155 30,13.1700887 C30,11.9705278 30,10.0804982 30,7.5 C30,6.1 28.9,5 27.5,5 L20,5 C20,2.2 17.8,0 15,0 C12.2,0 10,2.2 10,5 L2.5,5 C1.1,5 0,6.1 0,7.5 L0,33 C0,34.4 1.1,36 2.5,36 L27.5,36 C28.9,36 30,34.4 30,33 L30,26.1114493 L27.5,28.4926435 L27.5,33 Z M7.5,7.5 L10,7.5 C10,7.5 12.5,6.4 12.5,5 C12.5,3.6 13.6,2.5 15,2.5 C16.4,2.5 17.5,3.6 17.5,5 C17.5,6.4 18.8,7.5 20,7.5 L22.5,7.5 C22.5,7.5 25,8.6 25,10 L5,10 C5,8.5 6.1,7.5 7.5,7.5 Z M5,27.5 L10,27.5 L10,25 L5,25 L5,27.5 Z M28.5589286,16 L32,19.6 L21.0160714,30.5382252 L13.5303571,24.2571429 L17.1303571,20.6571429 L21.0160714,24.5428571 L28.5589286,16 Z M17.5,15 L5,15 L5,17.5 L17.5,17.5 L17.5,15 Z M10,20 L5,20 L5,22.5 L10,22.5 L10,20 Z"
       })
     }));
   }
   return /*#__PURE__*/_jsx("svg", _extends({
-    viewBox: "0 0 38 38"
+    viewBox: "0 0 32 36"
   }, svgProps, {
     children: /*#__PURE__*/_jsx("path", {
-      d: "M27.5,35 L2.5,35 L2.5,12.5 L27.5,12.5 L27.5,20 L30,20 L30,7.5 C30,6.1 28.9,5 27.5,5 L20,5 C20,2.2 17.8,0 15,0 C12.2,0 10,2.2 10,5 L2.5,5 C1.1,5 0,6.1 0,7.5 L0,35 C0,36.4 1.1,37.5 2.5,37.5 L27.5,37.5 C28.9,37.5 30,36.4 30,35 L30,30 L27.5,30 L27.5,35 Z M7.5,7.5 L10,7.5 C10,7.5 12.5,6.4 12.5,5 C12.5,3.6 13.6,2.5 15,2.5 C16.4,2.5 17.5,3.6 17.5,5 C17.5,6.4 18.8,7.5 20,7.5 L22.5,7.5 C22.5,7.5 25,8.6 25,10 L5,10 C5,8.5 6.1,7.5 7.5,7.5 Z M5,27.5 L10,27.5 L10,25 L5,25 L5,27.5 Z M22.5,22.5 L22.5,17.5 L12.5,25 L22.5,32.5 L22.5,27.5 L35,27.5 L35,22.5 L22.5,22.5 Z M5,32.5 L12.5,32.5 L12.5,30 L5,30 L5,32.5 Z M17.5,15 L5,15 L5,17.5 L17.5,17.5 L17.5,15 Z M10,20 L5,20 L5,22.5 L10,22.5 L10,20 Z"
+      d: "M27.5,33 L2.5,33 L2.5,12.5 L27.5,12.5 L27.5,20 L30,20 L30,7.5 C30,6.1 28.9,5 27.5,5 L20,5 C20,2.2 17.8,0 15,0 C12.2,0 10,2.2 10,5 L2.5,5 C1.1,5 0,6.1 0,7.5 L0,33 C0,34.4 1.1,36 2.5,36 L27.5,36 C28.9,36 30,34.4 30,33 L30,29 L27.5,29 L27.5,33 Z M7.5,7.5 L10,7.5 C10,7.5 12.5,6.4 12.5,5 C12.5,3.6 13.6,2.5 15,2.5 C16.4,2.5 17.5,3.6 17.5,5 C17.5,6.4 18.8,7.5 20,7.5 L22.5,7.5 C22.5,7.5 25,8.6 25,10 L5,10 C5,8.5 6.1,7.5 7.5,7.5 Z M5,27.5 L10,27.5 L10,25 L5,25 L5,27.5 Z M22.5,21.5 L22.5,16.5 L12.5,24 L22.5,31.5 L22.5,26.5 L32,26.5 L32,21.5 L22.5,21.5 Z M17.5,15 L5,15 L5,17.5 L17.5,17.5 L17.5,15 Z M10,20 L5,20 L5,22.5 L10,22.5 L10,20 Z"
     })
   }));
 }

package/esm/editor/icon/edit.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export interface EditIconProps extends React.SVGAttributes<SVGElement> {
+}
+export declare const EditIcon: (props: EditIconProps) => import("react/jsx-runtime").JSX.Element;

package/esm/editor/icon/edit.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/extends";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var EditIcon = props => {
+  var {
+    style
+  } = props;
+  var defaultStyle = {
+    verticalAlign: 'middle',
+    display: 'inline-block',
+    cursor: 'pointer',
+    marginLeft: 5,
+    height: '1em',
+    width: '1em'
+  };
+  return /*#__PURE__*/_jsx("svg", _extends({
+    viewBox: "0 0 26 26",
+    fill: "var(--w-rjv-edit-color, currentColor)"
+  }, props, {
+    style: _extends({}, style, defaultStyle),
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M18,0 L7.74666667,0 C2.89333333,0 0,2.89333333 0,7.74666667 L0,17.9066667 C0,22.7733333 2.89333333,26 7.74666667,26 L18,26 C22.8533333,26 26.0001422,22.7733333 26.0001422,17.92 L26.0001422,7.74666667 C26.0133333,2.89333333 22.8533333,0 18,0 Z M11.9333333,20.68 C11.5466667,21.0666667 10.8133333,21.44 10.28,21.52 L7,21.9866667 C6.88,22 6.76,22.0133333 6.64,22.0133333 C6.09333333,22.0133333 5.58666667,21.8266667 5.22666667,21.4666667 C4.78666667,21.0266667 4.6,20.3866667 4.70666667,19.68 L5.17333333,16.4 C5.25333333,15.8533333 5.61333333,15.1333333 6.01333333,14.7466667 L11.96,8.8 C12.1719034,9.3972484 12.4397602,9.97314063 12.76,10.52 C12.8933333,10.7466667 13.04,10.96 13.16,11.12 C13.3066667,11.3466667 13.48,11.56 13.5866667,11.68 C13.6533333,11.7733333 13.7066667,11.84 13.7333333,11.8666667 C14.0666667,12.2666667 14.4533333,12.64 14.7866667,12.92 C14.88,13.0133333 14.9333333,13.0666667 14.96,13.08 C15.16,13.24 15.36,13.4 15.5333333,13.52 C15.7466667,13.68 15.96,13.8266667 16.1866667,13.9466667 C16.4533333,14.1066667 16.7466667,14.2533333 17.04,14.4 C17.3466667,14.5333333 17.6266667,14.6533333 17.9066667,14.7466667 L11.9333333,20.68 L11.9333333,20.68 Z M20.4933333,12.12 L19.2666667,13.36 C19.1887174,13.4373865 19.0831716,13.4805643 18.9733333,13.4800055 C18.9333333,13.4800055 18.88,13.4800055 18.8533333,13.4666667 C16.1309823,12.6775025 14.0024975,10.5490177 13.2133333,7.82666667 C13.1733333,7.68 13.2133333,7.52 13.32,7.42666667 L14.56,6.18666667 C16.5866667,4.16 18.52,4.2 20.5066667,6.18666667 C21.52,7.2 22.0133333,8.17333333 22.0133333,9.18666667 C22,10.1466667 21.5066667,11.1066667 20.4933333,12.12 L20.4933333,12.12 Z"
+    })
+  }));
+};

package/esm/editor/index.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { JsonViewProps } from '../';
+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';
+    }) => void;
+    /** 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,37 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["onEdit", "components", "editable", "displayDataTypes"];
+import { forwardRef } from 'react';
+import JsonView from '../';
+import { ObjectKey } from './objectKey';
+import { ReValue } from './value';
+import { jsx as _jsx } from "react/jsx-runtime";
+var JsonViewEditor = /*#__PURE__*/forwardRef((props, ref) => {
+  var {
+      onEdit,
+      components,
+      editable = true,
+      displayDataTypes = true
+    } = props,
+    reset = _objectWithoutPropertiesLoose(props, _excluded);
+  var comps = _extends({}, components, {
+    objectKey: reprops => /*#__PURE__*/_jsx(ObjectKey, _extends({}, reprops, {
+      editableValue: editable,
+      onEdit: onEdit,
+      render: components == null ? void 0 : components.objectKey
+    })),
+    value: reprops => {
+      return /*#__PURE__*/_jsx(ReValue, _extends({}, reprops, {
+        editableValue: editable,
+        displayDataTypes: displayDataTypes,
+        onEdit: onEdit
+      }));
+    }
+  });
+  return /*#__PURE__*/_jsx(JsonView, _extends({}, reset, {
+    displayDataTypes: false,
+    components: comps,
+    ref: ref
+  }));
+});
+export default JsonViewEditor;

package/esm/editor/objectKey.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { SemicolonProps } from '../semicolon';
+import { JsonViewEditorProps } from './';
+export interface ObjectKeyProps<T extends object> extends SemicolonProps {
+    onEdit?: JsonViewEditorProps<T>['onEdit'];
+    render?: (props: SemicolonProps & {
+        ref?: React.RefObject<HTMLElement>;
+    }) => React.ReactNode;
+    editableValue?: boolean;
+}
+export declare const ObjectKey: FC<ObjectKeyProps<object>>;

package/esm/editor/objectKey.js

@@ -0,0 +1,122 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["className", "value", "keyName", "parentName", "quotes", "label", "editableValue", "onEdit", "highlightUpdates", "render"];
+import { useEffect, useRef, useState } from 'react';
+import { useHighlight } from '../semicolon';
+import { Label } from '../value';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var ObjectKey = props => {
+  var {
+      className,
+      value,
+      keyName,
+      parentName,
+      quotes,
+      label,
+      editableValue,
+      onEdit,
+      highlightUpdates = true,
+      render
+    } = props,
+    reset = _objectWithoutPropertiesLoose(props, _excluded);
+  var [editable, setEditable] = useState(false);
+  var [curentLabel, setCurentLabel] = useState(label);
+  useEffect(() => setCurentLabel(label), [label]);
+  var $edit = useRef(null);
+  useHighlight({
+    value,
+    highlightUpdates: highlightUpdates,
+    highlightContainer: $edit
+  });
+  var click = evn => {
+    evn.stopPropagation();
+    if (!editableValue) return;
+    if (typeof keyName !== 'string') return;
+    if (editable) return;
+    setEditable(true);
+    if ($edit.current) {
+      var _$edit$current;
+      $edit.current.contentEditable = 'true';
+      (_$edit$current = $edit.current) == null ? void 0 : _$edit$current.focus();
+    }
+  };
+  var blur = () => {
+    setEditable(false);
+    if ($edit.current) {
+      var _$edit$current2;
+      $edit.current.contentEditable = 'false';
+      (_$edit$current2 = $edit.current) == null ? void 0 : _$edit$current2.focus();
+      setCurentLabel($edit.current.innerText);
+      onEdit && onEdit({
+        value: $edit.current.innerText,
+        oldValue: curentLabel,
+        keyName,
+        parentName,
+        type: 'key'
+      });
+    }
+  };
+  var focus = () => {
+    if ($edit.current) {
+      var _$edit$current3;
+      $edit.current.contentEditable = 'true';
+      (_$edit$current3 = $edit.current) == null ? void 0 : _$edit$current3.focus();
+    }
+  };
+  var keyDown = evn => {
+    if (evn.key === 'Enter') {
+      evn.stopPropagation();
+      evn.preventDefault();
+      $edit.current.contentEditable = 'false';
+    }
+  };
+  useEffect(() => {
+    if ($edit.current) {
+      $edit.current.addEventListener("paste", e => {
+        e.preventDefault();
+        // @ts-ignore
+        var text = e.clipboardData.getData("text/plain");
+        document.execCommand("insertHTML", false, text);
+      });
+    }
+  }, [$edit]);
+  var style = {
+    minWidth: 34,
+    minHeight: 18,
+    paddingInline: 3,
+    display: 'inline-block'
+  };
+  var content = typeof keyName === 'string' ? "" + quotes + curentLabel + quotes : curentLabel;
+  var spanProps = {
+    onClick: click,
+    onFocus: focus,
+    onBlur: blur,
+    onKeyDown: keyDown,
+    style: editable ? style : {},
+    contentEditable: editable,
+    spellCheck: false,
+    autoFocus: editable,
+    suppressContentEditableWarning: true,
+    children: editable ? curentLabel : content
+  };
+  if (render) {
+    spanProps.value = value;
+    spanProps.keyName = keyName;
+    spanProps.parentName = parentName;
+    return render(_extends({
+      className
+    }, reset, spanProps, {
+      parentName,
+      label: curentLabel,
+      children: editable ? curentLabel : content,
+      ref: $edit
+    }));
+  }
+  return /*#__PURE__*/_jsx(Label, _extends({
+    className: className
+  }, reset, {
+    autoFocus: editable
+  }, spanProps, {
+    ref: $edit
+  }));
+};

package/esm/editor/value.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { TypeProps } from '../value';
+import { JsonViewEditorProps } from './';
+export interface ReValueProps<T extends object> extends React.HTMLAttributes<HTMLSpanElement> {
+    onEdit?: JsonViewEditorProps<T>['onEdit'];
+    quotes?: JsonViewEditorProps<T>['quotes'];
+    keyName?: JsonViewEditorProps<T>['keyName'];
+    type: TypeProps['type'];
+    value?: unknown;
+    visible?: boolean;
+    editableValue?: boolean;
+    displayDataTypes?: boolean;
+}
+export declare function ReValue<T extends object>(props: ReValueProps<T>): import("react/jsx-runtime").JSX.Element;