Fix ace a11y listener (#60639) (#60722)

Also move the hook use_ui_ace_keyboard_mode.tsx into es_ui_shared

This was defined (and used) in both Console and SearchProfiler.

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

src/plugins/console/public/application/containers/editor/legacy/console_editor/editor.tsx

@@ -22,6 +22,7 @@ import { i18n } from '@kbn/i18n';
 import { debounce } from 'lodash';
 import { parse } from 'query-string';
 import React, { CSSProperties, useCallback, useEffect, useRef, useState } from 'react';
+import { useUIAceKeyboardMode } from '../../../../../../../es_ui_shared/public';
 // @ts-ignore
 import mappings from '../../../../../lib/mappings/mappings';
 import { ConsoleMenu } from '../../../../components';
@@ -34,7 +35,6 @@ import {
 import * as senseEditor from '../../../../models/sense_editor';
 import { autoIndent, getDocumentation } from '../console_menu_actions';
 import { subscribeResizeChecker } from '../subscribe_console_resize_checker';
-import { useUIAceKeyboardMode } from '../use_ui_ace_keyboard_mode';
 import { applyCurrentSettings } from './apply_editor_settings';
 import { registerCommands } from './keyboard_shortcuts';
 

src/plugins/es_ui_shared/public/index.ts

@@ -29,3 +29,5 @@ export {
 } from './request/np_ready_request';
 
 export { indices } from './indices';
+
+export { useUIAceKeyboardMode } from './use_ui_ace_keyboard_mode';

src/plugins/console/public/application/containers/editor/legacy/use_ui_ace_keyboard_mode.tsx → src/plugins/es_ui_shared/public/use_ui_ace_keyboard_mode.tsx

@@ -96,7 +96,7 @@ export function useUIAceKeyboardMode(aceTextAreaElement: HTMLTextAreaElement | n
     }
     return () => {
       if (aceTextAreaElement) {
-        document.removeEventListener('keydown', documentKeyDownListener);
+        document.removeEventListener('keydown', documentKeyDownListener, { capture: true });
         aceTextAreaElement.removeEventListener('keydown', aceKeydownListener);
         const textAreaContainer = aceTextAreaElement.parentElement;
         if (textAreaContainer && textAreaContainer.contains(overlayMountNode.current!)) {

x-pack/plugins/searchprofiler/public/application/editor/editor.tsx

@@ -8,7 +8,7 @@ import React, { memo, useRef, useEffect, useState } from 'react';
 import { Editor as AceEditor } from 'brace';
 
 import { initializeEditor } from './init_editor';
-import { useUIAceKeyboardMode } from './use_ui_ace_keyboard_mode';
+import { useUIAceKeyboardMode } from '../../../../../../src/plugins/es_ui_shared/public';
 
 type EditorShim = ReturnType<typeof createEditorShim>;