editor-js · idebenone · Feb 7, 2025 · Nov 30, 2024 · Dec 16, 2024 · Jan 22, 2025
diff --git a/README.md b/README.md
@@ -135,6 +135,7 @@ 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                 |
+| withCaption    | `boolean` | add caption to image            |
 | withBorder     | `boolean` | add border to image             |
 | withBackground | `boolean` | need to add background          |
 | stretched      | `boolean` | stretch image to screen's width |
@@ -148,6 +149,7 @@ 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",
+        "withCaption": true,
         "withBorder" : false,
         "withBackground" : false,
         "stretched" : true,

diff --git a/dev/index.html b/dev/index.html
@@ -7,24 +7,43 @@
   </head>
   <body>
     <div id="editorjs"></div>
-    <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest/dist/editor.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
     <script type="module">
-      import ImageTool from "../src/index.ts"
+      import ImageTool from "../src/index.ts";
       const editor = new EditorJS({
         holder: "editorjs",
+        data: {
+          time: 1700475383740,
+          blocks: [
+            {
+              id: "hZAjSnqYMX",
+              type: "image",
+              data: {
+                file: {
+                  url: "https://images.unsplash.com/photo-1607604276583-eef5d076aa5f?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+                },
+                withBorder: false,
+                withBackground: false,
+                stretched: false,
+                caption: "kimitsu no yayiba",
+              },
+            },
+          ],
+        },
+
         tools: {
-          code: {
+          image: {
             class: ImageTool,
             config: {
               endpoints: {
                 byFile: "http://localhost:8008/uploadFile",
                 byUrl: "http://localhost:8008/fetchUrl",
               },
               features: {
-                // caption: false,
+                caption: "optional",
                 border: false,
                 background: false,
-                stretch: false,
+                stretch: true,
               },
             },
           },

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/image",
-  "version": "2.10.1",
+  "version": "2.10.2",
   "keywords": [
     "codex editor",
     "image",

diff --git a/src/index.css b/src/index.css
@@ -7,6 +7,7 @@
     border-radius: 3px;
     overflow: hidden;
     margin-bottom: 10px;
+    padding-bottom: 0;
 
     &-picture {
       max-width: 100%;
@@ -44,7 +45,11 @@
   }
 
   &__caption {
-    display: none;
+    visibility: hidden;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    margin-bottom: 10px;
 
     &[contentEditable="true"][data-placeholder]::before {
       position: absolute !important;
@@ -74,7 +79,7 @@
   &--empty,
   &--uploading {
     ^&__caption {
-      display: none !important;
+      visibility: hidden !important;
     }
   }
 
@@ -112,10 +117,6 @@
         display: none;
       }
     }
-
-    .cdx-button {
-      display: none;
-    }
   }
 
   /**
@@ -149,10 +150,12 @@
     }
   }
 
-  &--caption {
+  &--withCaption {
     ^&__caption {
-      display: block;
+      visibility: visible;
     }
+
+    padding-bottom: 50px
   }
 }
 

diff --git a/src/index.ts b/src/index.ts
@@ -132,6 +132,7 @@ export default class ImageTool implements BlockTool {
      */
     this._data = {
       caption: '',
+      withCaption: false,
       withBorder: false,
       withBackground: false,
       stretched: false,
@@ -192,7 +193,7 @@ export default class ImageTool implements BlockTool {
    */
   public render(): HTMLDivElement {
     if (this.config.features?.caption === true || this.config.features?.caption === undefined || (this.config.features?.caption === 'optional' && this.data.caption)) {
-      this.ui.applyTune('caption', true);
+      this.ui.applyTune('withCaption', true);
     }
 
     return this.ui.render(this.data) as HTMLDivElement;
@@ -230,12 +231,12 @@ export default class ImageTool implements BlockTool {
       border: 'withBorder',
       background: 'withBackground',
       stretch: 'stretched',
-      caption: 'caption',
+      caption: 'withCaption',
     };
 
     if (this.config.features?.caption === 'optional') {
       tunes.push({
-        name: 'caption',
+        name: 'withCaption',
         icon: IconText,
         title: 'With caption',
         toggle: true,
@@ -367,6 +368,10 @@ export default class ImageTool implements BlockTool {
 
       this.setTune(tune as keyof ImageToolData, value);
     });
+
+    if (data.caption) {
+      this.setTune('withCaption', true);
+    }
   }
 
   /**
@@ -419,11 +424,13 @@ export default class ImageTool implements BlockTool {
    * @param tuneName - tune that has been clicked
    */
   private tuneToggled(tuneName: keyof ImageToolData): void {
-    // inverse tune state
-    this.setTune(tuneName, !(this._data[tuneName] as boolean));
+    // check the tune state
+    const currentState = this._data[tuneName] as boolean;
+
+    this.setTune(tuneName, !currentState);
 
     // reset caption on toggle
-    if (tuneName === 'caption' && !this._data[tuneName]) {
+    if (tuneName === 'caption') {
       this._data.caption = '';
       this.ui.fillCaption('');
     }

diff --git a/src/types/types.ts b/src/types/types.ts
@@ -73,6 +73,11 @@ export type ImageToolData<Actions = {}, AdditionalFileData = {}> = {
    */
   caption: string;
 
+  /**
+   * Flag indicating whether the image has a caption.
+   */
+  withCaption: boolean;
+
   /**
    * Flag indicating whether the image has a border.
    */