fix: resolve caption bug, fix css and bump to 2.10.2

editor-js · Nov 30, 2024 · 58f111f · 58f111f
1 parent c8236e5
commit 58f111f
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 15 deletions.
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;
@@ -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
@@ -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
@@ -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