Merge branch 'main' into dependabot/npm_and_yarn/patterns-bc6ca2550e

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

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.

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>
               )
           )
         }
@@ -391,6 +401,7 @@ export const DataKeyPair: FC<DataKeyPairProps> = (props) => {
         (editing && editable)
           ? (Editor && (
             <Editor
+              path={path}
               value={tempValue}
               setValue={setTempValue}
               abortEditing={abortEditing}

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