diff --git a/ui/src/shared/components/FluxMonacoEditor.tsx b/ui/src/shared/components/FluxMonacoEditor.tsx index 3067bc3038..28deda673e 100644 --- a/ui/src/shared/components/FluxMonacoEditor.tsx +++ b/ui/src/shared/components/FluxMonacoEditor.tsx @@ -6,17 +6,51 @@ import MonacoEditor from 'react-monaco-editor' import {tokenizeFlux} from 'src/external/monaco.fluxLang' import {addFluxTheme} from 'src/external/monaco.fluxTheme' import {addSnippets} from 'src/external/monaco.fluxCompletions' +import {OnChangeScript} from 'src/types/flux' + +interface Position { + line: number + ch: number +} interface Props { script: string + onChangeScript: OnChangeScript + onSubmitScript?: () => void + onCursorChange?: (position: Position) => void } -const FluxEditorMonaco: FC = ({script}) => { +const FluxEditorMonaco: FC = props => { const editorWillMount = monaco => { tokenizeFlux(monaco) addFluxTheme(monaco) addSnippets(monaco) } + const editorDidMount = editor => { + editor.onDidChangeCursorPosition(evt => { + const {position} = evt + const {onCursorChange} = props + const pos = { + line: position.lineNumber, + ch: position.column, + } + + if (onCursorChange) { + onCursorChange(pos) + } + }) + + editor.onKeyUp(evt => { + const {ctrlKey, code} = evt + const {onSubmitScript} = props + if (ctrlKey && code === 'Enter') { + if (onSubmitScript) { + onSubmitScript() + } + } + }) + } + const {script, onChangeScript} = props return (
@@ -26,7 +60,9 @@ const FluxEditorMonaco: FC = ({script}) => { language="flux" theme="vs-light" value={script} + onChange={onChangeScript} editorWillMount={editorWillMount} + editorDidMount={editorDidMount} />
) diff --git a/ui/src/timeMachine/components/TimeMachineFluxEditor.tsx b/ui/src/timeMachine/components/TimeMachineFluxEditor.tsx index d98fd0d6de..1d4e3b9d37 100644 --- a/ui/src/timeMachine/components/TimeMachineFluxEditor.tsx +++ b/ui/src/timeMachine/components/TimeMachineFluxEditor.tsx @@ -58,7 +58,14 @@ class TimeMachineFluxEditor extends PureComponent { if (ENABLE_MONACO) { const FluxMonacoEditor = require('src/shared/components/FluxMonacoEditor') .default - return + return ( + + ) } return (