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", () => {
+        .on("click", () => copyText($codeBlock.text()));
-            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"));
-            }
-        });
     $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"
     };

packages/ckeditor5/src/augmentation.ts

@@ -28,4 +28,17 @@ declare module "ckeditor5" {
         getSelectedHtml(): string;
         removeSelection(): Promise<void>;
     }
+
+    interface EditorConfig {
+        syntaxHighlighting: {
+            loadHighlightJs: () => Promise<any>;
+            mapLanguageName(mimeType: string): string;
+            defaultMimeType: string;
+            enabled: boolean;
+        },
+
+        clipboard?: {
+            copy(text: string): void;
+        }
+    }
 }

packages/ckeditor5/src/plugins/copy_to_clipboard_button.ts

@@ -27,11 +27,17 @@ export default class CopyToClipboardButton extends Plugin {
 
 export class CopyToClipboardCommand extends Command {
 
+    private executeCallback?: (text: string) => void;
+
     execute(...args: Array<unknown>) {
         const editor = this.editor;
         const model = editor.model;
         const selection = model.document.selection;
 
+        if (!this.executeCallback) {
+            this.executeCallback = this.editor.config.get("clipboard")?.copy;
+        }
+
         const codeBlockEl = selection.getFirstPosition()?.findAncestor("codeBlock");
         if (!codeBlockEl) {
             console.warn("Unable to find code block element to copy from.");
@@ -43,11 +49,15 @@ export class CopyToClipboardCommand extends Command {
             .join("");
 
         if (codeText) {
-            navigator.clipboard.writeText(codeText).then(() => {
+            if (!this.executeCallback) {
-                console.log('Code block copied to clipboard');
+                navigator.clipboard.writeText(codeText).then(() => {
-            }).catch(err => {
+                    console.log('Code block copied to clipboard');
-                console.error('Failed to copy code block', err);
+                }).catch(err => {
-            });
+                    console.error('Failed to copy code block', err);
+                });
+            } else {
+                this.executeCallback(codeText);
+            }
         } else {
             console.warn('No code block selected or found.');
         }