[TODO] Create a new rich text editor component

[Dnouv]

Create a new form input component that allows the user to do some formatting such as "Bold", "Italic", "Lists", and "Links". However, please note in the backend, we only store the data in html format, so this component should export the formatted input as simple html. Take care of data sanitization since on the client side we are using dangerouslysetInnerHtml

Preview of the editor component:

Please feel free to comment and ask questions, if any. Thank you!

[Aashray446]

@Dnouv This is a component that I need to use for organization information, Should I create it? Or Go with the normal text area component.

[Aashray446]

Hey @Dnouv, I researched this and thought about going for any of the below two text editors (WYSIWYG):

• Drajt.js (Bundle Size : 64Kb , load time 74ms)
• TipTap (Bundle size: 60 Kb, load time 69 ms)

Each of them has its own advantages and disadvantages,

• Draft.js is the most stable one but has no official mobile compatibility
• TipTap is very famous in spite of being in the Beta version, it's stable and gives a lot of customization options as it is a headless text editor.

I am open to your suggestion :-) Thank you

[Aashray446]

@Dnouv, I have researched a lot about the component. As we later want to display the content of text editor to HTML, There is a package named SLATE, It is the most lightweight yet powerful because of its modular approach. This can be best for our use case.

Here is the current design and a working model screenshot of the text editor component for our app.

My Approach

• I am planning to introduce the slate.js package having a bundle size of 25.2 kb and a load time of 29ms
• There will be three files, component.js, escape-html.js, and textEditor.js to handle the mini component of text-editor, sanitizing input, and reusable text-editor component respectively
• To integrate the text editor, we just need to pass the onChange function and it will return the HTML as a string which can be later used
• I planned to use the built-in serializer which will have custom logic and can be changed as per requirements and will avoid unnecessary package load if we have used other packages such as Draft.js

I am open to your suggestions and design improvements, I Hope I explained my approach well. Thanks :-)

[Dnouv]

Hey @Aashray446

Thank you so much for researching more about this. I will get back a satisfying answer for you, so I would request you to wait two more days; please feel free to ping me on Open Server if I forgot to reply back (well, the chances of this are slim).

Thank you!

[Aashray446]

Hey @Dnouv, check out this text editor made with the help of the lexical package I made a component called Editor which is plug-and-play and requires just three parameters i.e onChange, value, and placeholder

I will be drafting a PR soon, till then you can suggest any UI changes if you want?

Thank you :-)