@uiw/react-json-view 1.3.0 → 1.5.0

package/cjs/semicolon.js

@@ -0,0 +1,113 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Semicolon = void 0;
+exports.useHighlight = useHighlight;
+exports.usePrevious = usePrevious;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _react = require("react");
+var _value = require("./value");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["children", "render", "color", "value", "className", "keyName", "highlightUpdates", "quotes", "style", "parentName"];
+function usePrevious(value) {
+  var ref = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    ref.current = value;
+  });
+  return ref.current;
+}
+function useHighlight(_ref) {
+  var value = _ref.value,
+    highlightUpdates = _ref.highlightUpdates,
+    highlightContainer = _ref.highlightContainer;
+  var prevValue = usePrevious(value);
+  var isHighlight = (0, _react.useMemo)(function () {
+    if (!highlightUpdates || prevValue === undefined) return false;
+    // highlight if value type changed
+    if ((0, _typeof2["default"])(value) !== (0, _typeof2["default"])(prevValue)) {
+      return true;
+    }
+    if (typeof value === 'number') {
+      // notice: NaN !== NaN
+      if (isNaN(value) && isNaN(prevValue)) return false;
+      return value !== prevValue;
+    }
+    // highlight if isArray changed
+    if (Array.isArray(value) !== Array.isArray(prevValue)) {
+      return true;
+    }
+    // not highlight object/function
+    // deep compare they will be slow
+    if ((0, _typeof2["default"])(value) === 'object' || typeof value === 'function') {
+      return false;
+    }
+
+    // highlight if not equal
+    if (value !== prevValue) {
+      return true;
+    }
+    return false;
+  }, [highlightUpdates, value]);
+  (0, _react.useEffect)(function () {
+    if (highlightContainer && highlightContainer.current && isHighlight && 'animate' in highlightContainer.current) {
+      highlightContainer.current.animate([{
+        backgroundColor: 'var(--w-rjv-update-color, #ebcb8b)'
+      }, {
+        backgroundColor: ''
+      }], {
+        duration: 1000,
+        easing: 'ease-in'
+      });
+    }
+  }, [isHighlight, value, highlightContainer]);
+}
+var Semicolon = function Semicolon(_ref2) {
+  var children = _ref2.children,
+    render = _ref2.render,
+    color = _ref2.color,
+    value = _ref2.value,
+    _ref2$className = _ref2.className,
+    className = _ref2$className === void 0 ? 'w-rjv-object-key' : _ref2$className,
+    keyName = _ref2.keyName,
+    highlightUpdates = _ref2.highlightUpdates,
+    quotes = _ref2.quotes,
+    style = _ref2.style,
+    parentName = _ref2.parentName,
+    props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+  var highlightContainer = (0, _react.useRef)(null);
+  var content = typeof keyName === 'string' ? "".concat(quotes).concat(keyName).concat(quotes) : keyName;
+  if (render) {
+    return render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+      className: className
+    }, props), {}, {
+      value: value,
+      style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), {}, {
+        color: color
+      }),
+      parentName: parentName,
+      keyName: keyName,
+      quotes: quotes,
+      label: keyName,
+      children: content
+    }));
+  }
+  ;
+  useHighlight({
+    value: value,
+    highlightUpdates: highlightUpdates,
+    highlightContainer: highlightContainer
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Label, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+    className: className,
+    color: color
+  }, props), {}, {
+    ref: highlightContainer,
+    children: content
+  }));
+};
+exports.Semicolon = Semicolon;

package/cjs/theme/dark.d.ts

@@ -4,6 +4,7 @@ export declare const darkTheme: {
     '--w-rjv-background-color': string;
     '--w-rjv-line-color': string;
     '--w-rjv-arrow-color': string;
+    '--w-rjv-edit-color': string;
     '--w-rjv-info-color': string;
     '--w-rjv-update-color': string;
     '--w-rjv-copied-color': string;
@@ -16,6 +17,7 @@ export declare const darkTheme: {
     '--w-rjv-type-bigint-color': string;
     '--w-rjv-type-boolean-color': string;
     '--w-rjv-type-date-color': string;
+    '--w-rjv-type-url-color': string;
     '--w-rjv-type-null-color': string;
     '--w-rjv-type-nan-color': string;
     '--w-rjv-type-undefined-color': string;

package/cjs/theme/dark.js

@@ -10,6 +10,7 @@ var darkTheme = {
   '--w-rjv-background-color': '#202020',
   '--w-rjv-line-color': '#323232',
   '--w-rjv-arrow-color': 'var(--w-rjv-color)',
+  '--w-rjv-edit-color': 'var(--w-rjv-color)',
   '--w-rjv-info-color': '#656565',
   '--w-rjv-update-color': '#ebcb8b',
   '--w-rjv-copied-color': '#0184a6',
@@ -22,6 +23,7 @@ var darkTheme = {
   '--w-rjv-type-bigint-color': '#268bd2',
   '--w-rjv-type-boolean-color': '#2aa198',
   '--w-rjv-type-date-color': '#586e75',
+  '--w-rjv-type-url-color': '#649bd8',
   '--w-rjv-type-null-color': '#d33682',
   '--w-rjv-type-nan-color': '#859900',
   '--w-rjv-type-undefined-color': '#586e75'

package/cjs/theme/light.d.ts

@@ -4,6 +4,7 @@ export declare const lightTheme: {
     '--w-rjv-background-color': string;
     '--w-rjv-line-color': string;
     '--w-rjv-arrow-color': string;
+    '--w-rjv-edit-color': string;
     '--w-rjv-info-color': string;
     '--w-rjv-update-color': string;
     '--w-rjv-copied-color': string;
@@ -16,6 +17,7 @@ export declare const lightTheme: {
     '--w-rjv-type-bigint-color': string;
     '--w-rjv-type-boolean-color': string;
     '--w-rjv-type-date-color': string;
+    '--w-rjv-type-url-color': string;
     '--w-rjv-type-null-color': string;
     '--w-rjv-type-nan-color': string;
     '--w-rjv-type-undefined-color': string;

package/cjs/theme/light.js

@@ -10,6 +10,7 @@ var lightTheme = {
   '--w-rjv-background-color': '#ffffff',
   '--w-rjv-line-color': '#ebebeb',
   '--w-rjv-arrow-color': 'var(--w-rjv-color)',
+  '--w-rjv-edit-color': 'var(--w-rjv-color)',
   '--w-rjv-info-color': '#0000004d',
   '--w-rjv-update-color': '#ebcb8b',
   '--w-rjv-copied-color': '#002b36',
@@ -22,6 +23,7 @@ var lightTheme = {
   '--w-rjv-type-bigint-color': '#268bd2',
   '--w-rjv-type-boolean-color': '#2aa198',
   '--w-rjv-type-date-color': '#586e75',
+  '--w-rjv-type-url-color': '#0969da',
   '--w-rjv-type-null-color': '#d33682',
   '--w-rjv-type-nan-color': '#859900',
   '--w-rjv-type-undefined-color': '#586e75'

package/cjs/tools.d.ts

@@ -0,0 +1,10 @@
+import { JsonViewProps } from './';
+interface ToolsProps<T extends object> {
+    enableClipboard?: boolean;
+    value?: T | {};
+    onCopied?: JsonViewProps<T>['onCopied'];
+    components?: JsonViewProps<T>['components'];
+    showTools?: boolean;
+}
+export declare function Tools<T extends object>(props: ToolsProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/cjs/tools.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tools = Tools;
+var _react = require("react");
+var _copied = require("./copied");
+var _jsxRuntime = require("react/jsx-runtime");
+function Tools(props) {
+  var enableClipboard = props.enableClipboard,
+    value = props.value,
+    showTools = props.showTools,
+    components = props.components,
+    onCopied = props.onCopied;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
+    children: enableClipboard && /*#__PURE__*/(0, _jsxRuntime.jsx)(_copied.Copied, {
+      show: showTools,
+      text: value,
+      onCopied: onCopied,
+      render: components === null || components === void 0 ? void 0 : components.copied
+    })
+  });
+}

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> {
-    keyName?: string;
-    value?: T;
+export interface ValueViewProps<T extends object> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
+    keyName?: string | number;
+    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;