Rebroadcast mouse event for mouse down event in monaco editor (#178622)

## Summary Closes #177756 Introduces a wrapper that will ~trap~ listen on `mousedown` events from the monaco editor and rebroadcast this event type so that when it's integrated, any component that needs interaction events still gets events related to the monaco but with the wrapper as the event target. The advantage of this approach is we keep the default behaviour for events propagated for monaco editor as is, also applying style of [`display:contents`](https://www.w3.org/TR/css-display-3/#box-generation) ensures this extra wrapper element does not modify the existing layout.
elastic · Mar 19, 2024 · 88992d0 · 88992d0
1 parent 2cf76fd
commit 88992d0
Show file tree

Hide file tree

Showing 2 changed files with 117 additions and 79 deletions.
diff --git a/packages/shared-ux/code_editor/impl/__snapshots__/code_editor.test.tsx.snap b/packages/shared-ux/code_editor/impl/__snapshots__/code_editor.test.tsx.snap
diff --git a/packages/shared-ux/code_editor/impl/code_editor.tsx b/packages/shared-ux/code_editor/impl/code_editor.tsx
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { useState, useRef, useCallback, useMemo, useEffect, KeyboardEvent } from 'react';
+import React, { useState, useRef, useCallback, useMemo, useEffect, KeyboardEvent, FC } from 'react';
 import ReactMonacoEditor, {
   type MonacoEditorProps as ReactMonacoEditorProps,
 } from 'react-monaco-editor';
@@ -507,42 +507,44 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
             </EuiFlexGroup>
           </div>
         ) : null}
-        <MonacoEditor
-          theme={theme}
-          language={languageId}
-          value={value}
-          onChange={onChange}
-          width={isFullScreen ? '100vw' : width}
-          height={isFullScreen ? '100vh' : fitToContent ? undefined : height}
-          editorWillMount={_editorWillMount}
-          editorDidMount={_editorDidMount}
-          editorWillUnmount={_editorWillUnmount}
-          options={{
-            padding: allowFullScreen || isCopyable ? { top: 24 } : {},
-            renderLineHighlight: 'none',
-            scrollBeyondLastLine: false,
-            minimap: {
-              enabled: false,
-            },
-            scrollbar: {
-              useShadows: false,
-              // Scroll events are handled only when there is scrollable content. When there is scrollable content, the
-              // editor should scroll to the bottom then break out of that scroll context and continue scrolling on any
-              // outer scrollbars.
-              alwaysConsumeMouseWheel: false,
-            },
-            wordBasedSuggestions: false,
-            wordWrap: 'on',
-            wrappingIndent: 'indent',
-            matchBrackets: 'never',
-            fontFamily: 'Roboto Mono',
-            fontSize: isFullScreen ? 16 : 12,
-            lineHeight: isFullScreen ? 24 : 21,
-            // @ts-expect-error, see https://github.com/microsoft/monaco-editor/issues/3829
-            'bracketPairColorization.enabled': false,
-            ...options,
-          }}
-        />
+        <UseBug177756ReBroadcastMouseDown>
+          <MonacoEditor
+            theme={theme}
+            language={languageId}
+            value={value}
+            onChange={onChange}
+            width={isFullScreen ? '100vw' : width}
+            height={isFullScreen ? '100vh' : fitToContent ? undefined : height}
+            editorWillMount={_editorWillMount}
+            editorDidMount={_editorDidMount}
+            editorWillUnmount={_editorWillUnmount}
+            options={{
+              padding: allowFullScreen || isCopyable ? { top: 24 } : {},
+              renderLineHighlight: 'none',
+              scrollBeyondLastLine: false,
+              minimap: {
+                enabled: false,
+              },
+              scrollbar: {
+                useShadows: false,
+                // Scroll events are handled only when there is scrollable content. When there is scrollable content, the
+                // editor should scroll to the bottom then break out of that scroll context and continue scrolling on any
+                // outer scrollbars.
+                alwaysConsumeMouseWheel: false,
+              },
+              wordBasedSuggestions: false,
+              wordWrap: 'on',
+              wrappingIndent: 'indent',
+              matchBrackets: 'never',
+              fontFamily: 'Roboto Mono',
+              fontSize: isFullScreen ? 16 : 12,
+              lineHeight: isFullScreen ? 24 : 21,
+              // @ts-expect-error, see https://github.com/microsoft/monaco-editor/issues/3829
+              'bracketPairColorization.enabled': false,
+              ...options,
+            }}
+          />
+        </UseBug177756ReBroadcastMouseDown>
       </FullScreenDisplay>
     </div>
   );
@@ -695,3 +697,29 @@ const useBug175684OnChange = (onChange: CodeEditorProps['onChange']) => {
 
   return onChangeWrapper;
 };
+
+const UseBug177756ReBroadcastMouseDown: FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [$codeWrapper, setCodeWrapper] = React.useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    const rebroadcastEvent = (event: MouseEvent) => {
+      // rebroadcast mouse event to accommodate integration with other parts of the codebase
+      // especially that the monaco it self does prevent default for mouse events
+      if ($codeWrapper?.contains(event.target as Node) && event.defaultPrevented) {
+        $codeWrapper.dispatchEvent(new MouseEvent(event.type, event));
+      }
+    };
+
+    if ($codeWrapper) {
+      $codeWrapper.addEventListener('mousedown', rebroadcastEvent);
+
+      return () => $codeWrapper.removeEventListener('mousedown', rebroadcastEvent);
+    }
+  }, [$codeWrapper]);
+
+  return (
+    <div ref={setCodeWrapper} style={{ display: 'contents' }}>
+      {children}
+    </div>
+  );
+};