add canvas properties with a button to copy reference to clipboard which allows inserting canvas as an image into text notes

src/public/app/layouts/desktop_layout.js

@@ -78,6 +78,7 @@ import HideFloatingButtonsButton from "../widgets/floating_buttons/hide_floating
 import ScriptExecutorWidget from "../widgets/ribbon_widgets/script_executor.js";
 import MovePaneButton from "../widgets/buttons/move_pane_button.js";
 import UploadAttachmentsDialog from "../widgets/dialogs/upload_attachments.js";
+import CanvasPropertiesWidget from "../widgets/ribbon_widgets/canvas_properties.js";
 
 export default class DesktopLayout {
     constructor(customWidgets) {
@@ -144,6 +145,7 @@ export default class DesktopLayout {
                                             .ribbon(new NotePropertiesWidget())
                                             .ribbon(new FilePropertiesWidget())
                                             .ribbon(new ImagePropertiesWidget())
+                                            .ribbon(new CanvasPropertiesWidget())
                                             .ribbon(new BasicPropertiesWidget())
                                             .ribbon(new OwnedAttributeListWidget())
                                             .ribbon(new InheritedAttributesWidget())

src/public/app/services/utils.js

@@ -495,6 +495,14 @@ function copyHtmlToClipboard(content) {
     navigator.clipboard.write([clipboardItem]);
 }
 
+/**
+ * @param {FNote} note
+ * @return {string}
+ */
+function createImageSrcUrl(note) {
+    return `api/images/${note.noteId}/${encodeURIComponent(note.title)}?timestamp=${Date.now()}`;
+}
+
 export default {
     reloadFrontendApp,
     parseDate,
@@ -533,5 +541,6 @@ export default {
     sleep,
     escapeRegExp,
     areObjectsEqual,
-    copyHtmlToClipboard
+    copyHtmlToClipboard,
+    createImageSrcUrl
 };

src/public/app/widgets/ribbon_widgets/canvas_properties.js

@@ -0,0 +1,56 @@
+import NoteContextAwareWidget from "../note_context_aware_widget.js";
+import utils from "../../services/utils.js";
+import imageService from "../../services/image.js";
+
+const TPL = `
+<div class="image-properties">
+    <div style="display: flex; justify-content: space-evenly; margin: 10px;">
+        <button class="canvas-copy-reference-to-clipboard btn btn-sm btn-primary" 
+                title="Pasting this reference into a text note will insert the canvas note as image"
+                type="button">Copy reference to clipboard</button>
+    </div>
+    
+    <div class="hidden-canvas-copy"></div>
+</div>`;
+
+export default class CanvasPropertiesWidget extends NoteContextAwareWidget {
+    get name() {
+        return "canvasProperties";
+    }
+
+    get toggleCommand() {
+        return "toggleRibbonTabCanvasProperties";
+    }
+
+    isEnabled() {
+        return this.note && this.note.type === 'canvas';
+    }
+
+    getTitle() {
+        return {
+            show: this.isEnabled(),
+            activate: false,
+            title: 'Canvas',
+            icon: 'bx bx-pen'
+        };
+    }
+
+    doRender() {
+        this.$widget = $(TPL);
+        this.contentSized();
+
+        this.$hiddenCanvasCopy = this.$widget.find('.hidden-canvas-copy');
+
+        this.$copyReferenceToClipboardButton = this.$widget.find(".canvas-copy-reference-to-clipboard");
+        this.$copyReferenceToClipboardButton.on('click', () => {
+            this.$hiddenCanvasCopy.empty().append(
+                $("<img>")
+                    .attr("src", utils.createImageSrcUrl(this.note))
+            );
+
+            imageService.copyImageReferenceToClipboard(this.$hiddenCanvasCopy);
+
+            this.$hiddenCanvasCopy.empty();
+        });
+    }
+}

src/public/app/widgets/ribbon_widgets/image_properties.js

@@ -61,9 +61,13 @@ export default class ImagePropertiesWidget extends NoteContextAwareWidget {
     doRender() {
         this.$widget = $(TPL);
         this.contentSized();
+
         this.$copyReferenceToClipboardButton = this.$widget.find(".image-copy-reference-to-clipboard");
+        this.$copyReferenceToClipboardButton.on('click', () => this.triggerEvent(`copyImageReferenceToClipboard`, {ntxId: this.noteContext.ntxId}));
+
         this.$uploadNewRevisionButton = this.$widget.find(".image-upload-new-revision");
         this.$uploadNewRevisionInput = this.$widget.find(".image-upload-new-revision-input");
+
         this.$fileName = this.$widget.find(".image-filename");
         this.$fileType = this.$widget.find(".image-filetype");
         this.$fileSize = this.$widget.find(".image-filesize");
@@ -74,8 +78,6 @@ export default class ImagePropertiesWidget extends NoteContextAwareWidget {
         this.$imageDownloadButton = this.$widget.find(".image-download");
         this.$imageDownloadButton.on('click', () => openService.downloadFileNote(this.noteId));
 
-        this.$copyReferenceToClipboardButton.on('click', () => this.triggerEvent(`copyImageReferenceToClipboard`, {ntxId: this.noteContext.ntxId}));
-
         this.$uploadNewRevisionButton.on("click", () => {
             this.$uploadNewRevisionInput.trigger("click");
         });

src/public/app/widgets/type_widgets/image.js

@@ -90,7 +90,7 @@ class ImageTypeWidget extends TypeWidget {
     }
 
     async doRefresh(note) {
-        this.$imageView.prop("src", `api/images/${note.noteId}/${encodeURIComponent(note.title)}?timestamp=${Date.now()}`);
+        this.$imageView.prop("src", utils.createImageSrcUrl(note));
     }
 
     copyImageReferenceToClipboardEvent({ntxId}) {