[Bug]: Inserting image from clip board not working

[sebastian-walter]

Which packages did you experience the bug in?

extension-image

What Tiptap version are you using?

2.0.0

What’s the bug you are facing?

When inserting image, it only works if the image is the first item. When e.g. pasting from clip board with the following structure:

<p>Some text</p>
<img src="https://images.unsplash.com/photo-1679678691256-fa3ce50c2159?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2506&q=80" >
<p>Some further text</p>

Only the text are being inserted correctly, the image not.

What browser are you using?

Chrome

Code example

https://tiptap.dev/api/nodes/image

What did you expect to happen?

I copied the first comment from this thread including images: d3/d3-hierarchy#91

I expected the images to appear as well. Instead the image only appeared when I started the selection with the image.

Anything to add? (optional)

No response

Did you update your dependencies?

• Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

• Yes, I’m a sponsor. 💖

[svenadlung]

@sebastian-walter in this case you need to configure "Image" extension to render image node inline. See documentation.

Image.configure({ inline: true })

Try here: https://codesandbox.io/s/cranky-hellman-t9fu9x?file=/src/App.js

[sebastian-walter]

Thanks for the response!

So when I understand correctly, I would have to write my own extension that parses html like this (see snippet below) and splits that up in a paragraph, an image, and another paragraph since otherwise, it is being ignored since there is no inline image in the schema? I would have expected this to behave like the Notion editor, where this is possible and handled in that way.

<p>
Some text
<br>
<img src="...">
Some other text
</p>

[svenadlung]

You do not need to write your own extension. Just configure the image extension as shown above and it will work as expected.

[ikasianiuk]

hi @svenadlung, quick question, maybe you can help me with that. When I try to paste an image on a new row in the codepen you provided, I see an extra space right after it (please see screenshot) It appears after adding inline: true configuration. Do you know any way it can be avoided with inline configuration?

@sebastian-walter in this case you need to configure "Image" extension to render image node inline. See documentation.

Image.configure({ inline: true })

Try here: https://codesandbox.io/s/cranky-hellman-t9fu9x?file=/src/App.js

[pzgz]

@sebastian-walter in this case you need to configure "Image" extension to render image node inline. See documentation.

Image.configure({ inline: true })

Try here: https://codesandbox.io/s/cranky-hellman-t9fu9x?file=/src/App.js

Thanks a lot for your information, in the documtion, it mentioned:

It totally depends on what kind of editing experience you’d like to have, but can be useful if you (for example) migrate from Quill to Tiptap.

And yeah, I am migrating from Quill, and I did met the issue the paste images were missing when editing contents contributed by quill editor, adding inline: true to the configuration solve the issue at once.