@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.

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

@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 :-)

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!

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