Improve Shift+Enter trigger in editor

Author: ddelemeny

package-lock.json

@@ -84,7 +84,8 @@
     "observable-hooks": "^4.2.3",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "tslib": "2.5.3"
+    "tslib": "2.5.3",
+    "usehooks-ts": "^3.1.0"
   },
   "packageManager": "[email protected]"
 }

package.json

@@ -1,9 +1,11 @@
 import { css } from '@emotion/css';
 
-import React, { createContext } from 'react';
+import React, { createContext, useRef } from 'react';
 import { debounceTime, throttleTime } from 'rxjs';
 import { useObservableCallback, useSubscription } from 'observable-hooks'
 
+import { useEventListener } from 'usehooks-ts'
+
 import { CoreApp, Field, getDefaultTimeRange, GrafanaTheme2, QueryEditorProps } from '@grafana/data';
 import { InlineLabel, useStyles2 } from '@grafana/ui';
 
@@ -84,6 +86,17 @@ export const ElasticSearchQueryField = ({ value, onChange, onSubmit }: ElasticSe
 };
 
 const QueryEditorForm = ({ value, onRunQuery }: Props) => {
+
+  const editorRef = useRef<HTMLDivElement>(null)
+  const handleKeyBindings = (e: KeyboardEvent) => {
+    // Shift+Enter triggers onRunQuery if the active element is inside the editor
+    if (e.key === "Enter" && e.shiftKey && editorRef.current?.contains(document.activeElement)) {
+      onRunQuery()
+    }
+    e.stopPropagation();
+  }
+  useEventListener("keypress", handleKeyBindings)
+
   const dispatch = useDispatch();
   const nextId = useNextId();
   const styles = useStyles2(getStyles);
@@ -107,8 +120,8 @@ const QueryEditorForm = ({ value, onRunQuery }: Props) => {
   useSubscription(submitted$, onSubmit)
 
   return (
-    <>
-      <div className={styles.root}>
+    <div ref={editorRef}>
+      <div className={styles.root} >
         <InlineLabel width={17}>Query type</InlineLabel>
         <div className={styles.queryItem}>
           <QueryTypeSelector />
@@ -124,6 +137,6 @@ const QueryEditorForm = ({ value, onRunQuery }: Props) => {
 
       <MetricAggregationsEditor nextId={nextId} />
       {showBucketAggregationsEditor && <BucketAggregationsEditor nextId={nextId} />}
-    </>
+    </div>
   );
 };