Chore (toolbox): improved shortcuts visibility when tool exports array of toolbox items (#2846)

* toolbox items logic improved

* typo

* lint fix

* logic improved

* make displaySecondaryLabel true by default

* eslint fix

* added testcase

* updated changelog

* typo

* lint fix

docs/CHANGELOG.md

@@ -5,6 +5,7 @@
 - `New` - Inline tools (those with `isReadOnlySupported` specified) can now be used in read-only mode
 - `Fix` - Fix selection of first block in read-only initialization with "autofocus=true"
 - `Fix` - Incorrect caret position after blocks merging in Safari
+- `Fix` - Several toolbox items exported by the one tool have the same shortcut displayed in toolbox
 
 ### 2.30.6
 

src/components/ui/toolbox.ts

@@ -308,7 +308,7 @@ export default class Toolbox extends EventsDispatcher<ToolboxEventMap> {
     /**
      * Maps tool data to popover item structure
      */
-    const toPopoverItem = (toolboxItem: ToolboxConfigEntry, tool: BlockToolAdapter): PopoverItemParams => {
+    const toPopoverItem = (toolboxItem: ToolboxConfigEntry, tool: BlockToolAdapter, displaySecondaryLabel = true): PopoverItemParams => {
       return {
         icon: toolboxItem.icon,
         title: I18n.t(I18nInternalNS.toolNames, toolboxItem.title || _.capitalize(tool.name)),
@@ -316,15 +316,15 @@ export default class Toolbox extends EventsDispatcher<ToolboxEventMap> {
         onActivate: (): void => {
           this.toolButtonActivated(tool.name, toolboxItem.data);
         },
-        secondaryLabel: tool.shortcut ? _.beautifyShortcut(tool.shortcut) : '',
+        secondaryLabel: (tool.shortcut && displaySecondaryLabel) ? _.beautifyShortcut(tool.shortcut) : '',
       };
     };
 
     return this.toolsToBeDisplayed
       .reduce<PopoverItemParams[]>((result, tool) => {
         if (Array.isArray(tool.toolbox)) {
-          tool.toolbox.forEach(item => {
-            result.push(toPopoverItem(item, tool));
+          tool.toolbox.forEach((item, index) => {
+            result.push(toPopoverItem(item, tool, index === 0));
           });
         } else if (tool.toolbox !== undefined)  {
           result.push(toPopoverItem(tool.toolbox, tool));

test/cypress/tests/ui/toolbox.cy.ts

@@ -114,5 +114,105 @@ describe('Toolbox', function () {
           expect(blocks[1].type).to.eq('nonConvertableTool');
         });
     });
+
+    it('should display shortcut only for the first toolbox item if tool exports toolbox with several items', function () {
+      /**
+       * Mock of Tool with conversionConfig
+       */
+      class ToolWithSeveralToolboxItems extends ToolMock {
+        /**
+         * Specify toolbox with several items related to one tool
+         */
+        public static get toolbox(): ToolboxConfig {
+          return [
+            {
+              icon: '',
+              title: 'first tool',
+            },
+            {
+              icon: '',
+              title: 'second tool',
+            },
+          ];
+        }
+      }
+
+      cy.createEditor({
+        tools: {
+          severalToolboxItemsTool: {
+            class: ToolWithSeveralToolboxItems,
+            shortcut: 'CMD+SHIFT+L',
+          },
+        },
+      });
+
+      cy.get('[data-cy=editorjs]')
+        .find('.ce-paragraph')
+        .click()
+        .type('Some text')
+        .type('/'); // call a shortcut for toolbox
+
+      /**
+       * Secondary title (shortcut) should exist for first toolbox item of the tool
+       */
+      /* eslint-disable-next-line cypress/require-data-selectors */
+      cy.get('.ce-popover')
+        .find('.ce-popover-item[data-item-name="severalToolboxItemsTool"]')
+        .first()
+        .find('.ce-popover-item__secondary-title')
+        .should('exist');
+
+      /**
+       * Secondary title (shortcut) should not exist for second toolbox item of the same tool
+       */
+      /* eslint-disable-next-line cypress/require-data-selectors */
+      cy.get('.ce-popover')
+        .find('.ce-popover-item[data-item-name="severalToolboxItemsTool"]')
+        .eq(1)
+        .find('.ce-popover-item__secondary-title')
+        .should('not.exist');
+    });
+
+    it('should display shortcut for the item if tool exports toolbox as an one item object', function () {
+      /**
+       * Mock of Tool with conversionConfig
+       */
+      class ToolWithOneToolboxItems extends ToolMock {
+        /**
+         * Specify toolbox with several items related to one tool
+         */
+        public static get toolbox(): ToolboxConfig {
+          return {
+            icon: '',
+            title: 'tool',
+          };
+        }
+      }
+
+      cy.createEditor({
+        tools: {
+          oneToolboxItemTool: {
+            class: ToolWithOneToolboxItems,
+            shortcut: 'CMD+SHIFT+L',
+          },
+        },
+      });
+
+      cy.get('[data-cy=editorjs]')
+        .find('.ce-paragraph')
+        .click()
+        .type('Some text')
+        .type('/'); // call a shortcut for toolbox
+
+      /**
+       * Secondary title (shortcut) should exist for toolbox item of the tool
+       */
+      /* eslint-disable-next-line cypress/require-data-selectors */
+      cy.get('.ce-popover')
+        .find('.ce-popover-item[data-item-name="oneToolboxItemTool"]')
+        .first()
+        .find('.ce-popover-item__secondary-title')
+        .should('exist');
+    });
   });
 });

types/tools/tool-settings.d.ts

@@ -22,7 +22,7 @@ export interface ToolboxConfigEntry {
   icon?: string;
 
   /**
-   * May contain overrides for tool default config
+   * May contain overrides for tool default data
    */
   data?: BlockToolData
 }