diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 67ee4c0e3..480a12c7f 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -4,6 +4,7 @@ - `Improvement` - Removed "Narrow" ("Thin") mode. On non-mobile viewports, Plus and Block Tunes controls now use a responsive action rail beside the editor content. - `Improvement` - `paste` config supports filter functions for tag-based substitution +- `Fix` - "Convert to" is not shown in the Inline Toolbar when there are no tools to convert to ### 2.31.7 diff --git a/package.json b/package.json index ccd9b3070..b57e61968 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@editorjs/editorjs", - "version": "2.32.0-rc.2", + "version": "2.32.0-rc.3", "description": "Editor.js — open source block-style WYSIWYG editor with JSON output", "main": "dist/editorjs.umd.js", "module": "dist/editorjs.mjs", diff --git a/src/components/inline-tools/inline-tool-convert.ts b/src/components/inline-tools/inline-tool-convert.ts index b0347a682..b4e6f777c 100644 --- a/src/components/inline-tools/inline-tool-convert.ts +++ b/src/components/inline-tools/inline-tool-convert.ts @@ -89,6 +89,13 @@ export default class ConvertInlineTool implements InlineTool { return result; }, []); + /** + * Do not show the "Convert to" item when there is nothing to convert to + */ + if (convertToItems.length === 0) { + return []; + } + const currentBlockToolboxItem = await currentBlock.getActiveToolboxEntry(); const icon = currentBlockToolboxItem !== undefined ? currentBlockToolboxItem.icon : IconReplace; const isDesktop = !_.isMobileScreen(); diff --git a/src/components/utils/blocks.ts b/src/components/utils/blocks.ts index 710cfa5f8..60cb79068 100644 --- a/src/components/utils/blocks.ts +++ b/src/components/utils/blocks.ts @@ -99,6 +99,15 @@ export async function getConvertibleToolsForBlock(block: BlockAPI, allBlockTools return true; }); + /** + * Skip tools whose toolbox entries were all filtered out: + * such tools have nothing a block could be converted to, + * so they should not be treated as convertible + */ + if (actualToolboxItems.length === 0) { + return result; + } + result.push({ ...tool, toolbox: actualToolboxItems, diff --git a/test/cypress/tests/modules/InlineToolbar.cy.ts b/test/cypress/tests/modules/InlineToolbar.cy.ts index 14e9c6072..f688975f4 100644 --- a/test/cypress/tests/modules/InlineToolbar.cy.ts +++ b/test/cypress/tests/modules/InlineToolbar.cy.ts @@ -263,6 +263,39 @@ describe('Inline Toolbar', () => { }); }); + describe('Conversion toolbar without convertible tools', () => { + it('should not show the convert-to item when there are no tools to convert to', () => { + /** + * Only the default paragraph tool is available, + * so the current block cannot be converted to anything + */ + cy.createEditor({ + data: { + blocks: [ + { + type: 'paragraph', + data: { + text: 'Some text', + }, + }, + ], + }, + }); + + cy.get('[data-cy=editorjs]') + .find('.ce-paragraph') + .selectText('Some text'); + + /** Inline Toolbar should be opened with the usual inline tools */ + cy.get('[data-cy="inline-toolbar"] .ce-popover__container') + .should('be.visible'); + + cy.get('[data-cy=editorjs]') + .get('[data-item-name=convert-to]') + .should('not.exist'); + }); + }); + describe('Nested Editor instance inline toolbar', () => { it('should not close inline toolbar of the nested Editor instance when clicking within that toolbar', () => { cy.createEditor({