\n (lines returns) are not displayed

[BenjD90]

Hello,

Thanks for this component, very useful !
On our usage, we have found out that the \n are not displayed, for example we have this behavior :

When we expect to see that :

In Chrome DevTools, we can see the \n characters :

What do you think about this change ?

Thanks in advance for your response,
Benjamin

[wlievens]

I ran into this as well, I would just like to see a \n in the component.

[BenjD90]

@wlievens The \n is visible :

[wlievens]

Any idea what I'm doing wrong then?

See the two blue boxes: left is my ngx-json-viewer component, right is the JSON payload I'm rendering.

I'm using:
"ngx-json-viewer": "^3.2.1",

Template code:
<ngx-json-viewer [depth]="1" [expanded]="true" [json]="job.task.arguments"></ngx-json-viewer>

[wlievens]

Maybe I am misunderstanding, and this functionality is not yet in the latest release? Sorry if that's the case, I can be patient :-)

[AkoNis]

late to the party but what if you add white-space: break-spaces; in .segment-main class like so

.segment-main { word-wrap: break-word; white-space: break-spaces; font-size: 12px; ...

[MichaelDoyle]

Even later to the party 🤣 but the reason is that escape sequences need to be escaped here:

https://github.com/hivivo/ngx-json-viewer/blob/main/src/ngx-json-viewer/ngx-json-viewer.component.ts#L75

I ended up forking this library and modernizing it, including fixing this specific issue if you are interested:

MichaelDoyle/ngx-json-treeview@364b55b