Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add DOM-independent copy/cut API #518

Closed
zenorocha opened this issue Jan 23, 2018 · 8 comments
Closed

Add DOM-independent copy/cut API #518

zenorocha opened this issue Jan 23, 2018 · 8 comments
Labels
Milestone

Comments

@zenorocha
Copy link
Owner

zenorocha commented Jan 23, 2018

Part II of a new major release proposal #516

Current state

new Clipboard('.btn', {
    text: function(trigger) {
        return 'blah blah';
    }
});

Proposal

button.addEventListener('click', () => {
    clipboard.copy('blah blah')
})

Benefits

Today a click event listener is created inside the library in order to facilitate usage. The problem is that attaching an event to the DOM might not be a good idea when using Angular, React, Vue, etc

The benefits of this approach is that users can call a copy/cut function independently inside their own event listeners.

Drawbacks

Users will need to know that an event listener is necessary, otherwise it will not work.

Related

#203 #218 #231 #258 #329 #389 #446 #466 #489 #498 #474

@deejay-baddog
Copy link

got it. thank you very much.

@hng0
Copy link

hng0 commented Jan 26, 2018

I think the drawback is not a big problem since we can mention this in the documentation. The huge DOM-independent advantage outweighs this.

Also, the api to handle success and error should be refined. How about having it throwing error when attempt to copy to clipboard fails?

@zenorocha
Copy link
Owner Author

@hoangmngo error handling is being mentioned here #517

@danielravina
Copy link

Users will need to know that an event listener is necessary, otherwise it will not work.

That's why we have a Readme 😃

@yuri-wisestamp
Copy link

So there's no way to do it at the moment?

@zenorocha
Copy link
Owner Author

There is a way, but browser support is very limited.

https://caniuse.com/#search=clipboard

I'm tracking the status of the implementation as soon as it lands on other major browsers, I'll update the library to address this use case.

@TheGr8Nik
Copy link

It seems that all the major browsers allow triggering copy events inside a event handler, but not paste events.

https://jsbin.com/huhekiqope/1/edit?html,js,console,output

Click on Copy button will correctly copy the data in clipboard, while click on Paste will not trigger paste event. Using Ctrl+v will trigger the event correctly.

@RobertAKARobin
Copy link

Can't you just expose ClipboardAction for importing and let users do it themselves?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

7 participants