Property description styling is broken

[prjseal]

Which Umbraco version are you using? (Please write the exact version, example: 10.1.0)

v14 rc5

Bug summary

In Umbraco we are able to add some simple styling to the property description.

As per the documentation and this YouTube video

If we add the following in the description of a property:

This is **bold**
This is *italic*
[This is an absolute link](https://google.com)
[This is a relative link](/umbraco#/media)
--
![Image alt text](https://media.giphy.com/media/bezxCUK2D2TuBCJ7r5/giphy.gif)

It should come out looking like this, with the gif being revealed by a read more link and a close link.

Instead it comes out looking like this where the font weight is incorrect, the read more doesn't work and the image overflows the width.

Specifics

See above

Steps to reproduce

See above

Expected result / actual result

I expect the styling to be similar and the read more functionality to work

[github-actions]

Hi there @prjseal!

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 🤖 🙂

[iOvergaard]

Hey @prjseal, thanks for testing. We wondered if we should set a max-width on all images within property descriptions, but it seemed dangerous to do so. It seems you would expect exactly that to happen here. I think we need to look more into it and see, as putting markdown into property descriptions is allowing for all sorts of things to be inserted. The old backoffice only allowed a subset of Markdown in this area, and apparently had some custom functionality such as "Read more".

[leekelleher]

To note the --, is Markdown syntax for a heading, (albeit alternative syntax to #), so technically it shouldn't have been used as the syntax to render a "read more" toggle in previous Umbraco versions. We'll look for an alternative syntax for a collapsible (read more) description, and update the docs accordingly.

In the meantime, it's now possible to have sanitized HTML inside the description, so markup like <details><summary> could be used.

[leekelleher]

I've added a fix for the image width, umbraco/Umbraco.CMS.Backoffice#1961.

We'll be investigating whether we'll still support the "read more" feature, or if we encourage the use of <details> as an alternative.