How to implement an image edit popup

[francoisdop]

Thank you for the time spent developing this wrapper but I found very difficult to implement our own extensions due to the lack of documentation and tutorials.

I am looking to implement a small popup/modal that will appear next to an inserted image once clicked : this to have the possibility to either add a style/class to the image (left - right - float) or to change the src.

How could i achieve this ?? I am desperately looking for at least and idea how to start/ or being shown which functions to use.

• I need an click event handler on the image, that will get the position for the popup to be shown next to the image
• how to programatically add a class to the image (or add a style) and change the src attribute ??

Many thanks for any infos...

[erickwilder]

You may share your main pain points in the open discussion to improve the documentation. In the meantime, I would recommend you to take a look at the structure of the Links example because it does something similar (but injecting a different Node (a tag) in the document.

Spending a bit of time reading through the Prosemirror docs also helps a lot because tiptap is really using a lot of its APIs instead of defining new things; as a starting point, the Commands is an essential part to create/patch how the editor works.

[laurensiusadi]

@francoisdop I would suggest making a custom node with Vue components. Copy everything from the image node, and start from there. You can check the example https://github.com/scrumpy/tiptap/tree/master/examples/Components/Routes/Embeds

[dev7ch]

another approach, if you want a detached observer from the editor could be the implementation of a mutation observer, but destroy it wisely after usage.

https://github.com/dev7ch/app/blob/wysiwyg-replacement/src/interfaces/wysiwyg-full/components/EditorContent.vue#L111