editor-js · idebenone · Oct 29, 2024 · Sep 30, 2024 · Oct 3, 2024 · Oct 10, 2024
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**
@@ -83,6 +83,7 @@ Image Tool supports these configuration parameters:
 | buttonContent | `string` | Allows to override HTML content of «Select file» button |
 | uploader | `{{uploadByFile: function, uploadByUrl: function}}` | Optional custom uploading methods. See details below. |
 | actions | `array` | Array with custom actions to show in the tool's settings menu. See details below. |
+| features | `object` | Allows you to enable/disable tunes along with caption. See details below. |
 
 Note that if you don't implement your custom uploader methods, the `endpoints` param is required.
 
@@ -96,6 +97,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: [
@@ -111,6 +114,16 @@ actions: [
 ]
 ```
 
+Enable required tunes and caption by adding `features`-array in the configuration:
+```js
+features: {
+  background: true,
+  border: false,
+  caption: true,
+  stretched: true
+}
+```
+
 **_NOTE:_**  return value of `action` callback for settings whether action button should be toggled or not is *deprecated*. Consider using `toggle` option instead.
 
 ## Output data
@@ -121,8 +134,8 @@ This Tool returns `data` with following format
 | -------------- | --------- | ------------------------------- |
 | file           | `object`  | Uploaded file data. Any data got from backend uploader. Always contain the `url` property |
 | caption        | `string`  | image's caption                 |
-| withBorder     | `boolean` | add border to image             |
-| withBackground | `boolean` | need to add background          |
+| border         | `boolean` | add border to image             |
+| background     | `boolean` | need to add background          |
 | stretched      | `boolean` | stretch image to screen's width |
 
 
@@ -134,9 +147,9 @@ This Tool returns `data` with following format
             "url" : "https://www.tesla.com/tesla_theme/assets/img/_vehicle_redesign/roadster_and_semi/roadster/hero.jpg"
         },
         "caption" : "Roadster // tesla.com",
-        "withBorder" : false,
-        "withBackground" : false,
-        "stretched" : true
+        "border" : false,
+        "background" : false,
+        "stretched" : 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>
+  </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: {
+                background: true,
+                border: true,
+                caption: true,
+                stretched: true,
+              },
+            },
+          },
+        },
+      });
+    </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;
@@ -121,13 +123,13 @@
    * ----------------
    */
 
-  &--withBorder {
+  &--border {
     ^&__image {
       border: 1px solid var(--border-color);
     }
   }
 
-  &--withBackground {
+  &--background {
     ^&__image {
       padding: 15px;
       background: var(--bg-color);
@@ -147,13 +149,19 @@
     }
   }
 
+  &--caption {
+    ^&__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,
     };
 
     /**
@@ -173,7 +167,7 @@ export default class ImageTool implements BlockTool {
   public static get tunes(): Array<ActionConfig> {
     return [
       {
-        name: 'withBorder',
+        name: 'border',
         icon: IconAddBorder,
         title: 'With border',
         toggle: true,
@@ -185,7 +179,7 @@ export default class ImageTool implements BlockTool {
         toggle: true,
       },
       {
-        name: 'withBackground',
+        name: 'background',
         icon: IconAddBackground,
         title: 'With background',
         toggle: true,
@@ -197,6 +191,10 @@ export default class ImageTool implements BlockTool {
    * Renders Block content
    */
   public render(): HTMLDivElement {
+    if (this.config.features && this.config.features.caption) {
+      this.ui.toggleCaption(true);
+    }
+
     return this.ui.render(this.data) as HTMLDivElement;
   }
 
@@ -228,8 +226,14 @@ 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 availableTunes = tunes.filter((tune) => {
+      if (this.config.features) {
+        return this.config.features[tune.name as keyof 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
@@ -100,6 +100,20 @@ 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 = {
+  /** Flag to enable/disable tune - background. */
+  background: boolean;
+  /** Flag to enable/disable tune - border */
+  border: boolean;
+  /** Flag to enable/disable caption */
+  caption: boolean;
+  /** Flag to enable/disable tune - stretched */
+  stretched: boolean;
+};
+
 /**
  *
  * @description Config supported by Tool
@@ -171,6 +185,11 @@ export interface ImageConfig {
    * Additional actions for the tool.
    */
   actions?: ActionConfig[];
+
+  /**
+   * Tunes to be enabled.
+   */
+  features?: FeaturesConfig;
 }
 
 /**

diff --git a/src/ui.ts b/src/ui.ts
@@ -254,6 +254,14 @@ export default class Ui {
     this.nodes.imageContainer.appendChild(this.nodes.imageEl);
   }
 
+  /**
+   * Toggles caption input visibility
+   * @param status - true for enable, false for disable
+   */
+  public toggleCaption(status: boolean): void {
+    this.nodes.wrapper.classList.toggle(`${this.CSS.wrapper}--caption`, status);
+  }
+
   /**
    * Shows caption input
    * @param text - caption content text