Modify formatting of a copied selection using Typescript

Issue

I want any copies made from a div to be modified, omitting any background formatting information in the clipboard. Here's the code I've got, in essence:

$('#selected-div').off('copy').on('copy', () => {
   var selectedContent = document.getSelection();
   // modify the formatting of selectedContent to omit any background styling
   navigator.clipboard.write(selectedContent);
});

I'm struggling to interpret the documentation for the Selection object type and can't figure out how to access/modify the formatting. What could I use in place of the comment above to achieve the desired result? I want to leave in place any non-background-related formatting if such exists.

I'm also unsure the clipboard.write() function is even viable. My development studio is reporting an error claiming that 'write' is not a property of type 'Clipboard', and some research seems to indicate that this function is not universally supported. I can get writeText to work reliably, but I do need the copied text to be associated with any non-background formatting rules of the selection. Is there any better function to use for copying Selection objects to the clipboard?

Solution

It is possible to set html content into the clipboard. This is what happens when a user copies text from a website. You can see exactly what gets copied to clipboard by pasting into this tool: https://evercoder.github.io/clipboard-inspector/

For example, if I copy the first phrase of your question and paste it in, I get this:

Based on that output, you can do something like this to format copied text differently than what's seen on the screen:

const style = "color: rgb(0, 255, 0); font-family: -apple-system, BlinkMacSystemFont, \";Segoe UI\", \"Liberation Sans\", sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(80, 80, 100); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;";

document.querySelector(".text")
  .addEventListener("copy", event => {
    const text = document.getSelection().toString();
    const span = document.createElement("span");
    span.setAttribute("style", style);
    span.innerText = text;
    event.clipboardData.setData("text/html", span.outerHTML);
    event.preventDefault();
  });

.text {
  background: #333;
  color: #fff;
  padding: 1rem;
}

<div class="text">
  Distinctio sint odit debitis possimus esse dolorem officiis ipsa. Laboriosam repellendus deleniti voluptates similique. Nesciunt eos eius dolorum consequatur labore mollitia cum. Qui cumque amet ut quia ipsam dolore eos. Quaerat aperiam enim quasi nihil.
</div>

You'll need to play with it some to get exactly what you want, and you're always going to subject to the whims of the application you are pasting into. Some combinations of background/foreground I tried were not accepted by Word, for example. It would just change it to more normal colors on paste. So I don't think this is ever going to be rock-solid, but it might work for what you need.

Answered By - Instance Hunter