Merge pull request #149 from kommitters/v2.2

Release v2.2.0 (06.09.2024)

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## 2.2.0 (06.09.2024)
+* Add the ability to modify the quality and dimensions of selected images by adding parameters to the image URL in the Unsplash element configuration, in accordance with the Unsplash API. See [PR #147](https://github.com/kommitters/editorjs-inline-image/pull/147)
+
 ## 2.1.1 (25.04.2024)
 * Add stale issues policy. See [PR #140](https://github.com/kommitters/editorjs-inline-image/pull/140)
 

README.md

@@ -6,11 +6,7 @@
 [![OpenSSF Best Practices](https://bestpractices.coreinfrastructure.org/projects/6469/badge)](https://bestpractices.coreinfrastructure.org/projects/6469)
 [![OpenSSF Scorecard](https://api.securityscorecards.dev/projects/github.com/kommitters/editorjs-inline-image/badge)](https://api.securityscorecards.dev/projects/github.com/kommitters/editorjs-inline-image)
 
-
-Image tool for [Editor.js](https://editorjs.io).
-
-Embed images from [Unsplash](https://unsplash.com/), blob or URLs.
-
+Image tool for [Editor.js](https://editorjs.io) that enables you to embed images from [Unsplash](https://unsplash.com/), blobs, or URLs directly into your content.
 ![](assets/demo.gif)
 
 ## Notes
@@ -23,6 +19,8 @@ Extends the functionality of [simple-image](https://github.com/editor-js/simple-
 
 ## Installation
 
+You can install the tool via npm or load it from a CDN.
+
 ### Install via NPM
 Get the package
 ```shell
@@ -63,6 +61,10 @@ const editor = EditorJS({
             appName: 'your_app_name',
             apiUrl: 'https://your-proxy-api-url.com',
             maxResults: 30,
+            imageParams: {
+              q:85,
+              w:1500,
+            }
           }
         }
       }
@@ -75,7 +77,7 @@ const editor = EditorJS({
 | Field          | Type      | Description                     |
 | -------------- | --------- | ------------------------------- |
 | embed          | `{display: boolean}` | You could display or not the embed tab, If you don't fill the embed config by default the value is set on `true`. |
-| unsplash       | `{appName: string, apiUrl: string, maxResults: string}`  | Config for **Unsplash API**. Contains 3 fields: <br><br> **appName**: Unsplash `Application Name`. <br><br> **apiUrl**: URL of the Proxy for Unsplash API. <br><br> **maxResults**: Max number of images per search (default 30). |
+| unsplash       | `{appName: string, apiUrl: string, maxResults: Number, imageParams: Object}`  | Config for **Unsplash API**. Contains 3 fields: <br><br> **appName**: Unsplash `Application Name`. <br><br> **apiUrl**: URL of the Proxy for Unsplash API. <br><br> **maxResults**: Max number of images per search (default 30). <br><br> **imageParams**: Additional configuration parameters for image quality and dimensions. See [Dynamically resizable images](https://unsplash.com/documentation#dynamically-resizable-images) for more information. |
 
 ## Tool's tunes
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "editorjs-inline-image",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "keywords": [
     "tool",
     "image",

src/controlPanel.js

@@ -292,7 +292,7 @@ export default class ControlPanel {
     url, author, profileLink, downloadLocation,
   }) {
     this.onSelectImage({
-      url,
+      url: this.unsplashClient.dynamicImageResizing(url),
       unsplash: {
         author,
         profileLink,

src/unsplashClient.js

@@ -8,6 +8,7 @@ export default class UnsplashClient {
     // Remove trailing slashes from the URL
     this.apiUrl = config && config.apiUrl.replace(/\/+$/, '');
     this.perPage = config && config.maxResults ? config.maxResults : 30;
+    this.imageParamsModifier = config && config.imageParams ? config.imageParams : {};
   }
 
   /**
@@ -56,6 +57,22 @@ export default class UnsplashClient {
     };
   }
 
+  /**
+   * Applies image resize parameters on the given URL.
+   * https://unsplash.com/documentation#dynamically-resizable-images
+   * @param {String} imageUrl Url of the selected image
+   * @returns Url of the selected image with dynamic resizing parameters
+   */
+  dynamicImageResizing(imageUrl) {
+    const newParams = Object.entries(this.imageParamsModifier);
+    const [urlBase, queryString] = imageUrl.split('?');
+    const existingParams = new URLSearchParams(queryString);
+    newParams.forEach(([key, value]) => {
+      existingParams.set(key, value);
+    });
+    return `${urlBase}?${existingParams.toString()}`;
+  }
+
   /**
   * Download image from Unsplash
   * Required by Unsplash API Guideline for tracking purposes

test/fixtures/unsplashClient.js

@@ -4,6 +4,11 @@ const unsplashConfig = {
   apiUrl: 'http://localhost',
   appName: 'DemoApp',
   maxResults: 30,
+  imageParams: {
+    q: 90,
+    w: 1500,
+    fit: 'max',
+  },
 };
 
 /**

test/unsplashClient.test.js

@@ -64,4 +64,26 @@ describe('UnsplashClient', () => {
       });
     });
   });
+  describe('modification of parameters of the selected image', () => {
+    beforeEach(() => {
+      unsplashClient = createUnsplashClient();
+    });
+    it('add new parameters to URL without existing parameters', () => {
+      const inputUrl = 'https://example.com/image.jpg?ixid=M3w2NTA0MjJ8MHwxfHNlYXJjaHwxfHxjYXR8ZW58MHx8fHwxNzI1NTQzOTQ2fDA&ixlib=rb-4.0.3';
+      const result = unsplashClient.dynamicImageResizing(inputUrl);
+      expect(result).toBe(`${inputUrl}&q=90&w=1500&fit=max`);
+    });
+
+    it('modify existing parameters in URL', () => {
+      const inputUrl = 'https://example.com/image.jpg?ixid=M3w2NTA0MjJ8MHwxfHNlYXJjaHwxfHxjYXR8ZW58MHx8fHwxNzI1NTQzOTQ2fDA&ixlib=rb-4.0.3&q=60&w=100&fit=min';
+      const result = unsplashClient.dynamicImageResizing(inputUrl);
+      expect(result).toBe('https://example.com/image.jpg?ixid=M3w2NTA0MjJ8MHwxfHNlYXJjaHwxfHxjYXR8ZW58MHx8fHwxNzI1NTQzOTQ2fDA&ixlib=rb-4.0.3&q=90&w=1500&fit=max');
+    });
+
+    it('modify the existing and new parameters in the URL', () => {
+      const inputUrl = 'https://example.com/image.jpg?ixid=M3w2NTA0MjJ8MHwxfHNlYXJjaHwxfHxjYXR8ZW58MHx8fHwxNzI1NTQzOTQ2fDA&ixlib=rb-4.0.3&w=100';
+      const result = unsplashClient.dynamicImageResizing(inputUrl);
+      expect(result).toBe('https://example.com/image.jpg?ixid=M3w2NTA0MjJ8MHwxfHNlYXJjaHwxfHxjYXR8ZW58MHx8fHwxNzI1NTQzOTQ2fDA&ixlib=rb-4.0.3&w=1500&q=90&fit=max');
+    });
+  });
 });