fix: caption as boolean or optional

README.md

@@ -83,7 +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. |
+| features | `object` | Allows you to enable/disable additional features such as border, background tunes and caption. See details below. |
 
 Note that if you don't implement your custom uploader methods, the `endpoints` param is required.
 
@@ -114,18 +114,18 @@ actions: [
 ]
 ```
 
-Enable required tunes and caption by adding `features`-array in the configuration:
+**_NOTE:_**  return value of `action` callback for settings whether action button should be toggled or not is *deprecated*. Consider using `toggle` option instead.
+
+Enable features such as border, background tunes and caption by adding `features`-array in the configuration:
 ```js
 features: {
-  background: true,
-  border: false,
-  caption: true,
-  stretched: true
+  background: boolean,
+  border: boolean,
+  caption: boolean | 'optional',
+  stretched: boolean
 }
 ```
 
-**_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
 
 This Tool returns `data` with following format
@@ -134,8 +134,8 @@ 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                 |
-| border         | `boolean` | add border to image             |
-| background     | `boolean` | need to add background          |
+| withBorder     | `boolean` | add border to image             |
+| withBackground | `boolean` | need to add background          |
 | stretched      | `boolean` | stretch image to screen's width |
 
 
@@ -147,8 +147,8 @@ 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",
-        "border" : false,
-        "background" : false,
+        "withBorder" : false,
+        "withBackground" : false,
         "stretched" : true,
     }
 }

src/index.css

@@ -123,13 +123,13 @@
    * ----------------
    */
 
-  &--border {
+  &--withBorder {
     ^&__image {
       border: 1px solid var(--border-color);
     }
   }
 
-  &--background {
+  &--withBackground {
     ^&__image {
       padding: 15px;
       background: var(--bg-color);

src/index.ts

@@ -35,7 +35,7 @@ import './index.css';
 import Ui from './ui';
 import Uploader from './uploader';
 
-import { IconAddBorder, IconStretch, IconAddBackground, IconPicture } from '@codexteam/icons';
+import { IconAddBorder, IconStretch, IconAddBackground, IconPicture, IconText } from '@codexteam/icons';
 import type { ActionConfig, UploadResponseFormat, ImageToolData, ImageConfig, HTMLPasteEventDetailExtended, ImageSetterParam, FeaturesConfig } from './types/types';
 
 type ImageToolConstructorOptions = BlockToolConstructorOptions<ImageToolData, ImageConfig>;
@@ -167,7 +167,7 @@ export default class ImageTool implements BlockTool {
   public static get tunes(): Array<ActionConfig> {
     return [
       {
-        name: 'border',
+        name: 'withBorder',
         icon: IconAddBorder,
         title: 'With border',
         toggle: true,
@@ -179,7 +179,7 @@ export default class ImageTool implements BlockTool {
         toggle: true,
       },
       {
-        name: 'background',
+        name: 'withBackground',
         icon: IconAddBackground,
         title: 'With background',
         toggle: true,
@@ -191,8 +191,8 @@ export default class ImageTool implements BlockTool {
    * Renders Block content
    */
   public render(): HTMLDivElement {
-    if (this.config.features && this.config.features.caption) {
-      this.ui.toggleCaption(true);
+    if (this.config.features && this.config.features.caption === true) {
+      this.ui.applyTune('caption', true);
     }
 
     return this.ui.render(this.data) as HTMLDivElement;
@@ -226,9 +226,27 @@ 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 featureTuneMap: Record<string, string> = {
+      border: 'withBorder',
+      background: 'withBackground',
+      stretched: 'stretched',
+      caption: 'caption',
+    };
+
+    if (this.config.features?.caption === 'optional') {
+      tunes.push({
+        name: 'caption',
+        icon: IconText,
+        title: 'With caption',
+        toggle: true,
+      });
+    }
+
     const availableTunes = tunes.filter((tune) => {
       if (this.config.features) {
-        return this.config.features[tune.name as keyof FeaturesConfig];
+        const featureKey = Object.keys(featureTuneMap).find(key => featureTuneMap[key] === tune.name);
+
+        return this.config.features[featureKey as keyof FeaturesConfig];
       }
     }
     );

src/types/types.ts

@@ -101,16 +101,24 @@ export type ImageToolData<Actions = {}, AdditionalFileData = {}> = {
 } & (Actions extends Record<string, boolean> ? Actions : {});
 
 /**
- * @description Tunes that would be available on each image block.
+ * @description Enable or disable features.
  */
 export type FeaturesConfig = {
-  /** Flag to enable/disable tune - background. */
+  /**
+   * Flag to enable/disable tune - background.
+   */
   background: boolean;
-  /** Flag to enable/disable tune - border */
+  /**
+   * Flag to enable/disable tune - border.
+   */
   border: boolean;
-  /** Flag to enable/disable caption */
-  caption: boolean;
-  /** Flag to enable/disable tune - stretched */
+  /**
+   * Flag to enable/disable caption.
+   */
+  caption: boolean | 'optional';
+  /**
+   * Flag to enable/disable tune - stretched
+   */
   stretched: boolean;
 };
 

src/ui.ts

@@ -254,14 +254,6 @@ 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