Merge pull request #139 from kommitters/v2.1

Release v2.1.0

.github/workflows/codeql.yml

@@ -55,7 +55,7 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@47b3d888fe66b639e431abf22ebca059152f1eea # v3.24.5
+        uses: github/codeql-action/init@1b1aada464948af03b950897e5eb522f92603cc2 # v3.24.9
         with:
           languages: ${{ matrix.language }}
           # If you wish to specify custom queries, you can do so here or in a config file.
@@ -68,7 +68,7 @@ jobs:
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@47b3d888fe66b639e431abf22ebca059152f1eea # v3.24.5
+        uses: github/codeql-action/autobuild@1b1aada464948af03b950897e5eb522f92603cc2 # v3.24.9
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
@@ -81,6 +81,6 @@ jobs:
       #   ./location_of_script_within_repo/buildscript.sh
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@47b3d888fe66b639e431abf22ebca059152f1eea # v3.24.5
+        uses: github/codeql-action/analyze@1b1aada464948af03b950897e5eb522f92603cc2 # v3.24.9
         with:
           category: "/language:${{matrix.language}}"

.github/workflows/scorecards.yml

@@ -69,6 +69,6 @@ jobs:
 
       # Upload the results to GitHub's code scanning dashboard.
       - name: "Upload to code-scanning"
-        uses: github/codeql-action/upload-sarif@47b3d888fe66b639e431abf22ebca059152f1eea # v3.24.5
+        uses: github/codeql-action/upload-sarif@1b1aada464948af03b950897e5eb522f92603cc2 # v3.24.9
         with:
           sarif_file: results.sarif

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 2.1.0 (04.04.2024)
+
+* Update the security policy. See[PR #137](https://github.com/kommitters/editorjs-inline-image/pull/137)
+* Update all dependencies. See[PR #134](https://github.com/kommitters/editorjs-inline-image/pull/134)
+* Replace and remove `intrinsic-scale`. See[PR #134](https://github.com/kommitters/editorjs-inline-image/pull/134)
+* Implement orientation feature to select query images between landscape, portrait, and squarish. See [Issue #135](https://github.com/kommitters/editorjs-inline-image/issues/135)
+
 ## 2.0.0 (26.02.2024)
 
 * ⚠️ **Breaking change:** The plugin now requires a proxy to fetch images from Unsplash. This change is made to adhere to the [Unsplash API guidelines](https://help.unsplash.com/en/articles/2511245-unsplash-api-guidelines) and enhance security by preventing the exposure of the Unsplash Access Key on the client-side.

SECURITY.md

@@ -1,5 +1,13 @@
-# Reporting Security Issues
+# Security Policy
 
-To report a security issue, please email [oss@kommit.co](mailto:oss@kommit.co) with a description of the issue, the steps you took to create the issue, affected versions, and, if known, mitigations for the issue.
+## Reporting Security Issues
+
+To report a security issue, you can either:
+- Privately report a vulnerability through repository's Security tab by clicking "Report a vulnerability".
+- Email us at [oss@kommit.co](mailto:oss@kommit.co).
+
+Please, make sure to provide a description of the issue, the steps you took to create the issue, affected versions, and, if known, mitigations for the issue.
+
+## Responsible Disclosure
 
 If the issue is confirmed as a vulnerability, we will open a Security Advisory and acknowledge your contributions as part of it.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "editorjs-inline-image",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "keywords": [
     "tool",
     "image",
@@ -43,8 +43,7 @@
     "webpack-cli": "^5.0.0"
   },
   "dependencies": {
-    "axios": "1.6.0",
-    "intrinsic-scale": "^3.0.4"
+    "axios": "1.6.8"
   },
   "jest": {
     "testEnvironment": "jsdom",

src/controlPanel.js

@@ -28,12 +28,17 @@ export default class ControlPanel {
       controlPanel: 'inline-image__control-panel',
       tabWrapper: 'inline-image__tab-wrapper',
       tab: 'inline-image__tab',
+      orientationWrapper: 'inline-image__orientation-wrapper',
+      orientationButton: 'inline-image__orientation-button',
       embedButton: 'inline-image__embed-button',
       search: 'inline-image__search',
       imageGallery: 'inline-image__image-gallery',
       noResults: 'inline-image__no-results',
       imgWrapper: 'inline-image__img-wrapper',
       thumb: 'inline-image__thumb',
+      landscapeImg: 'landscape-img',
+      portraitImg: 'portrait-img',
+      squarishImg: 'squarish-img',
       active: 'active',
       hidden: 'panel-hidden',
       scroll: 'panel-scroll',
@@ -49,11 +54,15 @@ export default class ControlPanel {
       unsplashPanel: null,
       imageGallery: null,
       searchInput: null,
+      landscapeButton: null,
+      portraitButton: null,
+      squarishButton: null,
     };
 
     this.unsplashClient = new UnsplashClient(this.config.unsplash);
     this.searchTimeout = null;
     this.showEmbedTab = this.config.embed ? this.config.embed.display : true;
+    this.queryOrientation = null;
   }
 
   /**
@@ -169,10 +178,12 @@ export default class ControlPanel {
       contentEditable: !this.readOnly,
       oninput: () => this.searchInputHandler(),
     });
+    const orientationWrapper = this.buildOrientationWrapper();
 
     searchInput.dataset.placeholder = 'Search for an image...';
 
     wrapper.appendChild(searchInput);
+    wrapper.appendChild(orientationWrapper);
     wrapper.appendChild(imageGallery);
 
     this.nodes.searchInput = searchInput;
@@ -214,6 +225,7 @@ export default class ControlPanel {
       const query = this.nodes.searchInput.innerHTML;
       this.unsplashClient.searchImages(
         query,
+        this.queryOrientation,
         (results) => this.appendImagesToGallery(results),
       );
     }, 1000);
@@ -248,7 +260,10 @@ export default class ControlPanel {
    */
   createThumbImage(image) {
     const imgWrapper = make('div', this.cssClasses.imgWrapper);
-    const img = make('img', this.cssClasses.thumb, {
+    const imgClasses = [this.cssClasses.thumb];
+    if (this.queryOrientation) imgClasses.push(this.cssClasses[`${this.queryOrientation}Img`]);
+
+    const img = make('img', imgClasses, {
       src: image.thumb,
       onclick: () => this.downloadUnsplashImage(image),
     });
@@ -285,4 +300,51 @@ export default class ControlPanel {
     });
     this.unsplashClient.downloadImage(downloadLocation);
   }
+
+  /**
+   * Builds the orientation wrapper that wraps the orientation buttons.
+   * @returns {HTMLDivElement}
+   */
+  buildOrientationWrapper() {
+    const orientationModes = ['Landscape', 'Portrait', 'Squarish'];
+    const orientationButtons = orientationModes.map((orientation) => `${orientation.toLowerCase()}Button`);
+    const wrapper = make('div', [this.cssClasses.orientationWrapper]);
+
+    orientationModes.forEach((orientation) => {
+      const button = make('button', [this.cssClasses.orientationButton], {
+        id: `${orientation.toLowerCase()}-button`,
+        innerHTML: orientation,
+        onclick: (e) => this.handleOrientationButtonClick(e, orientationButtons),
+      });
+      wrapper.appendChild(button);
+      this.nodes[`${orientation.toLowerCase()}Button`] = button;
+    });
+
+    return wrapper;
+  }
+
+  /**
+   * OnClick handler for orientation buttons
+   *
+   * @param {any} event handler event
+   * @param {Array} orientationButtons orientation HTML button elements.
+   * @returns {void}
+   */
+  handleOrientationButtonClick(event, orientationButtons) {
+    const isActive = event.target.classList.contains(this.cssClasses.active);
+    orientationButtons.forEach((button) => {
+      this.nodes[button].classList.remove(this.cssClasses.active);
+    });
+
+    if (!isActive) {
+      event.target.classList.add(this.cssClasses.active);
+      this.queryOrientation = event.target.innerHTML.toLowerCase();
+    } else this.queryOrientation = null;
+
+    const query = this.nodes.searchInput.innerHTML;
+    if (query) {
+      this.showLoader();
+      this.performSearch();
+    }
+  }
 }

src/helpers.js

@@ -70,3 +70,22 @@ export const createImageCredits = ({ appName, author, profileLink }) => {
   wrapper.appendChild(unsplashLink);
   return wrapper;
 };
+
+/**
+ * Resize an image to fit within the modal.
+ *
+ * @param {{width: number, height: number}} ImageSize image width and height.
+ * @param {{width: number, height: number}} sizeToFit width and height size to fit the image.
+ *
+ * @returns {{width: number, height: number}}
+ */
+export const resizeToFit = (
+  { width: imgWidth, height: imgHeight },
+  { width: widthToFit, height: heightToFit },
+) => {
+  const imgRatio = imgWidth / imgHeight;
+  const ratioToFit = widthToFit / heightToFit;
+
+  if (imgRatio > ratioToFit) return { width: widthToFit, height: widthToFit / imgRatio };
+  return { width: heightToFit * imgRatio, height: heightToFit };
+};

src/index.css

@@ -16,19 +16,19 @@
   vertical-align: bottom;
 }
 
-.inline-image__caption[contentEditable=true][data-placeholder]:empty::before {
+.inline-image__caption[contentEditable="true"][data-placeholder]:empty::before {
   position: absolute;
   content: attr(data-placeholder);
   color: #707684;
   font-weight: normal;
   opacity: 0;
- }
+}
 
-.inline-image__caption[contentEditable=true][data-placeholder]:empty::before {
+.inline-image__caption[contentEditable="true"][data-placeholder]:empty::before {
   opacity: 1;
 }
 
-.inline-image__caption[contentEditable=true][data-placeholder]:empty:focus::before {
+.inline-image__caption[contentEditable="true"][data-placeholder]:empty:focus::before {
   opacity: 0;
 }
 
@@ -43,7 +43,6 @@
   margin: 0 auto;
 }
 
-
 .inline-image__picture--withBorder {
   border: 1px solid #e8e8eb;
   padding: 1px;
@@ -94,8 +93,7 @@
   padding: 10px;
   border-radius: 4px;
   box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px,
-    rgba(15, 15, 15, 0.1) 0px 3px 6px,
-    rgba(15, 15, 15, 0.2) 0px 9px 24px;
+    rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
 }
 
 .inline-image__image-gallery {
@@ -108,7 +106,7 @@
 }
 
 .inline-image__img-wrapper {
-    width: 25%;
+  width: 25%;
 }
 
 .inline-image__thumb {
@@ -138,12 +136,56 @@
   width: 96%;
 }
 
-.inline-image__no-results{
+.inline-image__no-results {
   width: 100%;
   text-align: center;
   margin: 20px;
 }
 
+.inline-image__orientation-wrapper {
+  margin: 10px;
+}
+
+.inline-image__orientation-button {
+  margin-right: 5px;
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  border-color: #f0f0f0;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.inline-image__orientation-button.active {
+  background-color: #388ae5;
+  color: white;
+  border-color: #388ae5;
+}
+
+.inline-image__orientation-button.active:hover {
+  background-color: #388ae5;
+  color: white;
+}
+
+.inline-image__orientation-button:hover {
+  background-color: #f0f0f0;
+}
+
+.landscape-img {
+  height: auto;
+  aspect-ratio: 3/2;
+}
+
+.portrait-img {
+  height: auto;
+  aspect-ratio: 4/5;
+}
+
+.squarish-img {
+  height: auto;
+  aspect-ratio: 1/1;
+}
+
 .panel-hidden {
   display: none;
 }
@@ -160,7 +202,7 @@
   justify-content: center;
   align-items: center;
   overflow: hidden;
-  background-color: rgba(0,0,0,0.8);
+  background-color: rgba(0, 0, 0, 0.8);
 }
 
 .modal-content {
@@ -170,8 +212,8 @@
 
 .modal-img {
   object-fit: cover;
-  max-width:100%;
-  max-height:100%;
+  max-width: 100%;
+  max-height: 100%;
 }
 
 .close {

src/modalHandler.js

@@ -1,5 +1,4 @@
-import { contain } from 'intrinsic-scale';
-import { make } from './helpers';
+import { make, resizeToFit } from './helpers';
 
 /**
  * Renders modal when the image is clicked and handle internal actions
@@ -50,15 +49,18 @@ export default class ModalHandler {
 
   /**
    * Load image in the modal and adjust size
-   * @param {} src
+   * @param {string} src - image url
    */
   setImage(src) {
     const image = document.getElementById('inline-image__modal-img');
     image.src = src;
     const container = document.getElementById('inline-image__modal-content');
     const screenW = screen.width - 200;
     const screenH = screen.height - 200;
-    const { width, height } = contain(screenW, screenH, image.width, image.height);
+    const { width, height } = resizeToFit(
+      { width: image.width, height: image.height },
+      { width: screenW, height: screenH },
+    );
     container.style.maxHeight = `${height}px`;
     container.style.maxWidth = `${width}px`;
   }