Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
mensch72 opened this issue Nov 3, 2022 · 27 comments
Open

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

mensch72 opened this issue Nov 3, 2022 · 27 comments
Assignees
@semla
Labels
angular Probably needs Angular-related skills css Probably needs CSS-related skills feature A new feature or enhancement good first issue Good for newcomers ready to implement Sufficiently detailed to start working on --> place in "Issues" typescript Probably needs Typescript-related skills
Milestone
Second Release

Comments

@mensch72
Copy link
Collaborator

mensch72 commented Nov 3, 2022

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 mensch72 added feature A new feature or enhancement good first issue Good for newcomers ready to implement Sufficiently detailed to start working on --> place in "Issues" typescript Probably needs Typescript-related skills angular Probably needs Angular-related skills css Probably needs CSS-related skills labels Nov 3, 2022
@mensch72 mensch72 added this to the Second Release milestone Nov 3, 2022
@Abhi441
Copy link

Abhi441 commented Nov 28, 2022

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

@Abhi441
Copy link

Abhi441 commented Nov 28, 2022

I am Waiting for your responce

@mensch72
Copy link
Collaborator Author

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:

(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?

@Abhi441
Copy link

Abhi441 commented Nov 29, 2022 via email

@mensch72
Copy link
Collaborator Author

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

@Abhi441
Copy link

Abhi441 commented Nov 29, 2022 via email

@Abhi441
Copy link

Abhi441 commented Nov 29, 2022 via email

@Abhi441
Copy link

Abhi441 commented Nov 29, 2022 via email

@Abhi441
Copy link

Abhi441 commented Nov 29, 2022 via email

@mensch72
Copy link
Collaborator Author

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?

@Abhi441
Copy link

Abhi441 commented Nov 29, 2022 via email

@Abhi441
Copy link

Abhi441 commented Nov 29, 2022 via email

@mensch72
Copy link
Collaborator Author

I think it's 7 pm India time

@mensch72
Copy link
Collaborator Author

I'm available now

@Abhi441
Copy link

Abhi441 commented Nov 29, 2022 via email

@mensch72
Copy link
Collaborator Author

OK see you in 30 minutes.

@Abhi441
Copy link

Abhi441 commented Nov 29, 2022 via email

@Abhi441
Copy link

Abhi441 commented Nov 29, 2022 via email

@mensch72
Copy link
Collaborator Author

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

@Abhi441
Copy link

Abhi441 commented Dec 10, 2022 •
edited
Loading

can you tell me this issue is fixed ?

@mensch72
Copy link
Collaborator Author

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

@mensch72
Copy link
Collaborator Author

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

@Abhi441
Copy link

Abhi441 commented Dec 29, 2022

Kindly unassign issue.

@semla
Copy link
Contributor

semla commented Jan 8, 2023

Started in #243

@semla
Copy link
Contributor

semla commented Jan 8, 2023 •
edited
Loading

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?

@mensch72 mensch72 assigned semla and unassigned Abhi441 Jan 9, 2023
@mensch72
Copy link
Collaborator Author

mensch72 commented Jan 9, 2023 •
edited
Loading

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!

@semla
Copy link
Contributor

semla commented Jan 14, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@semla semla

Labels
angular Probably needs Angular-related skills css Probably needs CSS-related skills feature A new feature or enhancement good first issue Good for newcomers ready to implement Sufficiently detailed to start working on --> place in "Issues" typescript Probably needs Typescript-related skills
Projects
None yet
Milestone
Second Release
Development

No branches or pull requests
3 participants
@semla @mensch72 @Abhi441