-
-
Save swanson/d4c4e9cde0ecd154711c836652b35001 to your computer and use it in GitHub Desktop.
| import { Controller } from "stimulus"; | |
| export default class extends Controller { | |
| static targets = ["source"]; | |
| copy() { | |
| const range = document.createRange(); | |
| window.getSelection().removeAllRanges(); | |
| this.sourceTarget.classList.remove("hidden"); | |
| range.selectNode(this.sourceTarget); | |
| window.getSelection().addRange(range); | |
| document.execCommand("copy"); | |
| this.sourceTarget.classList.add("hidden"); | |
| window.getSelection().removeAllRanges(); | |
| } | |
| } |
| %div(data-controller="copy-html") | |
| %button.btn-teal(data-action="copy-html#copy") | |
| Copy | |
| .hidden(data-copy-html-target="source") | |
| %div(style="background: white; font-size: 11pt; font-family: Calibri; color: black;") | |
| %br | |
| %b(style="border: none;") Recent Changes | |
| %br | |
| %table(style="width: 800px") | |
| %thead | |
| %tr(style="font-weight: bold; color: white; background: #9F5B94; text-align: center;") | |
| %td(style="border: 1.5pt solid black;") | |
| Author | |
| %td(style="border: 1.5pt solid black;") | |
| Comments | |
| %tbody | |
| - @changes.each do |change| | |
| %tr(style="background: white;") | |
| %td(style="width: 200px; border: 1.5pt solid black; padding: 2px 10px") | |
| = change.author.display_name | |
| %td(style="border: 1.5pt solid black; padding: 2px 10px") | |
| %ul | |
| - change.comments.each do |c| | |
| %li(style="border: none; margin: 0;")= c | |
| %br |
Wouldn't this code copy the outer <div data-copy-html-target="source"></div> as well? It seems like the whole virtual selection step could be skipped with a line like await navigator.clipboard.writeText(this.sourceTarget.innerHTML);, which would leave cleaner clipboard output since the root of the copied content would be the styled %div. innerHTML also works if the target is hidden, so you don't have to mess with classes at all.
Wouldn't this code copy the outer
<div data-copy-html-target="source"></div>as well? It seems like the whole virtual selection step could be skipped with a line likeawait navigator.clipboard.writeText(this.sourceTarget.innerHTML);, which would leave cleaner clipboard output since the root of the copied content would be the styled%div.innerHTMLalso works if the target is hidden, so you don't have to mess with classes at all.
oh nice, I will have to explore that. definitely didn't intend for that outer div to be copied.
Async clipboard API alternative.