fix(popover): i18n in nested popover

docs/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+### 2.30.3
+
+- `Fix` – I18n in nested popover
+
 ### 2.30.2
 
 - `Fix` – The onChange callback won't be fired when editor is initialized in the Read-Only mode

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/editorjs",
-  "version": "2.30.2",
+  "version": "2.30.3",
   "description": "Editor.js — open source block-style WYSIWYG editor with JSON output",
   "main": "dist/editorjs.umd.js",
   "module": "dist/editorjs.mjs",

src/components/utils/popover/popover-desktop.ts

@@ -255,6 +255,7 @@ export class PopoverDesktop extends PopoverAbstract {
       items: item.children,
       nestingLevel: this.nestingLevel + 1,
       flippable: item.isChildrenFlippable,
+      messages: this.messages,
     });
 
     item.onChildrenOpen();

test/cypress/tests/utils/popover.cy.ts

@@ -881,6 +881,95 @@ describe('Popover', () => {
       .should('exist');
   });
 
+  it.only('shoould support i18n in nested popover', () => {
+    /**
+     *
+     */
+    class TestTune {
+      public static isTune = true;
+
+      /** Tool data displayed in block tunes popover */
+      public render(): MenuConfig {
+        return  {
+          icon: 'Icon',
+          title: 'Title',
+          toggle: 'key',
+          name: 'test-item',
+          children: {
+            searchable: true,
+            items: [
+              {
+                icon: 'Icon',
+                title: 'Title',
+                name: 'nested-test-item',
+                onActivate: (): void => {},
+              },
+            ],
+          },
+        };
+      }
+    }
+
+    /** Create editor instance */
+    cy.createEditor({
+      tools: {
+        testTool: TestTune,
+      },
+      tunes: [ 'testTool' ],
+      data: {
+        blocks: [
+          {
+            type: 'paragraph',
+            data: {
+              text: 'Hello',
+            },
+          },
+        ],
+      },
+      i18n: {
+        messages: {
+          ui: {
+            popover: {
+              'Filter': 'Искать',
+              // eslint-disable-next-line @typescript-eslint/naming-convention -- i18n
+              'Nothing found': 'Ничего не найдено',
+            },
+          },
+        },
+      },
+    });
+
+    /** Open block tunes menu */
+    cy.get('[data-cy=editorjs]')
+      .get('.cdx-block')
+      .click();
+
+    cy.get('[data-cy=editorjs]')
+      .get('.ce-toolbar__settings-btn')
+      .click();
+
+    /** Click the item */
+    cy.get('[data-cy=editorjs]')
+      .get('[data-item-name="test-item"]')
+      .click();
+
+    /** Check nested popover search input has placeholder text with i18n */
+    cy.get('[data-cy=editorjs]')
+      .get('[data-cy=block-tunes] .ce-popover--nested .cdx-search-field__input')
+      .invoke('attr', 'placeholder')
+      .should('eq', 'Искать');
+
+    /** Enter search query */
+    cy.get('[data-cy=editorjs]')
+      .get('[data-cy=block-tunes] .ce-popover--nested .cdx-search-field__input')
+      .type('Some text');
+
+    /** Check nested popover has nothing found message with i18n */
+    cy.get('[data-cy=editorjs]')
+      .get('[data-cy=block-tunes] .ce-popover--nested .ce-popover__nothing-found-message')
+      .should('have.text', 'Ничего не найдено');
+  });
+
   describe('Inline Popover', () => {
     it('should open nested popover on click instead of hover', () => {
       cy.createEditor({