feat: 🎸 evaluate expression on Ctrl + Enter press (#36138) (#36341)

* feat: 🎸 evaluate expression on Ctrl + Enter press

* feat: 🎸 add ctrl + enter shortcut to canvas keymap

* feat: 🎸 use react-shortcuts to run expressions

* feat: 🎸 run expression selection on Shift + Ctrl + Enter

* feat: 🎸 don't run exec shortcuts when full expression invalid

* feat: 🎸 don't trigger autocompletion on Ctrl + Enter

* feat: 🎸 exec expressions shortcuts only when input is focused

* fix: 🐛 remove Shift + ... shortcut

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

@@ -17,11 +17,29 @@ import {
   EuiRange,
   EuiToolTip,
 } from '@elastic/eui';
+import { Shortcuts } from 'react-shortcuts';
 import { ExpressionInput } from '../expression_input';
 
+const { useRef } = React;
+
 const minFontSize = 12;
 const maxFontSize = 32;
 
+const shortcut = (ref, cmd, callback) => (
+  <Shortcuts
+    name="EXPRESSION"
+    handler={(command, event) => {
+      const isInputActive = ref.current && ref.current.ref === event.target;
+      if (isInputActive && command === cmd) {
+        callback();
+      }
+    }}
+    targetNodeSelector="body"
+    global
+    stopPropagation
+  />
+);
+
 export const Expression = ({
   functionDefinitions,
   formState,
@@ -36,11 +54,18 @@ export const Expression = ({
   isCompact,
   toggleCompactView,
 }) => {
+  const refExpressionInput = useRef(null);
   return (
     <EuiPanel
       className={`canvasTray__panel canvasExpression--${isCompact ? 'compactSize' : 'fullSize'}`}
     >
+      {shortcut(refExpressionInput, 'RUN', () => {
+        if (!error) {
+          setExpression(formState.expression);
+        }
+      })}
       <ExpressionInput
+        ref={refExpressionInput}
         fontSize={fontSize}
         isCompact={isCompact}
         functionDefinitions={functionDefinitions}

x-pack/plugins/canvas/public/components/expression_input/expression_input.js

@@ -59,6 +59,15 @@ export class ExpressionInput extends React.Component {
     this.props.onChange(value);
   }
 
+  getSelection() {
+    if (!this.ref) {
+      return null;
+    }
+    const start = this.ref.selectionStart;
+    const finish = this.ref.selectionEnd;
+    return this.ref.value.substring(start, finish);
+  }
+
   stash = debounce(
     value => {
       this.undoHistory.push(value);

x-pack/plugins/canvas/public/lib/keymap.js

@@ -121,4 +121,8 @@ export const keymap = {
     ),
     REFRESH: refreshShortcut,
   },
+  EXPRESSION: {
+    displayName: 'Expression controls',
+    RUN: { ...getShortcuts('enter', ['ctrl']), help: 'Run whole expression' },
+  },
 };