vodle icon indicating copy to clipboard operation
vodle copied to clipboard

User can use simple formatting (italics, bold, paragraphs) in details texts

Open mensch72 opened this issue 2 years ago • 27 comments

Is your feature request related to a problem? Please describe. Poll and option details cannot be formatted in any way, which reduces legibility.

Describe the solution you'd like User should be able to use simple formatting (italics, bold, paragraphs, but no underlining or hyperlinks etc.) in those texts, ideally both by using markdown italics and bold and keyboard shortcuts CTRL-I|B.

Caution This needs to be made in a safe way that does not provide a security breach. In the stored strings, the formatting should be stored as markdown.

mensch72 avatar Nov 03 '22 16:11 mensch72

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

Abhi441 avatar Nov 28 '22 15:11 Abhi441

I am Waiting for your responce

Abhi441 avatar Nov 28 '22 15:11 Abhi441

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 (): image (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: image

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?

mensch72 avatar Nov 28 '22 20:11 mensch72

Kindly arrange a zoom meeting share the meating link , help me to set up this project in my local .then I will fix all the bug assigned to me.

On Tue, 29 Nov, 2022, 1:29 pm Jobst Heitzig, @.***> wrote:

Assigned #214 https://github.com/pik-gane/vodle/issues/214 to @Abhi441 https://github.com/Abhi441.

— Reply to this email directly, view it on GitHub https://github.com/pik-gane/vodle/issues/214#event-7909845209, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOU7GXHBLX663M7NJ4EFSCTWKWZXDANCNFSM6AAAAAARWJRROM . You are receiving this because you were assigned.Message ID: @.***>

Abhi441 avatar Nov 29 '22 08:11 Abhi441

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

mensch72 avatar Nov 29 '22 08:11 mensch72

Sure!

On Tue, 29 Nov, 2022, 2:00 pm Jobst Heitzig, @.***> wrote:

Dear @Abhi441 https://github.com/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

— Reply to this email directly, view it on GitHub https://github.com/pik-gane/vodle/issues/214#issuecomment-1330263789, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOU7GXEJRKURRAUI6EBQWILWKW5KTANCNFSM6AAAAAARWJRROM . You are receiving this because you were mentioned.Message ID: @.***>

Abhi441 avatar Nov 29 '22 08:11 Abhi441

I am waiting for you in the meating Man.

On Tue, 29 Nov, 2022, 2:05 pm abhishek singh, < @.***> wrote:

Sure!

On Tue, 29 Nov, 2022, 2:00 pm Jobst Heitzig, @.***> wrote:

Dear @Abhi441 https://github.com/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

— Reply to this email directly, view it on GitHub https://github.com/pik-gane/vodle/issues/214#issuecomment-1330263789, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOU7GXEJRKURRAUI6EBQWILWKW5KTANCNFSM6AAAAAARWJRROM . You are receiving this because you were mentioned.Message ID: @.***>

Abhi441 avatar Nov 29 '22 09:11 Abhi441

Kindly Come in the meeting Man

On Tue, 29 Nov, 2022, 2:32 pm abhishek singh, < @.***> wrote:

I am waiting for you in the meating Man.

On Tue, 29 Nov, 2022, 2:05 pm abhishek singh, < @.***> wrote:

Sure!

On Tue, 29 Nov, 2022, 2:00 pm Jobst Heitzig, @.***> wrote:

Dear @Abhi441 https://github.com/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

— Reply to this email directly, view it on GitHub https://github.com/pik-gane/vodle/issues/214#issuecomment-1330263789, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOU7GXEJRKURRAUI6EBQWILWKW5KTANCNFSM6AAAAAARWJRROM . You are receiving this because you were mentioned.Message ID: @.***>

Abhi441 avatar Nov 29 '22 09:11 Abhi441

You can call me 9006916716

On Tue, 29 Nov, 2022, 2:35 pm abhishek singh, < @.***> wrote:

Kindly Come in the meeting Man

On Tue, 29 Nov, 2022, 2:32 pm abhishek singh, < @.***> wrote:

I am waiting for you in the meating Man.

On Tue, 29 Nov, 2022, 2:05 pm abhishek singh, < @.***> wrote:

Sure!

On Tue, 29 Nov, 2022, 2:00 pm Jobst Heitzig, @.***> wrote:

Dear @Abhi441 https://github.com/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

— Reply to this email directly, view it on GitHub https://github.com/pik-gane/vodle/issues/214#issuecomment-1330263789, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOU7GXEJRKURRAUI6EBQWILWKW5KTANCNFSM6AAAAAARWJRROM . You are receiving this because you were mentioned.Message ID: @.***>

Abhi441 avatar Nov 29 '22 09:11 Abhi441

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?

mensch72 avatar Nov 29 '22 09:11 mensch72

OK bro got it . My country right now timing is 2: 30 pm

On Tue, Nov 29, 2022 at 2:40 PM Jobst Heitzig @.***> wrote:

Dear @Abhi441 https://github.com/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?

— Reply to this email directly, view it on GitHub https://github.com/pik-gane/vodle/issues/214#issuecomment-1330311978, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOU7GXGHUC7VPKCYMPHBB2LWKXCBVANCNFSM6AAAAAARWJRROM . You are receiving this because you were mentioned.Message ID: @.***>

Abhi441 avatar Nov 29 '22 09:11 Abhi441

Can you tell me Indian time to connect with you in Zoom meeting . I have done all the set up in my system .

On Tue, 29 Nov, 2022, 2:47 pm abhishek singh, < @.***> wrote:

OK bro got it . My country right now timing is 2: 30 pm

On Tue, Nov 29, 2022 at 2:40 PM Jobst Heitzig @.***> wrote:

Dear @Abhi441 https://github.com/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?

— Reply to this email directly, view it on GitHub https://github.com/pik-gane/vodle/issues/214#issuecomment-1330311978, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOU7GXGHUC7VPKCYMPHBB2LWKXCBVANCNFSM6AAAAAARWJRROM . You are receiving this because you were mentioned.Message ID: @.***>

Abhi441 avatar Nov 29 '22 09:11 Abhi441

I think it's 7 pm India time

mensch72 avatar Nov 29 '22 10:11 mensch72

I'm available now

mensch72 avatar Nov 29 '22 13:11 mensch72

Can we connect after 30 minutes because I am in Company meeting with Manager.

On Tue, 29 Nov, 2022, 7:04 pm Jobst Heitzig, @.***> wrote:

I'm available now

— Reply to this email directly, view it on GitHub https://github.com/pik-gane/vodle/issues/214#issuecomment-1330660122, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOU7GXATGBHKUBMHFKFG4XTWKYA43ANCNFSM6AAAAAARWJRROM . You are receiving this because you were mentioned.Message ID: @.***>

Abhi441 avatar Nov 29 '22 13:11 Abhi441

OK see you in 30 minutes.

mensch72 avatar Nov 29 '22 13:11 mensch72

Can we connect bro

On Tue, 29 Nov, 2022, 7:14 pm Jobst Heitzig, @.***> wrote:

OK see you in 30 minutes.

— Reply to this email directly, view it on GitHub https://github.com/pik-gane/vodle/issues/214#issuecomment-1330673010, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOU7GXFDQNGIVQGBLPOTJ5TWKYCCNANCNFSM6AAAAAARWJRROM . You are receiving this because you were mentioned.Message ID: @.***>

Abhi441 avatar Nov 29 '22 14:11 Abhi441

I am waiting in meeting

On Tue, 29 Nov, 2022, 7:40 pm abhishek singh, < @.***> wrote:

Can we connect bro

On Tue, 29 Nov, 2022, 7:14 pm Jobst Heitzig, @.***> wrote:

OK see you in 30 minutes.

— Reply to this email directly, view it on GitHub https://github.com/pik-gane/vodle/issues/214#issuecomment-1330673010, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOU7GXFDQNGIVQGBLPOTJ5TWKYCCNANCNFSM6AAAAAARWJRROM . You are receiving this because you were mentioned.Message ID: @.***>

Abhi441 avatar Nov 29 '22 14:11 Abhi441

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

mensch72 avatar Nov 29 '22 14:11 mensch72

can you tell me this issue is fixed ?

Abhi441 avatar Dec 10 '22 11:12 Abhi441

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

mensch72 avatar Dec 10 '22 11:12 mensch72

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

mensch72 avatar Dec 23 '22 08:12 mensch72

Kindly unassign issue.

Abhi441 avatar Dec 29 '22 19:12 Abhi441

Started in #243

semla avatar Jan 08 '23 12:01 semla

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?

semla avatar Jan 08 '23 14:01 semla

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!

mensch72 avatar Jan 09 '23 09:01 mensch72

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

semla avatar Jan 14 '23 11:01 semla