Evaluate Tiptap as an alternative for EditorJS

[deshetti]

EditorJS was a really good upgrade from what we had with Quill in terms of experience and support, but it feels like that last mile improvement is not possible to make it a kickass block editor like in WordPress, Notion, Ghost etc.

I was reading a lot into folks like us experiencing the same issues with EditorJS hitting a roadblock after a while. It is still a great block editor to get started, but for folks like us who want to invest in an editor which is a huge thing for a CMS like Dega, it is getting pretty tricky to resolve some issues!

I do not want to make any assumptions or changes yet, but I really want to explore https://www.tiptap.dev/ which is built on Prosemirror. From the docs and experience from a few other folks, it looks like it is heading in the right direction. I believe this project was actively started around the same time we chose EditorJS, at that time choosing Prosemirror was definitely not going to work for us being a low-level editor and the amount of work it would have required to get a functional block editor and all the features tiptap developed on top of it.

The folks at tiptap are also building an open-source collaborative editor which seems interesting: https://www.hocuspocus.dev

Block editor is not directly supported, but we can build on the APIs they host. That is a downside to it, but not sure how much effort it would be. Based on this comment from one of the EditorJS user who moved to Prosemirror, it doesn't seem like a major challenge: codex-team/editor.js#908 (comment) In this case, we would have to explore building a block editor on top of Tiptap.

A bunch of other things that I see are well thought out and forward-looking in Tiptap are:

• Support for Markdown
  • EditorJS, the issue is open for over two years: Markdown support?  codex-team/editor.js#709
  • Tiptap supports writing in Markdown already: https://www.tiptap.dev/examples/default
• Keyboard shortcuts
  • EditorJS: doesn't seem to support at the lower levels: Set Header level and list type based on different shortcuts codex-team/editor.js#1734
  • Tiptap has pretty much everything that we need currently: https://www.tiptap.dev/api/keyboard-shortcuts/
  • Tiptap for Markdown: https://www.tiptap.dev/examples/markdown-shortcuts/
• Support for slash commands
  • EditorJS has an open issue for around two years now: Tab lock codex-team/editor.js#927 (comment)
  • Tiptap seems to be working on this support: https://www.tiptap.dev/guide/menus/#slash-commands-work-in-progress
• Collaboration
  • EditorJS doesn't seem to be set out to be a collaborative editor based on the current design from various comments that I read. They seem to be working on making this change and don't have a timeline: Roadmap 2021 plan codex-team/editor.js#1710 (comment)
  • For Tiptap, the feature is at the core and is done using Y.js which seems like a very good implementation: https://www.tiptap.dev/api/extensions/collaboration/
• Buggy with undo/redo: studio: Undo is not removing the block on EditorJS #185
  • For EditorJS, we are currently using a plugin and it seems like this is their roadmap for a fully-featured functionality with again no tentative timelines: Roadmap 2021 plan codex-team/editor.js#1710 (comment)
  • Tiptap has the functionality implemented already: https://www.tiptap.dev/api/extensions/history/#usage
• Copy/Pasting from Word. This is something @dubbudu requested as a feature.
  • For EditorJS, there is an open issue for over two years: Paste from Microsoft Word codex-team/editor.js#729
  • I am not sure of what the state of this is with Tiptap, will have to test it out
• Exporting content to HTML
  • For EditorJS, we had to write a custom solution in the X package
  • Looks like this is supported directly with Tiptap: https://www.tiptap.dev/guide/output/#option-2-html

I noticed that conversations for like the features above are pretty much nipped in the bud on EditorJS or just ignored forever. It is good for us to keep using EditorJS to see what all roadblocks we hit into like this and then evaluate to see if tiptap lets us gets everything done with what is there in EditorJS and more. If we ever had to migrate the editor data at a later time, we might have to write the scripts to convert the JSON from EditorJS format to Tiptap format. Or, we could explore more with the migration they have: https://www.tiptap.dev/guide/output/#migration

@shreeharsha-factly This is maybe something that you might have to look into after VidCheck & beta versions of MandE. Nothing prior to that!! Giving it a month or two might help us as it is currently very actively developed. For eg: https://www.tiptap.dev/guide/menus/#slash-commands-work-in-progress