diff --git a/app/client/src/components/editorComponents/CodeEditor/EditorConfig.ts b/app/client/src/components/editorComponents/CodeEditor/EditorConfig.ts index f2d3f93b6f..1f649f4cfd 100644 --- a/app/client/src/components/editorComponents/CodeEditor/EditorConfig.ts +++ b/app/client/src/components/editorComponents/CodeEditor/EditorConfig.ts @@ -8,6 +8,7 @@ export enum EditorModes { JSON = "application/json", JSON_WITH_BINDING = "json-js", SQL_WITH_BINDING = "sql-js", + JAVASCRIPT = "javascript", } export enum EditorTheme { diff --git a/app/client/src/components/editorComponents/CodeEditor/index.tsx b/app/client/src/components/editorComponents/CodeEditor/index.tsx index 29e17b9fdb..9220603a9e 100644 --- a/app/client/src/components/editorComponents/CodeEditor/index.tsx +++ b/app/client/src/components/editorComponents/CodeEditor/index.tsx @@ -22,6 +22,7 @@ import AnalyticsUtil from "utils/AnalyticsUtil"; import "components/editorComponents/CodeEditor/modes"; import { EditorConfig, + EditorModes, EditorSize, EditorTheme, EditorThemes, @@ -140,6 +141,7 @@ class CodeEditor extends Component { this.editor.on("change", this.onChangeTigger); this.editor.on("keyup", this.handleAutocompleteHide); this.editor.on("focus", this.handleEditorFocus); + this.editor.on("cursorActivity", this.handleCursorMovement); this.editor.on("focus", this.onFocusTrigger); this.editor.on("blur", this.handleEditorBlur); if (this.props.height) { @@ -216,17 +218,28 @@ class CodeEditor extends Component { } }; + handleCursorMovement = (cm: CodeMirror.Editor) => { + // ignore if disabled + if (!this.props.input.onChange || this.props.disabled) { + return; + } + const mode = cm.getModeAt(cm.getCursor()); + if ( + mode && + [EditorModes.JAVASCRIPT, EditorModes.JSON].includes(mode.name) + ) { + this.editor.setOption("matchBrackets", true); + } else { + this.editor.setOption("matchBrackets", false); + } + }; + handleEditorFocus = () => { this.setState({ isFocused: true }); this.editor.refresh(); if (this.props.size === EditorSize.COMPACT) { this.editor.setOption("lineWrapping", true); } - - // Highlight matching brackets only when focused and not in readonly mode - if (this.props.input.onChange && !this.props.disabled) { - this.editor.setOption("matchBrackets", true); - } }; handleEditorBlur = () => {