From a9628fcd8d6e9a3a4eb46908eac0cc741905a397 Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Mon, 17 Jul 2023 16:50:32 +0800
Subject: [PATCH] feat: `onEdit event function returns `namespace`. (#6)

---
 core/README.md                |   6 ++
 core/src/editor/index.tsx     |  29 ++++++----
 core/src/editor/objectKey.tsx |  68 ++++++++++++++++------
 core/src/editor/value.tsx     |  69 +++++++++++++++-------
 core/src/node.tsx             | 105 +++++++++++++++++++++++++---------
 core/src/semicolon.tsx        |  46 +++++++++------
 core/src/value.tsx            |  85 +++++++++++++++++----------
 package.json                  |   4 +-
 8 files changed, 284 insertions(+), 128 deletions(-)

diff --git a/core/README.md b/core/README.md
index 75ef363e..c5a97976 100644
--- a/core/README.md
+++ b/core/README.md
@@ -530,6 +530,11 @@ export default function Demo() {
       }}
       onEdit={(opts) => {
         console.log('opts:', opts)
+        // opts.namespace: ['object', 'child', 'last']
+        // opts.oldValue: null
+        // opts.type: "value"
+        // opts.value: "NULL3"
+        return true;
       }}
       components={{
         objectKey: ObjectKey
@@ -756,6 +761,7 @@ export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T>
     oldValue: unknown;
     keyName?: string | number;
     parentName?: string | number;
+    namespace?: Array<string | number>;
     type?: 'value' | 'key';
   }) => boolean;
   /**
diff --git a/core/src/editor/index.tsx b/core/src/editor/index.tsx
index 53d87886..1b866a89 100644
--- a/core/src/editor/index.tsx
+++ b/core/src/editor/index.tsx
@@ -8,7 +8,7 @@ import type { CountInfoExtraProps } from './countInfoExtra';
 
 export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T> {
   /**
-   * When a callback function is passed in, edit functionality is enabled. The callback is invoked before edits are completed. 
+   * 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: {
@@ -16,6 +16,7 @@ export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T>
     oldValue: unknown;
     keyName?: string | number;
     parentName?: string | number;
+    namespace?: Array<string | number>;
     type?: 'value' | 'key';
   }) => boolean;
   /**
@@ -24,8 +25,8 @@ export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T>
    */
   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. 
+   * 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 */
@@ -37,14 +38,22 @@ const JsonViewEditor = forwardRef<HTMLDivElement, JsonViewEditorProps<object>>((
   const comps: JsonViewEditorProps<object>['components'] = {
     ...components,
     countInfoExtra: (reprops) => <CountInfoExtra {...reprops} editable={editable} onAdd={onAdd} onDelete={onDelete} />,
-    objectKey: (reprops) => <ObjectKey {...reprops} editableValue={editable} onEdit={onEdit} render={components?.objectKey} />,
+    objectKey: (reprops) => (
+      <ObjectKey {...reprops} editableValue={editable} onEdit={onEdit} render={components?.objectKey} />
+    ),
     value: (reprops) => {
-      return <ReValue {...reprops} editableValue={editable} displayDataTypes={displayDataTypes} onDelete={onDelete} onEdit={onEdit} />
-    }
-  }
-  return (
-    <JsonView {...reset} displayDataTypes={false} components={comps} ref={ref} />
-  );
+      return (
+        <ReValue
+          {...reprops}
+          editableValue={editable}
+          displayDataTypes={displayDataTypes}
+          onDelete={onDelete}
+          onEdit={onEdit}
+        />
+      );
+    },
+  };
+  return <JsonView {...reset} displayDataTypes={false} components={comps} ref={ref} />;
 });
 
 export default JsonViewEditor;
diff --git a/core/src/editor/objectKey.tsx b/core/src/editor/objectKey.tsx
index 49f48279..36b8eaac 100644
--- a/core/src/editor/objectKey.tsx
+++ b/core/src/editor/objectKey.tsx
@@ -10,8 +10,21 @@ export interface ObjectKeyProps<T extends object> extends SemicolonProps {
   editableValue?: boolean;
 }
 
-export const ObjectKey: FC<ObjectKeyProps<object>>= (props) => {
-  const { className, value, keyName, parentName, quotes, label, editableValue, onEdit, highlightUpdates = true, render, ...reset } = props;
+export const ObjectKey: FC<ObjectKeyProps<object>> = (props) => {
+  const {
+    className,
+    value,
+    keyName,
+    parentName,
+    quotes,
+    label,
+    namespace,
+    editableValue,
+    onEdit,
+    highlightUpdates = true,
+    render,
+    ...reset
+  } = props;
   const [editable, setEditable] = useState(false);
   const [curentLabel, setCurentLabel] = useState(label);
   useEffect(() => setCurentLabel(label), [label]);
@@ -27,37 +40,50 @@ export const ObjectKey: FC<ObjectKeyProps<object>>= (props) => {
       $edit.current!.contentEditable = 'true';
       $edit.current?.focus();
     }
-  }
+  };
 
-  const blur = () => {
-    setEditable(false);
+  const blur = async () => {
     if ($edit.current) {
+      if (onEdit) {
+        const result = await onEdit({
+          value: $edit.current.innerText,
+          oldValue: curentLabel as string,
+          namespace,
+          keyName,
+          parentName,
+          type: 'key',
+        });
+        if (result) {
+          setCurentLabel($edit.current.innerText);
+        } else {
+          $edit.current.innerText = curentLabel as string;
+        }
+      }
       $edit.current.contentEditable = 'false';
       $edit.current?.focus();
-      setCurentLabel($edit.current.innerText);
-      onEdit && onEdit({ value: $edit.current.innerText, oldValue: curentLabel as string, keyName, parentName, type: 'key' });
     }
-  }
+    setEditable(false);
+  };
   const focus = () => {
     if ($edit.current) {
       $edit.current.contentEditable = 'true';
       $edit.current?.focus();
     }
-  }
+  };
   const keyDown = (evn: React.KeyboardEvent<HTMLSpanElement>) => {
     if (evn.key === 'Enter') {
       evn.stopPropagation();
       evn.preventDefault();
       $edit.current!.contentEditable = 'false';
     }
-  }
+  };
   useEffect(() => {
     if ($edit.current) {
-      $edit.current.addEventListener("paste", (e) => {
+      $edit.current.addEventListener('paste', (e) => {
         e.preventDefault();
         // @ts-ignore
-        const text = e.clipboardData.getData("text/plain");
-        document.execCommand("insertHTML", false, text);
+        const text = e.clipboardData.getData('text/plain');
+        document.execCommand('insertHTML', false, text);
       });
     }
   }, [$edit]);
@@ -75,15 +101,21 @@ export const ObjectKey: FC<ObjectKeyProps<object>>= (props) => {
     autoFocus: editable,
     suppressContentEditableWarning: true,
     children: editable ? curentLabel : content,
-  }
+  };
   if (render) {
     spanProps.value = value;
     spanProps.keyName = keyName;
     spanProps.parentName = parentName;
-    return render({ className, ...reset, ...spanProps, parentName, label: curentLabel as string, children: editable ? curentLabel : content, ref: $edit });
+    return render({
+      className,
+      ...reset,
+      ...spanProps,
+      parentName,
+      label: curentLabel as string,
+      children: editable ? curentLabel : content,
+      ref: $edit,
+    });
   }
 
   return <Label className={className} {...reset} autoFocus={editable} {...spanProps} ref={$edit} />;
-}
-
-
+};
diff --git a/core/src/editor/value.tsx b/core/src/editor/value.tsx
index bd81a511..1fcf1e40 100644
--- a/core/src/editor/value.tsx
+++ b/core/src/editor/value.tsx
@@ -6,10 +6,14 @@ import { EditIcon } from './icon/edit';
 import { DeleteIcon } from './icon/delete';
 import type { JsonViewEditorProps } from './';
 
-const Quotes: FC<PropsWithChildren<React.HTMLAttributes<HTMLSpanElement> & { quotes?: JsonViewEditorProps<object>['quotes']; show?: boolean; }>> = ({ show, style, quotes }) => {
+const Quotes: FC<
+  PropsWithChildren<
+    React.HTMLAttributes<HTMLSpanElement> & { quotes?: JsonViewEditorProps<object>['quotes']; show?: boolean }
+  >
+> = ({ show, style, quotes }) => {
   if (!quotes || !show) return;
   return <span style={style}>{quotes}</span>;
-}
+};
 
 export interface ReValueProps<T extends object> extends React.HTMLAttributes<HTMLSpanElement> {
   onEdit?: JsonViewEditorProps<T>['onEdit'];
@@ -19,6 +23,7 @@ export interface ReValueProps<T extends object> extends React.HTMLAttributes<HTM
   value?: unknown;
   data?: T;
   visible?: boolean;
+  namespace?: Array<string | number>;
   editableValue?: boolean;
   displayDataTypes?: boolean;
   setValue?: React.Dispatch<React.SetStateAction<T>>;
@@ -26,7 +31,23 @@ export interface ReValueProps<T extends object> extends React.HTMLAttributes<HTM
 }
 
 export function ReValue<T extends object>(props: ReValueProps<T>) {
-  const { type, value, setValue, data, keyName, visible, quotes, style, children, displayDataTypes, editableValue, onDelete, onEdit, ...reset } = props;
+  const {
+    type,
+    value,
+    setValue,
+    data,
+    keyName,
+    visible,
+    quotes,
+    style,
+    children,
+    namespace,
+    displayDataTypes,
+    editableValue,
+    onDelete,
+    onEdit,
+    ...reset
+  } = props;
   const [editable, setEditable] = useState(false);
   const $edit = useRef<HTMLSpanElement>(null);
   const [curentType, setCurentType] = useState(type);
@@ -40,7 +61,7 @@ export function ReValue<T extends object>(props: ReValueProps<T>) {
       $edit.current.setAttribute('contentEditable', 'true');
       $edit.current?.focus();
     }
-  }
+  };
   const keyDown = (evn: React.KeyboardEvent<HTMLSpanElement>) => {
     if (!editableValue) return;
     if (evn.key === 'Enter') {
@@ -51,7 +72,7 @@ export function ReValue<T extends object>(props: ReValueProps<T>) {
         $edit.current.setAttribute('contentEditable', 'false');
       }
     }
-  }
+  };
   const blur = async () => {
     if (!editableValue) return;
     setEditable(false);
@@ -70,21 +91,21 @@ export function ReValue<T extends object>(props: ReValueProps<T>) {
       if (Number.isNaN(text)) {
         typeStr = 'number';
       }
-      if (typeof text === 'string' && /^(true|false)$/ig.test(text)) {
-        text = /^(true)$/ig.test(text) ? true : false;
+      if (typeof text === 'string' && /^(true|false)$/gi.test(text)) {
+        text = /^(true)$/gi.test(text) ? true : false;
         typeStr = 'boolean';
-      } else if (typeof text === 'string' && /^[\d]+n$/ig.test(text)) {
-        text = BigInt(text.replace(/n$/ig, ''));
+      } else if (typeof text === 'string' && /^[\d]+n$/gi.test(text)) {
+        text = BigInt(text.replace(/n$/gi, ''));
         typeStr = 'bigint';
-      } else if (typeof text === 'string' && /^(null)$/ig.test(text)) {
+      } else if (typeof text === 'string' && /^(null)$/gi.test(text)) {
         text = null;
         typeStr = 'null';
-      } else if (typeof text === 'string' && /^(undefined)$/ig.test(text)) {
+      } else if (typeof text === 'string' && /^(undefined)$/gi.test(text)) {
         text = undefined;
         typeStr = 'undefined';
       } else if (typeof text === 'string') {
         try {
-          if(text && text.length > 10 && !isNaN(Date.parse(text))){
+          if (text && text.length > 10 && !isNaN(Date.parse(text))) {
             const dt = new Date(text);
             text = dt;
             typeStr = 'date';
@@ -92,7 +113,7 @@ export function ReValue<T extends object>(props: ReValueProps<T>) {
         } catch (error) {}
       }
       if (onEdit) {
-        const result = await onEdit({ type: 'value', value: text, oldValue: curentChild });
+        const result = await onEdit({ type: 'value', value: text, oldValue: curentChild, namespace });
         if (result) {
           setCurentType(typeStr);
           setCurentChild(text);
@@ -102,8 +123,13 @@ export function ReValue<T extends object>(props: ReValueProps<T>) {
         }
       }
     }
-  }
-  const defaultStyle = { minWidth: 34, minHeight: 18, paddingInline: 3, display: 'inline-block' } as React.CSSProperties;
+  };
+  const defaultStyle = {
+    minWidth: 34,
+    minHeight: 18,
+    paddingInline: 3,
+    display: 'inline-block',
+  } as React.CSSProperties;
   const { type: typeStr, content: childStr } = getValueString(curentChild);
   const color = typeMap[typeStr]?.color || '';
   const spanProps: React.HTMLAttributes<HTMLSpanElement> = {
@@ -111,8 +137,8 @@ export function ReValue<T extends object>(props: ReValueProps<T>) {
     onBlur: blur,
     onKeyDown: keyDown,
     spellCheck: false,
-    style: editable ? {...style,...defaultStyle, color } : {...style, color},
-  }
+    style: editable ? { ...style, ...defaultStyle, color } : { ...style, color },
+  };
   let typeView = <Type type={typeStr} />;
   if (typeStr === 'null' || typeStr === 'undefined') {
     typeView = <Fragment />;
@@ -123,16 +149,17 @@ export function ReValue<T extends object>(props: ReValueProps<T>) {
       delete (data as Record<string, any>)[keyName as string];
       setValue({ ...data } as T);
     }
-  }
+  };
   return (
     <Fragment>
       {displayDataTypes && typeView}
       <Quotes style={style} quotes={quotes} show={typeStr === 'string'} />
-      <span {...spanProps} ref={$edit} data-value={childStr}>{typeof curentChild === 'string' ? curentChild :  childStr}</span>
+      <span {...spanProps} ref={$edit} data-value={childStr}>
+        {typeof curentChild === 'string' ? curentChild : childStr}
+      </span>
       <Quotes style={style} quotes={quotes} show={typeStr === 'string'} />
       {visible && editableValue && onEdit && <EditIcon onClick={click} />}
       {visible && editableValue && onDelete && <DeleteIcon onClick={deleteHandle} />}
     </Fragment>
   );
-
-}
\ No newline at end of file
+}
diff --git a/core/src/node.tsx b/core/src/node.tsx
index 78e07b01..924eb8a1 100644
--- a/core/src/node.tsx
+++ b/core/src/node.tsx
@@ -23,6 +23,7 @@ export interface RooNodeProps<T extends object> extends JsonViewProps<T> {
   keyid?: string;
   level?: number;
   parentValue?: T;
+  namespace?: Array<string | number>;
   setParentValue?: React.Dispatch<React.SetStateAction<T>>;
 }
 export function RooNode<T extends object>(props: RooNodeProps<T>) {
@@ -41,6 +42,7 @@ export function RooNode<T extends object>(props: RooNodeProps<T>) {
     level = 1,
     keyid = 'root',
     quotes = '"',
+    namespace = [],
     onCopied,
     onExpand,
     parentValue,
@@ -50,10 +52,11 @@ export function RooNode<T extends object>(props: RooNodeProps<T>) {
   const isArray = Array.isArray(value);
   const subkeyid = useId();
   const expands = useExpandsStatus();
-  const expand = expands[keyid] ?? (typeof collapsed === 'boolean' ? collapsed : (typeof collapsed === 'number' ? level <= collapsed : true));
-  const arrowStyle = { transform: `rotate(${expand ? '0' : '-90'}deg)`, transition: 'all 0.3s' };
+  const expand =
+    expands[keyid] ??
+    (typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level <= collapsed : true);
   const handle = () => {
-    onExpand && typeof onExpand === 'function' && onExpand({ expand: !expand, keyid, keyName, value: value as T })
+    onExpand && typeof onExpand === 'function' && onExpand({ expand: !expand, keyid, keyName, value: value as T });
     !expand ? store.expand(keyid) : store.collapse(keyid);
   };
   const [valueData, setValueData] = useState<T>(value as T);
@@ -84,8 +87,9 @@ export function RooNode<T extends object>(props: RooNodeProps<T>) {
     renderBraces: components.braces,
     renderValue: components.value,
   } as ValueViewProps<T>;
+  const arrowStyle = { transform: `rotate(${expand ? '0' : '-90'}deg)`, transition: 'all 0.3s' };
   const arrowView = components.arrow ? (
-    cloneElement(components.arrow, { style: arrowStyle, 'data-expand': expand, className: "w-rjv-arrow" })
+    cloneElement(components.arrow, { style: arrowStyle, 'data-expand': expand, className: 'w-rjv-arrow' })
   ) : (
     <TriangleArrow style={arrowStyle} className="w-rjv-arrow" />
   );
@@ -97,15 +101,19 @@ export function RooNode<T extends object>(props: RooNodeProps<T>) {
   }
 
   useEffect(() => setValueData(value as T), [value]);
-
-  const nameKeys = (isArray ? Object.keys(valueData).map(m => Number(m)) : Object.keys(valueData)) as (keyof typeof valueData)[];
+  const nameKeys = (
+    isArray ? Object.keys(valueData).map((m) => Number(m)) : Object.keys(valueData)
+  ) as (keyof typeof valueData)[];
 
   // object
-  let entries: [key: string | number, value: unknown][] = isArray ? Object.entries(valueData).map(m => [Number(m[0]), m[1]]) : Object.entries(valueData);
+  let entries: [key: string | number, value: unknown][] = isArray
+    ? Object.entries(valueData).map((m) => [Number(m[0]), m[1]])
+    : Object.entries(valueData);
   if (objectSortKeys) {
-    entries = objectSortKeys === true
-      ? entries.sort(([a], [b]) => typeof a === 'string' && typeof b === 'string' ? a.localeCompare(b) : 0)
-      : entries.sort(([a], [b]) => typeof a === 'string' && typeof b === 'string' ? objectSortKeys(a, b) : 0)
+    entries =
+      objectSortKeys === true
+        ? entries.sort(([a], [b]) => (typeof a === 'string' && typeof b === 'string' ? a.localeCompare(b) : 0))
+        : entries.sort(([a], [b]) => (typeof a === 'string' && typeof b === 'string' ? objectSortKeys(a, b) : 0));
   }
   let countInfo = <CountInfo>{nameKeys.length} items</CountInfo>;
   if (components.countInfo) {
@@ -121,6 +129,7 @@ export function RooNode<T extends object>(props: RooNodeProps<T>) {
               value={valueData}
               quotes={quotes}
               data-keys={keyid}
+              namespace={[...namespace]}
               render={components.objectKey}
               keyName={keyName}
               parentName={keyName}
@@ -133,21 +142,31 @@ export function RooNode<T extends object>(props: RooNodeProps<T>) {
         {!expand && <Ellipsis render={components.ellipsis} count={nameKeys.length} level={level} />}
         {!expand && <Meta isArray={isArray} level={level} render={components.braces} />}
         {displayObjectSize && countInfo}
-        {components.countInfoExtra && components.countInfoExtra({
-          count: nameKeys.length,
-          level,
-          showTools,
-          keyName,
-          visible: expand,
-          value: valueData,
-          parentValue,
-          setParentValue,
-          setValue: setValueData,
-        })}
-        {enableClipboard && <Copied show={showTools} text={valueData as T} onCopied={onCopied} render={components?.copied} />}
+        {components.countInfoExtra &&
+          components.countInfoExtra({
+            count: nameKeys.length,
+            level,
+            showTools,
+            keyName,
+            visible: expand,
+            value: valueData,
+            parentValue,
+            setParentValue,
+            setValue: setValueData,
+          })}
+        {enableClipboard && (
+          <Copied show={showTools} text={valueData as T} onCopied={onCopied} render={components?.copied} />
+        )}
       </Line>
       {expand && (
-        <Line className="w-rjv-content" style={{ borderLeft: 'var(--w-rjv-border-left-width, 1px) var(--w-rjv-line-style, solid) var(--w-rjv-line-color, #ebebeb)', marginLeft: 6 }}>
+        <Line
+          className="w-rjv-content"
+          style={{
+            borderLeft:
+              'var(--w-rjv-border-left-width, 1px) var(--w-rjv-line-style, solid) var(--w-rjv-line-color, #ebebeb)',
+            marginLeft: 6,
+          }}
+        >
           {entries.length > 0 &&
             [...entries].map(([key, itemVal], idx) => {
               const item = itemVal as T;
@@ -156,6 +175,7 @@ export function RooNode<T extends object>(props: RooNodeProps<T>) {
                   value={item}
                   data-keys={keyid}
                   quotes={quotes}
+                  namespace={[...namespace, key]}
                   parentName={keyName}
                   highlightUpdates={highlightUpdates}
                   render={components.objectKey}
@@ -163,19 +183,36 @@ export function RooNode<T extends object>(props: RooNodeProps<T>) {
                   keyName={key}
                 />
               );
-              const isEmpty = (Array.isArray(item) && (item as []).length === 0) || (typeof item === 'object' && item && !((item as any) instanceof Date) && Object.keys(item).length === 0);
+              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) {
                 const label = (isArray ? idx : key) as string;
                 return (
                   <Line key={label + idx} className="w-rjv-wrap">
-                    <RooNode value={item} keyName={label} keyid={keyid + subkeyid + label} {...subNodeProps} />
+                    <RooNode
+                      value={item}
+                      namespace={[...namespace, label]}
+                      keyName={label}
+                      keyid={keyid + subkeyid + label}
+                      {...subNodeProps}
+                    />
                   </Line>
                 );
               }
               if (typeof item === 'object' && item && !((item as any) instanceof Date) && !isEmpty) {
                 return (
                   <Line key={key + '' + idx} className="w-rjv-wrap">
-                    <RooNode value={item} keyName={key} keyid={keyid + subkeyid + key} {...subNodeProps} />
+                    <RooNode
+                      value={item}
+                      namespace={[...namespace, key]}
+                      keyName={key}
+                      keyid={keyid + subkeyid + key}
+                      {...subNodeProps}
+                    />
                   </Line>
                 );
               }
@@ -183,14 +220,26 @@ export function RooNode<T extends object>(props: RooNodeProps<T>) {
                 return;
               }
               return (
-                <ValueView key={idx} {...valueViewProps} renderKey={renderKey} keyName={key} value={item} />
+                <ValueView
+                  key={idx}
+                  namespace={[...namespace, key]}
+                  {...valueViewProps}
+                  renderKey={renderKey}
+                  keyName={key}
+                  value={item}
+                />
               );
             })}
         </Line>
       )}
       {expand && (
         <Line style={{ paddingLeft: 2 }}>
-          <Meta render={components.braces} isArray={isArray} level={level} style={{ paddingLeft: 2, display: 'inline-block' }} />
+          <Meta
+            render={components.braces}
+            isArray={isArray}
+            level={level}
+            style={{ paddingLeft: 2, display: 'inline-block' }}
+          />
         </Line>
       )}
     </div>
diff --git a/core/src/semicolon.tsx b/core/src/semicolon.tsx
index 33973825..5a569f9b 100644
--- a/core/src/semicolon.tsx
+++ b/core/src/semicolon.tsx
@@ -21,46 +21,43 @@ interface UseHighlight {
 export function useHighlight({ value, highlightUpdates, highlightContainer }: UseHighlight) {
   const prevValue = usePrevious(value);
   const isHighlight = useMemo(() => {
-    if (!highlightUpdates || prevValue === undefined) return false
+    if (!highlightUpdates || prevValue === undefined) return false;
     // highlight if value type changed
     if (typeof value !== typeof prevValue) {
-      return true
+      return true;
     }
     if (typeof value === 'number') {
       // notice: NaN !== NaN
-      if (isNaN(value) && isNaN(prevValue as unknown as number)) return false
-      return value !== prevValue
+      if (isNaN(value) && isNaN(prevValue as unknown as number)) return false;
+      return value !== prevValue;
     }
     // highlight if isArray changed
     if (Array.isArray(value) !== Array.isArray(prevValue)) {
-      return true
+      return true;
     }
     // not highlight object/function
     // deep compare they will be slow
     if (typeof value === 'object' || typeof value === 'function') {
-      return false
+      return false;
     }
 
     // highlight if not equal
     if (value !== prevValue) {
-      return true
+      return true;
     }
 
-    return false
+    return false;
   }, [highlightUpdates, value]);
 
   useEffect(() => {
     if (highlightContainer && highlightContainer.current && isHighlight && 'animate' in highlightContainer.current) {
       highlightContainer.current.animate(
-        [
-          { backgroundColor: 'var(--w-rjv-update-color, #ebcb8b)' },
-          { backgroundColor: '' }
-        ],
+        [{ backgroundColor: 'var(--w-rjv-update-color, #ebcb8b)' }, { backgroundColor: '' }],
         {
           duration: 1000,
-          easing: 'ease-in'
-        }
-      )
+          easing: 'ease-in',
+        },
+      );
     }
   }, [isHighlight, value, highlightContainer]);
 }
@@ -72,6 +69,7 @@ export interface SemicolonProps extends LabelProps {
   quotes?: JsonViewProps<object>['quotes'];
   value?: object;
   label?: string;
+  namespace?: Array<string | number>;
   render?: (props: SemicolonProps) => React.ReactNode;
 }
 
@@ -85,18 +83,30 @@ export const Semicolon: FC<PropsWithChildren<SemicolonProps>> = ({
   highlightUpdates,
   quotes,
   style,
+  namespace,
   parentName,
   ...props
 }) => {
   const highlightContainer = useRef<HTMLSpanElement>(null);
   const content = typeof keyName === 'string' ? `${quotes}${keyName}${quotes}` : keyName;
   if (render) {
-    return render({ className, ...props, value, style: { ...style, color }, parentName, keyName, quotes, label: keyName as string, children: content });
-  };
+    return render({
+      className,
+      ...props,
+      value,
+      namespace,
+      style: { ...style, color },
+      parentName,
+      keyName,
+      quotes,
+      label: keyName as string,
+      children: content,
+    });
+  }
   useHighlight({ value, highlightUpdates, highlightContainer });
   return (
     <Label className={className} color={color} {...props} ref={highlightContainer}>
       {content}
     </Label>
   );
-};
\ No newline at end of file
+};
diff --git a/core/src/value.tsx b/core/src/value.tsx
index 76990066..c7c7802e 100644
--- a/core/src/value.tsx
+++ b/core/src/value.tsx
@@ -67,6 +67,7 @@ interface RenderValueProps<T extends object> extends React.HTMLAttributes<HTMLSp
   data?: T;
   visible?: boolean;
   quotes?: JsonViewProps<T>['quotes'];
+  namespace?: Array<string | number>;
   setValue?: React.Dispatch<React.SetStateAction<T>>;
   keyName?: ValueViewProps<T>['keyName'];
 }
@@ -81,6 +82,7 @@ export interface ValueViewProps<T extends object>
   enableClipboard: boolean;
   indentWidth: number;
   level?: number;
+  namespace?: Array<string | number>;
   quotes?: JsonViewProps<T>['quotes'];
   renderKey?: JSX.Element;
   renderBraces?: MetaProps['render'];
@@ -116,7 +118,7 @@ export function getValueString<T>(value: T) {
     content = `${value}n`;
   }
   const isURL = value instanceof URL;
-  if (isURL)  {
+  if (isURL) {
     type = 'url';
     content = `"${value.href}"`;
   }
@@ -127,7 +129,23 @@ export function getValueString<T>(value: T) {
 }
 
 export function ValueView<T extends object>(props: ValueViewProps<T>) {
-  const { value, setValue, data, keyName, indentWidth, renderKey, quotes, level, renderValue, renderBraces, enableClipboard, displayObjectSize, displayDataTypes, ...reset } = props;
+  const {
+    value,
+    setValue,
+    data,
+    keyName,
+    indentWidth,
+    namespace,
+    renderKey,
+    quotes,
+    level,
+    renderValue,
+    renderBraces,
+    enableClipboard,
+    displayObjectSize,
+    displayDataTypes,
+    ...reset
+  } = props;
 
   let color = '';
   let style = {} as React.CSSProperties;
@@ -161,22 +179,33 @@ export function ValueView<T extends object>(props: ValueViewProps<T>) {
   }
 
   if (content && typeof content === 'string') {
-    const reView = renderValue && renderValue({
-      className: 'w-rjv-value',
-      style: { color, ...style },
-      type,
-      value,
-      setValue,
-      data,
-      quotes,
-      keyName,
-      visible: showTools,
-      content,
-      children: content,
-    });
-    const valueView = reView ? reView : (
+    const reView =
+      renderValue &&
+      renderValue({
+        className: 'w-rjv-value',
+        style: { color, ...style },
+        type,
+        value,
+        setValue,
+        data,
+        quotes,
+        keyName,
+        namespace,
+        visible: showTools,
+        content,
+        children: content,
+      });
+    const valueView = reView ? (
+      reView
+    ) : (
       <Label color={color} style={style} className="w-rjv-value">
-        {isURL ? <a href={value.href} style={{ color }} target="_blank" rel="noopener noreferrer">{content}</a> : content}
+        {isURL ? (
+          <a href={value.href} style={{ color }} target="_blank" rel="noopener noreferrer">
+            {content}
+          </a>
+        ) : (
+          content
+        )}
       </Label>
     );
     return (
@@ -198,7 +227,7 @@ export function ValueView<T extends object>(props: ValueViewProps<T>) {
       <Meta render={renderBraces} isArray={Array.isArray(value)} />
       {displayObjectSize && <CountInfo>{length} items</CountInfo>}
     </Fragment>
-  )
+  );
   return (
     <Line {...eventProps}>
       <Label {...reset} ref={null}>
@@ -219,19 +248,13 @@ export interface LabelProps extends React.HTMLAttributes<HTMLSpanElement> {
   paddingRight?: number;
 }
 
-export const Label = forwardRef<HTMLSpanElement, LabelProps>(({
-  children,
-  color,
-  fontSize,
-  opacity,
-  paddingRight,
-  style,
-  ...reset
-}, ref) => (
-  <span style={{ color, fontSize, opacity, paddingRight, ...style }} {...reset} ref={ref}>
-    {children}
-  </span>
-));
+export const Label = forwardRef<HTMLSpanElement, LabelProps>(
+  ({ children, color, fontSize, opacity, paddingRight, style, ...reset }, ref) => (
+    <span style={{ color, fontSize, opacity, paddingRight, ...style }} {...reset} ref={ref}>
+      {children}
+    </span>
+  ),
+);
 
 export interface TypeProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
   type: keyof typeof typeMap;
diff --git a/package.json b/package.json
index 684ac599..0c9f2eb8 100644
--- a/package.json
+++ b/package.json
@@ -28,8 +28,8 @@
   "devDependencies": {
     "husky": "^8.0.3",
     "lint-staged": "^13.2.0",
-    "lerna": "^7.0.1",
-    "prettier": "^2.8.8",
+    "lerna": "^7.1.3",
+    "prettier": "^3.0.0",
     "pretty-quick": "^3.1.3",
     "tsbb": "^4.1.0"
   }