Merge pull request #19 from sanderboom/image-preview

Add image-preview script.

image-preview/image-preview.qml

@@ -0,0 +1,85 @@
+import QtQml 2.0
+
+QtObject {
+    property int maxWidth;
+
+    property variant settingsVariables: [{
+        "identifier": "maxWidth",
+        "name": "Max width for image preview",
+        "description": "Note that when the original image width is unknown (e.g. when using Markdown-it), images with a smaller width than this setting will be blown-up. This can not be prevented right now.",
+        "type": "integer",
+        "default": "640",
+    }];
+
+    /**
+     * This function is called when the markdown html of a note is generated
+     *
+     * It allows you to modify this html
+     * This is for example called before by the note preview
+     *
+     * @param {Note} note - the note object
+     * @param {string} html - the html that is about to being rendered
+     * @return {string} the modfied html or an empty string if nothing should be modified
+     */
+    function noteToMarkdownHtmlHook(note, html) {
+        /**
+         * This script does two things:
+         * 1) Display the image with an user defined width;
+         * 2) Wrap the image in an anchor tag that links to the full size image.
+         * TODO: do not resize the image when it does not have a width attribute
+         * AND is smaller than the maxWidth. Wrapping an image in a table with
+         * `<td width="640">` does not work.
+         */
+        html = html.replace(/<img(?:.[^>]*)/g, handleImg);
+
+        // script.log(html);
+        return html;
+    }
+
+    /**
+     * Handle image.
+     * @param imgTag
+     * @returns {string}
+     */
+    function handleImg(imgTag) {
+        var src = getImgSrc(imgTag);
+        imgTag = handleWidth(imgTag);
+        return '<a href="' + src + '">' + imgTag + '></a';
+    }
+
+    /**
+     * Handle width attribute.
+     * @param imgTag
+     * @returns {*}
+     */
+    function handleWidth(imgTag) {
+        // Check if the img tag has a width attribute set.
+        var widthMatch = /(?:width=")(.[^"]*)/g.exec(imgTag);
+        // If the width attribute is larger than maxWidth, change.
+        if (widthMatch) {
+            var width = widthMatch[1];
+            if (width > maxWidth) {
+                imgTag = imgTag.replace(widthMatch[0], 'width="' + maxWidth);
+            }
+        }
+        // No width attribute, add one.
+        // TODO: blows up the image when original is smaller than maxWidth.
+        // This occurs when using Markdown-it for example.
+        else {
+            imgTag = imgTag.replace('<img', '<img width="' + maxWidth + '" ');
+        }
+
+        return imgTag;
+    }
+
+    /**
+     * Get image src attribute.
+     * @param imgTag
+     * @returns {string}
+     */
+    function getImgSrc(imgTag) {
+        var srcMatch = /(?:src=")(.[^"]*)/g.exec(imgTag);
+        var src = srcMatch[1];
+        return src;
+    }
+}

image-preview/info.json

@@ -0,0 +1,9 @@
+{
+  "name": "Image preview",
+  "identifier": "image-preview",
+  "script": "image-preview.qml",
+  "version": "1.0.0",
+  "minAppVersion": "17.11.6",
+  "authors": ["@sanderboom"],
+  "description" : "This script does two things: 1) Display the image with an user defined width; 2) Wrap the image in an anchor tag that links to the full size image."
+}