Merge remote-tracking branch 'upstream/master' into svg-filter

.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",

docs/development/npm-scripts.md

@@ -3,6 +3,14 @@
 This file documents the scripts available in the [package.json](../../package.json) file.
 Scripts can be executed by running `npm run <name>`.
 
+- `anki:css-json:write`
+
+  Writes Anki structured content styling json for use when sending stuctured content dictionaries to Anki.
+
+  CSS rules are taken from `ext/css/structured-content.css` and converted into json.
+
+  CSS rule overrides and exclusions can be set in `dev/data/structured-content-overrides.css`.
+
 - `bench`
   Runs performance benchmarks.
 

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

@@ -108,6 +108,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';

package.json

@@ -10,6 +10,7 @@
     },
     "type": "module",
     "scripts": {
+        "anki:css-json:write": "node ./dev/bin/generate-css-json.js --dryRun --all",
         "bench": "vitest bench",
         "build": "node ./dev/bin/build.js",
         "build:libs": "node ./dev/bin/build-libs.js",