fix: resolve caption bug with alternative solution

editor-js · Dec 16, 2024 · e131897 · e131897
1 parent 58f111f
commit e131897
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 17 deletions.
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/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
@@ -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
@@ -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
@@ -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