fix: removed caption as from tunes

editor-js · Oct 3, 2024 · ad233c7 · ad233c7
1 parent cc0ee6a
commit ad233c7
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 34 deletions.
diff --git a/README.md b/README.md
@@ -83,6 +83,7 @@ Image Tool supports these configuration parameters:
 | buttonContent | `string` | Allows to override HTML content of «Select file» button |
 | uploader | `{{uploadByFile: function, uploadByUrl: function}}` | Optional custom uploading methods. See details below. |
 | actions | `array` | Array with custom actions to show in the tool's settings menu. See details below. |
+| features | `object` | Allows you to enable/disable tunes along with caption. See details below. |
 
 Note that if you don't implement your custom uploader methods, the `endpoints` param is required.
 
@@ -113,6 +114,16 @@ actions: [
 ]
 ```
 
+Enable required tunes and caption by adding `features`-array in the configuration:
+```js
+features: {
+  background: true,
+  border: false,
+  caption: true,
+  stretched: true
+}
+```
+
 **_NOTE:_**  return value of `action` callback for settings whether action button should be toggled or not is *deprecated*. Consider using `toggle` option instead.
 
 ## Output data
@@ -122,10 +133,9 @@ This Tool returns `data` with following format
 | Field          | Type      | Description                     |
 | -------------- | --------- | ------------------------------- |
 | file           | `object`  | Uploaded file data. Any data got from backend uploader. Always contain the `url` property |
-| withCaption    | `boolean` | need to enable caption          |
 | caption        | `string`  | image's caption                 |
-| withBorder     | `boolean` | add border to image             |
-| withBackground | `boolean` | need to add background          |
+| border         | `boolean` | add border to image             |
+| background     | `boolean` | need to add background          |
 | stretched      | `boolean` | stretch image to screen's width |
 
 
@@ -137,10 +147,9 @@ 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",
-        "withBorder" : false,
-        "withBackground" : false,
+        "border" : false,
+        "background" : false,
         "stretched" : true,
-        "withCaption" : true,
     }
 }
 ```

diff --git a/dev/index.html b/dev/index.html
@@ -4,10 +4,6 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Image Plugin Test | EditorJS</title>
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest/dist/editor.css"
-    />
   </head>
   <body>
     <div id="editorjs"></div>
@@ -24,8 +20,12 @@
                 byFile: "http://localhost:8008/uploadFile",
                 byUrl: "http://localhost:8008/fetchUrl",
               },
-              //features: ["withCaption", "withBorder", "stretched", "withBackground"],
-              features: ["withCaption", "withBorder"],
+              features: {
+                background: true,
+                border: true,
+                caption: true,
+                stretched: true,
+              },
             },
           },
         },

diff --git a/src/index.css b/src/index.css
@@ -123,13 +123,13 @@
    * ----------------
    */
 
-  &--withBorder {
+  &--border {
     ^&__image {
       border: 1px solid var(--border-color);
     }
   }
 
-  &--withBackground {
+  &--background {
     ^&__image {
       padding: 15px;
       background: var(--bg-color);
@@ -149,7 +149,7 @@
     }
   }
 
-  &--withCaption {
+  &--caption {
     ^&__caption {
       display: block;
     }

diff --git a/src/index.ts b/src/index.ts
@@ -135,7 +135,6 @@ export default class ImageTool implements BlockTool {
       withBorder: false,
       withBackground: false,
       stretched: false,
-      withCaption: false,
       file: {
         url: '',
       },
@@ -168,7 +167,7 @@ export default class ImageTool implements BlockTool {
   public static get tunes(): Array<ActionConfig> {
     return [
       {
-        name: 'withBorder',
+        name: 'border',
         icon: IconAddBorder,
         title: 'With border',
         toggle: true,
@@ -180,24 +179,22 @@ export default class ImageTool implements BlockTool {
         toggle: true,
       },
       {
-        name: 'withBackground',
+        name: 'background',
         icon: IconAddBackground,
         title: 'With background',
         toggle: true,
       },
-      {
-        name: 'withCaption',
-        icon: IconAddBackground,
-        title: 'With caption',
-        toggle: true,
-      },
     ];
   }
 
   /**
    * Renders Block content
    */
   public render(): HTMLDivElement {
+    if (this.config.features && this.config.features.caption) {
+      this.ui.toggleCaption(true);
+    }
+
     return this.ui.render(this.data) as HTMLDivElement;
   }
 
@@ -229,9 +226,11 @@ export default class ImageTool implements BlockTool {
     // Merge default tunes with the ones that might be added by user
     // @see https://github.com/editor-js/image/pull/49
     const tunes = ImageTool.tunes.concat(this.config.actions || []);
-    const enabledTunes = this.config.features || [];
-    const availableTunes = tunes.filter(tune =>
-      enabledTunes.length === 0 || enabledTunes.includes(tune.name as FeaturesConfig)
+    const availableTunes = tunes.filter((tune) => {
+      if (this.config.features) {
+        return this.config.features[tune.name as keyof FeaturesConfig];
+      }
+    }
     );
 
     return availableTunes.map(tune => ({

diff --git a/src/types/types.ts b/src/types/types.ts
@@ -88,11 +88,6 @@ export type ImageToolData<Actions = {}, AdditionalFileData = {}> = {
    */
   stretched: boolean;
 
-  /**
-   * Flag indicating whether the image has caption
-   */
-  withCaption: boolean;
-
   /**
    * Object containing the URL of the image file.
    * Also can contain any additional data.
@@ -108,7 +103,16 @@ export type ImageToolData<Actions = {}, AdditionalFileData = {}> = {
 /**
  * @description Tunes that would be available on each image block.
  */
-export type FeaturesConfig = 'withCaption' | 'withBorder' | 'withBackground' | 'stretched';
+export type FeaturesConfig = {
+  /** Flag to enable/disable tune - background. */
+  background: boolean;
+  /** Flag to enable/disable tune - border */
+  border: boolean;
+  /** Flag to enable/disable caption */
+  caption: boolean;
+  /** Flag to enable/disable tune - stretched */
+  stretched: boolean;
+};
 
 /**
  *
@@ -185,7 +189,7 @@ export interface ImageConfig {
   /**
    * Tunes to be enabled.
    */
-  features?: FeaturesConfig[];
+  features?: FeaturesConfig;
 }
 
 /**

diff --git a/src/ui.ts b/src/ui.ts
@@ -254,6 +254,14 @@ export default class Ui {
     this.nodes.imageContainer.appendChild(this.nodes.imageEl);
   }
 
+  /**
+   * Toggles caption input visibility
+   * @param status - true for enable, false for disable
+   */
+  public toggleCaption(status: boolean): void {
+    this.nodes.wrapper.classList.toggle(`${this.CSS.wrapper}--caption`, status);
+  }
+
   /**
    * Shows caption input
    * @param text - caption content text