Feature/disable tool elements

README.md

@@ -64,6 +64,7 @@ var editor = EditorJS({
 |--------------|----------|----------------------------------------------------------------|
 | defaultStyle | `string` | default list style: `ordered`, `unordered` or `checklist`, default is `unordered` |
 | maxLevel     | `number` | maximum level of the list nesting, could be set to `1` to disable nesting, unlimited by default |
+| styles     | `listStyle[]` | List styles allowed to be displayed `ordered`, `unordered` or `checklist` |
 
 ## Output data
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/list",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "keywords": [
     "codex editor",
     "list",

src/index.ts

@@ -1,4 +1,4 @@
-import type { API, BlockAPI, PasteConfig, ToolboxConfig } from '@editorjs/editorjs';
+import type { API, BlockAPI, PasteConfig, ToolboxConfig, BlockTool } from '@editorjs/editorjs';
 import type {
   BlockToolConstructorOptions,
   MenuConfigItem,
@@ -31,7 +31,7 @@ export type ListParams = BlockToolConstructorOptions<ListData | OldListData, Lis
 /**
  * Default class of the component used in editor
  */
-export default class EditorjsList {
+export default class EditorjsList implements BlockTool {
   /**
    * Notify core that read-only mode is supported
    */
@@ -52,7 +52,7 @@ export default class EditorjsList {
    * title - title to show in toolbox
    */
   public static get toolbox(): ToolboxConfig {
-    return [
+    const defaultSettings = [
       {
         icon: IconListBulleted,
         title: 'Unordered List',
@@ -75,6 +75,10 @@ export default class EditorjsList {
         },
       },
     ];
+
+    return EditorjsList.styles ? defaultSettings.filter(
+      ele => EditorjsList.styles?.includes(ele.data.style as ListDataStyle)
+    ) : defaultSettings;
   }
 
   /**
@@ -171,6 +175,11 @@ export default class EditorjsList {
    */
   private defaultListStyle?: ListConfig['defaultStyle'];
 
+  /**
+   * List Styles allowed to be displayed
+   */
+  private static styles?: ListDataStyle[];
+
   /**
    * Tool's data
    */
@@ -210,6 +219,8 @@ export default class EditorjsList {
      */
     this.defaultListStyle = this.config?.defaultStyle || 'unordered';
 
+    EditorjsList.styles = this.config?.styles;
+
     const initialData = {
       style: this.defaultListStyle,
       meta: {},
@@ -272,9 +283,9 @@ export default class EditorjsList {
    * @returns array of tune configs
    */
   public renderSettings(): MenuConfigItem[] {
-    const defaultTunes: MenuConfigItem[] = [
+    let defaultTunes: MenuConfigItem[] = [
       {
-        label: this.api.i18n.t('Unordered'),
+        title: this.api.i18n.t('Unordered'),
         icon: IconListBulleted,
         closeOnActivate: true,
         isActive: this.listStyle == 'unordered',
@@ -283,7 +294,7 @@ export default class EditorjsList {
         },
       },
       {
-        label: this.api.i18n.t('Ordered'),
+        title: this.api.i18n.t('Ordered'),
         icon: IconListNumbered,
         closeOnActivate: true,
         isActive: this.listStyle == 'ordered',
@@ -292,7 +303,7 @@ export default class EditorjsList {
         },
       },
       {
-        label: this.api.i18n.t('Checklist'),
+        title: this.api.i18n.t('Checklist'),
         icon: IconChecklist,
         closeOnActivate: true,
         isActive: this.listStyle == 'checklist',
@@ -302,60 +313,14 @@ export default class EditorjsList {
       },
     ];
 
-    if (this.listStyle === 'ordered') {
-      const startWithElement = renderToolboxInput(
-        (index: string) => this.changeStartWith(Number(index)),
-        {
-          value: String((this.data.meta as OrderedListItemMeta).start ?? 1),
-          placeholder: '',
-          attributes: {
-            required: 'true',
-          },
-          sanitize: input => stripNumbers(input),
-        });
-
-      const orderedListTunes: MenuConfigItem[] = [
-        {
-          label: this.api.i18n.t('Start with'),
-          icon: IconStartWith,
-          children: {
-            items: [
-              {
-                element: startWithElement,
-                // @ts-expect-error ts(2820) can not use PopoverItem enum from editor.js types
-                type: 'html',
-              },
-            ],
-          },
-        },
-      ];
-
-      const orderedListCountersTunes: MenuConfigItem = {
-        label: this.api.i18n.t('Counter type'),
-        icon: OlCounterIconsMap.get((this.data.meta as OrderedListItemMeta).counterType!),
-        children: {
-          items: [],
-        },
-      };
-
-      /**
-       * For each counter type in OlCounterType create toolbox item
-       */
-      OlCounterTypesMap.forEach((_, counterType: string) => {
-        orderedListCountersTunes.children.items!.push({
-          title: this.api.i18n.t(counterType),
-          icon: OlCounterIconsMap.get(OlCounterTypesMap.get(counterType)!),
-          isActive: (this.data.meta as OrderedListItemMeta).counterType === OlCounterTypesMap.get(counterType),
-          closeOnActivate: true,
-          onActivate: () => {
-            this.changeCounters(OlCounterTypesMap.get(counterType) as OlCounterType);
-          },
-        });
-      });
-      // @ts-expect-error ts(2820) can not use PopoverItem enum from editor.js types
-      defaultTunes.push({ type: 'separator' }, ...orderedListTunes, orderedListCountersTunes);
+    if (EditorjsList.styles) {
+      defaultTunes = defaultTunes.filter(
+        tune => (('title' in tune) && EditorjsList.styles?.includes(tune.title!.toLowerCase() as ListDataStyle))
+      )
     }
 
+    if (this.listStyle === 'ordered') this.addAdditionalTunes(defaultTunes);
+
     return defaultTunes;
   }
 
@@ -453,4 +418,62 @@ export default class EditorjsList {
         break;
     }
   }
+
+  /**
+   * Add additional tunes for ordered list
+   * @param defaultTunes - default tunes list
+   */
+  private addAdditionalTunes(defaultTunes: MenuConfigItem[]): void {
+    const startWithElement = renderToolboxInput(
+      (index: string) => this.changeStartWith(Number(index)),
+      {
+        value: String((this.data.meta as OrderedListItemMeta).start ?? 1),
+        placeholder: '',
+        attributes: {
+          required: 'true',
+        },
+        sanitize: input => stripNumbers(input),
+      });
+
+    const orderedListTunes: MenuConfigItem[] = [
+      {
+        title: this.api.i18n.t('Start with'),
+        icon: IconStartWith,
+        children: {
+          items: [
+            {
+              element: startWithElement,
+              // @ts-expect-error ts(2820) can not use PopoverItem enum from editor.js types
+              type: 'html',
+            },
+          ],
+        },
+      },
+    ];
+
+    const orderedListCountersTunes: MenuConfigItem = {
+      title: this.api.i18n.t('Counter type'),
+      icon: OlCounterIconsMap.get((this.data.meta as OrderedListItemMeta).counterType!),
+      children: {
+        items: [],
+      },
+    };
+
+    /**
+     * For each counter type in OlCounterType create toolbox item
+     */
+    OlCounterTypesMap.forEach((_, counterType: string) => {
+      orderedListCountersTunes.children.items!.push({
+        title: this.api.i18n.t(counterType),
+        icon: OlCounterIconsMap.get(OlCounterTypesMap.get(counterType)!),
+        isActive: (this.data.meta as OrderedListItemMeta).counterType === OlCounterTypesMap.get(counterType),
+        closeOnActivate: true,
+        onActivate: () => {
+          this.changeCounters(OlCounterTypesMap.get(counterType) as OlCounterType);
+        },
+      });
+    });
+    // @ts-expect-error ts(2820) can not use PopoverItem enum from editor.js types
+    defaultTunes.push({ type: 'separator' }, ...orderedListTunes, orderedListCountersTunes);
+  }
 }

src/types/ListParams.ts

@@ -87,4 +87,9 @@ export interface ListConfig {
    * If nesting is not needed, it could be set to 1
    */
   maxLevel?: number;
+
+  /**
+   * List styles allowed to be displayed
+   */
+  styles?: ListDataStyle[];
 }