Forum Discussion

cbakerthrive's avatar
cbakerthrive
Copper Contributor
May 02, 2022

Adding copy and paste to context menu on Teams

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!

developer
microsoft teams

1 Reply

Sort By
  • Prasad_Das-MSFT's avatar
    Prasad_Das-MSFT
    Icon for Microsoft rankMicrosoft
    May 17, 2022

    cbakerthrive - 

    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.

     

Resources