fix : only disable required feature from config

Author: idebenone

README.md

@@ -116,13 +116,12 @@ actions: [
 
 **_NOTE:_**  return value of `action` callback for settings whether action button should be toggled or not is *deprecated*. Consider using `toggle` option instead.
 
-You can enable/disable features such as border, background tunes and caption by adding `features` array in the configuration:
+You can disable features such as border, background tunes and caption by defining `features` in the configuration:
 ```js
 features: {
-  background: boolean,
-  border: boolean,
-  caption: boolean | 'optional',
-  stretched: boolean
+  border: false,
+  caption: 'optional',
+  stretched: false
 }
 ```
 

dev/index.html

@@ -21,9 +21,9 @@
                 byUrl: "http://localhost:8008/fetchUrl",
               },
               features: {
-                background: true,
-                border: true,
-                caption: true,
+                caption: "optional",
+                border: false,
+                background: false,
                 stretched: true,
               },
             },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/image",
-  "version": "2.10",
+  "version": "2.10.0",
   "keywords": [
     "codex editor",
     "image",

src/index.ts

@@ -99,7 +99,7 @@ export default class ImageTool implements BlockTool {
       buttonContent: config.buttonContent,
       uploader: config.uploader,
       actions: config.actions,
-      features: config.features,
+      features: config.features || {},
     };
 
     /**
@@ -191,7 +191,7 @@ export default class ImageTool implements BlockTool {
    * Renders Block content
    */
   public render(): HTMLDivElement {
-    if (this.config.features?.caption === true || (this.config.features?.caption === 'optional' && this.data.caption)) {
+    if (this.config.features?.caption === true || this.config.features?.caption === undefined || (this.config.features?.caption === 'optional' && this.data.caption)) {
       this.ui.applyTune('caption', true);
     }
 
@@ -226,12 +226,12 @@ 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 = new Map<string, string>([
-      ['border', 'withBorder'],
-      ['background', 'withBackground'],
-      ['stretched', 'stretched'],
-      ['caption', 'caption'],
-    ]);
+    const featureTuneMap: Record<string, string> = {
+      border: 'withBorder',
+      background: 'withBackground',
+      stretched: 'stretched',
+      caption: 'caption',
+    };
 
     if (this.config.features?.caption === 'optional') {
       tunes.push({
@@ -243,19 +243,13 @@ export default class ImageTool implements BlockTool {
     }
 
     const availableTunes = tunes.filter((tune) => {
-      if (this.config.features) {
-        const featureKey = [...featureTuneMap.entries()].find(
-          ([, value]) => value === tune.name
-        )?.[0];
-
-        if (featureKey != null) {
-          return this.config.features[featureKey as keyof FeaturesConfig];
-        }
+      const featureKey = Object.keys(featureTuneMap).find(key => featureTuneMap[key] === tune.name);
 
-        return false;
+      if (featureKey === 'caption') {
+        return this.config.features?.caption !== false;
       }
 
-      return false;
+      return featureKey == null || this.config.features?.[featureKey as keyof FeaturesConfig] !== false;
     });
 
     return availableTunes.map(tune => ({

src/types/types.ts

@@ -107,20 +107,20 @@ export type FeaturesConfig = {
   /**
    * Flag to enable/disable tune - background.
    */
-  background: boolean;
+  background?: boolean;
   /**
    * Flag to enable/disable tune - border.
    */
-  border: boolean;
+  border?: boolean;
   /**
    * Flag to enable/disable caption.
    * Can be set to 'optional' to allow users to toggle via block tunes.
    */
-  caption: boolean | 'optional';
+  caption?: boolean | 'optional';
   /**
    * Flag to enable/disable tune - stretched
    */
-  stretched: boolean;
+  stretched?: boolean;
 };
 
 /**