clipboard-hook
Advanced tools
Adding a hook mechanism on OS native clipboard event (e.g. copy/cut/paste).
<!DOCTYPE html>
<html>
<head>
<style>
#container .black { background-color: black; color: white; }
#container .red { background-color: red; color: white; }
#container .blue { background-color: blue; color: white; }
#container .yellow { background-color: yellow; color: black; }
</style>
</head>
<body>
<ul id="container">
<li class="blue" tabIndex="0">Sky</li>
<li class="red" tabIndex="0">Blood</li>
<li class="yellow" tabIndex="0">Banana</li>
</ul>
<script src="app.js"></script>
</body>
</html>
import Clipboard from 'clipboard-hook';
const clipboard = new Clipboard();
const el = document.getElementById('container');
el.addEventListener('keydown', (e) => {
// Pass the keydown event to detect OS native keyboard shortcut event
const itemEl = e.target;
clipboard.handleKeyDownEvent(e, itemEl);
});
// Called when Ctrl(Command)+C or Ctrl(Command)+X key is pressed
clipboard.on('copy', (itemEl) => {
// textData is a serialized expression of the copying data,
// and which will be actually copied to OS clipboard.
var textData = itemEl.textContent;
var data = { name: textData, color: itemEl.className };
// set structured data to be copied to clipboard for future clipboard access.
// must be called synchronously inside of this handler.
clipboard.set({ data, textData });
});
// Called when Ctrl(Command)+X or DEL key is pressed
clipboard.on('delete', (itemEl) => {
itemEl.parentNode.removeChild(itemEl);
});
// Called when Ctrl(Command)+V key is pressed
clipboard.on('paste', ({ data, textData }, itemEl) => {
var newItemEl = itemEl.cloneNode(true);
if (data) {
// if structured data is available, previous copy hook is working.
newItemEl.textContent = data.name;
newItemEl.className = data.color;
} else {
// if there is no structured data, OS clipboard value is directly pasted.
// you can parse the textData value or ignore it.
newItemEl.textContent = textData;
newItemEl.className = 'black';
}
itemEl.parentNode.insertBefore(newItemEl, itemEl.nextSibling);
});
FAQs
Add hook mechanism on native clipboard cupt/copy/paste event
The npm package clipboard-hook receives a total of 2 weekly downloads. As such, clipboard-hook popularity was classified as not popular.
We found that clipboard-hook demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Biden's executive order pushes for AI-driven cybersecurity, software supply chain transparency, and stronger protections for federal and open source systems.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.