TipTap source code view puts all code on single line

[argentini]

Which Umbraco version are you using?

16.1.1

Bug summary

The new RTE is putting source on a single line.

Specifics

No response

Steps to reproduce

Use a rich text editor to create multi-paragraph content and save/publish. Edit the content and open the source view.

Expected result / actual result

Source should use line breaks and preferably indentation to make navigating and editing easier. This would match the TinyMCE editor experience.

---

This item has been added to our backlog AB#55274

[github-actions]

Hi there @argentini!

Firstly, a big thank you for raising this issue. Every piece of feedback we receive helps us to make Umbraco better.

We really appreciate your patience while we wait for our team to have a look at this but we wanted to let you know that we see this and share with you the plan for what comes next.

• We'll assess whether this issue relates to something that has already been fixed in a later version of the release that it has been raised for.
• If it's a bug, is it related to a release that we are actively supporting or is it related to a release that's in the end-of-life or security-only phase?
• We'll replicate the issue to ensure that the problem is as described.
• We'll decide whether the behavior is an issue or if the behavior is intended.

We wish we could work with everyone directly and assess your issue immediately but we're in the fortunate position of having lots of contributions to work with and only a few humans who are able to do it. We are making progress though and in the meantime, we will keep you in the loop and let you know when we have any questions.

Thanks, from your friendly Umbraco GitHub bot 🤖 🙂

[leekelleher]

Hi @argentini, I'd noticed you'd raised a number of issues last night for v16.1.1, a few of them don't feel quite right with me, so I'm curious that something could have been misconfigured in your instance. Of course, we'll investigate each raised issue, but I'd be good to rule out some things. I suspect any clues will be in the browser's devtool console. 🤔

On a side-note about the Tiptap View Source feature; it's important to note that Tiptap handles the rich-text content differently from TinyMCE, as in Tiptap is not a HTML editor, it processes rich-text formatting in its own way, (with a strict schema), and the View Source modal is using the HTML generated from that formatting, which is why it appears in a single-line. We then apply Monaco code-editor's pretty print to that HTML. (This is why it'll never be like-for-like comparable with TinyMCE output).

With the reason the pretty print feature is failing. I did have a report of a similar issue recently from one of our Cloud customers, which turned out to be they'd added custom Content Security Policy (CSP) rules that were preventing the Monaco code-editor from functioning correctly.

Would you be able to provide any errors from your browser's devtool console, from when you open the Tiptap View Source modal?

[argentini]

Thanks for the insight @leekelleher that could be the case. The console tends to always show a ton of warning for the various controls, but they appear "normal" to me in that you guys may still be working through things.

When I open the code editor for the RTE I do see 2 exceptions, but I didn't notice any CSP (domain access) issues. Does this look familiar?