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

idebenone · idebenone · commit 58f111fb17a2 · 2024-11-30T11:15:22.000+05:30
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

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@editorjs/image",`
`3`		`- "version": "2.10.1",`
	`3`	`+ "version": "2.10.2",`
`4`	`4`	`"keywords": [`
`5`	`5`	`"codex editor",`
`6`	`6`	`"image",`
Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,7 @@`
`7`	`7`	`border-radius: 3px;`
`8`	`8`	`overflow: hidden;`
`9`	`9`	`margin-bottom: 10px;`
	`10`	`+ padding-bottom: 0;`
`10`	`11`
`11`	`12`	`&-picture {`
`12`	`13`	`max-width: 100%;`
`@@ -44,7 +45,11 @@`
`44`	`45`	`}`
`45`	`46`
`46`	`47`	`&__caption {`
`47`		`- display: none;`
	`48`	`+ visibility: hidden;`
	`49`	`+ position: absolute;`
	`50`	`+ bottom: 0;`
	`51`	`+ left: 0;`
	`52`	`+ margin-bottom: 10px;`
`48`	`53`
`49`	`54`	`&[contentEditable="true"][data-placeholder]::before {`
`50`	`55`	`position: absolute !important;`
`@@ -112,10 +117,6 @@`
`112`	`117`	`display: none;`
`113`	`118`	`}`
`114`	`119`	`}`
`115`		`-`
`116`		`- .cdx-button {`
`117`		`- display: none;`
`118`		`- }`
`119`	`120`	`}`
`120`	`121`
`121`	`122`	`/**`
`@@ -151,8 +152,10 @@`
`151`	`152`
`152`	`153`	`&--caption {`
`153`	`154`	`^&__caption {`
`154`		`- display: block;`
	`155`	`+ visibility: visible;`
`155`	`156`	`}`
	`157`	`+`
	`158`	`+ padding-bottom: 50px`
`156`	`159`	`}`
`157`	`160`	`}`
`158`	`161`