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

apps/client/src/services/content_renderer.ts

@@ -9,7 +9,7 @@ import treeService from "./tree.js";
 import FNote from "../entities/fnote.js";
 import FAttachment from "../entities/fattachment.js";
 import imageContextMenuService from "../menus/image_context_menu.js";
-import { applySingleBlockSyntaxHighlight, applySyntaxHighlight } from "./syntax_highlight.js";
+import { applySingleBlockSyntaxHighlight, formatCodeBlocks } from "./syntax_highlight.js";
 import { loadElkIfNeeded, postprocessMermaidSvg } from "./mermaid.js";
 import renderDoc from "./doc_renderer.js";
 import { t } from "../services/i18n.js";
@@ -106,7 +106,7 @@ async function renderText(note: FNote | FAttachment, $renderedContent: JQuery<HT
             await linkService.loadReferenceLinkTitle($(el));
         }
 
-        await applySyntaxHighlight($renderedContent);
+        await formatCodeBlocks($renderedContent);
     } else if (note instanceof FNote) {
         await renderChildrenList($renderedContent, note);
     }

apps/client/src/services/doc_renderer.ts

@@ -1,6 +1,6 @@
 import type FNote from "../entities/fnote.js";
 import { getCurrentLanguage } from "./i18n.js";
-import { applySyntaxHighlight } from "./syntax_highlight.js";
+import { formatCodeBlocks } from "./syntax_highlight.js";
 
 export default function renderDoc(note: FNote) {
     return new Promise<JQuery<HTMLElement>>((resolve) => {
@@ -41,7 +41,7 @@ function processContent(url: string, $content: JQuery<HTMLElement>) {
         $img.attr("src", dir + "/" + $img.attr("src"));
     });
 
-    applySyntaxHighlight($content);
+    formatCodeBlocks($content);
 }
 
 function getUrl(docNameValue: string, language: string) {

apps/client/src/services/syntax_highlight.ts

@@ -6,15 +6,15 @@ 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();
+    }
 
     const codeBlocks = $container.find("pre code");
     for (const codeBlock of codeBlocks) {
@@ -23,9 +23,19 @@ export async function applySyntaxHighlight($container: JQuery<HTMLElement>) {
             continue;
         }
 
+        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.

apps/client/src/stylesheets/style.css

@@ -529,6 +529,26 @@ pre:not(.hljs) {
     font-size: 100%;
 }
 
+pre {
+    position: relative;
+}
+
+pre > button.copy-button {
+    position: absolute;
+    top: 1em;
+    right: 1em;
+    opacity: 0.8;    
+}
+
+pre > button.copy-button:hover {
+    color: inherit !important;
+    opacity: 1;
+}
+
+pre > button.copy-button:active {
+    background-color: unset !important;
+}
+
 .pointer {
     cursor: pointer;
 }

apps/client/src/widgets/llm_chat/llm_chat_panel.ts

@@ -12,7 +12,7 @@ import { createChatSession, checkSessionExists, setupStreamingResponse, getDirec
 import { extractInChatToolSteps } from "./message_processor.js";
 import { validateEmbeddingProviders } from "./validation.js";
 import type { MessageData, ToolExecutionStep, ChatData } from "./types.js";
-import { applySyntaxHighlight } from "../../services/syntax_highlight.js";
+import { formatCodeBlocks } from "../../services/syntax_highlight.js";
 
 import "../../stylesheets/llm_chat.css";
 
@@ -925,7 +925,7 @@ export default class LlmChatPanel extends BasicWidget {
 
         // Apply syntax highlighting if this is the final update
         if (isDone) {
-            applySyntaxHighlight($(assistantMessageEl as HTMLElement));
+            formatCodeBlocks($(assistantMessageEl as HTMLElement));
 
             // Update message in the data model for storage
             // Find the last assistant message to update, or add a new one if none exists

apps/client/src/widgets/llm_chat/utils.ts

@@ -2,7 +2,7 @@
  * Utility functions for LLM Chat
  */
 import { marked } from "marked";
-import { applySyntaxHighlight } from "../../services/syntax_highlight.js";
+import { formatCodeBlocks } from "../../services/syntax_highlight.js";
 
 /**
  * Format markdown content for display
@@ -62,7 +62,7 @@ export function escapeHtml(text: string): string {
  * Apply syntax highlighting to content
  */
 export function applyHighlighting(element: HTMLElement): void {
-    applySyntaxHighlight($(element));
+    formatCodeBlocks($(element));
 }
 
 /**

apps/client/src/widgets/type_widgets/read_only_text.ts

@@ -1,5 +1,5 @@
 import AbstractTextTypeWidget from "./abstract_text_type_widget.js";
-import { applySyntaxHighlight } from "../../services/syntax_highlight.js";
+import { formatCodeBlocks } from "../../services/syntax_highlight.js";
 import type FNote from "../../entities/fnote.js";
 import type { CommandListenerData, EventData } from "../../components/app_context.js";
 import { getLocaleById } from "../../services/i18n.js";
@@ -125,7 +125,7 @@ export default class ReadOnlyTextTypeWidget extends AbstractTextTypeWidget {
         }
 
         await this.#applyInlineMermaid();
-        await applySyntaxHighlight(this.$content);
+        await formatCodeBlocks(this.$content);
     }
 
     async #applyInlineMermaid() {