Tiptap: a renderless editor for Vue.js


#1

Hey there,

at Scrumpy we’ve looked for an editor for months. Currently we are using Quill but it’s too limited. A few weeks ago I stumbled across Prosemirror and I really liked it – so thank you for this amazing toolkit! I did not found any Vue package for my use cases so I created one. And here it is: tiptap.

Some special things about tiptap:

  • It’s renderless. You have full control over markup and styling.
  • There is an extension layer for adding nodes, marks and plugins. You can define everything in one file for a specific node or make type (schema, menu commands, key bindings, input rules, etc.)
  • You can render nodes as Vue components
  • There are some special node types available such as todo lists

Any feedback is appreciated :blush:


#2

Looks really good! It’s wonderful to see a project that wraps ProseMirror into a more friendly package.


#3

Second this! Tiptap is ace!


#4

This is awesome! I already had to create my own Vue “adaptation” for a project I’m working on and that is in production, but your implementation is oh so much better. I already “stole” your ComponentView idea in order to make nodes render as Vue components, but when I have time to refactor I’ll drop my duct tape implementation and go full Tiptap.

Thank you so much for sharing with the community. And thank you @marijn for this awesome rock solid editor!


#5

This looks amazing! Great idea to render nodes as VueJS. Not sure if I’ll refactor to be on top of tiptap or copy some of the mechanics but either way I think this could clean up some of my click handlers that render UI for different nodes.


#6

Thanks Danita! :raised_hands:


#7

Thanks! Would love to see some contributions! So much to do :sweat_smile:


#8

The public api on that looks so simple and lovely. We’ve been doing a mish-mash of custom js and react and I’m sorely tempted to try moving our schema over to Tiptap even with the node-vue transition required.


#9

Great job! I’ve trying to implement PM into Vue for a week now and now stumbled upon this when I had most things already set up. Anyone got an idea how to implement prosemirror-tables into it?


#10

Hey @mleppik, thanks! I would love to see a pull request for that! :heart:️ Currently you can see at tiptap-extensions how other nodes and marks are registered.


#11

Already working on it! When I get my implementation into my project done I’ll definitely start work on a pull request!


#12

great project :slight_smile: I’m currently working out what the best approach might be vv a plugin (“extension”) for alignment. Probably something that listens to the last cursor position and modifies the dom accordingly. I’ve done some initial tests but there’s a lot to consider both vv tiptap and vv its relationship with Prose Mirror. Suggestions welcome (as the desired functionality is to modify existing nodes rather than replace them)


#13

That’s next on my list with tiptap! Block element alignment using floats probably.


#14

I’m actually making good progress at understanding things. Should be actually able to work something out in the next day or two hopefully :slight_smile: