feat: add json editing features. (#3)

Author: jaywcjlove

.github/workflows/ci.yml

@@ -71,6 +71,7 @@ jobs:
             [![](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-json-view@${{steps.create_tag.outputs.versionNumber}}/file/README.md)
             
             Documentation ${{ steps.changelog.outputs.tag }}: https://raw.githack.com/uiwjs/react-json-view/${{ steps.changelog.outputs.gh-pages-short-hash }}/index.html  
+            Or Doc Website: https://htmlpreview.github.io/?https://github.com/uiwjs/react-json-view/${{ steps.changelog.outputs.gh-pages-short-hash }}/index.html  
             Comparing Changes: ${{ steps.changelog.outputs.compareurl }}  
 
             ```bash

core/README.md

@@ -126,6 +126,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',
@@ -156,6 +157,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: [
@@ -188,6 +190,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',
@@ -240,6 +243,7 @@ export default function Demo() {
   )
 }
 ```
+
 ## Render
 
 ```tsx mdx:preview
@@ -269,13 +273,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 +299,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}>
@@ -348,14 +352,15 @@ export default function Demo() {
 import React from 'react';
 import JsonView from '@uiw/react-json-view';
 
-function value({ type, children, value, ...props }) {
+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>
     );
   }
@@ -378,13 +383,60 @@ export default function Demo() {
 }
 ```
 
+## 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',

core/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;
+}

core/package.json

@@ -12,6 +12,11 @@
       "types": "./cjs/index.d.ts",
       "require": "./cjs/index.js"
     },
+    "./editor": {
+      "import": "./esm/editor/index.js",
+      "types": "./cjs/editor/index.d.ts",
+      "require": "./cjs/editor/index.js"
+    },
     "./light": {
       "import": "./esm/theme/light.js",
       "types": "./cjs/theme/light.d.ts",
@@ -45,6 +50,7 @@
     "react-dom": ">=18.0.0"
   },
   "files": [
+    "editor.d.ts",
     "dark.d.ts",
     "light.d.ts",
     "triangle-arrow.d.ts",

core/src/comps/ellipsis.tsx

@@ -0,0 +1,15 @@
+import { FC, PropsWithChildren } from 'react';
+
+export interface EllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {
+  render?: (props: EllipsisProps) => JSX.Element;
+}
+export const Ellipsis: FC<PropsWithChildren<EllipsisProps>> = ({ style, render, ...props }) => {
+  const styl = { cursor: 'pointer', ...style };
+  const className = `w-rjv-ellipsis ${props.className || ''}`;
+  if (render) return render({ style: styl, ...props, className });
+  return (
+    <span className={className} style={styl} {...props}>
+      ...
+    </span>
+  );
+};

core/src/comps/meta.tsx

@@ -0,0 +1,27 @@
+import { Label, LabelProps } from '../value';
+
+export interface MetaProps extends LabelProps {
+  isArray?: boolean;
+  start?: boolean;
+  render?: (props: Pick<MetaProps, 'start' | 'isArray' | 'className' | 'children'>) => JSX.Element;
+}
+
+export function Meta(props: MetaProps) {
+  const { isArray = false, start = false, className, render, ...reset } = props;
+  const mark = isArray ? '[]' : '{}';
+  const cls = `w-rjv-${isArray ? 'brackets' : 'curlybraces'}-${start ? 'start' : 'end'} ${className || ''}`;
+  const color = `var(--w-rjv-${isArray ? 'brackets' : 'curlybraces'}-color, #236a7c)`;
+  if (render)
+    return render({
+      isArray,
+      className: cls,
+      style: { color },
+      children: start ? mark.charAt(0) : mark.charAt(1),
+      ...reset,
+    });
+  return (
+    <Label color={color} className={cls} {...reset}>
+      {start ? mark.charAt(0) : mark.charAt(1)}
+    </Label>
+  );
+}

core/src/copied.tsx

@@ -33,7 +33,7 @@ export function Copied<T>(props: CopiedProps<T>) {
       })
       .catch((error) => {})
   };
-  const defalutStyle = { ...style, cursor: 'pointer', marginLeft: 5 } as React.CSSProperties;
+  const defalutStyle = { ...style, cursor: 'pointer',verticalAlign: 'middle', marginLeft: 5 } as React.CSSProperties;
   const svgProps: React.SVGProps<SVGSVGElement> = {
     height: '1em', 
     width: '1em',
@@ -46,14 +46,14 @@ export function Copied<T>(props: CopiedProps<T>) {
   if (render) return render({ ...props, ...svgProps });
   if (copied)  {
     return (
-      <svg viewBox="0 0 38 38" {...svgProps} fill="var(--w-rjv-copied-success-color, #28a745)">
-        <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"></path>
+      <svg viewBox="0 0 32 36" {...svgProps} fill="var(--w-rjv-copied-success-color, #28a745)">
+        <path 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"></path>
       </svg>
     );
   }
   return (
-    <svg viewBox="0 0 38 38" {...svgProps}>
-      <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"></path>
+    <svg viewBox="0 0 32 36" {...svgProps}>
+      <path 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"></path>
     </svg>
   );
 }

core/src/editor/icon/edit.tsx

@@ -0,0 +1,25 @@
+import { CSSProperties } from 'react';
+
+export interface EditIconProps extends React.SVGAttributes<SVGElement> {}
+export const EditIcon = (props: EditIconProps) => {
+  const { style } = props
+  const defaultStyle: CSSProperties = {
+    verticalAlign: 'middle',
+    display: 'inline-block',
+    color: 'var(--w-rjv-edit-color, currentColor)',
+    cursor: 'pointer',
+    marginLeft: 5,
+    height: '1em',
+    width: '1em',
+  }
+  return (
+    <svg
+      viewBox="0 0 26 26"
+      fill="currentColor"
+      {...props}
+      style={{ ...style, ...defaultStyle}}
+    >
+      <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" />
+    </svg>
+  )
+}

core/src/editor/index.tsx

@@ -0,0 +1,37 @@
+import { forwardRef } from 'react'
+import JsonView, { JsonViewProps } from '../';
+import { ObjectKey } from './objectKey';
+import { ReValue } from './value';
+
+type Option = {
+  value: unknown;
+  oldValue: unknown;
+  keyName?: string | number;
+  parentName?: string | number;
+  type?: 'value' | 'key'
+}
+
+export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T> {
+  /** Callback when value edit functionality */
+  onEdit?: (option: Option) => void;
+  /** Whether enable edit feature. @default true */
+  editable?: boolean;
+}
+
+const JsonViewEditor = forwardRef<HTMLDivElement, JsonViewEditorProps<object>>((props, ref) => {
+  const { onEdit, components, editable = true, displayDataTypes = true, ...reset } = props;
+  const comps: JsonViewEditorProps<object>['components'] = {
+    ...components,
+  }
+  if (editable) {
+    comps.objectKey = (reprops) => <ObjectKey {...reprops} onEdit={onEdit} render={components?.objectKey} />;
+    comps.value = (reprops) => {
+      return <ReValue {...reprops} displayDataTypes={displayDataTypes} onEdit={onEdit} />
+    };
+  }
+  return (
+    <JsonView {...reset} displayDataTypes={false} components={{...comps}} ref={ref} />
+  )
+});
+
+export default JsonViewEditor;