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
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!
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.
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.
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?
Hey @mleppik, thanks! I would love to see a pull request for that! ️ Currently you can see at tiptap-extensions how other nodes and marks are registered.
great project 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)
did you end up rolling out your own enter command in the end @philippkuehn? That was the only way I could see to implement class inheritance from line to line. Tiptap is great for fairly straight forward use cases but for me, I had too many bespoke things I wanted done. Thus I rolled my own in the end cool project though!
️ Currently you can see at tiptap-extensions how other nodes and marks are registered.
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)
cool project though!
