diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 049d5609f..26b2336d0 100644 --- a/docs/CHANGELOG.md +++ b/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 diff --git a/src/components/ui/toolbox.ts b/src/components/ui/toolbox.ts index 0cbcb85cd..91e663580 100644 --- a/src/components/ui/toolbox.ts +++ b/src/components/ui/toolbox.ts @@ -308,7 +308,7 @@ export default class Toolbox extends EventsDispatcher { /** * 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 { 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((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)); diff --git a/test/cypress/tests/ui/toolbox.cy.ts b/test/cypress/tests/ui/toolbox.cy.ts index d6d1ade63..127b50907 100644 --- a/test/cypress/tests/ui/toolbox.cy.ts +++ b/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'); + }); }); }); diff --git a/types/tools/tool-settings.d.ts b/types/tools/tool-settings.d.ts index 67935c11e..1658ee9a7 100644 --- a/types/tools/tool-settings.d.ts +++ b/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 }