[Frontend]: Setup Markdown Editor

[Mayank0255]

Apply a draft.js or slate.js WYSIWYG framework for React. Apply these to -

• Ask Question / Post Form
• Answer Form

[ddsuhaimi]

how would you go about having the icons here? I checked slate docs, and rn i can implement it. But since slate use material icon in their example and this one isn't? what would be the approach here? are you willing to add more dependecy (react-icons or bootstrap icon, or maybe some fontawesome?)

[Mayank0255]

Hi @ddsuhaimi,

The UI we are focusing on is this:

And the main ui should look like this but we will not be adding all the functionalities to it at the moment.

So, the idea has changed quite a bit from when I made the issue that we won't be adding a Markdown editor, whereas a Rich Text Editor would suffice like shown in here (As you are considering Slate that's why I have attached the link to slate).

The features which we will be adding would be:

1. Bold, Italics and Underline Text
2. Code Text
3. Basic Html like
   and all
4. Hyperlinks
5. Block Quotes
6. Ordered and Unordered lists

What I want you to not implement is the Image functionality and the functionality to add heading and subheading which are shown in the demo. The bar stating Links, Image and all in the image above from Stack Overflow is also not required as we don't need to go to that much depth on this release of it.

Coming back to your question, I prefer Material Icons and it isn't a huge deal if you wanna change your mind and switch to some other but Material Icons would suffice. The main UI of the editor like the color the sizing should look the same but don't limit your creativity and try to make it minimalistic if possible, as it looks good.

I hope I have answered your question and apologies for not writing a detailed description of the necessities.

[Mayank0255]

@ddsuhaimi And let me know if you will be working on this, so that I can assign it to you

[ddsuhaimi]

Thanks for the response @Mayank0255 When you said "basic html like and all", do you mean ability to paste HTML rich content like here ?

Another thing is Slate turns the text inside the input into a list of objects based on its formatting as shown in the image below.

But formData.body in the addPost is a simple string. What should be the approach here?

Yeah, you can assign it to me :)

[Mayank0255]

@ddsuhaimi

Ya correct I mean that only.

Hmm I see, I think we would need to change the database schema a little. Give me sometime I will think about the effective solution which is used by other developers too. You can also try to look for solutions for this.

[ddsuhaimi]

@Mayank0255 Cool

One idea is to save it as JSON like here

[Mayank0255]

@ddsuhaimi

Sure, will look into that too but I think there are ways of serializing it and then deserializing it when printed. Take a look at these: 09-serializing & slate-html-serializer

[ddsuhaimi]

@Mayank0255

Interesting, so I guess we could save it as string of html (i dont know if this is a thing)? Basically, converting it to html whenever we addPost and for editing we convert it to Slate objects back?

[Mayank0255]

@ddsuhaimi

For converting back we will have to see as if it's pure HTML then there are ways to just print the html or there will be an efficient way of printing the returned data.

Should I create another issue for the printing part or would you like to do that with the editor in this issue itself? as printing the new format of data is also kind of related to setting up of the editor

Printing html something like this:

<p
    dangerouslySetInnerHTML={{__html: <Object_Name>}}
/>

[ddsuhaimi]

@Mayank0255

I think we should create another issue for that in case some people want to contribute too. Basically, converting Slate object to HTML and vice versa. But, if no one takes it after a few days, then yeah, I'll see what I can do.

The HTML object must be something I can inject into a div with dangerouslySetInnerHTML attribute like you said.

[Mayank0255]

@ddsuhaimi

So, I thought over it and I have decided that it should be an integrated task as after discussing with some developers I got to know that after resolving an issue, whether it's a small issue or a big one, the app should stay in it's working state which won't be possible if you would just setup the editor and it will return an object as:

1. It won't get stored anywhere
2. The app won't compile as on pages where the body is being rendered will show an error of TypeError.

These are the reasons for it, so I would say to implement the serializing thing and then printing the html as I told you before. We don't need to deserialize it as we would be printing the serialized content itself.

For this you will need to initialize the rules to get going which you can read

Or for this you will need to create a serializer as guided

Another option is to use Draft.js as it's powered by Facebook, so, the community is big and would have an efficient solution to this. I will send you some links for help if you will be going forward with Draft.js

[Mayank0255]

@ddsuhaimi

For draft.js:

1. This is a good article for learning to setup - Its a series
2. The docs are pretty good too - here
3. This one is a working model in which seamless conversion is also implemented - here

There are some other libraries for conversion too -

• draft-convert
• draft-js-export-html
• The author of Draft has answered this question here

[ddsuhaimi]

@Mayank0255

I'll see which one is easier to implement tonight. Thanks for the links :)

[Mayank0255]

@ddsuhaimi great 👍🏽 Hoping to see a PR up by you soon

[ddsuhaimi]

@Mayank0255

I decided to go with Draft.js. You can check my commit on my fork here

We don't even need icons for this so I guess that's a plus for Draft.js

[Mayank0255]

@ddsuhaimi

Glad to hear that as myself was recommending that only.

I just took a glance at the forked repo of yours, but I will review it properly once you make the PR of the fully functionable code.

Though you should pull from the upstream repo as I merged a PR yesterday (therefore it is 9 commits ahead) and we have finished setting up husky which would help you and other developers to avoid the linting errors for our project.

[Mayank0255]

@ddsuhaimi what's up with the progress? Stuck anywhere?

[ddsuhaimi]

@Mayank0255 Looks like we have some problem with the eslint (probably incompatible version). Not sure if this happens to everyone else or only me

I even fork the repo to my another github account and clone it, and still got the same error.

[Mayank0255]

@ddsuhaimi

Ya I am aware of that error and I setted up the .env file in client for that already too can you check if it is there or not?

[Mayank0255]

If that doesn't works then try adding that to you root .env file as well

[ddsuhaimi]

@Mayank0255 there is no .env file in the client, but there is one in root. I have add .env file in the root, but I still got the error.

[Mayank0255]

@Mayank0255 there is no .env file in the client, but there is one in root. I have add .env file in the root, but I still got the error.

I just checked that I didn't add another .env file to client, so for now just create a new .env file in client and write the line given in the error statement to ignore the error. It will work then

[Mayank0255]

@ddsuhaimi let me know if it works out or not

[ddsuhaimi]

@ddsuhaimi

It work, I already saved the converted html to database. Now only need to display it.

[Mayank0255]

@ddsuhaimi

Good going man

[ddsuhaimi]

@Mayank0255

Feel free to check my pr.