layerssss/paste.js

pasting image on firefox not working with editable content that is not contenteditable

chessychev opened this issue · 8 comments

i want to be able to paste to a big container div. the container is not editable itself, but has both editable and non editable sub elements.
i'm using the pastableContenteditable(). on chrome it works perfectly, but on firefox pasting images to this div only works if i add 'contenteditable' to the container div (which i don't want to add, since it modifies the container's look and behaviour).
example in the attached fiddle.
using pastableNonInputable() enables pasting perfectly on both browsers, but of course makes the inputables unusable because the focus is always applied back to the container.

https://jsfiddle.net/yaruok/r34rfgaj/

@chessychev Hmm, that's a user-case I haven't thought about. Will do some work on it next week.

@chessychev Thanks for forwarding me the bugzilla link, it looks like they're going to ship something to make it much easier. That'll be good, because currently, paste.js is using some seriously tangled and unstable hack for FF.

Hi @chessychev now I made it possible for you to call pasteNonInputable on the parent container without destroying any inner elements' functionality. You can preview it here: ✨

https://jsfiddle.net/layerssss/yo05ugn4/

As noted in this example, if you want the pasting working on any inner textarea, you have to call pastableTextarea on it again.

@layerssss
hi, first of all thanks.
in my app and in your fiddle it seems to work, except for selecting text. now when you mark text, it get deselected on mouse up (onmouseup). it possible to copy the text for example if you ctrl+c before onmouseup, but i can't assume the average user of my app will do it.
should i open a new issue for that?

btw, pastableTextarea doesn't make the textarea pastable (though it does in your jsfiddle), but that's less of an issue.

Ah first, good catch! I'm reopening the issue...

But I think we can't avoid that, since we have to steal the focus / selection and put into a [cententeditable] element to make image pasting work, even on Chrome!

Can I suggest that you disable the selection on all static text using user-select: none;? to make it consistent.

I havn't pushed a release yesterday, I'll push one now.

We can leave this issue open until you have you stuff working, before that just let me know I'll help.

it's alright, we just don't support firefox at the moment.