feat(client): display message when copying code block in text note

apps/client/src/services/clipboard.ts

@@ -4,6 +4,7 @@ import froca from "./froca.js";
 import linkService from "./link.js";
 import utils from "./utils.js";
 import { t } from "./i18n.js";
+import toast from "./toast.js";
 
 let clipboardBranchIds: string[] = [];
 let clipboardMode: string | null = null;
@@ -108,6 +109,21 @@ function isClipboardEmpty() {
     return clipboardBranchIds.length === 0;
 }
 
+export function copyText(text: string) {
+    if (!text) {
+        return;
+    }
+
+    try {
+        if (navigator.clipboard) {
+            navigator.clipboard.writeText(text);
+            toast.showMessage(t("code_block.copy_success"));
+        }
+    } catch (e) {
+        toast.showError(t("code_block.copy_failed"));
+    }
+}
+
 export default {
     pasteAfter,
     pasteInto,

apps/client/src/services/syntax_highlight.ts

@@ -1,8 +1,8 @@
 import { ensureMimeTypes, highlight, highlightAuto, loadTheme, Themes, type AutoHighlightResult, type HighlightResult, type Theme } from "@triliumnext/highlightjs";
 import mime_types from "./mime_types.js";
 import options from "./options.js";
-import toast from "./toast.js";
 import { t } from "./i18n.js";
+import { copyText } from "./clipboard.js";
 
 let highlightingLoaded = false;
 
@@ -37,16 +37,7 @@ export function applyCopyToClipboardButton($codeBlock: JQuery<HTMLElement>) {
     const $copyButton = $("<button>")
         .addClass("bx component btn tn-tool-button bx-copy copy-button")
         .attr("title", t("code_block.copy_title"))
-        .on("click", () => {
-            const text = $codeBlock.text();
-
-            try {
-                navigator.clipboard.writeText(text);
-                toast.showMessage(t("code_block.copy_success"));
-            } catch (e) {
-                toast.showError(t("code_block.copy_failed"));
-            }
-        });
+        .on("click", () => copyText($codeBlock.text()));
     $codeBlock.parent().append($copyButton);
 }
 

apps/client/src/widgets/type_widgets/ckeditor/config.ts

@@ -1,17 +1,19 @@
 import { ALLOWED_PROTOCOLS } from "../../../services/link.js";
 import { MIME_TYPE_AUTO } from "@triliumnext/commons";
+import type { EditorConfig } from "@triliumnext/ckeditor5";
 import { getHighlightJsNameForMime } from "../../../services/mime_types.js";
 import options from "../../../services/options.js";
 import { ensureMimeTypesForHighlighting, isSyntaxHighlightEnabled } from "../../../services/syntax_highlight.js";
 import utils from "../../../services/utils.js";
 import emojiDefinitionsUrl from "@triliumnext/ckeditor5/emoji_definitions/en.json?url";
+import { copyText } from "../../../services/clipboard.js";
 
 const TEXT_FORMATTING_GROUP = {
     label: "Text formatting",
     icon: "text"
 };
 
-export function buildConfig() {
+export function buildConfig(): EditorConfig {
     return {
         image: {
             styles: {
@@ -111,6 +113,9 @@ export function buildConfig() {
             defaultMimeType: MIME_TYPE_AUTO,
             enabled: isSyntaxHighlightEnabled
         },
+        clipboard: {
+            copy: copyText
+        },
         // This value must be kept in sync with the language defined in webpack.config.js.
         language: "en"
     };