User can use simple formatting (italics, bold, paragraphs) in details texts about vodle HOT 27 OPEN

Kindly give me KT for this project I will resolve this issue

from vodle.

I am Waiting for your responce

from vodle.

Hi @Abhi441 , thank you for offering your help! I'll try my best giving you the information you need for this.

Currently, poll descriptions (and similarly option descriptions) look like this in the voting gui ():

(the text below the title)

So they're all in italics. I want to allow users to be able to add emphasis (like non-italic words or bold italic words in the overall italics text) and paragraph breaks to structure lengthy descriptions.

In the poll drafting form the form fields are currently Ionic Textareas that do not allow any such formatting yet:

The simplest way to allow users to format description texts without having to install a rich text editor would be to...

• Interpret empty lines as paragraph breaks.
• Add a checkbox saying "allow bold and emphasis formatting".
• If checked:
  • When storing entered string into the poll and option objects, prepend them with some zero-width character such as \uFEFF to signify that they are to be interpreted as markdown.
  • Make sure the only markdown markup occurring are * and ** to enable non-italic and bold. In particular, make sure no hyperlinks are contained.
  • Render these in the preview page and voting gui using marked plus some HTML sanitizer
  • Before rendering, add an additional prefix and suffix * to make sure the basic formatting stays italics and text the user entered between asterisks is non-italic instead.

Instead of using a full-fledged markdown renderer like marked, one could try just using a simple regular expression replacement, first of all occurrences of **...** by <b>...</b> and then of all occurrences of *...* by </i>...<i> and of empty lines by </p><p>. Then we would not have to check that no other markdown features are used than these.

The relevant places in the code for you are:

• The poll drafting form: https://github.com/pik-gane/vodle/blob/main/src/app/draftpoll/draftpoll.page.html (search for input_poll_desc and input_option_desc)
• The preview page: https://github.com/pik-gane/vodle/blob/main/src/app/previewpoll/previewpoll.page.html (search for p.desc and o.desc)
• The voting gui showing the descriptions: https://github.com/pik-gane/vodle/blob/main/src/app/poll/poll.page.html (search for p.desc and p.options[oidsorted[i]].desc)
• The corresponding typescript files *.page.ts in the same folders
• Unlikely also the underlying Poll and Option classes: https://github.com/pik-gane/vodle/blob/main/src/app/poll.service.ts (search for set desc)
• Maybe the markdown-to-html rendering function should be placed in the Global Service https://github.com/pik-gane/vodle/blob/main/src/app/global.service.ts that is accessible as the object G in the other classes.

(Later on, we might also want to replace the Ionic Textarea form fields by a proper rich-text editor such a Summernote, but that might not be worth the effort for now.)

Does this help to get you started?

from vodle.

from vodle.

Dear @Abhi441 I'm happy to talk to you at 2:30 PM Berlin time today. Here's a link for that: https://pik-potsdam.zoom.us/j/99993940871

I would like to ask you though to try installing everything in advance of our meeting as described in https://github.com/pik-gane/vodle/blob/main/INSTALL.md

from vodle.

from vodle.

from vodle.

from vodle.

from vodle.

Dear @Abhi441 I'm sorry I can only do 2:30 pm Berlin time, which is in 4 hours 20 minutes. Is that possible for you?

from vodle.

from vodle.

from vodle.

I think it's 7 pm India time

from vodle.

I'm available now

from vodle.

from vodle.

OK see you in 30 minutes.

from vodle.

from vodle.

from vodle.

I'm in the meeting room. Did you use the zoom link I provided?

from vodle.

can you tell me this issue is fixed ?

from vodle.

Dear @Abhi441 I can't see any pull request of yours...

from vodle.

Dear @Abhi441 , are you making progress or should I rather unassign you from this issue?

from vodle.

Kindly unassign issue.

from vodle.

Started in #243

from vodle.

Add a checkbox saying "allow bold and emphasis formatting".

Or just show something like "Format text as bold by enclosing it with ** and as italics with *".

..to make sure the basic formatting stays italics

I think it can be confusing if you allow styling italics & bold and still format default as italics. Maybe only if there is no styling (I guess <2 '*') show the text as italics?

from vodle.

Dear @semla , thank you for jumping in here! I will have a look at your PR tonight and get back with a review.

On your last point: I want to make sure that normally all these user-supplied texts are formatted in italics as the base styling, and that users have two ways of adding emphasis: non-italic, marked by simple stars, and boldface-italic, marked by double stars.

For example:

This poll is about deciding what to eat at our next party. Please make to only add vegan options!

from vodle.

Hello @mensch72 !

..two ways of adding emphasis: non-italic..

I gave it a shot in 5bcf3cca19a7c02562ce1f1d3e6343abb808ea31by adding class="non-italic" but iiuc Angular strips that.

Thought about adding a child-component for each style, but they would have to created dynamically since Angular would strip something like <my-bold [text]="text">. Maybe possible but haven't done it before

But a bit short of good ideas on how to solve it

from vodle.