search

ueberdosis / tiptap

The headless rich text editor framework for web artisans.
https://tiptap.dev
MIT License
27.25k stars 2.27k forks source link

[Bug]: Unable to prevent image on editor while copy pasting #4611

Open nooblyf opened 11 months ago

nooblyf commented 11 months ago

Which packages did you experience the bug in?

core, extension-image, react

What Tiptap version are you using?

2.1.12

What’s the bug you are facing?

When i copy paste some text that contains image from a website to my editor it also copies the image along with it, but i want user to only be able to to upload from my toolbar where i first store it in my s3 bucket then show

Is there a way to prevent this from happening?

What browser are you using?

Chrome

Code example

No response

What did you expect to happen?

When copy-pasting text that also contains images there should be an option to not copy over images

Anything to add? (optional)

Screenshot 2023-11-09 at 03 13 02

Screenshot 2023-11-09 at 03 13 34

Did you update your dependencies?

Are you sponsoring us?

nooblyf commented 7 months ago

Wondering if there's any plan to implement this or maybe a workaround?

bdbch commented 7 months ago

I'd try to not use the default image extension then. Since you want to allow users to upload images I'd guess you'd also rather have references to the uploaded file saved into the document instead of the direct file URL?

In general this is expected behavior as the copy / pasted html fits with the schema and will be parsed correctly by Prosemirror. What happens if you for example change the dom parsing and rendering of the image extension to require some kind of data-image attribute to determine if an image was inserted correctly via upload or was pasted?

nooblyf commented 6 months ago

Can you tell how to go about it? I'm looking at the code but there's no reference of paste event/rules anywhere, so i'm guessing it happens automatically?

https://github.com/ueberdosis/tiptap/blob/main/packages/extension-image/src/image.ts

bdbch commented 6 months ago

Afaik it's Prosemirror logic that handles incoming pasted HTML content - transforms it into Prosemirror Fragments and inserts it. So if there`s an copied in your clipboards HTML, it will try to lookup your schema for a valid image renderer (which the Image extension is) and insert it with the given attributes.