May 02 2022 07:05 AM
I'm working on a project that uses SharePoint framework (React, etc...) and is used in the Teams environment on both desktop and browser. I'm trying to implement a Context/Right click menu that features copy and paste functionality, and I'm wondering if there's a simple way to do it? I'm using Clipboard API to copy text (fairly easily), but the readClipboard functions wont work. I assume it's a security issue. Client is aware that Ctrl+V is an option, but would really like to have access to regular copy paste on right-click. Thank you!
May 17 2022 12:38 AM
To render the menu, you can listen to the contextmenu
event, which is triggered by right clicking. Then you can render a custom menu.
The copy/paste etc is probably done using document.execCommand()
, which can be used to trigger copy/paste and such. Check your browser to see which commands are supported.
https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
// on right click, copy to clipboard.
document.querySelector('body').addEventListener('contextmenu', function( event ) {
// prevent the normal context menu from popping up
event.preventDefault();
// copy current selection
document.execCommand('copy');
});
Thanks,
Prasad Das
------------------------------------------------------------------------------------------
If the response is helpful, please click "**Mark as Best Response**" and like it. You can share your feedback via Microsoft Teams Developer Feedback link. Click here to escalate.