From 14102cef0d0d437d7f5910b02c2f784e56405e7c Mon Sep 17 00:00:00 2001
From: Pionxzh <pionxzh@csie.io>
Date: Sun, 23 Jun 2024 02:18:20 +0800
Subject: [PATCH 1/2] feat: passing `path` to `Editor` for better
 customizability

---
 docs/pages/how-to/data-types.mdx | 2 +-
 src/components/DataKeyPair.tsx   | 1 +
 src/type.ts                      | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/pages/how-to/data-types.mdx b/docs/pages/how-to/data-types.mdx
index dcef7d48..0558f4c3 100644
--- a/docs/pages/how-to/data-types.mdx
+++ b/docs/pages/how-to/data-types.mdx
@@ -37,7 +37,7 @@ For advanced use cases, you can provide `PreComponent` and `PostComponent` to re
 #### `Editor`
 
 To enable editing for a data type, you need to provide `serialize` and `deserialize` functions to convert the value to and from a string representation. You can then use the `Editor` component to provide a custom editor for the stringified value. When the user edits the value, it will be parsed using `deserialize`, and the result will be passed to the `onChange` callback.
-
+- `props.path` - The path to the value.
 - `props.value` - The value to edit.
 - `props.setValue` - A function that can be used to update the value.
 - `props.abortEditing` - A function that can be used to abort editing.
diff --git a/src/components/DataKeyPair.tsx b/src/components/DataKeyPair.tsx
index 52cb08c4..1006aa55 100644
--- a/src/components/DataKeyPair.tsx
+++ b/src/components/DataKeyPair.tsx
@@ -391,6 +391,7 @@ export const DataKeyPair: FC<DataKeyPairProps> = (props) => {
         (editing && editable)
           ? (Editor && (
             <Editor
+              path={path}
               value={tempValue}
               setValue={setTempValue}
               abortEditing={abortEditing}
diff --git a/src/type.ts b/src/type.ts
index 7a501e83..92d40d1f 100644
--- a/src/type.ts
+++ b/src/type.ts
@@ -63,6 +63,7 @@ export interface DataItemProps<ValueType = unknown> {
 }
 
 export type EditorProps<ValueType = unknown> = {
+  path: Path
   value: ValueType
   setValue: Dispatch<ValueType>
   abortEditing: () => void

From 2023c73ca23d89c1c0093673ecfa8fc5a80c8860 Mon Sep 17 00:00:00 2001
From: Pionxzh <pionxzh@csie.io>
Date: Wed, 14 Aug 2024 01:39:24 +0800
Subject: [PATCH 2/2] feat: hide colon when key is empty

---
 docs/pages/apis.mdx            |  2 +-
 src/components/DataKeyPair.tsx | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/docs/pages/apis.mdx b/docs/pages/apis.mdx
index e597beb8..536efbd0 100644
--- a/docs/pages/apis.mdx
+++ b/docs/pages/apis.mdx
@@ -9,7 +9,7 @@
 | `style`                      | `CSSProperties`                                                                                         | -         | Custom style.                                                                                                                                                                        |
 | `sx`                         | `SxProps`                                                                                               | -         | [The `sx` prop](https://mui.com/system/getting-started/the-sx-prop/) lets you style elements inline, using values from the theme.                                                    |
 | `indentWidth`                | `number`                                                                                                | 3         | Indent width for nested objects                                                                                                                                                      |
-| `keyRenderer`                | `{when: (props) => boolean}`                                                                            | -         | Customize a key, if `keyRenderer.when` returns `true`.                                                                                                                               |
+| `keyRenderer`                | `{when: (props) => boolean}`                                                                            | -         | Customize the rendering of key when `keyRenderer.when` returns `true`. Render `null` in `keyRenderer` will cause the colons to be hidden.                                            |
 | `valueTypes`                 | `ValueTypes`                                                                                            | -         | Customize the definition of data types. See [Defining Data Types](/how-to/data-types)                                                                                                |
 | `enableAdd`                  | `boolean` \|<br />`(path, currentValue) => boolean`                                                     | `false`   | Whether enable add feature. Provide a function to customize this behavior by returning a boolean based on the value and path.                                                        |
 | `enableDelete`               | `boolean` \|<br />`(path, currentValue) => boolean`                                                     | `false`   | Whether enable delete feature. Provide a function to customize this behavior by returning a boolean based on the value and path.                                                     |
diff --git a/src/components/DataKeyPair.tsx b/src/components/DataKeyPair.tsx
index 1006aa55..fef5e632 100644
--- a/src/components/DataKeyPair.tsx
+++ b/src/components/DataKeyPair.tsx
@@ -359,7 +359,11 @@ export const DataKeyPair: FC<DataKeyPairProps> = (props) => {
               )
             : null
         }
-        <Box ref={highlightContainer} component='span'>
+        <Box
+          ref={highlightContainer}
+          className='data-key-key'
+          component='span'
+        >
           {
             (isRoot && depth === 0
               ? rootName !== false
@@ -380,7 +384,13 @@ export const DataKeyPair: FC<DataKeyPairProps> = (props) => {
             isRoot
               ? (rootName !== false && <DataBox sx={{ mr: 0.5 }}>:</DataBox>)
               : nestedIndex === undefined && (
-                <DataBox sx={{ mr: 0.5 }}>:</DataBox>
+                <DataBox
+                  className='data-key-colon'
+                  sx={{
+                    mr: 0.5,
+                    '.data-key-key:empty + &': { display: 'none' }
+                  }}
+                >:</DataBox>
               )
           )
         }