Fix uncollapse link and clicking on images (#1705)

* Add collapsed image link text

* Prevent collapsed image from being partially hidden when hovering over

* Allow clicking on image node to open in new tab

* Open original media in new tab instead of canvas

* Update tests

* Make eslint happy

.eslintrc.json

@@ -562,6 +562,7 @@
                 "ext/js/core/extension-error.js",
                 "ext/js/core/json.js",
                 "ext/js/data/anki-note-data-creator.js",
+                "ext/js/data/array-buffer-util.js",
                 "ext/js/dictionary/dictionary-data-util.js",
                 "ext/js/display/display-content-manager.js",
                 "ext/js/display/pronunciation-generator.js",

ext/css/display.css

@@ -832,7 +832,6 @@ button.action-button:active {
 .entry {
     padding: var(--entry-vertical-padding) var(--entry-horizontal-padding);
     position: relative;
-    content-visibility: auto;
     contain-intrinsic-height: auto 500px;
 }
 .entry+.entry {

ext/css/structured-content.css

@@ -41,8 +41,6 @@
 }
 .gloss-image-link:hover {
     color: var(--accent-color-dark);
-}
-.gloss-image-link[href]:hover {
     cursor: pointer;
 }
 .gloss-image-container-overlay {

ext/data/structured-content-style.json

@@ -24,12 +24,6 @@
             ["color", "inherit"]
         ]
     },
-    {
-        "selectors": [".gloss-image-link[href]:hover"],
-        "styles": [
-            ["cursor", "pointer"]
-        ]
-    },
     {
         "selectors": [".gloss-image-container-overlay"],
         "styles": [

ext/js/display/display-content-manager.js

@@ -17,6 +17,7 @@
  */
 
 import {EventListenerCollection} from '../core/event-listener-collection.js';
+import {base64ToArrayBuffer} from '../data/array-buffer-util.js';
 
 /**
  * The content manager which is used when generating HTML display content.
@@ -86,6 +87,19 @@ export class DisplayContentManager {
         this._loadMediaRequests = [];
     }
 
+    /**
+     * @param {string} path
+     * @param {string} dictionary
+     * @param {Window} window
+     */
+    async openMediaInTab(path, dictionary, window) {
+        const data = await this._display.application.api.getMedia([{path, dictionary}]);
+        const buffer = base64ToArrayBuffer(data[0].content);
+        const blob = new Blob([buffer], {type: data[0].mediaType});
+        const blobUrl = URL.createObjectURL(blob);
+        window.open(blobUrl, '_blank')?.focus();
+    }
+
     /**
      * @param {MouseEvent} e
      */

ext/js/display/structured-content-generator.js

@@ -107,6 +107,18 @@ export class StructuredContentGenerator {
         const overlay = this._createElement('span', 'gloss-image-container-overlay');
         imageContainer.appendChild(overlay);
 
+        const linkText = this._createElement('span', 'gloss-image-link-text');
+        linkText.textContent = 'Image';
+        node.appendChild(linkText);
+
+        if (this._contentManager instanceof DisplayContentManager) {
+            node.addEventListener('click', () => {
+                if (this._contentManager instanceof DisplayContentManager) {
+                    void this._contentManager.openMediaInTab(path, dictionary, window);
+                }
+            });
+        }
+
         node.dataset.path = path;
         node.dataset.dictionary = dictionary;
         node.dataset.imageLoadState = 'not-loaded';