Nostalgic Perogi Monogramming
    Wondering what’s next for npm?Check out our public roadmap! »

    clipboard-hook

    2.0.0 • Public • Published

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

    Keywords

    none

    Install

    npm i clipboard-hook

    DownloadsWeekly Downloads

    7

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    69.8 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar