fix(ui): toolbox items labels i18n (#2031)

* Fix toolbox item label translation

* Update version

* Update changelog

* Update docs/CHANGELOG.md

Co-authored-by: George Berezhnoy <gohabereg@users.noreply.github.com>

* Add fallback for missing toolbox title

* Update docs/CHANGELOG.md

Co-authored-by: Peter Savchenko <specc.dev@gmail.com>

* Add test

* Add testcase for missing toolbox title

Co-authored-by: George Berezhnoy <gohabereg@users.noreply.github.com>
Co-authored-by: Peter Savchenko <specc.dev@gmail.com>

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 🥳

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",

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<ToolboxEvent> {
       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);

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: '<svg width="17" height="15" viewBox="0 0 336 276" xmlns="http://www.w3.org/2000/svg"><path d="M291 150V79c0-19-15-34-34-34H79c-19 0-34 15-34 34v42l67-44 81 72 56-29 42 30zm0 52l-43-30-56 30-81-67-66 39v23c0 19 15 34 34 34h178c17 0 31-13 34-29zM79 0h178c44 0 79 35 79 79v118c0 44-35 79-79 79H79c-44 0-79-35-79-79V79C0 35 35 0 79 0z"/></svg>',
+    };
+  }
+}
+
+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);
+    });
+  });
+});