feat: json keyname editor.

Author: jaywcjlove

core/editor.d.ts

@@ -2,35 +2,37 @@
 
 declare module '@uiw/react-json-view/editor' {
   import { JsonViewProps } from '@uiw/react-json-view';
-  import type { CountInfoExtraProps } from '@uiw/react-json-view/cjs/editor/countInfoExtra';
+  // import type { CountInfoExtraProps } from '@uiw/react-json-view/cjs/editor/countInfoExtra';
   type Option = {
-      value: string;
-      prevValue: string;
-      keyName: string | number;
+    value: string;
+    prevValue: string;
+    keyName: string | number;
   };
 
   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';
+      value: unknown;
+      oldValue: unknown;
+      keyName?: string | number;
+      parentName?: string | number;
+      type?: 'value' | 'key';
     }) => void;
-    /**
-     * When a callback function is passed in, add functionality is enabled. The callback is invoked before additions are completed.
-     * @returns {boolean} Returning false from onAdd will prevent the change from being made.
-     */
-    onAdd?: CountInfoExtraProps<T>['onAdd'];
-    /**
-     * When a callback function is passed in, delete functionality is enabled. The callback is invoked before deletions are completed. 
-     * @returns Returning false from onDelete will prevent the change from being made. 
-     */
-    onDelete?: CountInfoExtraProps<T>['onDelete'];
+    // /**
+    //  * When a callback function is passed in, add functionality is enabled. The callback is invoked before additions are completed.
+    //  * @returns {boolean} Returning false from onAdd will prevent the change from being made.
+    //  */
+    // onAdd?: CountInfoExtraProps<T>['onAdd'];
+    // /**
+    //  * When a callback function is passed in, delete functionality is enabled. The callback is invoked before deletions are completed.
+    //  * @returns Returning false from onDelete will prevent the change from being made.
+    //  */
+    // onDelete?: CountInfoExtraProps<T>['onDelete'];
     /** Whether enable edit feature. @default true */
     editable?: boolean;
   }
-  const JsonViewEditor: import("react").ForwardRefExoticComponent<Omit<JsonViewEditorProps<object>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  const JsonViewEditor: import('react').ForwardRefExoticComponent<
+    Omit<JsonViewEditorProps<object>, 'ref'> & import('react').RefAttributes<HTMLDivElement>
+  >;
   export default JsonViewEditor;
 }

core/package.json

@@ -114,10 +114,8 @@
     "tree-view",
     "treeview"
   ],
-  "dependencies": {
-    "@babel/runtime": "^7.22.6"
-  },
   "devDependencies": {
+    "@babel/runtime": "^7.22.6",
     "@testing-library/react": "^14.0.0",
     "@types/react-test-renderer": "^18.0.0",
     "react": "^18.2.0",

core/src/comps/KeyValues.tsx

@@ -58,7 +58,7 @@ KeyValues.displayName = 'JVR.KeyValues';
 
 interface KayNameProps<T extends object> extends Omit<KeyValuesProps<T>, 'level'> {}
 export const KayName = <T extends object>(props: KayNameProps<T>) => {
-  const { keyName, value } = props;
+  const { keyName, parentValue, value } = props;
   const { highlightUpdates } = useStore();
   const isNumber = typeof keyName === 'number';
   const highlightContainer = useRef<HTMLSpanElement>(null);
@@ -67,7 +67,7 @@ export const KayName = <T extends object>(props: KayNameProps<T>) => {
     <Fragment>
       <span ref={highlightContainer}>
         <Quote isNumber={isNumber} data-placement="left" />
-        <KeyNameComp keyName={keyName!} value={value}>
+        <KeyNameComp keyName={keyName!} value={value} parentValue={parentValue}>
           {keyName}
         </KeyNameComp>
         <Quote isNumber={isNumber} data-placement="right" />
@@ -102,7 +102,7 @@ export const KeyValuesItem = <T extends object>(props: KeyValuesProps<T>) => {
   };
   return (
     <div className="w-rjv-line" {...reset}>
-      <KayName keyName={keyName} value={value} />
+      <KayName keyName={keyName} value={value} parentValue={parentValue} />
       <Value keyName={keyName!} value={value} expandKey={subkeyid} />
     </div>
   );

core/src/editor/KeyName.tsx

@@ -0,0 +1,63 @@
+import { FC, useRef, useState } from 'react';
+import { SectionElementProps } from '../store/Section';
+import { useStore } from './store';
+
+export const KeyNameRender: SectionElementProps['render'] = (
+  { children, ...reset },
+  { value, parentValue, keyName },
+) => {
+  if (typeof children === 'number') {
+    return <span {...reset}>{children}</span>;
+  }
+  return (
+    <Child {...reset} value={value} parentValue={parentValue} keyName={keyName}>
+      {children}
+    </Child>
+  );
+};
+
+interface ChildProps extends React.HTMLAttributes<HTMLSpanElement> {
+  value: unknown;
+  parentValue?: unknown;
+  keyName: string | number;
+}
+
+const Child: FC<ChildProps> = (props) => {
+  const { value, parentValue, keyName, ...reset } = props;
+  const $dom = useRef<HTMLElement>(null);
+  const [currentValue, setCurrentValue] = useState(props.children);
+  const { onEdit } = useStore();
+
+  const onKeyDown = (evn: React.KeyboardEvent<HTMLSpanElement>) => {
+    if (evn.key === 'Enter') {
+      $dom.current?.setAttribute('contentEditable', 'false');
+    }
+  };
+
+  const onClick = (evn: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
+    evn.stopPropagation();
+    $dom.current?.setAttribute('contentEditable', 'true');
+    $dom.current?.focus();
+  };
+
+  const onBlur = (evn: React.FocusEvent<HTMLSpanElement, Element>) => {
+    $dom.current?.setAttribute('contentEditable', 'false');
+    const callback = onEdit && onEdit({ value: evn.target.textContent, oldValue: value, keyName });
+    if (callback) {
+      setCurrentValue(evn.target.textContent);
+    }
+  };
+
+  const spanProps: React.HTMLAttributes<HTMLSpanElement> = {
+    ...reset,
+    onKeyDown,
+    onClick,
+    onBlur,
+    spellCheck: false,
+    contentEditable: 'false',
+    suppressContentEditableWarning: true,
+    children: currentValue,
+  };
+
+  return <span {...spanProps} ref={$dom} />;
+};

core/src/editor/index.tsx

@@ -0,0 +1,37 @@
+import { forwardRef } from 'react';
+import JsonView, { type JsonViewProps } from '../';
+import { KeyNameRender } from './KeyName';
+import { Context, Dispatch, useStoreReducer } from './store';
+
+export interface JsonViewEditorProps<T extends object> extends Omit<JsonViewProps<T>, 'shortenTextAfterLength'> {
+  /**
+   * When a callback function is passed in, edit functionality is enabled. The callback is invoked before edits are completed.
+   * @returns {boolean}  Returning false from onEdit will prevent the change from being made.
+   */
+  onEdit?: (option: {
+    value: unknown;
+    oldValue: unknown;
+    keyName?: string | number;
+    parentName?: string | number;
+    type?: 'value' | 'key';
+  }) => boolean;
+  /** Whether enable edit feature. @default true */
+  editable?: boolean;
+}
+
+const JsonViewEditor = forwardRef<HTMLDivElement, JsonViewEditorProps<object>>((props, ref) => {
+  const { children, onEdit, editable = true, ...reset } = props;
+  const [state, dispatch] = useStoreReducer({ onEdit });
+  return (
+    <Context.Provider value={state}>
+      <Dispatch.Provider value={dispatch}>
+        <JsonView {...reset} shortenTextAfterLength={0} ref={ref}>
+          {editable && <JsonView.KeyName render={KeyNameRender} />}
+          {children}
+        </JsonView>
+      </Dispatch.Provider>
+    </Context.Provider>
+  );
+});
+
+export default JsonViewEditor;

core/src/editor/store.tsx

@@ -0,0 +1,35 @@
+import { FC, PropsWithChildren, createContext, useContext, useReducer } from 'react';
+
+type InitialState = {
+  /**
+   * When a callback function is passed in, edit functionality is enabled. The callback is invoked before edits are completed.
+   * @returns {boolean}  Returning false from onEdit will prevent the change from being made.
+   */
+  onEdit?: (option: {
+    value: unknown;
+    oldValue: unknown;
+    keyName?: string | number;
+    parentName?: string | number;
+    type?: 'value' | 'key';
+  }) => boolean;
+};
+type Dispatch = React.Dispatch<InitialState>;
+
+const initialState: InitialState = {};
+export const Context = createContext<InitialState>(initialState);
+
+const reducer = (state: InitialState, action: InitialState) => ({
+  ...state,
+  ...action,
+});
+
+export const Dispatch = createContext<Dispatch>(() => {});
+Dispatch.displayName = 'JVR.Editor.Dispatch';
+
+export const useStore = () => {
+  return useContext(Context);
+};
+
+export function useStoreReducer(initialState: InitialState) {
+  return useReducer(reducer, initialState);
+}

core/src/section/KeyName.tsx

@@ -14,10 +14,11 @@ KeyName.displayName = 'JVR.KeyName';
 type KeyNameCompProps = {
   keyName: string | number;
   value?: unknown;
+  parentValue?: unknown;
 };
 
 export const KeyNameComp: FC<PropsWithChildren<KeyNameCompProps>> = (props) => {
-  const { children, value, keyName } = props;
+  const { children, value, parentValue, keyName } = props;
   const isNumber = typeof children === 'number';
   const style: React.CSSProperties = {
     color: isNumber ? 'var(--w-rjv-key-number, #268bd2)' : 'var(--w-rjv-key-string, #002b36)',
@@ -26,7 +27,8 @@ export const KeyNameComp: FC<PropsWithChildren<KeyNameCompProps>> = (props) => {
   const { as, render, ...reset } = Comp;
   reset.style = { ...reset.style, ...style };
   const Elm = as || 'span';
-  const child = render && typeof render === 'function' && render({ ...reset, children }, { value, keyName });
+  const child =
+    render && typeof render === 'function' && render({ ...reset, children }, { value, parentValue, keyName });
   if (child) return child;
   return <Elm {...reset}>{children}</Elm>;
 };

core/src/store/Section.tsx

@@ -3,7 +3,10 @@ import { type TagType } from './Types';
 
 export type SectionElementProps<T extends TagType = 'span'> = {
   as?: T;
-  render?: (props: SectionElement<T>, result: { value: unknown; keyName: string | number }) => React.ReactNode;
+  render?: (
+    props: SectionElement<T>,
+    result: { value: unknown; parentValue?: unknown; keyName: string | number },
+  ) => React.ReactNode;
 };
 
 export type SectionElement<T extends TagType = 'span'> = SectionElementProps<T> & ComponentPropsWithoutRef<T>;

www/src/App.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import styled, { css } from 'styled-components';
 import { Example } from './example/default';
-// import { ExampleEditor } from './example/editor';
+// import ExampleEditor from './example/editor';
 
 const ExampleWrapper = styled.div`
   max-width: 630px;