This implementation uses PrimeNg to ease our implementation on context menu rather more focusing on copy and paste options.
Here is a HTML implementation then use custom eventhandlers.
One of the requirements is to not have a right click that shows the regular browser stuff! Instead show a copy option that will copy our text whichever is highlighted.
Here is the template. Using PrimeNg Context Menu that enables globally overwriting the default context menu the browser provides.
<p-contextMenu [global]="true" [model]="items" (onShow)="onShow()"></p-contextMenu>
[global] - will allow the right click anywhere on the screen and we can make the right click to happen on any particular tag also like images/table.
[model] - is the menu items that follows MenuItems API
(onShow) - when ever the context menu opens this event gets called . This is used to disable copy when nothing is selected/highlighted.
Certain code parts explanation.
items: MenuItem[] = [
{
label: 'Copy',
icon: 'pi pi-copy',
command: this.copyText.bind(this)
}
];
Since we have now enable only the copy option this array contains only one element. The command function runs everytime the click happens on the copy.
onShow() {
const selected = window.getSelection()?.toString()
this.items[0].disabled = !selected
}
This onShow() is called everytime the context opens. we're disabling the copy button if nothing is selected on the window.
copyText() {
const selected = window.getSelection()?.toString()
if (selected) {
this.clipboard.copy(selected)
this.showToaster(selected)
}
}
copyText() is binded in the items array. We're using angular clipboard to copy the selected string and just showing a toaster.
To implement this exactly you need several entries in your packages , module.ts. Make sure you go through the primeNg documentation to setup.
Why there is no Paste option ?
On Right click you can get the active element using document.activeElement then we will perform several checks to make sure its a input field and setAttribute value = copiedText.
This document.activeElement goes out of angular and the angular doesn't react to the change we made in activeElement
Lets assume you have only one input where the paste is needed. You can do like this.
But if you have already in the project and have forms all over the pages we have to do a lot of changes to make it work.
The other main thing is paste requires the clipboard history permission which is sensitive and some of the website to be certified may not allow you to access the clipboard history.
So just show a toaster to press the keyboard shortcuts. More information about Paste and Javascript.
Learn more about MDN Paste Event
Learn more about MDN clipboard
If you are here it means you may have enjoyed reading this blog. Just follow me @shrihari and may considering a buttermilk 🥛.
Peace 🕊
Try Our new product for free!
DocsAI - Create AI support agents with your documents in the most affordable price, starts at 0$. Don't need a bot , but need ai help on your docs just upload and start chating !
Using for a company ? Check out our pricing Just contact me for personalized pricing !
Top comments (0)