fix: fix editable props. (#3)

Author: jaywcjlove

core/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',
@@ -144,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',
@@ -176,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',
@@ -199,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);
@@ -217,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);
@@ -577,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';
@@ -624,6 +633,26 @@ declare const JsonView: React.ForwardRefExoticComponent<Omit<JsonViewProps<objec
 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)):

core/src/editor/index.tsx

@@ -3,17 +3,15 @@ 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;
+  onEdit?: (option: {
+    value: unknown;
+    oldValue: unknown;
+    keyName?: string | number;
+    parentName?: string | number;
+    type?: 'value' | 'key';
+  }) => void;
   /** Whether enable edit feature. @default true */
   editable?: boolean;
 }
@@ -22,16 +20,14 @@ const JsonViewEditor = forwardRef<HTMLDivElement, JsonViewEditorProps<object>>((
   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} />
-    };
+    objectKey: (reprops) => <ObjectKey {...reprops} editableValue={editable} onEdit={onEdit} render={components?.objectKey} />,
+    value: (reprops) => {
+      return <ReValue {...reprops} editableValue={editable} displayDataTypes={displayDataTypes} onEdit={onEdit} />
+    }
   }
   return (
-    <JsonView {...reset} displayDataTypes={false} components={{...comps}} ref={ref} />
-  )
+    <JsonView {...reset} displayDataTypes={false} components={comps} ref={ref} />
+  );
 });
 
 export default JsonViewEditor;

core/src/editor/objectKey.tsx

@@ -6,17 +6,19 @@ 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 const ObjectKey: FC<ObjectKeyProps<object>>= (props) => {
-  const { className, value, keyName, parentName, quotes, label, onEdit, highlightUpdates = true, render, ...reset } = props;
+  const { className, value, keyName, parentName, quotes, label, editableValue, onEdit, highlightUpdates = true, render, ...reset } = props;
   const [editable, setEditable] = useState(false);
   const [curentLabel, setCurentLabel] = useState(label);
   useEffect(() => setCurentLabel(label), [label]);
   const $edit = useRef<HTMLSpanElement>(null);
   useHighlight({ value, highlightUpdates: highlightUpdates, highlightContainer: $edit });
   const click = (evn: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
     evn.stopPropagation();
+    if (!editableValue) return;
     if (typeof keyName !== 'string') return;
     if (editable) return;
     setEditable(true);

core/src/editor/value.tsx

@@ -16,25 +16,28 @@ export interface ReValueProps<T extends object> extends React.HTMLAttributes<HTM
   type: TypeProps['type'];
   value?: unknown;
   visible?: boolean;
+  editableValue?: boolean;
   displayDataTypes?: boolean;
 }
 
 export function ReValue<T extends object>(props: ReValueProps<T>) {
-  const { type, value, keyName, visible, quotes, style, content, children, displayDataTypes, onEdit, ...reset } = props;
+  const { type, value, keyName, visible, quotes, style, content, children, displayDataTypes, editableValue, onEdit, ...reset } = props;
   const [editable, setEditable] = useState(false);
   const $edit = useRef<HTMLSpanElement>(null);
   const [curentType, setCurentType] = useState(type);
   const [curentChild, setCurentChild] = useState(value);
   useEffect(() => setCurentChild(value), [value]);
   const click = (evn: React.MouseEvent<SVGElement, MouseEvent>) => {
     evn.stopPropagation();
+    if (!editableValue) return;
     if ($edit.current) {
       setEditable(true);
       $edit.current!.contentEditable = 'true';
       $edit.current?.focus();
     }
   }
   const keyDown = (evn: React.KeyboardEvent<HTMLSpanElement>) => {
+    if (!editableValue) return;
     if (evn.key === 'Enter') {
       evn.stopPropagation();
       evn.preventDefault();
@@ -43,6 +46,7 @@ export function ReValue<T extends object>(props: ReValueProps<T>) {
     }
   }
   const blur = () => {
+    if (!editableValue) return;
     setEditable(false);
     if ($edit.current) {
       $edit.current.contentEditable = 'false';
@@ -107,7 +111,7 @@ export function ReValue<T extends object>(props: ReValueProps<T>) {
         <span {...spanProps} ref={$edit} data-value={content}>{typeof curentChild === 'string' ? curentChild :  childStr}</span>
         <Quotes style={style} quotes={quotes} show={typeStr === 'string'} />
       </Fragment>
-      {visible && <EditIcon onClick={click} />}
+      {visible && editableValue && <EditIcon onClick={click} />}
     </Fragment>
   );
 

core/src/node.tsx

@@ -109,9 +109,7 @@ export function RooNode<T extends object>(props: RooNodeProps<T>) {
               keyName={keyName}
               parentName={keyName}
               color={typeof keyName === 'number' ? typeMap['number'].color : ''}
-            >
-              {keyName}
-            </Semicolon>
+            />
             <Colon />
           </Fragment>
         )}
@@ -142,9 +140,7 @@ export function RooNode<T extends object>(props: RooNodeProps<T>) {
                   render={components.objectKey}
                   color={typeof key === 'number' ? typeMap['number'].color : ''}
                   keyName={key}
-                >
-                  {key}
-                </Semicolon>
+                />
               );
               const isEmpty = (Array.isArray(item) && (item as []).length === 0) || (typeof item === 'object' && item && !((item as any) instanceof Date) && Object.keys(item).length === 0);
               if (Array.isArray(item) && !isEmpty) {

core/src/semicolon.tsx

@@ -87,9 +87,9 @@ export const Semicolon: FC<PropsWithChildren<SemicolonProps>> = ({
   ...props
 }) => {
   const highlightContainer = useRef<HTMLSpanElement>(null);
-  const content = typeof keyName === 'string' ? `${quotes}${children}${quotes}` : children;
+  const content = typeof keyName === 'string' ? `${quotes}${keyName}${quotes}` : keyName;
   if (render) {
-    return render({ className, ...props, value, style: { ...style, color }, parentName, keyName, quotes, label: children as string, children: content });
+    return render({ className, ...props, value, style: { ...style, color }, parentName, keyName, quotes, label: keyName as string, children: content });
   };
   useHighlight({ value, highlightUpdates, highlightContainer });
   return (

core/src/theme/dark.ts

@@ -4,6 +4,7 @@ export const 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',

core/src/theme/light.ts

@@ -4,6 +4,7 @@ export const 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',