From 58f111fb17a244092d30ac3db032889fc6e8feed Mon Sep 17 00:00:00 2001
From: Vineeth <vineeth.v.gooli@gmail.com>
Date: Sat, 30 Nov 2024 11:15:22 +0530
Subject: [PATCH 1/2] fix: resolve caption bug, fix css and bump to 2.10.2

---
 dev/index.html | 29 ++++++++++++++++++++++++-----
 package.json   |  2 +-
 src/index.css  | 15 +++++++++------
 src/index.ts   | 12 +++++++++---
 src/ui.ts      |  9 +++++++++
 5 files changed, 52 insertions(+), 15 deletions(-)
diff --git a/dev/index.html b/dev/index.html
index 9df87e30..23832568 100644
--- a/dev/index.html
+++ b/dev/index.html
@@ -7,13 +7,32 @@
   </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: {
@@ -21,10 +40,10 @@
                 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
index 774433e9..cdc99cf0 100644
--- 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
index 58a648d4..8fa259a3 100644
--- 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;
@@ -112,10 +117,6 @@
         display: none;
       }
     }
-
-    .cdx-button {
-      display: none;
-    }
   }
 
   /**
@@ -151,8 +152,10 @@
 
   &--caption {
     ^&__caption {
-      display: block;
+      visibility: visible;
     }
+
+    padding-bottom: 50px
   }
 }
 
diff --git a/src/index.ts b/src/index.ts
index de1bece8..295f70eb 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -367,6 +367,10 @@ export default class ImageTool implements BlockTool {
 
       this.setTune(tune as keyof ImageToolData, value);
     });
+
+    if (data.caption) {
+      this.setTune('caption', true);
+    }
   }
 
   /**
@@ -419,11 +423,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.ui.isTuneActive(tuneName);
+
+    this.setTune(tuneName, !currentState);
 
     // reset caption on toggle
-    if (tuneName === 'caption' && !this._data[tuneName]) {
+    if (tuneName === 'caption' && !this.ui.isTuneActive(tuneName)) {
       this._data.caption = '';
       this.ui.fillCaption('');
     }
diff --git a/src/ui.ts b/src/ui.ts
index 931bca72..96d6eb5d 100644
--- a/src/ui.ts
+++ b/src/ui.ts
@@ -161,6 +161,15 @@ export default class Ui {
     this.nodes.wrapper.classList.toggle(`${this.CSS.wrapper}--${tuneName}`, status);
   }
 
+  /**
+   * Utility to determine if a tune is currently active
+   * @param tuneName - one of available tunes {@link Tunes.tunes}
+   * @returns - true for active and vice versa
+   */
+  public isTuneActive(tuneName: string): boolean {
+    return this.nodes.wrapper.classList.contains(`${this.CSS.wrapper}--${tuneName}`);
+  }
+
   /**
    * Renders tool UI
    * @param toolData - saved tool data

From e131897aab05055cba088e52cc7022a41c55bfca Mon Sep 17 00:00:00 2001
From: Vineeth <vineeth.v.gooli@gmail.com>
Date: Mon, 16 Dec 2024 22:55:01 +0530
Subject: [PATCH 2/2] fix: resolve caption bug with alternative solution

---
 README.md          |  2 ++
 src/index.css      |  4 ++--
 src/index.ts       | 13 +++++++------
 src/types/types.ts |  5 +++++
 src/ui.ts          |  9 ---------
 5 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/README.md b/README.md
index 39e29a2d..861a7554 100644
--- 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/src/index.css b/src/index.css
index 8fa259a3..8e4f3e34 100644
--- a/src/index.css
+++ b/src/index.css
@@ -79,7 +79,7 @@
   &--empty,
   &--uploading {
     ^&__caption {
-      display: none !important;
+      visibility: hidden !important;
     }
   }
 
@@ -150,7 +150,7 @@
     }
   }
 
-  &--caption {
+  &--withCaption {
     ^&__caption {
       visibility: visible;
     }
diff --git a/src/index.ts b/src/index.ts
index 295f70eb..35b1715a 100644
--- 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,
@@ -369,7 +370,7 @@ export default class ImageTool implements BlockTool {
     });
 
     if (data.caption) {
-      this.setTune('caption', true);
+      this.setTune('withCaption', true);
     }
   }
 
@@ -424,12 +425,12 @@ export default class ImageTool implements BlockTool {
    */
   private tuneToggled(tuneName: keyof ImageToolData): void {
     // check the tune state
-    const currentState = this.ui.isTuneActive(tuneName);
+    const currentState = this._data[tuneName] as boolean;
 
     this.setTune(tuneName, !currentState);
 
     // reset caption on toggle
-    if (tuneName === 'caption' && !this.ui.isTuneActive(tuneName)) {
+    if (tuneName === 'caption') {
       this._data.caption = '';
       this.ui.fillCaption('');
     }
diff --git a/src/types/types.ts b/src/types/types.ts
index 3de55056..5508a4ea 100644
--- 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.
    */
diff --git a/src/ui.ts b/src/ui.ts
index 96d6eb5d..931bca72 100644
--- a/src/ui.ts
+++ b/src/ui.ts
@@ -161,15 +161,6 @@ export default class Ui {
     this.nodes.wrapper.classList.toggle(`${this.CSS.wrapper}--${tuneName}`, status);
   }
 
-  /**
-   * Utility to determine if a tune is currently active
-   * @param tuneName - one of available tunes {@link Tunes.tunes}
-   * @returns - true for active and vice versa
-   */
-  public isTuneActive(tuneName: string): boolean {
-    return this.nodes.wrapper.classList.contains(`${this.CSS.wrapper}--${tuneName}`);
-  }
-
   /**
    * Renders tool UI
    * @param toolData - saved tool data
