Add simple text editor to offer description box?

[amykirschner]

@ziyan-junaideen I've been cleaning up some of the offers for open viewing and realize we can't get away without the ability to bold, underline, etc anymore. What is the simplest text editing capability we can add to the Offer Description field?

[ziyan-junaideen]

@amykirschner : is this the admin side?

[amykirschner]

Good question. Can we easily add for admin and users?

[ziyan-junaideen]

I will have a look. The admin section is the concern.

[ziyan-junaideen]

[ziyan-junaideen]

Hmm... actually the field is not plain text. It is markdown. Meaning you can add styles much easier without even using a mouse. Unfortunately the two are not compatible. Let me get you an example on staging.

[ziyan-junaideen]

The markdown version we are using doesn't support underlines. I am going to try to update it to a newer version which will give us support for it.

[ziyan-junaideen]

Pushing the markdown engine update to production which will give the ability to underline.

[ziyan-junaideen]

very simply say...

# Title will be a big title ### Title a 3rd level title (smaller) _Underlined text_ will under line Underlined text *Italic text* will have the text in italics **Bold text** will haveBold text` in bold... github it self uses a flavor of markdown. So you can go to edit and check. But it doesn't support 'underlines'

Title 1

Title 2

Title 3

Bold text Italic text

Quotes

[amykirschner]

hmmm. 2 problems:

1-My description box does not look like yours. either in staging or production. I also checked in 2 browsers. Is that a mockup or what you actually see? A github style markdown would be great if we could get it. I'll give up underline for now if I can get bold and text size changes.

2- This has to be super easy for users. There is zero chance they will know or use the #title function. However, they all use word or something like it and know how to use that editing function. I'm looking for a simple version of that.

[ziyan-junaideen]

Actually that editor doesn't work in the field. any html the editor brings gets removed by the system (security - we don't want users adding code). You can just add them as plain text.

[ziyan-junaideen]

There are some markdown editors, i will look if we can get one added (tomorrow).

[ziyan-junaideen]

@amykirschner : will this be fine? https://simplemde.com/

You can use F9 to toggle between split and normal mode and F11 to go full screen. It also has the same controls in the menu bar.

[ziyan-junaideen]

I checked some others, but this seems to be the best fit. Some will have conflicting requirements, an issue because our libs are old. Or they don't fit the purpose.

[amykirschner]

@ziyan-junaideen looks good! Go for it!

[ziyan-junaideen]

@amykirschner : added the editor. we made the col narrower. I think it is good to rearrange the page layout.

I am thinking we will have the title and description full width (currently it is about 5/12th of the available space). The rest below will be in 2 columns?

https://stormy-cove-staging.herokuapp.com/groups/1#offers/20/edit

[amykirschner]

re markup editor. Looks good with exception that I can't get the link button to work. I've tried the help function as well. Not sure if I' doing something wrong or function is broken?

Yes to title and descr being full width.

I don't want to change to 2 columns yet. It may be better for future but I don't want to make the layout more complicated at the moment. good idea for future.

[amykirschner]

*markdown (need more coffee)

[ziyan-junaideen]

Getting it to the admin part was a little tough but got it done.

[ziyan-junaideen]

What this editor doesn't show, but the parser is capable of is underline.. just enclose 2 areas with underscores (as you have done with *. ex underlined text. This is not standard markdown. If you use it on the ediotr it will show as italic (which is by markdown definition).

[ziyan-junaideen]

I noticed that the offers view section is not having the markdown parsed properly. Investigating why.

[ziyan-junaideen]

Some points about the markdown you had written...

• *Testing my new ability to edit these words. ** has a space between . and **
• *And these words. * has a space between . and *
• [text for link](http:/www.vbsrmarket.com) url is malformed, you need double / http://www.vbsr

[ziyan-junaideen]

About the first 2 points, I recall at least 1 markdown parser that doesn't have the issue with space. But the issue is it doesn't support underline.

[amykirschner]

oops! I see my issue with the / (//) How silly of me! When you get it all working go ahead and push to production. Thanks!

[ziyan-junaideen]

I need to make the title and description full width, then i will push to production. I willl do it in a while.

[ziyan-junaideen]

[ziyan-junaideen]

The title and editor are full width

[amykirschner]

beautiful! Thank you @ziyan-junaideen