Use power-up to copy to clipboard on click

Question

I've created a button to take the url of a card and add the relative path to our own url to stop it showing a description when posted to Flock.

Right now it shows the spliced url in a popup which we have to manually copy, the functionality we want is to click the button and have it copy the text.

var GRAY_ICON = 'https://cdn.hyperdev.com/us-east-1%3A3d31b21c-01a0-4da2-8827-4bc6e88b7618%2Ficon-gray.svg';

var onBtnClick = function (t, opts) {
  return t.card("url").then(function (card) {
    var str = JSON.stringify(card, null, 2);
    var parsedURL = JSON.parse(str);
    const url = new URL(parsedURL.url);
    var shortUrl = "Our custom URL" + url.pathname
    updateClipboard(shortUrl); //DOESN'T WORK
    return t.popup({
      title: "Flock Link",
      items: [{
        text: "Our custom URL" + url.pathname //WORKS AND SHOWS IN POPUP
      }]
    });
  }).catch(error => console.log(error));
};

function updateClipboard(newClip) {
  navigator.clipboard.writeText(newClip).then(function () {
    console.log('Success: ' + newClip);
  }, function () {
    console.log('Failed to copy');
  });
} +

window.TrelloPowerUp.initialize({
  'card-buttons': function (t, opts) {
    return [{
      icon: GRAY_ICON,
      text: 'Flock Link',
      callback: onBtnClick,
      condition: 'edit',
      backgroundColor: '#263340',
      color: '#ffffff'
    }, () => {
      console.log('reached');
      var btn = document.querySelector('.button-link[title="Flock Link"]')
      btn.style.backgroundColor = '#263340';
      btn.style.color = '#ffffff';
    }];
  }
});

So, I have tried to remove the t.popup and instead use either navigator.clipboard or document.execCommand as per the docs but I just can't get it to work.

EDIT: Here is the error I get in Firefox's console:

Uncaught (in promise) TypeError: 'clipboard-write' (value of 'name' member of PermissionDescriptor) is not a valid value for enumeration PermissionName.

and in Chrome I don't get an error but this message:

'clipboard permission state is denied'

Which is definitely not true based on the flags.

The second issue is trying to change the colour of the button - this should be super simple but I must be overthinking it as I cannot get any subsequent function or other properties to affect the button in anyway.

Hi. I just copied updateClipboard() and tried it in a plain html + javascript page, it seems to work with no error/warnings. Do you see "Success: "+generate url ? or "Failed to copy" ? — AntiqTech, Feb 07 '21 at 21:21
That's the crux of the issue, the code does work, but in the context of a Trello Power-Up it doesn't. It seems to be a permissions issue: Uncaught (in promise) TypeError: 'clipboard-write' (value of 'name' member of PermissionDescriptor) is not a valid value for enumeration PermissionName. — JonHerbert, Feb 08 '21 at 08:40
Here https://stackoverflow.com/a/17528590/6430256 ; In one of the answers , poster says he was part of coding team and he explains that trello does not actually access clipboard. This may explain the error you are getting. You may be not meant to use "navigator.clipboard.writeText" because it not possible from within trello. He shares a code that shows how to perform "ctrl+c" to skirt around this issue, that they used inside trello. Maybe it will be useful to you. — AntiqTech, Feb 08 '21 at 09:05

Use power-up to copy to clipboard on click

0 Answers0