How create link with text and paste it to telegram desktop

Question

Im trying create "copy" button for using clipboard in different apps.

I'm expect that:

1. ctrl+v in simple text editor will create plain text
2. ctrl+v in RTF (or in app with "link" support) will create link

Here is a simplified code example:

const aElement = document.createElement('a');
aElement.href = 'https://stackoverflow.com/';
aElement.innerText = 'stackoverflow link';

const data = [
 new ClipboardItem({
  'text/plain': new Blob([aElement.innerText], {type: 'text/plain'}),
  'text/html': new Blob([aElement.outerHTML], {type: 'text/html'}),
 })
];

navigator.clipboard.write(data);

The example works fine everywhere except the telegram desktop app. I have tried every variation of Blob and ClipboardItem options are known to me.

Also I have tried copying and pasting links created in the telegram desktop and they paste as links everywhere! Structure that I see when I copy the link from the telegram desktop is similar to mine

Here is a simplified debug example:

document.body.onclick = () => window.navigator.clipboard.read()
 .then(r => r[0])
 .then(r => r.types.map(t => r.getType(t).then(b => b.text())))
 .then(r => Promise.all(r))
 .then(p => console.log(p))

What am I doing wrong?

Answer 1

Telegram will not insert text/html from clipboard into messages. You can verify this by entering any html code in the message - it will read it just as text. In your case, a better option would be to do something like this:

const aElement = document.createElement('a');
aElement.href = 'https://stackoverflow.com/';
aElement.innerText = 'stackoverflow link';

const textPlainLink = aElement.innerText + '  ' + aElement.href;

const data = [
 new ClipboardItem({
  'text/plain': new Blob([textPlainLink], {type: 'text/plain'}),
  'text/html': new Blob([aElement.outerHTML], {type: 'text/html'}),
 })
];

navigator.clipboard.write(data);

console.log(textPlainLink)