simple tiptap extension or prosemirror plugin

Question

i would like to use the tiptap editor for vuejs that work with the prosemirror editor.

I have read many about tiptap but the documentation is not the best and prosemirror itself is very complex for me. I hope you can help me.

I would like to implement my own extension in the tiptap editor. For example in the menu i would like to press a button and insert a div in the text field. The div can have many attributes like <div class="rectangle_var" company="example company" var-id="5124">text example</div> and should look like a rectangle. The rectangle should also have a ligth grey color and can have a text like "text example" in the example.

This extension sounds very easy but i don't know how can i create my own extensions for tiptap. Can you help me?

Answer 1

The tiptap docs are not that complete so you can just take look at the source code for extensions. For example: https://github.com/ueberdosis/tiptap/tree/main/packages

The marks ones are pretty simple. You need to define the schema, with parseDOM and then toDOM. The prosemirror docs will describe everything. They are dense but good https://prosemirror.net/docs/guide/

The editor is separate from the controls. Have a look at all the tiptap examples to invoke your plugin. https://tiptap.dev/