Adding keyboard shortcut that pushes content to clipboard?

[ryran]

In #6849, Kamil figured out how to add a button that (when clicked) would push content to the clipboard. The relevant part was as simple as:

const newAnchor = document.createElement("a");
newAnchor.dataset.clipboardText = site_url + location.pathname;

It seems this is somehow leveraging clipboard.js which I think is already initialized in mkdocs-material, presumably to handle all the copy-to-clipboard features (code blocks and search).

What I'd like to do is add a keyboard shortcut that pushes content to the clipboard in the same way, but I haven't been able to figure much of anything out. Here's what I tried:

keyboard$.subscribe(function(key) {
  if (key.mode === "global" && key.type === "l") {
    clipboardText = site_url + location.pathname + location.hash;
    key.claim() 
  }
})

It was a shot in the dark based on the newAnchor.dataset.clipboardText part from Kamil, and unsurprisingly, it didn't work. Pressing l leads to Uncaught ReferenceError: clipboardText is not defined in the devtools console.

Any help would be most appreciated.

[alexvoss]

Clipboard.js works declaratively, so what the second line in Kamil's code does is to create a data-clipboard-text attribute on the anchor he created before, which is what clipboard.js picks up. It may be surprising that it is not data-clipboardText but that is because the API does automated camel case to dash notation conversion (wow?).

I could not find anything on how to use keyboard events with clipboard.js. Do you have a UI element that does the clipboard action? Is so, you might be able to trigger it programmatically from your keyboard event handler.

[ryran]

Hi Alexander. Thanks for your time.

Clipboard.js works declaratively, so what the second line in Kamil's code does is to create a data-clipboard-text attribute on the anchor he created before, which is what clipboard.js picks up. It may be surprising that it is not data-clipboardText but that is because the API does automated camel case to dash notation conversion (wow?).

Ahhhhh okay.

Do you have a UI element that does the clipboard action? Is so, you might be able to trigger it programmatically from your keyboard event handler.

Yes, I do! Though I'm not at all sure how to do such a thing. If I just had an example...

EDIT:

Actually I came up with something that almost works.

const site_url = "https://insert site_url here"
const anchor = document.querySelectorAll("a.md-content__button")[0];
const newAnchor = document.createElement("a");
newAnchor.id = "copy-canonical-url-button";
newAnchor.href = location.hash || "#";
newAnchor.classList = anchor.classList;
newAnchor.innerHTML = OCTICONS_LINK_16_SVG;
newAnchor.title = "Copy canonical page URL to clipboard";
newAnchor.dataset.clipboardText = site_url + location.pathname + location.hash;
anchor.parentElement.prepend(newAnchor);

keyboard$.subscribe(function(key) {
  if (key.mode === "global" && key.type === "l") {
    document.getElementById("copy-canonical-url-button").click();
    key.claim()
  }
})

It works in that pressing l triggers the button and copies a URL to the clipboard; however, it doesn't do what I hoped it would do -- that is to say: no matter where I am in the page, the copied link never includes my current location.hash. (I should mention that I of course have anchor tracking enabled.) Reading the code now I think it seems obvious that what's happening is newAnchor.href and newAnchor.dataset.clipboardText are being set only ONCE -- when the button is created at page load. I need a way to set those dynamically on click. Hmmm.

[alexvoss]

You'd have to move the line that sets the clipboardText into the keyboard event handler, no?

[ryran]

OH MY GOARSH! I can't believe it's this simple.

// The following block adds a new button next to the buttons described at https://squidfunk.github.io/mkdocs-material/setup/adding-a-git-repository/#code-actions
// The new button copies the current page URL to clipboard
// Customization required:
//   - this depends on "OCTICONS_LINK_16_SVG", which is set in main.html
//   - this depends on "site_url" from mkdocs.yml

const site_url = "https://insert site_url here"
const anchor = document.querySelectorAll("a.md-content__button")[0];
const newAnchor = document.createElement("a");
newAnchor.id = "copy-canonical-url-button";
newAnchor.href = "#";
newAnchor.classList = anchor.classList;
newAnchor.innerHTML = OCTICONS_LINK_16_SVG;
newAnchor.title = "Copy canonical page URL to clipboard";
newAnchor.dataset.clipboardText = site_url + location.pathname;
anchor.parentElement.prepend(newAnchor);

// The following binds the lowercase "L" key to the above button
// So anywhere on the page, you can press "l" and it will copy the current URL, including the heading
// (Including the heading probably requires you have anchor tracking enabled -- see https://squidfunk.github.io/mkdocs-material/setup/setting-up-navigation/#anchor-tracking)

keyboard$.subscribe(function(key) {
  if (key.mode === "global" && key.type === "l") {
    newAnchor.href = location.hash || "#";
    newAnchor.dataset.clipboardText = site_url + location.pathname + location.hash;
    newAnchor.click();
    key.claim()
  }
})

F'ing brilliant. Thanks for the inspiration @alexvoss 🥇

For posterity: the short version is that you need to set up a button that does the logic of pushing to clipboard and then inside the keyboard event handler you need to trigger that button. In my case above, I had a button element already stored in newAnchor, but a more general approach might be to find a page element by id and trigger its click method in one shot, like: document.getElementById("copy-canonical-url-button").click();

[ryran]

PS: Meta question about ettiquette for you @alexvoss : I'm not sure whether it's appropriate for me to mark the final result (my last comment) as the answer (that's my inclination, in order to help posterity) or whether it's more important to give credit for inspiration & guidance and thus mark your first post as the answer...?

[alexvoss]

It is more important to leave a clearly marked answer that others can use. I am happy I was able to help - and thanks for asking.