customize the collapsed render text for a node

[noahhai]

Awesome component, thank you!

Wondering if there is any way to modify what gets rendered for collapsed nodes. For arrays it shows 'n items' and for objects it shows 'n props'.

Eg for objects I would want something like prop of "renderCollapsedDesc" which could be Func[node], so could render for example {Object, key=${node.name}} to give more information on the node when in collapsed mode.

I didn't see this as configurable so wanted to check. If it's not supported, would you be able to point me to where that formatting is done in the code so I could take a stab at it?

[josdejong]

Thanks for your suggestion. The displayed text is hard coded right now, the code is here for objects:

svelte-jsoneditor/src/lib/components/modes/treemode/JSONNode.svelte

Lines 755 to 758 in baf8ebe

	<button type="button" class="jse-tag" on:click={handleExpand}>
	{Object.keys(value).length}
	{Object.keys(value).length === 1 ? 'prop' : 'props'}
	</button>

And here for arrays:

svelte-jsoneditor/src/lib/components/modes/treemode/JSONNode.svelte

Lines 629 to 642 in baf8ebe

	{#if expanded}
	<div class="jse-bracket">[</div>
	<span class="jse-tag jse-expanded">
	{value.length}
	{value.length === 1 ? 'item' : 'items'}
	</span>
	{:else}
	<div class="jse-bracket">[</div>
	<button type="button" class="jse-tag" on:click={handleExpand}>
	{value.length}
	{value.length === 1 ? 'item' : 'items'}
	</button>
	<div class="jse-bracket">]</div>
	{/if}

I'm open to implementing a configuration option to customize the text with a callback function. Maybe people would like to be able to fully hide the text, that could also be an option.

[noahhai]

Thanks, I'll take a look!

[simeonackermann]

An easy way to hide and/or change the view of properties/items of an object is exactly my current task... Would be really nice config feature in my opinion.

[josdejong]

Moving this idea to the Discussions > Ideas section since we are not actively working on it. Help implementing this would be welcome.