@uiw/react-json-view 1.3.0 → 1.5.0

package/README.md

@@ -112,6 +112,7 @@ const customTheme = {
   '--w-rjv-background-color': '#1e1e1e',
   '--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': '#9cdcfe',
@@ -126,6 +127,7 @@ const customTheme = {
   '--w-rjv-type-bigint-color': '#268bd2',
   '--w-rjv-type-boolean-color': '#559bd4',
   '--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',
@@ -143,9 +145,9 @@ export default function Demo() {
 Online custom style example, please check in the [documentation website](https://uiwjs.github.io/react-json-view/)
 
 ```tsx mdx:preview:&title=Online Editing Theme
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect } from 'react';
 import Colorful from '@uiw/react-color-colorful';
-import JsonView from '@uiw/react-json-view';
+import JsonView from '@uiw/react-json-view/editor';
 
 const object = {
   avatar: 'https://i.imgur.com/MK3eW3As.jpg',
@@ -156,6 +158,7 @@ const object = {
   null: null,
   undefined,
   timer: 0,
+  url: new URL('https://example.com'),
   date: new Date('Tue Sep 13 2022 14:07:44 GMT-0500 (Central Daylight Time)'),
   array: [19, 100.86, 'test', NaN, Infinity],
   nestedArray: [
@@ -174,6 +177,7 @@ const customTheme = {
   '--w-rjv-background-color': '#1e1e1e',
   '--w-rjv-line-color': '#323232',
   '--w-rjv-arrow-color': '#9cdcfe',
+  '--w-rjv-edit-color': '#9cdcfe',
   '--w-rjv-info-color': '#656565',
   '--w-rjv-update-color': '#ebcb8b',
   '--w-rjv-copied-color': '#0184a6',
@@ -188,6 +192,7 @@ const customTheme = {
   '--w-rjv-type-bigint-color': '#268bd2',
   '--w-rjv-type-boolean-color': '#559bd4',
   '--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',
@@ -196,6 +201,7 @@ const customTheme = {
 export default function Demo() {
   const [cssvar, setCssvar] = useState('--w-rjv-background-color');
   const [hex, setHex] = useState("#1e1e1e");
+  const [editable, setEditable] = useState(false);
   const [theme, setTheme] = useState(customTheme);
   const onChange = ({ hexa }) => {
     setHex(hexa);
@@ -214,13 +220,17 @@ export default function Demo() {
     return () => clearInterval(id)
   }, []);
 
+  const changeEditable = (evn) => setEditable(evn.target.checked);
   return (
     <React.Fragment>
-      <div style={{ display: 'flex', gap: '1rem' }}>
-        <JsonView value={src} keyName="root" style={{ flex: 1, ...theme }} />
+      <label>
+        <input type="checkbox" checked={editable} onChange={changeEditable} /> Editable
+      </label>
+      <div style={{ display: 'flex', gap: '1rem', alignItems: 'flex-start' }}>
+        <JsonView editable={editable} value={src} keyName="root" style={{ flex: 1, overflow: 'auto', ...theme }} />
         <div>
           <Colorful color={hex} onChange={onChange} />
-          <div style={{ display: 'flex', gap: '0.4rem', flexWrap: 'wrap' }}>
+          <div style={{ display: 'flex', gap: '0.4rem', flexDirection: 'column' }}>
             {Object.keys(customTheme).map((varname, idx) => {
               const click = () => {
                 setCssvar(varname);
@@ -240,6 +250,7 @@ export default function Demo() {
   )
 }
 ```
+
 ## Render
 
 ```tsx mdx:preview
@@ -269,13 +280,13 @@ export default function Demo() {
         '--w-rjv-border-left-width': '0',
       }}
       components={{
-        braces: () =>  <span />,
-        ellipsis: () =>  <React.Fragment />,
-        objectKey: ({ value, ...props}) => {
-          if (props.children === '"integer"' && value > 40) {
+        braces: () => <span />,
+        ellipsis: () => <React.Fragment />,
+        objectKey: ({ value, keyName, parentName, ...props}) => {
+          if (keyName === 'integer' && typeof value === 'number' && value > 40) {
             return <del {...props} />
           }
-          return <span {...props} />
+          return <span {...props}  />
         }
       }}
     />
@@ -295,7 +306,7 @@ const object = {
   integer: 42,
 }
 
-function value({ type, children, ...props }) {
+function value({ type, children, keyName, visible, ...props }) {
   if (type === 'string' && /\.(jpg)$/.test(children)) {
     return (
       <span {...props}>
@@ -322,13 +333,117 @@ export default function Demo() {
 }
 ```
 
+**Support for the URL(opens in a new tab) API.**
+
+```tsx mdx:preview
+import React from 'react';
+import JsonView from '@uiw/react-json-view';
+
+export default function Demo() {
+  return (
+    <JsonView
+      value={{
+        url: new URL('https://example.com?t=12'),
+        urlStr: "https://example.com",
+        github: "https://example.com",
+      }}
+      style={{
+        '--w-rjv-background-color': '#ffffff',
+      }}
+    />
+  )
+}
+```
+
+```tsx mdx:preview
+import React from 'react';
+import JsonView from '@uiw/react-json-view';
+
+function value({ type, children, visible, keyName, value, ...props }) {
+  if (value instanceof URL) {
+    return (
+      <span {...props}>
+        <a href={value.href} target="_blank" rel="noopener noreferrer">
+          {children}
+        </a>
+        &nbsp;Open URL
+        {visible && <del>Button</del>}
+      </span>
+    );
+  }
+}
+
+export default function Demo() {
+  return (
+    <JsonView
+      value={{
+        url: new URL('https://example.com?t=12'),
+        urlStr: "https://example.com",
+        github: "https://example.com",
+      }}
+      components={{ value }}
+      style={{
+        '--w-rjv-background-color': '#ffffff',
+      }}
+    />
+  )
+}
+```
+
+## Editor JSON
+
+```tsx mdx:preview
+import React from 'react';
+import JsonViewEditor from '@uiw/react-json-view/editor';
+
+const object = {
+  string: 'Lorem ipsum dolor sit amet',
+  integer: 42,
+  float: 114.514,
+  object: {
+    'first-child': true,
+    'second-child': false,
+    'last-child': null,
+    'child': {
+      'first': true,
+      'second': false,
+      'last': null,
+    },
+  },
+  nestedArray: [ [1, 2], [3, 4], { a: 1} ],
+}
+
+const ObjectKey = ({ value, keyName, parentName, ...reset }) => {
+  if (keyName === 'integer' && typeof value === 'number' && value > 40) {
+    return <del {...reset} />
+  }
+  return <span {...reset} />
+};
+
+export default function Demo() {
+  return (
+    <JsonViewEditor
+      value={object}
+      keyName="root"
+      style={{
+        '--w-rjv-background-color': '#ffffff',
+      }}
+      onEdit={(opts) => {
+        console.log('opts:', opts)
+      }}
+      components={{
+        objectKey: ObjectKey
+      }}
+    />
+  );
+}
+```
+
 ## Highlight Updates
 
 ```tsx mdx:preview
 import React, { useState, useEffect } from 'react';
 import JsonView from '@uiw/react-json-view';
-import { TriangleArrow } from '@uiw/react-json-view/triangle-arrow';
-import { TriangleSolidArrow } from '@uiw/react-json-view/triangle-solid-arrow';
 
 const object = {
   string: 'Lorem ipsum dolor sit amet',
@@ -469,6 +584,8 @@ export default function Demo() {
 
 ## Props
 
+### JsonView Props
+
 ```ts
 import React from 'react';
 import { MetaProps, SemicolonProps, EllipsisProps, ValueViewProps } from '@uiw/react-json-view';
@@ -487,6 +604,8 @@ export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttr
   enableClipboard?: boolean;
   /** Whether to highlight updates. @default true */
   highlightUpdates?: boolean;
+  /** Whether sort keys through `String.prototype.localeCompare()` @default false */
+  objectSortKeys?: boolean | ((a: string, b: string) => number);
   /** Display for quotes in object-key @default " */
   quotes?: "'" | '"' | '';
   /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. @default false */
@@ -498,6 +617,8 @@ export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttr
     keyid: string;
     keyName?: string | number;
   }) => void;
+  /** Fires event when you copy */
+  onCopied?: CopiedProps<T>['onCopied'];
   /** Redefine interface elements to re-render. */
   components?: {
     braces?: MetaProps['render'];
@@ -505,12 +626,33 @@ export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttr
     arrow?: JSX.Element;
     objectKey?: SemicolonProps['render'];
     value?: ValueViewProps<T>['renderValue'];
+    copied?: CopiedProps<T>['render'];
   };
 }
 declare const JsonView: React.ForwardRefExoticComponent<Omit<JsonViewProps<object>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default JsonView;
 ```
 
+### JsonView Editor Props
+
+```ts
+import { JsonViewProps } from '@uiw/react-json-view';
+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;
+```
+
 ## Size and dependencies
 
 Here is the size benchmark (using [bundlephobia.com](https://bundlephobia.com)) against similar React libraries (found by [`npmjs.com/search`](https://www.npmjs.com/search?q=react%20json&ranking=popularity)):

package/cjs/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/cjs/comps/ellipsis.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Ellipsis = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["style", "render"];
+var Ellipsis = function Ellipsis(_ref) {
+  var style = _ref.style,
+    render = _ref.render,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var styl = (0, _objectSpread2["default"])({
+    cursor: 'pointer'
+  }, style);
+  var className = "w-rjv-ellipsis ".concat(props.className || '');
+  if (render) return render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+    style: styl
+  }, props), {}, {
+    className: className
+  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+    className: className,
+    style: styl
+  }, props), {}, {
+    children: "..."
+  }));
+};
+exports.Ellipsis = Ellipsis;

package/cjs/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/cjs/comps/meta.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Meta = Meta;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _value = require("../value");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["isArray", "start", "className", "render"];
+function Meta(props) {
+  var _props$isArray = props.isArray,
+    isArray = _props$isArray === void 0 ? false : _props$isArray,
+    _props$start = props.start,
+    start = _props$start === void 0 ? false : _props$start,
+    className = props.className,
+    render = props.render,
+    reset = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var mark = isArray ? '[]' : '{}';
+  var cls = "w-rjv-".concat(isArray ? 'brackets' : 'curlybraces', "-").concat(start ? 'start' : 'end', " ").concat(className || '');
+  var color = "var(--w-rjv-".concat(isArray ? 'brackets' : 'curlybraces', "-color, #236a7c)");
+  if (render) return render((0, _objectSpread2["default"])({
+    isArray: isArray,
+    className: cls,
+    style: {
+      color: color
+    },
+    children: start ? mark.charAt(0) : mark.charAt(1)
+  }, reset));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Label, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+    color: color,
+    className: cls
+  }, reset), {}, {
+    children: start ? mark.charAt(0) : mark.charAt(1)
+  }));
+}

package/cjs/copied.js

@@ -45,6 +45,7 @@ function Copied(props) {
   };
   var defalutStyle = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), {}, {
     cursor: 'pointer',
+    verticalAlign: 'middle',
     marginLeft: 5
   });
   var svgProps = (0, _objectSpread2["default"])({
@@ -58,19 +59,19 @@ function Copied(props) {
   if (render) return render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), svgProps));
   if (copied) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
-      viewBox: "0 0 38 38"
+      viewBox: "0 0 32 36"
     }, svgProps), {}, {
       fill: "var(--w-rjv-copied-success-color, #28a745)",
       children: /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)("svg", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
-    viewBox: "0 0 38 38"
+    viewBox: "0 0 32 36"
   }, svgProps), {}, {
     children: /*#__PURE__*/(0, _jsxRuntime.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/cjs/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/cjs/editor/icon/edit.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EditIcon = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _jsxRuntime = require("react/jsx-runtime");
+var EditIcon = function EditIcon(props) {
+  var style = props.style;
+  var defaultStyle = {
+    verticalAlign: 'middle',
+    display: 'inline-block',
+    cursor: 'pointer',
+    marginLeft: 5,
+    height: '1em',
+    width: '1em'
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+    viewBox: "0 0 26 26",
+    fill: "var(--w-rjv-edit-color, currentColor)"
+  }, props), {}, {
+    style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), defaultStyle),
+    children: /*#__PURE__*/(0, _jsxRuntime.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"
+    })
+  }));
+};
+exports.EditIcon = EditIcon;

package/cjs/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/cjs/editor/index.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _ = _interopRequireDefault(require("../"));
+var _objectKey = require("./objectKey");
+var _value = require("./value");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["onEdit", "components", "editable", "displayDataTypes"];
+var JsonViewEditor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var onEdit = props.onEdit,
+    components = props.components,
+    _props$editable = props.editable,
+    editable = _props$editable === void 0 ? true : _props$editable,
+    _props$displayDataTyp = props.displayDataTypes,
+    displayDataTypes = _props$displayDataTyp === void 0 ? true : _props$displayDataTyp,
+    reset = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var comps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, components), {}, {
+    objectKey: function objectKey(reprops) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_objectKey.ObjectKey, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reprops), {}, {
+        editableValue: editable,
+        onEdit: onEdit,
+        render: components === null || components === void 0 ? void 0 : components.objectKey
+      }));
+    },
+    value: function value(reprops) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.ReValue, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reprops), {}, {
+        editableValue: editable,
+        displayDataTypes: displayDataTypes,
+        onEdit: onEdit
+      }));
+    }
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    displayDataTypes: false,
+    components: comps,
+    ref: ref
+  }));
+});
+var _default = JsonViewEditor;
+exports["default"] = _default;
+module.exports = exports.default;

package/cjs/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/cjs/editor/objectKey.js

@@ -0,0 +1,138 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ObjectKey = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _semicolon = require("../semicolon");
+var _value = require("../value");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["className", "value", "keyName", "parentName", "quotes", "label", "editableValue", "onEdit", "highlightUpdates", "render"];
+var ObjectKey = function ObjectKey(props) {
+  var className = props.className,
+    value = props.value,
+    keyName = props.keyName,
+    parentName = props.parentName,
+    quotes = props.quotes,
+    label = props.label,
+    editableValue = props.editableValue,
+    onEdit = props.onEdit,
+    _props$highlightUpdat = props.highlightUpdates,
+    highlightUpdates = _props$highlightUpdat === void 0 ? true : _props$highlightUpdat,
+    render = props.render,
+    reset = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    editable = _useState2[0],
+    setEditable = _useState2[1];
+  var _useState3 = (0, _react.useState)(label),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    curentLabel = _useState4[0],
+    setCurentLabel = _useState4[1];
+  (0, _react.useEffect)(function () {
+    return setCurentLabel(label);
+  }, [label]);
+  var $edit = (0, _react.useRef)(null);
+  (0, _semicolon.useHighlight)({
+    value: value,
+    highlightUpdates: highlightUpdates,
+    highlightContainer: $edit
+  });
+  var click = function 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 || _$edit$current === void 0 ? void 0 : _$edit$current.focus();
+    }
+  };
+  var blur = function blur() {
+    setEditable(false);
+    if ($edit.current) {
+      var _$edit$current2;
+      $edit.current.contentEditable = 'false';
+      (_$edit$current2 = $edit.current) === null || _$edit$current2 === void 0 ? void 0 : _$edit$current2.focus();
+      setCurentLabel($edit.current.innerText);
+      onEdit && onEdit({
+        value: $edit.current.innerText,
+        oldValue: curentLabel,
+        keyName: keyName,
+        parentName: parentName,
+        type: 'key'
+      });
+    }
+  };
+  var focus = function focus() {
+    if ($edit.current) {
+      var _$edit$current3;
+      $edit.current.contentEditable = 'true';
+      (_$edit$current3 = $edit.current) === null || _$edit$current3 === void 0 ? void 0 : _$edit$current3.focus();
+    }
+  };
+  var keyDown = function keyDown(evn) {
+    if (evn.key === 'Enter') {
+      evn.stopPropagation();
+      evn.preventDefault();
+      $edit.current.contentEditable = 'false';
+    }
+  };
+  (0, _react.useEffect)(function () {
+    if ($edit.current) {
+      $edit.current.addEventListener("paste", function (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' ? "".concat(quotes).concat(curentLabel).concat(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((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+      className: className
+    }, reset), spanProps), {}, {
+      parentName: parentName,
+      label: curentLabel,
+      children: editable ? curentLabel : content,
+      ref: $edit
+    }));
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Label, (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+    className: className
+  }, reset), {}, {
+    autoFocus: editable
+  }, spanProps), {}, {
+    ref: $edit
+  }));
+};
+exports.ObjectKey = ObjectKey;