The general text copy thing just copies the text without giving nay importance to the styles. Is there any way to copy text without losing it's inherent properties like font family, font size etc. A javascript function would be helpful. Thanks.

CodePudding user response：

Having the right element selected on the HTML DOM tree, right-click on it and choose “Copy” > “Copy styles”.

Source: https://getcssscan.com/blog/how-to-inspect-copy-element-css

CodePudding user response：

You can use Clipboard.write() with both text and html parts:

TS Playground

// This will return the raw HTML, but perhaps you want to do something different,
// for example: recursively embed computed styles:
// https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
function serializeElement (element: Element): string {
  return element.outerHTML;
}

async function copyTextWithStyles (element: Element): Promise<void> {
  const html = serializeElement(element);
  const htmlBlob = new Blob([html], {type: 'text/html'});

  const text = element.textContent ?? '';
  const textBlob = new Blob([text], {type: 'text/plain'});

  const clipboardItem = new ClipboardItem({
      [htmlBlob.type]: htmlBlob,
      [textBlob.type]: textBlob,
  });

  return navigator.clipboard.write([clipboardItem]);
}