fix(ConvertTo): i18n (#2776)

* Fix i18n for convert to

* Add tests

* Update changelog

---------

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

docs/CHANGELOG.md

@@ -3,6 +3,7 @@
 ### 2.30.2
 
 - `Fix` – The onChange callback won't be fired when editor is initialized in the Read-Only mode
+- `Fix` – Convert To supports i18n again
 - `Fix` – Prevent form submit on inline tool click
 
 ### 2.30.1

src/components/inline-tools/inline-tool-convert.ts

@@ -2,9 +2,11 @@ import { IconReplace } from '@codexteam/icons';
 import { InlineTool, API } from '../../../types';
 import { MenuConfig, MenuConfigItem } from '../../../types/tools';
 import * as _ from '../utils';
-import { Blocks, Selection, Tools, I18n, Caret } from '../../../types/api';
+import { Blocks, Selection, Tools, Caret, I18n } from '../../../types/api';
 import SelectionUtils from '../selection';
 import { getConvertibleToolsForBlock } from '../utils/blocks';
+import I18nInternal from '../i18n';
+import { I18nInternalNS } from '../i18n/namespace-internal';
 
 /**
  * Inline tools for converting blocks
@@ -73,7 +75,7 @@ export default class ConvertInlineTool implements InlineTool {
       tool.toolbox?.forEach((toolboxItem) => {
         result.push({
           icon: toolboxItem.icon,
-          title: toolboxItem.title,
+          title: I18nInternal.t(I18nInternalNS.toolNames, toolboxItem.title),
           name: tool.name,
           closeOnActivate: true,
           onActivate: async () => {

src/components/modules/toolbar/blockSettings.ts

@@ -219,7 +219,7 @@ export default class BlockSettings extends Module<BlockSettingsNodes> {
       tool.toolbox.forEach((toolboxItem) => {
         result.push({
           icon: toolboxItem.icon,
-          title: toolboxItem.title,
+          title: I18n.t(I18nInternalNS.toolNames, toolboxItem.title),
           name: tool.name,
           closeOnActivate: true,
           onActivate: async () => {
@@ -240,6 +240,7 @@ export default class BlockSettings extends Module<BlockSettingsNodes> {
     if (convertToItems.length > 0) {
       items.push({
         icon: IconReplace,
+        name: 'convert-to',
         title: I18n.ui(I18nInternalNS.ui.popover, 'Convert to'),
         children: {
           searchable: true,

test/cypress/tests/i18n.cy.ts

@@ -142,4 +142,102 @@ describe('Editor i18n', () => {
         .should('contain.text', toolNamesDictionary.TestTool);
     });
   });
+
+  context('Block Tunes', () => {
+    it('should translate tool name in Convert To', () => {
+      const toolNamesDictionary = {
+        Heading: 'Заголовок',
+      };
+
+      cy.createEditor({
+        tools: {
+          header: Header,
+        },
+        i18n: {
+          messages: {
+            toolNames: toolNamesDictionary,
+          },
+        },
+        data: {
+          blocks: [
+            {
+              type: 'paragraph',
+              data: {
+                text: 'Some text',
+                level: 1,
+              },
+            },
+          ],
+        },
+      });
+
+      cy.get('[data-cy=editorjs]')
+        .get('div.ce-block')
+        .click();
+
+      /** Open block tunes menu */
+      cy.get('[data-cy=editorjs]')
+        .get('.ce-block')
+        .click();
+
+      cy.get('[data-cy=editorjs]')
+        .get('.ce-toolbar__settings-btn')
+        .click();
+
+      /** Open "Convert to" menu  */
+      cy.get('[data-cy=editorjs]')
+        .get('[data-item-name=convert-to]')
+        .click();
+
+      /** Check item in convert to menu is internationalized */
+      cy.get('[data-cy=editorjs]')
+        .get('.ce-popover--nested .ce-popover-item[data-item-name=header]')
+        .should('contain.text', toolNamesDictionary.Heading);
+    });
+  });
+
+  context('Inline Toolbar', () => {
+    it('should translate tool name in Convert To', () => {
+      const toolNamesDictionary = {
+        Heading: 'Заголовок',
+      };
+
+      cy.createEditor({
+        tools: {
+          header: Header,
+        },
+        i18n: {
+          messages: {
+            toolNames: toolNamesDictionary,
+          },
+        },
+        data: {
+          blocks: [
+            {
+              type: 'paragraph',
+              data: {
+                text: 'Some text',
+                level: 1,
+              },
+            },
+          ],
+        },
+      });
+
+      /** Open Inline Toolbar */
+      cy.get('[data-cy=editorjs]')
+        .find('.ce-paragraph')
+        .selectText('Some text');
+
+      /** Open "Convert to" menu  */
+      cy.get('[data-cy=editorjs]')
+        .get('[data-item-name=convert-to]')
+        .click();
+
+      /** Check item in convert to menu is internationalized */
+      cy.get('[data-cy=editorjs]')
+        .get('.ce-popover--nested .ce-popover-item[data-item-name=header]')
+        .should('contain.text', toolNamesDictionary.Heading);
+    });
+  });
 });