Gutentap!

[johnpuddephatt]

I've been wanting to build my own block editor in Vue for a while. I played with editor.js for a while but it felt like the lack of a reactive framework to handle state makes extension development really challenging. I really liked the work going on here but after playing around with it a bit I realised having each block as a separate Tiptap instance has limitations and I saw Marijn didn't seem too keen on the idea so I thought I'd see what was possible within Tiptap!

I decided early on to base the UI on the 'Gutenberg' editor in Wordpress. This might seem an odd choice to some people as Wordpress doesn't get much developer love, but I think the editor is way ahead of what many other editors offer in terms of usability, working just as well for long-form articles as it does for more structured content.

The bubble menu and (experimental) commands package made it really easy to get started. I had to learn a lot along the way... first of all simpler things like creating a new Tiptap extension to allow block widths to be toggled between normal, wide and full-width, and then some trickier things involving working with Prosemirror directly (steep learning curve!), like adding controls to move blocks up and down, and allowing drag and drop.

It's still very much a work in progress and something I hope to keep working on. There are bugs, some of which result from some overly simplistic behaviour at the moment around what constitutes a 'block', and I have a list of features I'm hoping to implement soon. If I reach a point where it feels 'stable' I can definitely see myself using it in projects (I build quite a lot of sites with Laravel using the Nova admin panel, the addition of a powerful block editor there would be amazing, especially with the ability to define custom Vue components that can be inserted).

Anyway, I'm sharing in case anyone finds it interesting or wants to contribute. If nothing else it's hopefully an interesting example of what can be created with Tiptap!

Repo: https://github.com/johnpuddephatt/gutentap
Demo: http://gutentap.letsdance.agency/

(p.s. thanks to everyone who's worked on Tiptap, great work!)