feat(client): add a copy button to read-only text

apps/client/src/services/syntax_highlight.ts

@@ -6,16 +6,16 @@ let highlightingLoaded = false;
 
 /**
  * Identifies all the code blocks (as `pre code`) under the specified hierarchy and uses the highlight.js library to obtain the highlighted text which is then applied on to the code blocks.
+ * Additionally, adds a "Copy to clipboard" button.
  *
  * @param $container the container under which to look for code blocks and to apply syntax highlighting to them.
  */
-export async function applySyntaxHighlight($container: JQuery<HTMLElement>) {
-    if (!isSyntaxHighlightEnabled()) {
-        return;
+export async function formatCodeBlocks($container: JQuery<HTMLElement>) {
+    const syntaxHighlightingEnabled = isSyntaxHighlightEnabled();
+    if (syntaxHighlightingEnabled) {
+        await ensureMimeTypesForHighlighting();
     }
 
-    await ensureMimeTypesForHighlighting();
-
     const codeBlocks = $container.find("pre code");
     for (const codeBlock of codeBlocks) {
         const normalizedMimeType = extractLanguageFromClassList(codeBlock);
@@ -23,10 +23,20 @@ export async function applySyntaxHighlight($container: JQuery<HTMLElement>) {
             continue;
         }
 
-        applySingleBlockSyntaxHighlight($(codeBlock), normalizedMimeType);
+        applyCopyToClipboardButton($(codeBlock));
+
+        if (syntaxHighlightingEnabled) {
+            applySingleBlockSyntaxHighlight($(codeBlock), normalizedMimeType);
+        }
     }
 }
 
+export function applyCopyToClipboardButton($codeBlock: JQuery<HTMLElement>) {
+    const $copyButton = $("<button>")
+        .addClass("bx component btn tn-tool-button bx-copy copy-button");
+    $codeBlock.parent().append($copyButton);
+}
+
 /**
  * Applies syntax highlight to the given code block (assumed to be <pre><code>), using highlight.js.
  */