diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 5244e7ea..fbaf1b95 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -1,5 +1,9 @@ # Changelog +### 2.24.1 + +— `Fix` — The I18n of Tools` titles at the Toolbox now works correctly [#2030](https://github.com/codex-team/editor.js/issues/2030) + ### 2.24.0 - `New` — *UI* — The Toolbox became vertical 🥳 diff --git a/package.json b/package.json index 1e27c69b..13621f60 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@editorjs/editorjs", - "version": "2.24.0", + "version": "2.24.1", "description": "Editor.js — Native JS, based on API and Open Source", "main": "dist/editor.js", "types": "./types/index.d.ts", diff --git a/src/components/ui/toolbox.ts b/src/components/ui/toolbox.ts index 89da4215..b781aa28 100644 --- a/src/components/ui/toolbox.ts +++ b/src/components/ui/toolbox.ts @@ -6,6 +6,8 @@ import ToolsCollection from '../tools/collection'; import { API } from '../../../types'; import EventsDispatcher from '../utils/events'; import Popover, { PopoverEvent } from '../utils/popover'; +import I18n from '../i18n'; +import { I18nInternalNS } from '../i18n/namespace-internal'; /** * @todo the first Tab on the Block — focus Plus Button, the second — focus Block Tunes Toggler, the third — focus next Block @@ -133,7 +135,7 @@ export default class Toolbox extends EventsDispatcher { items: this.toolsToBeDisplayed.map(tool => { return { icon: tool.toolbox.icon, - label: tool.toolbox.title, + label: I18n.t(I18nInternalNS.toolNames, tool.toolbox.title || _.capitalize(tool.name)), name: tool.name, onClick: (item): void => { this.toolButtonActivated(tool.name); diff --git a/test/cypress/tests/i18n.spec.ts b/test/cypress/tests/i18n.spec.ts new file mode 100644 index 00000000..2f31d48c --- /dev/null +++ b/test/cypress/tests/i18n.spec.ts @@ -0,0 +1,84 @@ +import Header from '@editorjs/header'; +import { ToolboxConfig } from '../../../types'; + +/** + * Tool class allowing to test case when capitalized tool name is used as translation key if toolbox title is missing + */ +class TestTool { + /** + * Returns toolbox config without title + */ + public static get toolbox(): ToolboxConfig { + return { + title: '', + icon: '', + }; + } +} + +describe('Editor i18n', () => { + context('Toolbox', () => { + it('should translate tool title in a toolbox', () => { + if (this && this.editorInstance) { + this.editorInstance.destroy(); + } + const toolNamesDictionary = { + Heading: 'Заголовок', + }; + + cy.createEditor({ + tools: { + header: Header, + }, + i18n: { + messages: { + toolNames: toolNamesDictionary, + }, + }, + }).as('editorInstance'); + + cy.get('[data-cy=editorjs]') + .get('div.ce-block') + .click(); + + cy.get('[data-cy=editorjs]') + .get('div.ce-toolbar__plus') + .click(); + + cy.get('[data-cy=editorjs]') + .get('div.ce-popover__item[data-item-name=header]') + .should('contain.text', toolNamesDictionary.Heading); + }); + + it('should use capitalized tool name as translation key if toolbox title is missing', () => { + if (this && this.editorInstance) { + this.editorInstance.destroy(); + } + const toolNamesDictionary = { + TestTool: 'ТестТул', + }; + + cy.createEditor({ + tools: { + testTool: TestTool, + }, + i18n: { + messages: { + toolNames: toolNamesDictionary, + }, + }, + }).as('editorInstance'); + cy.get('[data-cy=editorjs]') + .get('div.ce-block') + .click(); + + cy.get('[data-cy=editorjs]') + .get('div.ce-toolbar__plus') + .click(); + + cy.get('[data-cy=editorjs]') + .get('div.ce-popover__item[data-item-name=testTool]') + .should('contain.text', toolNamesDictionary.TestTool); + }); + }); +}); \ No newline at end of file