Rich text formatting in question/step descriptions

[RoordinkFrank]

fixes #175

Do note that the original description fields still have the .css muted option enabled. That happens on top any formatting done in admin.
Do also note that links in mcedit are relative by default unless you add www/html etc. Personally I think that's really helpful.

---

known warning. I have tried to suppress this but es lint suppression warnings don´t work in HTML without an additional plugin.
This warning is also something Leon and Desiree need to be aware of if we want to give them access to this widget.

[EdoStorm96]

Good job! This is pretty much what I wanted. I still have some things I am noticing, that I'd like you to change though.

• You removed the closing tags from all html element. You made it just <p/> instead of <p></p>. Apparantly vue (or something) does turn this into proper html, but I'd like you to bring back closing tags.
• You've kept all the description <p> elements (except for the Step.description. See my comment on MRForm). While this does ensure that plain strings will be formatted nicely, once you edit it with tinymce, we end up with p tags wrapped in p tags. I think this is a bit ugly, so I'd like you to change all the description to use the div element.
• However, when you do this, we end up with ugly unformatted text, coming from create_dev_data. I noticed this on the step description, because you already use a div there.

So what I'd like you to do, is alter our create_dev_data script, so that all descriptions are at least wrapped in <p> tags. Something like this:

create_dev_data.py, line 185-186

                "description_nl": f"<p>{self.faker_nl.paragraph()}</p>",
                "description_en": f"<p>{self.faker_en.paragraph()}</p>",

Also do this for step descriptions. Then our mock data will reflect our eventual data better, and things will be looking good.

We don't mock step info yet, so there we'll also have to do this, but that is something for another issue/PR.

[EdoStorm96]

Here, you replace a <p> with a <div>. I think this is probably the ideal way to do it, but I think you should add a proper closing tag.

Suggested change

	<div v-html="useTranslateableAttribute(step, 'description')" />
	<div v-html="useTranslateableAttribute(step, 'description')" ></div>

However, do notice, that when you generate a fresh form, this text looks a bit weird. This is because in create_dev_data we just generate plain strings, with no html, so this does not have a <p> tag at all.

In production we always will expect our data to be passed through our tinymce editor, and therefore have some basic html formatting, so I think a div is the cleanest tag to use, to avoid having double <p> tags.