feat(comments): add Markdown support

[andrey18106]

• Resolves: Markdown support in Comments #17375

Summary

Enable markdown support for comment content block (NcRichText). Increase max comment block height limit, add scroll.

Checklist

• Code is properly formatted
• Sign-off message is added to all commits
• Tests (unit, integration, api and/or acceptance) are included
• Screenshots before/after for front-end changes
• Documentation (manuals or wiki) has been updated or is not required
• Backports requested where applicable (ex: critical bugfixes)

[skjnldsv]

Labels ? Milestone ?
Is it scheduled for 32 or just something you're working on ?

[susnux]

I fear a bit that this break accessibility of the comments because of headings.
if you put e.g.

# heading 1
some test

into the markdown than this will be rendered as <h1> in the sidebar, but this might be semantically wrong for the page layout. @Antreesy how do you handle this in Talk to ensure the page semantics stay correct?

[Antreesy]

how do you handle this in Talk to ensure the page semantics stay correct?

Here's the trick: we don't 🤷🏽
But I think we can tweak on vue-library side to render # expect h1 in h2 tag. They're locked to the same size anyway

[DaphneMuller]

Labels ? Milestone ? Is it scheduled for 32 or just something you're working on ?

@skjnldsv it is not scheduled for Nextcloud 32 specifically, since feature freeze has passed

[DaphneMuller]

@susnux @Antreesy what would be the next step here?

[Antreesy]

what would be the next step here?

Ensure that NcRichText satisfies a11y requirements, as I'm not sure it was a part of BITV certification (Talk app was not). Then it should be good to go

[DaphneMuller]

@Antreesy and do you know who I can ask this to?

[Antreesy]

it was a part of BITV certification

I'd assume, Ferdinand, Grigorii or Julia might help

[DaphneMuller]

@JuliaKirschenheuter @ShGKme @susnux can some of you review this PR please? There are concerns regarding the accessibility

[DaphneMuller]

ping @JuliaKirschenheuter

[ShGKme]

Checking the possibilities

[ShGKme]

The only solution I see: while keeping the original style, level down headings inside NcRichText:

• h1 -> h4, h2 -> h5, h3 -> h6
• h4, h5, h6 -> also h6...

I'd also consider making the style of the heading smaller, so people don't use h4 as the first heading just to have a small font size heading.

[ShGKme]

This also breaks comments of users using only h3..h6. But we can either ignore it (they should have used h1..h3), or we can manually increase the level before levelling it down, if high-level headings are unused.

[susnux]

The only solution I see: while keeping the original style, level down headings inside NcRichText:

We do similar in apps/settings/src/components/Markdown.vue
Where we limit the min heading to not interfere with current context of headings.

[ShGKme]

I wouldn't limit the users from using #, ##, ###.

Instead, I'd render them as low-level headings, and "disrespect" using ####, #####, ###### by making them the same visually.

In this case users by default use valid internal and short structure.

[susnux]

Instead, I'd render them as low-level headings, and "disrespect" using ####, #####, ###### by making them the same visually.

Thats what it is doing.
Its rendered visually as the correct h but semantically its then clamped

[ShGKme]

• [NcRichText] Level down headings in markdown nextcloud-libraries/nextcloud-vue#7743

[julien-nc]

Hey there. This has been rebased on master, all good with nc/vue 9.3.0 and the max title level.
Anything else I should adjust?

[Antreesy]

So far looks fine. If some markdown styles are to be adjusted, it's better to do it upstream and keep it simple here

There's also use-extended-markdown prop that add some more features, as markdown tables or code syntax highlight, but I don't think it's worth it (plus it also increases the bundle size)

[ShGKme]

Maybe we need to add it to upstream. Or forbid images...

[AndyScherzinger]

Soudns good and should than be a follow up 👍

[ShGKme]

(plus it also increases the bundle size)

But in async chunk

[RokeJulianLockhart]

There's also use-extended-markdown prop that add some more features, as markdown tables or code syntax highlight, but I don't think it's worth it.

@Antreesy, I'd appreciate those features. They're mostly why I wanted this functionality.