HtmlEditor: Fix for context menu not closing when escape button pressed (DevExpress#28954)

Author: nikkithelegendarypokemonster

packages/devextreme/js/__internal/ui/html_editor/modules/m_tableContextMenu.ts

@@ -71,6 +71,12 @@ if (Quill) {
       eventsEngine.off(this.editorInstance._getContent(), CONTEXT_MENU_EVENT);
     }
 
+    _onContextMenuInitialized(e) {
+      e.component.registerKeyHandler('escape', () => {
+        this.editorInstance.focus();
+      });
+    }
+
     _createContextMenu(items) {
       const $container = $('<div>').appendTo(this.editorInstance.$element());
       const menuConfig = this._getMenuConfig(items);
@@ -160,6 +166,9 @@ if (Quill) {
         target: this._quillContainer,
         showEvent: null,
         hideOnParentScroll: false,
+        onInitialized: (e) => {
+          this._onContextMenuInitialized(e);
+        },
         items: customItems,
       };
     }

packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/tableContextMenuIntegration.tests.js

@@ -33,6 +33,7 @@ const CONTEXT_MENU_OVERLAY_SELECTOR = '.dx-context-menu.dx-overlay-content';
 const ITEM_HAS_SUBMENU_CLASS = 'dx-menu-item-has-submenu';
 const ITEM_HAS_TEXT_CLASS = 'dx-menu-item-has-text';
 const SUBMENU_CLASS = 'dx-submenu';
+const HTML_EDITOR_CONTENT_CLASS = 'dx-htmleditor-content';
 const SUBMENU_ITEMS_SELECTOR = `.${SUBMENU_CLASS} .${SUBMENU_CLASS} .${ITEM_HAS_TEXT_CLASS}`;
 
 module('Table context menu integration', {
@@ -383,6 +384,21 @@ module('Table context menu integration', {
 
             assert.strictEqual($table.length, 0, 'Table is deleted');
         });
+
+        test('Pressing escape button should return focus to html editor', function(assert) {
+            this.createWidget();
+
+            const contextMenu = this.getContextMenu();
+            const $editorContent = $(`.${HTML_EDITOR_CONTENT_CLASS}`);
+
+            contextMenu.trigger($.Event('keydown', { key: 'Escape', keyCode: 27, which: 27 }));
+            this.clock.tick(10);
+
+            const shadowRoot = document.activeElement.shadowRoot;
+            const activeElement = shadowRoot ? shadowRoot.activeElement : document.activeElement;
+
+            assert.strictEqual(activeElement, $editorContent.get(0), 'Editor should regain focus after Escape');
+        });
     });
 
     module('Custom context menu', {}, () => {