From 057bf17a6fc2d5e05c662107918d7c3e943d077c Mon Sep 17 00:00:00 2001
From: Tatiana Fomina <fomina.tatianaaa@yandex.ru>
Date: Thu, 11 Jul 2024 22:25:36 +0300
Subject: [PATCH] Fix i18n in nested popover (#2779)

---
 docs/CHANGELOG.md                             |  4 +
 package.json                                  |  2 +-
 .../utils/popover/popover-desktop.ts          |  1 +
 test/cypress/tests/utils/popover.cy.ts        | 89 +++++++++++++++++++
 4 files changed, 95 insertions(+), 1 deletion(-)

diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index c2dec5f04..09401cceb 100644
--- a/docs/CHANGELOG.md
+++ b/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
diff --git a/package.json b/package.json
index c6ffe9de8..c5c1bd3d3 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/utils/popover/popover-desktop.ts b/src/components/utils/popover/popover-desktop.ts
index 73cd10303..7adff41f8 100644
--- a/src/components/utils/popover/popover-desktop.ts
+++ b/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();
diff --git a/test/cypress/tests/utils/popover.cy.ts b/test/cypress/tests/utils/popover.cy.ts
index 49fa92901..748747ca1 100644
--- a/test/cypress/tests/utils/popover.cy.ts
+++ b/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({