feat: hide colon when key is empty

Author: pionxzh

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.                                                     |

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>
               )
           )
         }