feat: add copied notice for copy button #877#893
Conversation
There was a problem hiding this comment.
thanks for the suggestion! I have noticed a few details; also you can run tests locally (as you can see, prettier is complaining).
i fixed issues and run locally tests. |
| copyButton.innerHTML = '<button title="Copy code" class="observablehq-pre-copy"><span class="observablehq-data-copied">Copied</span><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 6C2 5.44772 2.44772 5 3 5H10C10.5523 5 11 5.44772 11 6V13C11 13.5523 10.5523 14 10 14H3C2.44772 14 2 13.5523 2 13V6Z M4 2.00004L12 2.00001C13.1046 2 14 2.89544 14 4.00001V12"></path></svg></button>'; // prettier-ignore | ||
|
|
||
| enableCopyButtons(); | ||
| const copiedNotice = document.querySelector(".observablehq-data-copied"); |
There was a problem hiding this comment.
I expect copiedNotice is null here because copyButton hasn’t been inserted into the DOM yet. But I also expect you could fix this by saying:
| const copiedNotice = document.querySelector(".observablehq-data-copied"); | |
| const copiedNotice = copyButton.querySelector(".observablehq-data-copied"); |
There was a problem hiding this comment.
For some reason I don't understand, it gives error when I use copyButton instead of document.
I think using currentTarget.firstElementChild.animate instead of querySelector might be a better solution.
There was a problem hiding this comment.
Oh, right, it’s a template element that we haven’t instantiated yet. You’ll need a slightly different fix in the event listener since you can’t capture a reference to the copied notice statically.
There was a problem hiding this comment.
This sets the word "Copied" with css, so it does not become part of the page's textContent. So you can ctrl-A ctrl-C the whole page and not see an old "Copied" text in your clipboard. It will also make it easier when time comes to translate in other languages (#865).
3 participants
I made the notification for the copy button this way, if there is any problem I can fix it.