Skip to content

Add hook mechanism on native clipboard cupt/copy/paste event

Notifications You must be signed in to change notification settings

stomita/clipboard-hook

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

38 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Clipboard Hook

Build Status

Adding a hook mechanism on OS native clipboard event (e.g. copy/cut/paste).

Usage

<!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);
});

About

Add hook mechanism on native clipboard cupt/copy/paste event

Resources

Stars

Watchers

Forks

Packages

No packages published