add a method for reacting to rich text paste event

jazzyjackson commented 1 month ago

I've got this working OK by capturing the paste event and getting the plain text from the clipboard, looks like:

    function maybeRich(eve){
        eve.preventDefault()
        var text = eve.originalEvent.clipboardData.getData('text/plain').trim()
        $(eve.currentTarget).text(text)
        $(eve.currentTarget).attr("blank", !text)
    }

A caveat: currentTarget refers to the contenteditable div, so setting the text of that blows away anything the user has entered so far.

I need to know desired behavior in case user has already entered some text:

A: let the caveat stand, pasting into content editable div replaces current contents with clipboard

B: use eve.target instead of eve.currentTarget, which allows user to type one line, hit enter, and paste event only replaces contents of that line

C: emulate default paste behavior: we detect cursor position, split the div contents into 'before' and 'after' cursor and set the contenteditable text as that before + clipboard + after

amark commented 3 weeks ago

I built for this, but IDK if want whole (even mine) library loaded (super tiny tho) just for this 1 feature.

Even if code is fairly small, few lines, still have it as separate module, paste.

Extracting the Range code (sigh, no old browser support, but I think I'm ok with that.... for now lol) maybe try this one instead? https://phuoc.ng/collection/html-dom/paste-as-plain-text/

cloudflare-pages[bot] commented 2 weeks ago

Deploying pay with Cloudflare Pages

Latest commit:	`7da82a1`
Status:	✅ Deploy successful!
Preview URL:	https://a7739a58.pay-cwc.pages.dev
Branch Preview URL:	https://bugfix-plainpaste.pay-cwc.pages.dev

View logs

amark commented 2 weeks ago

👍 tested, works. Awesome. Thanks.

eraeco / pay

add a method for reacting to rich text paste event #26

Deploying pay with Cloudflare Pages