From 0e47c0a4c0d3b5452698e743b6d4f08cbc390642 Mon Sep 17 00:00:00 2001
From: Piyush Mishra <piyush@codeitout.com>
Date: Thu, 10 Dec 2020 11:48:59 +0530
Subject: [PATCH] Fix brackets mismatch (#2019)

---
 .../CodeEditor/EditorConfig.ts                |  1 +
 .../editorComponents/CodeEditor/index.tsx     | 23 +++++++++++++++----
 2 files changed, 19 insertions(+), 5 deletions(-)

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<Props, State> {
       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<Props, State> {
     }
   };
 
+  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 = () => {