Line break for long strings

[baartch]

I would like to ask, what you think about to add the CSS style overflow-wrap: anywhere; to string values.

If I have very long strings without spaces, the JSON viewer will stretch accordingly. And the part that is larger than the parent is hidden. I am not very happy about this behaviour.

If I add overflow-wrap: anywhere; it looks like this:

I added the CSS property directly in the Developer Tools of the browser. I wasn't able to find the right place in the source code.

What do you think about this?

[himself65]

You re correct. I will fix it later

[himself65]

The source code is here

json-viewer/src/stores/typeRegistry.tsx

Lines 201 to 239 in 1da2b1f

	registerType<string>(
	{
	is: (value) => typeof value === 'string',
	...createEasyType(
	'string',
	(props) => {
	const [showRest, setShowRest] = useState(false)
	const collapseStringsAfterLength = useJsonViewerStore(
	store => store.collapseStringsAfterLength)
	const value = showRest
	? props.value
	: props.value.slice(0,
	collapseStringsAfterLength)
	const hasRest = props.value.length > collapseStringsAfterLength
	return (
	<Box
	component='span'
	sx={{
	overflowWrap: 'break-word',
	cursor: hasRest ? 'pointer' : 'inherit'
	}}
	onClick={() => {
	setShowRest(value => !value)
	}}
	>
	&quot;
	{value}
	{hasRest && <span>...</span>}
	&quot;
	</Box>
	)
	},
	{
	colorKey: 'base09',
	fromString: value => value
	}
	)
	}
	)