There is an Align problem for pure html views

[yedi97]

Hello extension developer, this extension is very good thank you for making it but I am facing the following problem:

With Vue 3, I use tiptap and your extension => it's ok, works well. But when I save to the server, it seems that the getHTML() function has saved the missing div tag wrapped in the resized img tag, specifically:

• From Vue 3: <div style="position: relative; width: 443px; height: auto; cursor: pointer; margin: 0px auto; cursor: pointer;"><img src="img_path" style="width: 443px; height: auto; cursor: pointer; margin: 0px auto;" draggable="true"></div>

• Save html to the server using the getHTML() function: <img src="img_path" style="width: 443px; height: auto; cursor: pointer; margin: 0px auto;" draggable="true">

So when viewing on my client's website (Nuxt 3), the img is always left-aligned, client's website (Nuxt 3) does not use tiptap

Currently, I have fixed it by adding style display: flex to the img tag on the client website (Nuxt 3), but I think this is only temporary. Please help me if I am wrong. Thanks a lot

[bae-sh]

Hi @yedi97 , thank you for using my extension!

I wanted to share a quick tip about how Tiptap (based on ProseMirror) works. When you're in edit mode and insert an image, Tiptap wraps it in a div tag. However, when you use getHTML(), it outputs a p tag instead of the div. This behavior might vary, especially if you're using an older version of Tiptap (I tested this with v2.4.0).

Unfortunately, I'm not very familiar with Nuxt, so I wasn't able to test this in that environment. I suggest trying to upgrade to Tiptap version ^2.4.0 to see if that resolves the issue. If not, please let me know the details of your development environment, and I'll do my best to help. Thanks

[yedi97]

Hi @yedi97 , thank you for using my extension!

I wanted to share a quick tip about how Tiptap (based on ProseMirror) works. When you're in edit mode and insert an image, Tiptap wraps it in a div tag. However, when you use getHTML(), it outputs a p tag instead of the div. This behavior might vary, especially if you're using an older version of Tiptap (I tested this with v2.4.0).

Unfortunately, I'm not very familiar with Nuxt, so I wasn't able to test this in that environment. I suggest trying to upgrade to Tiptap version ^2.4.0 to see if that resolves the issue. If not, please let me know the details of your development environment, and I'll do my best to help. Thanks

it seems i am using old version of tiptap, specifically 2.1.13, i will upgrade thanks for your reminder