From 44af431a93cb6b957fef384d8d9154e89a1f3cc7 Mon Sep 17 00:00:00 2001
From: zadam <adam.zivner@gmail.com>
Date: Sun, 11 Apr 2021 22:24:21 +0200
Subject: [PATCH] ctrl + click / middle click now opens image in a text note in
 a new tab

---
 .../type_widgets/abstract_text_type_widget.js | 47 ++++++++++++++-----
 .../app/widgets/type_widgets/editable_text.js |  2 +
 .../widgets/type_widgets/read_only_text.js    |  3 ++
 3 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/src/public/app/widgets/type_widgets/abstract_text_type_widget.js b/src/public/app/widgets/type_widgets/abstract_text_type_widget.js
index dbb44fcf8..d4ca8c4c8 100644
--- a/src/public/app/widgets/type_widgets/abstract_text_type_widget.js
+++ b/src/public/app/widgets/type_widgets/abstract_text_type_widget.js
@@ -5,24 +5,47 @@ import linkService from "../../services/link.js";
 import noteContentRenderer from "../../services/note_content_renderer.js";
 
 export default class AbstractTextTypeWidget extends TypeWidget {
-    doRender() {
-        this.$widget.on("dblclick", "img", e => {
-            const $img = $(e.target);
-            const src = $img.prop("src");
+    setupImageOpening(singleClickOpens) {
+        this.$widget.on("dblclick", "img", e => this.openImageInCurrentTab($(e.target)));
 
-            const match = src.match(/\/api\/images\/([A-Za-z0-9]+)\//);
-
-            if (match) {
-                const noteId = match[1];
-
-                appContext.tabManager.getActiveTabContext().setNote(noteId);
+        this.$widget.on("click", "img", e => {
+            if ((e.which === 1 && e.ctrlKey) || e.which === 2) {
+                this.openImageInNewTab($(e.target));
             }
-            else {
-                window.open(src, '_blank');
+            else if (e.which === 1 && singleClickOpens) {
+                this.openImageInCurrentTab($(e.target));
             }
         });
     }
 
+    openImageInCurrentTab($img) {
+        const imgSrc = $img.prop("src");
+        const noteId = this.getNoteIdFromImage(imgSrc);
+
+        if (noteId) {
+            appContext.tabManager.getActiveTabContext().setNote(noteId);
+        } else {
+            window.open(imgSrc, '_blank');
+        }
+    }
+
+    openImageInNewTab($img) {
+        const imgSrc = $img.prop("src");
+        const noteId = this.getNoteIdFromImage(imgSrc);
+
+        if (noteId) {
+            appContext.tabManager.openTabWithNoteWithHoisting(noteId);
+        } else {
+            window.open(imgSrc, '_blank');
+        }
+    }
+
+    getNoteIdFromImage(imgSrc) {
+        const match = imgSrc.match(/\/api\/images\/([A-Za-z0-9]+)\//);
+
+        return match ? match[1] : null;
+    }
+
     async loadIncludedNote(noteId, $el) {
         const note = await treeCache.getNote(noteId);
 
diff --git a/src/public/app/widgets/type_widgets/editable_text.js b/src/public/app/widgets/type_widgets/editable_text.js
index e08a56eca..876272eb7 100644
--- a/src/public/app/widgets/type_widgets/editable_text.js
+++ b/src/public/app/widgets/type_widgets/editable_text.js
@@ -84,6 +84,8 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
 
         keyboardActionService.setupActionsForElement('text-detail', this.$widget, this);
 
+        this.setupImageOpening(false);
+
         super.doRender();
     }
 
diff --git a/src/public/app/widgets/type_widgets/read_only_text.js b/src/public/app/widgets/type_widgets/read_only_text.js
index 2cad35799..35c953258 100644
--- a/src/public/app/widgets/type_widgets/read_only_text.js
+++ b/src/public/app/widgets/type_widgets/read_only_text.js
@@ -34,6 +34,7 @@ const TPL = `
     
     .note-detail-readonly-text img {
         max-width: 100%;
+        cursor: pointer;
     }
     
     .edit-text-note-container {
@@ -66,6 +67,8 @@ export default class ReadOnlyTextTypeWidget extends AbstractTextTypeWidget {
             this.triggerEvent('textPreviewDisabled', {tabContext: this.tabContext});
         });
 
+        this.setupImageOpening(true);
+
         super.doRender();
     }