Make editor commands extendable

src/browser/modules/Editor/MainEditor.tsx

@@ -89,6 +89,7 @@ import {
   FULLSCREEN_SHORTCUT,
   printShortcut
 } from 'browser/modules/App/keyboardShortcuts'
+import { KeyCode } from 'monaco-editor'
 
 type EditorFrameProps = {
   bus: Bus
@@ -285,7 +286,9 @@ export function MainEditor({
               }
               onExecute={createRunCommandFunction(commandSources.editor)}
               ref={editorRef}
-              toggleFullscreen={toggleFullscreen}
+              additionalCommands={{
+                [KeyCode.Escape]: toggleFullscreen
+              }}
               useDb={useDb}
               sendCypherQuery={(text: string) =>
                 new Promise((res, rej) =>

src/browser/modules/Frame/FrameEditor.tsx

@@ -67,6 +67,7 @@ import { base, stopIconColor } from 'browser-styles/themes'
 import { NEO4J_BROWSER_USER_ACTION_QUERY } from 'services/bolt/txMetadata'
 import { QueryResult } from 'neo4j-driver'
 import { CypherEditor } from 'neo4j-arc/cypher-language-support'
+import { KeyCode } from 'monaco-editor'
 
 type FrameEditorBaseProps = {
   frame: Frame
@@ -196,7 +197,9 @@ function FrameEditor({
               onChange={setEditorValue}
               onExecute={run}
               ref={editorRef}
-              toggleFullscreen={fullscreenToggle}
+              additionalCommands={{
+                [KeyCode.Escape]: fullscreenToggle
+              }}
               useDb={frame.useDb}
               value={editorValue}
               sendCypherQuery={(text: string) =>

src/neo4j-arc/common/utils/objectUtils.ts

@@ -39,3 +39,7 @@ export function mapObjectValues<A, B>(
     {}
   )
 }
+
+export function keys<T>(object: T): Array<keyof T> {
+  return Object.keys(object) as Array<keyof T>
+}

src/neo4j-arc/cypher-language-support/cypher-editor/CypherEditor.test.tsx

@@ -35,7 +35,6 @@ describe('Monaco', () => {
         onChange={noOp}
         onExecute={noOp}
         isFullscreen={false}
-        toggleFullscreen={noOp}
         id="id"
         sendCypherQuery={(() => {}) as any}
       />

src/neo4j-arc/cypher-language-support/cypher-editor/CypherEditor.tsx

@@ -26,6 +26,7 @@ import { QueryResult } from 'neo4j-driver-core'
 import React from 'react'
 import styled from 'styled-components'
 import { ResizeObserver } from '@juggle/resize-observer'
+import { keys } from '../../common/utils/objectUtils'
 
 const shouldCheckForHints = (code: string) =>
   code.trim().length > 0 &&
@@ -61,7 +62,9 @@ type CypherEditorDefaultProps = {
   onDisplayHelpKeys: () => void
   onExecute?: (value: string) => void
   sendCypherQuery: (query: string) => Promise<QueryResult>
-  toggleFullscreen: () => void
+  additionalCommands: Partial<
+    Record<monaco.KeyCode, monaco.editor.ICommandHandler>
+  >
   useDb: null | string
   value: string
 }
@@ -82,7 +85,7 @@ const cypherEditorDefaultProps: CypherEditorDefaultProps = {
         result: { summary: { notifications: [] } }
       } as any)
     ),
-  toggleFullscreen: () => undefined,
+  additionalCommands: {},
   useDb: null,
   value: ''
 }
@@ -385,11 +388,15 @@ export class CypherEditor extends React.Component<
       KeyMod.CtrlCmd | KeyCode.US_DOT,
       this.props.onDisplayHelpKeys
     )
-    this.editor.addCommand(
-      KeyCode.Escape,
-      this.props.toggleFullscreen,
-      '!suggestWidgetVisible && !findWidgetVisible'
-    )
+
+    keys(this.props.additionalCommands).forEach(key => {
+      const command = this.props.additionalCommands[key]
+      if (!command) {
+        return
+      }
+
+      this?.editor?.addCommand(key, command)
+    })
 
     this.onContentUpdate()
 

src/neo4j-arc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-devtools/arc",
-  "version": "0.0.37",
+  "version": "0.0.38",
   "main": "dist/neo4j-arc.js",
   "author": "Neo4j Inc.",
   "license": "GPL-3.0",