The draft.js ecosystem is completely fragmented. But I totally dig your implementation.
Which lib or combination of libs are you using? Is there an open source package I can check out? Or is it a proprietary solution (mash up)?
I've done a ton of research and it seems every library has quirks. I am currently using react-rte, and although its good, it leaves much to be desired. (Shout out to react-drafts because the authors are super friendly and cool).
Any insight/info is greatly appreciated. Thanks.
Thanks for the invite, Sandeep! :)
Short answer β apart from the
draft-jscore, all functionalities of the Hashnode WYSIWYG editor, are built/maintained in-house!After deciding to go ahead with DraftJS, we did experiment with a couple of existing solutions that were built on top of
draft-js... but, we ended up building a solution from scratch! The reason for doing so was two fold:react-rte, anddraftjs-plugins) as they were not "battle-tested", so to say... since draft-js itself was a relatively new library.Taking the above two points into consideration, most of what you see in the editor, was built from scratch in a couple of weeks.
Data conversion
What is special about Hashnode's WYSIWYG editor, is not only the editor itself; but also the data conversion that happens underneath when you save/publish the content, or edit a published article; and the neat utilities which support the whole process.
All of Hashnode's user content is stored as markdown, so we have two parsers:
EditorStatedata to markdown on save. We achieve this using a forked/improved implementation ofdraft-js-export-markdown(github.com/sstur/draft-js-export-markdown)EditorStateon edit. Since we already use a forked implementation ofmarked.js; we use that to convert it to HTML, and then we use a custom DraftJS'convertFromHTMLutility (with middleware, forked from github.com/HubSpot/draft-convert) to hydrate theEditorStateThe second step is also used in the editor's
handlePastedTextpaste processor function, to handle any markdown text pasted into the editor (by converting it to appropriateEditorStaterepresentation).Open source
If I can risk to speak on behalf of open source plans for Hashnode's editor; I'm certain that this implementation is bound to be open sourced; based on what I know about Hashnode's strong "give back to the community" culture.
Don't quote me on that, though; and I'm not sure of the ETA! π