Line breaks in comments are not shown properly

[ronau]

Hi there!

I was placing a comment over in #2066. However, apparently it's not going to get reopened just by commenting on it. And I wasn't sure, if a comment in a closed issue will get noticed. So I'm opening this one here to restart the discussion on this topic:

Main question is: are comments supposed to contain line breaks or not?

Because I also noticed this behaviour (as the OP in #2066) and I find it quite annoying. From my point of view, it definitely should be possible to use line breaks in the comments.

However, on NC 27.1.4 and with the latest version of Deck (v1.11.1), line breaks are still not shown properly.

Actually, they are sent properly to the backend (with "\n" for the line breaks) and they are retrieved from the API properly as well. It's just that they are not converted to proper HTML line breaks when rendering them to the page's HTML.

I'd love to see this fixed. Any idea what needs to be changed here?

Originally posted by @ronau in https://github.com/nextcloud/deck/issues/2066#issuecomment-1826409806

[ronau]

I don't really have much of a clue of Vue, but I think it has probably something to do with these places in the JS code:

https://github.com/nextcloud/deck/blob/e52e2711a6a1f7f3b61cfc9f2dcfac1bc51054dc/src/views/CommentReferenceWidget.vue#L160-L164 https://github.com/nextcloud/deck/blob/e52e2711a6a1f7f3b61cfc9f2dcfac1bc51054dc/src/components/card/CommentItem.vue#L162-L166

By just using the Node's .textContent property, the newline characters will be ignored/omitted. I guess it requires some kind of string replacement to convert them to HTML line breaks:

message.replace(/(?:\r\n|\r|\n)/g, '<br>')

But I might be wrong. Just been fiddling around quickly with some Javascript snippets to see how it seems to work.

[teleneko]

I also would like to resolve this issue. It worked up until recently, and was an important part of my workflow.

[pmallot]

+1 This used to work with double spaces before line breaks. Makes a lot of what I use comments for unreadable. This also affects old comments that were displayed (and I assume therefore saved) correctly. I'm running Nextcloud 27.1.3 and Deck 1.11.2

[9joshua]

Yes please fix this as it makes reading comments unbearable...

[ronau]

I did some further experiments with tinkering around with the aforementioned section of the code:

https://github.com/nextcloud/deck/blob/76e49ebbba1941dadb767a62c12ff693c33a3d30/src/components/card/CommentItem.vue#L166-L172

At this point we are starting with the raw comment text as returned by the API, including line breaks as \n.

First I thought, the reason is, that .textContent is used for returning the text. So even if you insert <br>s (or search/replace \n for <br>) it will be ignored. Obviously, this is done for security reasons (to prevent injection of malicious <script> HTML and so on).

However, it doesn't help either to just return div.innerHTML.

I suppose this is due to the handling of the text by the NcRichtText Vue Component.

I experimented with switching on Markdown support for the comment field:

			<NcRichText class="comment--content"
				dir="auto"
				:text="richText(comment)"
				:arguments="richArgs(comment)"
				:autolink="true"
				:useExtendedMarkdown="true" />

While this seemed to help (and line breaks were displayed properly), I'm not sure if this a sustainable approach.

As mentioned before, I don't really have much of a clue of Vue. So my knowledge regarding analysis of this issue stops here.

However, I'd like to emphasize once again how important it is to support line breaks in comments. I think this is just what every normal person would expect from the comment functionality, especially since you can make line breaks (Shift+Enter) when submitting a comment and these line breaks are actually stored in the database and returned by the API.

It is literally just a rendering/presentation issue. Not sure though if it's easy to fix (e.g. because of limitations by the standard NC Vue Components)

I hope there is someone who can take care of this. 🙏

[juliusknorr]

Thanks for the deep dive into that. I think enabling the markdown option on comments is a feasible option there as these days also Nextcloud Talk is using it to render messages.

If someone is up for providing a pull request that would be much appreciated. :)