feat(text): click to copy inline code in read-only text

apps/client/src/services/syntax_highlight.ts

@@ -33,6 +33,14 @@ export async function formatCodeBlocks($container: JQuery<HTMLElement>) {
             applySingleBlockSyntaxHighlight($(codeBlock), normalizedMimeType);
         }
     }
+
+    // Add click-to-copy for inline code (code elements not inside pre)
+    if (glob.device !== "print") {
+        const inlineCodeElements = $container.find("code:not(pre code)");
+        for (const inlineCode of inlineCodeElements) {
+            applyInlineCodeCopy($(inlineCode));
+        }
+    }
 }
 
 export function applyCopyToClipboardButton($codeBlock: JQuery<HTMLElement>) {
@@ -51,6 +59,22 @@ export function applyCopyToClipboardButton($codeBlock: JQuery<HTMLElement>) {
     $codeBlock.parent().append($copyButton);
 }
 
+export function applyInlineCodeCopy($inlineCode: JQuery<HTMLElement>) {
+    $inlineCode
+        .addClass("copyable-inline-code")
+        .attr("title", t("code_block.click_to_copy"))
+        .on("click", (e) => {
+            e.stopPropagation();
+
+            const text = $inlineCode.text();
+            if (!isShare) {
+                copyTextWithToast(text);
+            } else {
+                copyText(text);
+            }
+        });
+}
+
 /**
  * Applies syntax highlight to the given code block (assumed to be <pre><code>), using highlight.js.
  */

apps/client/src/translations/en/translation.json

@@ -1876,7 +1876,8 @@
     "theme_none": "No syntax highlighting",
     "theme_group_light": "Light themes",
     "theme_group_dark": "Dark themes",
-    "copy_title": "Copy to clipboard"
+    "copy_title": "Copy to clipboard",
+    "click_to_copy": "Click to copy"
   },
   "classic_editor_toolbar": {
     "title": "Formatting"

apps/client/src/widgets/type_widgets/text/ReadOnlyText.css

@@ -55,4 +55,14 @@ body.mobile .note-detail-readonly-text {
 
 .edit-text-note-button:hover {
     border-color: var(--button-border-color);
+}
+
+/* Inline code click-to-copy */
+.note-detail-readonly-text-content code.copyable-inline-code {
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+}
+
+.note-detail-readonly-text-content code.copyable-inline-code:hover {
+    background-color: var(--accented-background-color);
 }