Added support for selecting enabled tunes in ImageTool

editor-js · Sep 30, 2024 · cc0ee6a · cc0ee6a
1 parent 5d1c57c
commit cc0ee6a
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -12,7 +12,7 @@ Image Block for the [Editor.js](https://editorjs.io).
 - Pasting copied content from the web
 - Pasting images by drag-n-drop
 - Pasting files and screenshots from Clipboard
-- Allows adding a border, and a background
+- Allows adding a border, a background and a caption
 - Allows stretching an image to the container's full-width
 
 **Notes**
@@ -96,6 +96,8 @@ Note that if you don't implement your custom uploader methods, the `endpoints` p
 
 3. Add background
 
+4. Add caption
+
 Add extra setting-buttons by adding them to the `actions`-array in the configuration:
 ```js
 actions: [
@@ -120,6 +122,7 @@ This Tool returns `data` with following format
 | Field          | Type      | Description                     |
 | -------------- | --------- | ------------------------------- |
 | file           | `object`  | Uploaded file data. Any data got from backend uploader. Always contain the `url` property |
+| withCaption    | `boolean` | need to enable caption          |
 | caption        | `string`  | image's caption                 |
 | withBorder     | `boolean` | add border to image             |
 | withBackground | `boolean` | need to add background          |
@@ -136,7 +139,8 @@ This Tool returns `data` with following format
         "caption" : "Roadster // tesla.com",
         "withBorder" : false,
         "withBackground" : false,
-        "stretched" : true
+        "stretched" : true,
+        "withCaption" : true,
     }
 }
 ```

diff --git a/dev/index.html b/dev/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Image Plugin Test | EditorJS</title>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest/dist/editor.css"
+    />
+  </head>
+  <body>
+    <div id="editorjs"></div>
+    <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest/dist/editor.js"></script>
+    <script src="../dist/image.umd.js"></script>
+    <script>
+      const editor = new EditorJS({
+        holder: "editorjs",
+        tools: {
+          code: {
+            class: ImageTool,
+            config: {
+              endpoints: {
+                byFile: "http://localhost:8008/uploadFile",
+                byUrl: "http://localhost:8008/fetchUrl",
+              },
+              //features: ["withCaption", "withBorder", "stretched", "withBackground"],
+              features: ["withCaption", "withBorder"],
+            },
+          },
+        },
+      });
+    </script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/image",
-  "version": "2.9.3",
+  "version": "2.10",
   "keywords": [
     "codex editor",
     "image",

diff --git a/src/index.css b/src/index.css
@@ -44,6 +44,8 @@
   }
 
   &__caption {
+    display: none;
+
     &[contentEditable="true"][data-placeholder]::before {
       position: absolute !important;
       content: attr(data-placeholder);
@@ -86,7 +88,7 @@
       margin: 0 6px 0 0;
     }
   }
-  
+
   &--filled {
     .cdx-button {
       display: none;
@@ -147,13 +149,19 @@
     }
   }
 
+  &--withCaption {
+    ^&__caption {
+      display: block;
+    }
+  }
 }
 
 @keyframes image-preloader-spin {
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
-}
+}
diff --git a/src/index.ts b/src/index.ts
@@ -9,7 +9,6 @@
  *  1) index.ts — main Tool's interface, public API and methods for working with data
  *  2) uploader.ts — module that has methods for sending files via AJAX: from device, by URL or File pasting
  *  3) ui.ts — module for UI manipulations: render, showing preloader, etc
- *  4) tunes.js — working with Block Tunes: render buttons, handle clicks
  *
  * For debug purposes there is a testing server
  * that can save uploaded files and return a Response {@link UploadResponseFormat}
@@ -37,7 +36,7 @@ import Ui from './ui';
 import Uploader from './uploader';
 
 import { IconAddBorder, IconStretch, IconAddBackground, IconPicture } from '@codexteam/icons';
-import type { ActionConfig, UploadResponseFormat, ImageToolData, ImageConfig, HTMLPasteEventDetailExtended, ImageSetterParam } from './types/types';
+import type { ActionConfig, UploadResponseFormat, ImageToolData, ImageConfig, HTMLPasteEventDetailExtended, ImageSetterParam, FeaturesConfig } from './types/types';
 
 type ImageToolConstructorOptions = BlockToolConstructorOptions<ImageToolData, ImageConfig>;
 
@@ -50,11 +49,6 @@ export default class ImageTool implements BlockTool {
    */
   private api: API;
 
-  /**
-   * Flag indicating read-only mode
-   */
-  private readOnly: boolean;
-
   /**
    * Current Block API instance
    */
@@ -90,7 +84,6 @@ export default class ImageTool implements BlockTool {
    */
   constructor({ data, config, api, readOnly, block }: ImageToolConstructorOptions) {
     this.api = api;
-    this.readOnly = readOnly;
     this.block = block;
 
     /**
@@ -106,6 +99,7 @@ export default class ImageTool implements BlockTool {
       buttonContent: config.buttonContent,
       uploader: config.uploader,
       actions: config.actions,
+      features: config.features,
     };
 
     /**
@@ -141,6 +135,7 @@ export default class ImageTool implements BlockTool {
       withBorder: false,
       withBackground: false,
       stretched: false,
+      withCaption: false,
       file: {
         url: '',
       },
@@ -190,6 +185,12 @@ export default class ImageTool implements BlockTool {
         title: 'With background',
         toggle: true,
       },
+      {
+        name: 'withCaption',
+        icon: IconAddBackground,
+        title: 'With caption',
+        toggle: true,
+      },
     ];
   }
 
@@ -228,8 +229,12 @@ export default class ImageTool implements BlockTool {
     // Merge default tunes with the ones that might be added by user
     // @see https://github.com/editor-js/image/pull/49
     const tunes = ImageTool.tunes.concat(this.config.actions || []);
+    const enabledTunes = this.config.features || [];
+    const availableTunes = tunes.filter(tune =>
+      enabledTunes.length === 0 || enabledTunes.includes(tune.name as FeaturesConfig)
+    );
 
-    return tunes.map(tune => ({
+    return availableTunes.map(tune => ({
       icon: tune.icon,
       label: this.api.i18n.t(tune.title),
       name: tune.name,

diff --git a/src/types/types.ts b/src/types/types.ts
@@ -88,6 +88,11 @@ export type ImageToolData<Actions = {}, AdditionalFileData = {}> = {
    */
   stretched: boolean;
 
+  /**
+   * Flag indicating whether the image has caption
+   */
+  withCaption: boolean;
+
   /**
    * Object containing the URL of the image file.
    * Also can contain any additional data.
@@ -100,6 +105,11 @@ export type ImageToolData<Actions = {}, AdditionalFileData = {}> = {
   } & AdditionalFileData;
 } & (Actions extends Record<string, boolean> ? Actions : {});
 
+/**
+ * @description Tunes that would be available on each image block.
+ */
+export type FeaturesConfig = 'withCaption' | 'withBorder' | 'withBackground' | 'stretched';
+
 /**
  *
  * @description Config supported by Tool
@@ -171,6 +181,11 @@ export interface ImageConfig {
    * Additional actions for the tool.
    */
   actions?: ActionConfig[];
+
+  /**
+   * Tunes to be enabled.
+   */
+  features?: FeaturesConfig[];
 }
 
 /**