From 56627622d23398c7305314e7fdf284c6aa34af05 Mon Sep 17 00:00:00 2001 From: Noah Mayerhofer Date: Mon, 7 Nov 2022 13:53:43 +0100 Subject: [PATCH 1/3] Make editor commands extendable --- src/browser/modules/Editor/MainEditor.tsx | 5 +++- src/browser/modules/Frame/FrameEditor.tsx | 5 +++- .../cypher-editor/CypherEditor.test.tsx | 1 - .../cypher-editor/CypherEditor.tsx | 26 ++++++++++++++----- 4 files changed, 27 insertions(+), 10 deletions(-) diff --git a/src/browser/modules/Editor/MainEditor.tsx b/src/browser/modules/Editor/MainEditor.tsx index 205b12c966e..da737631104 100644 --- a/src/browser/modules/Editor/MainEditor.tsx +++ b/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) => diff --git a/src/browser/modules/Frame/FrameEditor.tsx b/src/browser/modules/Frame/FrameEditor.tsx index f4ca8c70180..5a90591ae06 100644 --- a/src/browser/modules/Frame/FrameEditor.tsx +++ b/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) => diff --git a/src/neo4j-arc/cypher-language-support/cypher-editor/CypherEditor.test.tsx b/src/neo4j-arc/cypher-language-support/cypher-editor/CypherEditor.test.tsx index 19e8ffe6423..415297f03b8 100644 --- a/src/neo4j-arc/cypher-language-support/cypher-editor/CypherEditor.test.tsx +++ b/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} /> 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 ced69c20264..b9d34525ff5 100644 --- a/src/neo4j-arc/cypher-language-support/cypher-editor/CypherEditor.tsx +++ b/src/neo4j-arc/cypher-language-support/cypher-editor/CypherEditor.tsx @@ -61,7 +61,9 @@ type CypherEditorDefaultProps = { onDisplayHelpKeys: () => void onExecute?: (value: string) => void sendCypherQuery: (query: string) => Promise - toggleFullscreen: () => void + additionalCommands: Partial< + Record + > useDb: null | string value: string } @@ -82,7 +84,7 @@ const cypherEditorDefaultProps: CypherEditorDefaultProps = { result: { summary: { notifications: [] } } } as any) ), - toggleFullscreen: () => undefined, + additionalCommands: {}, useDb: null, value: '' } @@ -385,11 +387,21 @@ export class CypherEditor extends React.Component< KeyMod.CtrlCmd | KeyCode.US_DOT, this.props.onDisplayHelpKeys ) - this.editor.addCommand( - KeyCode.Escape, - this.props.toggleFullscreen, - '!suggestWidgetVisible && !findWidgetVisible' - ) + + function keys(object: T) { + return Object.keys(object) as Array + } + + keys(this.props.additionalCommands).forEach(key => { + const command = this.props.additionalCommands[key] + if (!command) { + return + } + + this?.editor?.addCommand(key, () => { + command() + }) + }) this.onContentUpdate() From 0cc35a273d7e93ae4f504024ecf62429a334832a Mon Sep 17 00:00:00 2001 From: Noah Mayerhofer Date: Mon, 7 Nov 2022 14:06:37 +0100 Subject: [PATCH 2/3] update arc version --- src/neo4j-arc/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/neo4j-arc/package.json b/src/neo4j-arc/package.json index 2f20169657d..5e078c1235e 100644 --- a/src/neo4j-arc/package.json +++ b/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", From 3f1777a67d02200f3e214a14b63a1db5eb8d0819 Mon Sep 17 00:00:00 2001 From: Noah Mayerhofer Date: Mon, 7 Nov 2022 14:38:54 +0100 Subject: [PATCH 3/3] fixes after review --- src/neo4j-arc/common/utils/objectUtils.ts | 4 ++++ .../cypher-editor/CypherEditor.tsx | 9 ++------- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/neo4j-arc/common/utils/objectUtils.ts b/src/neo4j-arc/common/utils/objectUtils.ts index 237ba84ddfa..14fc7e20cd4 100644 --- a/src/neo4j-arc/common/utils/objectUtils.ts +++ b/src/neo4j-arc/common/utils/objectUtils.ts @@ -39,3 +39,7 @@ export function mapObjectValues( {} ) } + +export function keys(object: T): Array { + return Object.keys(object) as Array +} 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 b9d34525ff5..e1501cf06b0 100644 --- a/src/neo4j-arc/cypher-language-support/cypher-editor/CypherEditor.tsx +++ b/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 && @@ -388,19 +389,13 @@ export class CypherEditor extends React.Component< this.props.onDisplayHelpKeys ) - function keys(object: T) { - return Object.keys(object) as Array - } - keys(this.props.additionalCommands).forEach(key => { const command = this.props.additionalCommands[key] if (!command) { return } - this?.editor?.addCommand(key, () => { - command() - }) + this?.editor?.addCommand(key, command) }) this.onContentUpdate()