From 72a5db4934f42b9f4aa259f076c828a50638a33e Mon Sep 17 00:00:00 2001
From: Noah Mayerhofer <noahmay@users.noreply.github.com>
Date: Wed, 9 Nov 2022 15:18:01 +0100
Subject: [PATCH] make it possible to use Escape key to escape editor

---
 .../cypher-editor/CypherEditor.tsx            | 29 +++++++++++++++----
 src/neo4j-arc/package.json                    |  2 +-
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/neo4j-arc/cypher-language-support/cypher-editor/CypherEditor.tsx b/src/neo4j-arc/cypher-language-support/cypher-editor/CypherEditor.tsx
index 9ef13615f50..c740fe10b06 100644
--- a/src/neo4j-arc/cypher-language-support/cypher-editor/CypherEditor.tsx
+++ b/src/neo4j-arc/cypher-language-support/cypher-editor/CypherEditor.tsx
@@ -37,6 +37,7 @@ const shouldCheckForHints = (code: string) =>
 const MonacoStyleWrapper = styled.div`
   height: 100%;
   width: 100%;
+  overflow-x: auto;
 
   .margin .margin-view-overlays {
     margin-left: 10px;
@@ -91,7 +92,11 @@ const cypherEditorDefaultProps: CypherEditorDefaultProps = {
   value: ''
 }
 
-type CypherEditorState = { currentHistoryIndex: number; draft: string }
+type CypherEditorState = {
+  currentHistoryIndex: number
+  draft: string
+  isEditorFocusable: boolean
+}
 const UNRUN_CMD_HISTORY_INDEX = -1
 
 export class CypherEditor extends React.Component<
@@ -100,15 +105,17 @@ export class CypherEditor extends React.Component<
 > {
   state: CypherEditorState = {
     currentHistoryIndex: UNRUN_CMD_HISTORY_INDEX,
+    isEditorFocusable: true,
     draft: ''
   }
   resizeObserver: ResizeObserver
   editor?: monaco.editor.IStandaloneCodeEditor
   container?: HTMLElement
+  wrapperRef = React.createRef<HTMLDivElement>()
 
   constructor(props: CypherEditorProps) {
     super(props)
-
+    this.wrapperRef = React.createRef()
     // Wrapped in requestAnimationFrame to avoid the error "ResizeObserver loop limit exceeded"
     this.resizeObserver = new ResizeObserver(() => {
       window.requestAnimationFrame(() => {
@@ -391,6 +398,10 @@ export class CypherEditor extends React.Component<
       this.props.onDisplayHelpKeys
     )
 
+    this.editor.addCommand(KeyCode.Escape, () => {
+      this.wrapperRef.current?.focus()
+    })
+
     keys(this.props.additionalCommands).forEach(key => {
       const command = this.props.additionalCommands[key]
       if (!command) {
@@ -435,6 +446,14 @@ export class CypherEditor extends React.Component<
       <MonacoStyleWrapper
         id={this.getMonacoId()}
         className={this.props.className}
+        ref={this.wrapperRef}
+        tabIndex={-1}
+        onFocus={() => {
+          this.setState({ isEditorFocusable: false })
+        }}
+        onBlur={() => {
+          this.setState({ isEditorFocusable: true })
+        }}
       />
     )
   }
@@ -458,9 +477,9 @@ export class CypherEditor extends React.Component<
       this.onContentUpdate()
     }
 
-    if (tabIndex !== prevProps.tabIndex) {
-      this.editor?.updateOptions({ tabIndex: this.props.tabIndex })
-    }
+    this.editor?.updateOptions({
+      tabIndex: this.state.isEditorFocusable ? this.props.tabIndex : -1
+    })
   }
 
   componentWillUnmount = (): void => {
diff --git a/src/neo4j-arc/package.json b/src/neo4j-arc/package.json
index f6d48f0a290..bb5c97db94f 100644
--- a/src/neo4j-arc/package.json
+++ b/src/neo4j-arc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-devtools/arc",
-  "version": "0.0.39",
+  "version": "0.0.40",
   "main": "dist/neo4j-arc.js",
   "author": "Neo4j Inc.",
   "license": "GPL-3.0",