Copy response text as both plain text and rich HTML

package.json

@@ -30,8 +30,10 @@
     "@patternfly/react-icons": "6.4.0",
     "copy-webpack-plugin": "14.0.0",
     "css-loader": "^7.1.4",
+    "dompurify": "3.4.0",
     "js-yaml": "^4.1.1",
     "lodash": "^4.18.1",
+    "marked": "14.0.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-i18next": "11.18.6",
@@ -67,6 +69,7 @@
     "webpack-dev-server": "5.2.3"
   },
   "overrides": {
+    "dompurify": "3.4.0",
     "monaco-editor": "0.55.1",
     "react": "17.0.2",
     "react-dom": "17.0.2"

src/clipboard.ts

@@ -1,8 +1,33 @@
-export const copyToClipboard = (value: string): void => {
+import DOMPurify from 'dompurify';
+import { marked } from 'marked';
+
+const supportsHtmlClipboard = (): boolean =>
+  typeof ClipboardItem !== 'undefined' &&
+  typeof ClipboardItem.supports === 'function' &&
+  ClipboardItem.supports('text/html');
+
+export const copyToClipboard = async (value: string): Promise<void> => {
   try {
-    navigator.clipboard.writeText(value);
+    if (typeof ClipboardItem !== 'undefined' && navigator.clipboard?.write) {
+      const blobs: Record<string, Blob> = {
+        'text/plain': new Blob([value], { type: 'text/plain' }),
+      };
+      if (supportsHtmlClipboard()) {
+        const html = DOMPurify.sanitize(marked.parse(value) as string);
+        blobs['text/html'] = new Blob([html], { type: 'text/html' });
+      }
+      await navigator.clipboard.write([new ClipboardItem(blobs)]);
+    } else {
+      await navigator.clipboard.writeText(value);
+    }
   } catch (err) {
     // eslint-disable-next-line no-console
-    console.error('Failed to copy to clipboard: ', err);
+    console.warn('Rich clipboard write failed, falling back to plain text: ', err);
+    try {
+      await navigator.clipboard.writeText(value);
+    } catch (fallbackErr) {
+      // eslint-disable-next-line no-console
+      console.error('Failed to copy to clipboard: ', fallbackErr);
+    }
   }
 };

tsconfig.json

@@ -10,7 +10,8 @@
     "noImplicitAny": false,
     "strictNullChecks": false,
     "noUnusedLocals": true,
-    "sourceMap": false
+    "sourceMap": false,
+    "allowSyntheticDefaultImports": true
   },
   "include": ["src", "types.d.ts"]
 }