Allow formatting question and form descriptions using markdown

[susnux]

• Resolves: Allow formatting with Markdown #489 and resolves Allow links to be embedded into description #1253

This will allow users to use markdown (CommonMark) for formatting descriptions (both form and question).
See also this recording for example usage:

voko.mp4

Details

Original video (outdated): https://user-images.githubusercontent.com/1855448/198033394-49cbb74b-3ba0-4180-8660-5c17f4a76235.mp4

[Chartman123]

@susnux just a quick question: is there a reason why you moved the title handling to the mixin?

I think that the css styles need some more love... at least currently for me the layout moves when I switch between edit and view mode...

[susnux]

@susnux just a quick question: is there a reason why you moved the title handling to the mixin?

Because it is duplicated code / shared code between the create and submit view.
So I moved it to the mixin instead of copying for both views.

I think that the css styles need some more love... at least currently for me the layout moves when I switch between edit and view mode...

What kind of move? If the input is just plain text there should be no difference, but of cause markdown and the rendered output might take different space and so there might be movement.

[Chartman123]

Yes that makes sense... But you also did a switch from textarea to input and textarea to NcRichContenteditable. So there's probably some other CSS applied to those elements

[Chartman123]

@susnux I think I found the source of the jumping:

forms/src/components/Questions/Question.vue

Line 373 in 458bea1

margin-bottom: -5px;

I disabled this rule in the dev tools and the jumping between edit and view is gone... Could you please verify this (for one line descriptions) and put it into the PR?

[susnux]

Could you please verify this (for one line descriptions) and put it into the PR?

@Chartman123 I can verify this was the cause, I removed that rule and pushed it to this PR. No jumping here anymore :)

[Chartman123]

So for me it's fine now :)

Perhaps @jotoeri will find some time to review as well

[jotoeri]

• Newlines in the description get lost
• FormHead still jumps around between edit/view
• Having no border on the question description, the same should apply to the form description. Or the other way round, i fear we have to move to borders on all, since one otherwise does not see the mode change within the header.

[susnux]

I will work through this points tomorrow.

• Newlines in the description get lost

This is because simple newlines are soft breaks in markdown so this is expected behavior you will have to use double newlines or hardbreaks (backslash+newline or two space + newline).

But I think we will have to migrate old descriptions to markdown for this, I will also have a look at this topic tomorrow.

By the way I want to thank you for your work, your reviews are very in depth, sadly a rare thing on open source projects :)

[jotoeri]

This is because simple newlines are soft breaks in markdown so this is expected behavior you will have to use double newlines or hardbreaks (backslash+newline or two space + newline).

MD-it has the breaks option. Sounds like that could be it already, without any manual conversion? 🤔

breaks:       false,        // Convert '\n' in paragraphs into <br>

[susnux]

Sorry for the delay, had some busy weeks, but I have some time for this now :)

[susnux]

@jotoeri I think I resolved all review notes 🚀

[susnux]

I think this ready to go now :)

[susnux]

I rebased this branch and reverted the textarea change to fix the issues mentioned above.
I checked also there is no jumping or other visual issues anymore.

Submit	Create	Create edit	Create edit questions

[Chartman123]

@susnux: Just a little thing that I saw right now: In your question edit screenshot the textboxes for the descriptions/options are a little bit wider than the title. I don't know if this was also before, but perhaps you can have a look at this :)

Apart from that, I will do a more intensive review later 👍🏻

[susnux]

@susnux: Just a little thing that I saw right now: In your question edit screenshot the textboxes for the descriptions/options are a little bit wider than the title. I don't know if this was also before, but perhaps you can have a look at this

Sure! Fixed the border alignment, it now looks like this:

[Chartman123]

@susnux @jotoeri Did some review of the application in the browser. Couldn't find any unwanted differences to the current main branch. So from my side everything should be ok. If there is nothing more codewise, we can give it a go :)

[Chartman123]

One more comment on the package-lock.json. Rest seems fine

[jotoeri]

• Now its on the left side and even worse?!
  
• From empty Title, when entering the first char, the title input changes size for me. @Chartman123 can you confirm this?
• I think Form title and description should always change edit-mode together. Currently, if the form title is empty, the description disappears. That looks strange imo.
• If there's no form-description, the Title and the info-message are now quite far apart. In fact 20px more, than without this PR. Can we get that down again? I think this doesn't necessarily be pixel-perfect between create.vue and submit.vue, but more important it should look good on submit.vue.

@Chartman123 @susnux any opinions?

[Chartman123]

• Now its on the left side and even worse?!

That's basically the same in main and there since Forms 3 iirc

• From empty Title, when entering the first char, the title input changes size for me. @Chartman123 can you confirm this?

No, can't reproduce here.

• I think Form title and description should always change edit-mode together. Currently, if the form title is empty, the description disappears. That looks strange imo.

Yes, same here... didn't try this before, but yes: should be linked

• If there's no form-description, the Title and the info-message are now quite far apart. In fact 20px more, than without this PR. Can we get that down again? I think this doesn't necessarily be pixel-perfect between create.vue and submit.vue, but more important it should look good on submit.vue.

Confirm, I think the description element should be condtionally shown only if there is some text. This is also true for empty question descriptions. This seems to be related to the text handling. If you click into a description field with just the placeholder the cursor goes to the end and if you then press enter you get two newlines... 🙈

[codecov]

Codecov Report

Merging #1394 (5f8d208) into main (bceb9b2) will increase coverage by 0.35%.
The diff coverage is n/a.

❗ Current head 5f8d208 differs from pull request most recent head 311fd4b. Consider uploading reports for the commit 311fd4b to get more accurate results

Additional details and impacted files

@@             Coverage Diff              @@
##               main    #1394      +/-   ##
============================================
+ Coverage     35.47%   35.83%   +0.35%     
+ Complexity      532      520      -12     
============================================
  Files            52       51       -1     
  Lines          2224     2202      -22     
============================================
  Hits            789      789              
+ Misses         1435     1413      -22     

[susnux]

I fall into line :)

• Now its on the left side and even worse?!

I can remove this but I think this would be better placed in a follow up PR as it is unrelated, but I do not think this is bad as it makes clear what is the question header and what the body.

• I think Form title and description should always change edit-mode together. Currently, if the form title is empty, the description disappears. That looks strange imo.

I agree, fixed that.

• If there's no form-description, the Title and the info-message are now quite far apart. In fact 20px more, than without this PR. Can we get that down again? I think this doesn't necessarily be pixel-perfect between create.vue and submit.vue, but more important it should look good on submit.vue.

Same, pushed a commit which fixes this :)

[jotoeri]

Now its on the left side and even worse?!

Well, 'unrelated' depends - you increased the offset from 2px to 4px in this PR, instead of aligning the description to the existing field...
I'm fine with having a clear difference between question and options, but currently it looks more like a bug imo. So i'd say, @susnux please clarify with @jancborchardt how it should like and eventually fix it in a separate PR.

From empty Title, when entering the first char, the title input changes size for me.

That's strange... I still see it on my Firefox 109 but not on edge. 🤔

[jotoeri]

🤷‍♂️

[jotoeri]

@susnux wanna rebase & squash the commits here? Then we can merge it.

[susnux]

wanna rebase & squash the commits here? Then we can merge it.

Nice you released the hotfix update :)

[hanserasmus]

Are these changes included in version 3.0.4? I have 3.0.4 installed, and none of the above Markdown stuff works for me. Trying to add a URL to a question and/or description and it displays the raw text, not MD formatted.

[susnux]

No this will be included with upcoming 3.1.0 release.

[hanserasmus]

Thank you @susnux. Is there a place where I can watch the project timeline? I need this urgently for a project, so if needed be, I will build the app from source code to have this capability. But don't want to build from source if 3.1.0 is imminent.

[susnux]

I do not think there is a fixed schedule, but I am not into that topic, maybe @jotoeri can help.

[jotoeri]

Yes, there generally is no fixed release schedule for forms. But we anyways have to release for NC26 within the next 3 days. Maybe i'll find some time later, otherwise tomorrow.

Edit: Done ☺️

[hanserasmus]

Thank you @jotoeri . I saw the release, updated, and it broke. :-( Bug report filed: #1528
Thank you still for the quick release! This will definitely help me once I get it working again.