Add customKeyDefinitions prop for custom key rendering

[drahoslove]

New customKeyDefinitions for defining a custom key component

Mirrors the existing customNodeDefinitions pattern to allow users to provide custom React components for rendering node keys, via a new customKeyDefinitions prop on JsonEditor.

Context

Needed an option to customize the rendering of keys. Our use case requires the ability to highlight a key or a substring of it, or wrap it in a clickable link.

The approach I tried first was to use hideKey: true combined with customNodeDefinitions to render both a custom key and value together. That approach is questionable on its own, and it doesn't work for collection keys at all - the custom collection wrapper only renders content inside the brackets, with no way to inject anything before the opening bracket.

So I decided to make this contribution.

Changes

File	Description
src/CustomKey.ts (new)	CustomKeyData interface and getCustomKey() lookup utility, analogous to CustomNode.ts
src/types.ts	Adds CustomKeyProps<T> and CustomKeyDefinition<T> interfaces; extends JsonEditorProps and BaseNodeProps with customKeyDefinitions and customKeyData
src/KeyDisplay.tsx	Renders the custom key component in view mode when a matching definition is found, falls back to default rendering otherwise
src/ValueNodeWrapper.tsx / src/CollectionNode.tsx	Pass customKeyData and nodeData through to KeyDisplay; CollectionNode computes childCustomKeyData per child in the render loop
src/JsonEditor.tsx	Accepts customKeyDefinitions prop, computes root customKeyData, propagates both down the tree
src/index.ts	Exports CustomKeyProps and CustomKeyDefinition

Usage

const customKeyDefs: CustomKeyDefinition[] = [
  {
    condition: ({ key }) => typeof key === 'string' && key.startsWith('_'),
    element: ({ name, styles }) => (
      <span style={{ ...styles, fontStyle: 'italic' }}>
        {String(name)}<span className="jer-key-colon">:</span>
      </span>
    ),
  },
]

<JsonEditor data={data} customKeyDefinitions={customKeyDefs} />

Screenshot

This matches the usage example:

And an example of what I needed to achieve:

Notes

I tried to keep the implementation as close to the existing customNodeDefinitions pattern as possible to make it feel native to the codebase. That said, I am open to suggestions if anything looks off - whether that is the shape of CustomKeyProps, the naming, or something else entirely.

I would love to get this merged so I can drop my fork and use the package directly, so the sooner we can align on any changes the better. Happy to update the README or add anything else needed to get this across the finish line.

[drahoslove]

Hello @CarlosNZ, could you please take a look at this feature pull request?

[CarlosNZ]

Hi @drahoslove -- thanks for this, I'll try and have a proper look at it in the next few days. Cheers