[Canvas] Fixes Run expression keybinding. (#135626)

* Disabled cmd+enter shortcut.

src/plugins/presentation_util/public/components/expression_input/expression_input.tsx

@@ -33,6 +33,7 @@ export const ExpressionInput = (props: ExpressionInputProps) => {
     height,
     style,
     editorRef,
+    onEditorDidMount,
     ...rest
   } = props;
   const [expression, setExpression] = useState(initialExpression);
@@ -55,6 +56,8 @@ export const ExpressionInput = (props: ExpressionInputProps) => {
     const model = editor.getModel();
     model?.updateOptions({ tabSize: 2 });
 
+    onEditorDidMount?.(editor);
+
     if (editorRef) {
       editorRef.current = editor;
     }

src/plugins/presentation_util/public/components/types.ts

@@ -35,6 +35,10 @@ export interface SaveModalDashboardProps {
  */
 export type ExpressionInputEditorRef = MutableRefObject<monaco.editor.IStandaloneCodeEditor | null>;
 
+export type OnExpressionInputEditorDidMount = (
+  editor: monaco.editor.IStandaloneCodeEditor | null
+) => void;
+
 /**
  * React Props for the ExpressionInput component.
  */
@@ -64,4 +68,6 @@ export interface ExpressionInputProps
    * (e.g. to determine if the editor is focused, etc).
    */
   editorRef?: ExpressionInputEditorRef;
+
+  onEditorDidMount?: OnExpressionInputEditorDidMount;
 }

x-pack/plugins/canvas/public/components/expression/expression.tsx

@@ -18,11 +18,15 @@ import {
   EuiPortal,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { monaco } from '@kbn/monaco';
 
 // @ts-expect-error
 import { Shortcuts } from 'react-shortcuts';
 
-import { ExpressionInputEditorRef } from '@kbn/presentation-util-plugin/public';
+import {
+  ExpressionInputEditorRef,
+  OnExpressionInputEditorDidMount,
+} from '@kbn/presentation-util-plugin/public';
 import { ExpressionInput } from '../expression_input';
 import { ToolTipShortcut } from '../tool_tip_shortcut';
 import { ExpressionFunction } from '../../../types';
@@ -105,6 +109,23 @@ export const Expression: FC<Props> = ({
     }
   };
 
+  const onEditorDidMount: OnExpressionInputEditorDidMount = (editor) => {
+    /*
+      To enable the CMD+ENTER keybinding, which is running the expression,
+      it is necessary to disable the `-editor.action.insertLineAfter`,
+      which has the same keybinding in the Monaco editor.
+      The only available way is adding the empty dynamic keybinding
+      (by using private monaco API, proposed by the monaco team), which is bubbling the event.
+    */
+    // @ts-expect-error
+    editor?._standaloneKeybindingService.addDynamicKeybinding(
+      '-editor.action.insertLineAfter',
+      // eslint-disable-next-line no-bitwise
+      monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter,
+      () => {}
+    );
+  };
+
   const expressionPanel = (
     <EuiPanel
       className={`canvasTray__panel canvasTray__panel--holdingExpression canvasExpression--${
@@ -126,6 +147,7 @@ export const Expression: FC<Props> = ({
         error={error ? error : `\u00A0`}
         expression={formState.expression}
         onChange={updateValue}
+        onEditorDidMount={onEditorDidMount}
         editorRef={refExpressionInput}
       />
       <div className="canvasExpression__settings">