fix: moustache brackets not showing up in bold (#23245)

## Description
This fixes an issue where the moustache brackets `{{` or `}}` were not
being shown in bold.

#### PR fixes following issue(s)
Fixes #7113

#### Media
Before|After
---|---
<img width="276" alt="Screenshot 2023-05-12 at 1 09 14 AM"
src="https://github.com/appsmithorg/appsmith/assets/13567359/2149bb5a-089e-4fa6-aa5e-a4f89b84d188">|<img
width="272" alt="Screenshot 2023-05-12 at 1 08 34 AM"
src="https://github.com/appsmithorg/appsmith/assets/13567359/bdc2d099-5750-4bdb-96b3-8836b7f2d043">

#### Type of change
- Bug fix (non-breaking change which fixes an issue)

## Testing
>
#### How Has This Been Tested?
> Please describe the tests that you ran to verify your changes. Also
list any relevant details for your test configuration.
> Delete anything that is not relevant
- [ ] Manual
- [ ] Jest
- [x] Cypress
>
>
#### Test Plan
> Add Testsmith test cases links that relate to this PR
>
>
#### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)
>
>
>
## Checklist:
#### Dev activity
- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Test-plan-implementation#speedbreaker-features-to-consider-for-every-change)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans/_edit#areas-of-interest)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed

app/client/cypress/e2e/Regression/ClientSide/BugTests/Bug7113_Spec.ts

@@ -0,0 +1,25 @@
+import { WIDGET } from "../../../../locators/WidgetLocators";
+import * as _ from "../../../../support/Objects/ObjectsCore";
+
+const { entityExplorer, propPane } = _;
+
+describe("Bug 7113 - Moustache brackets in bold", () => {
+  it("1. should show {{ }} in bold", () => {
+    entityExplorer.DragDropWidgetNVerify(WIDGET.BUTTON, 200, 200);
+
+    entityExplorer.SelectEntityByName("Button1", "Widgets");
+
+    propPane.EnterJSContext(
+      "onClick",
+      `{{Api1.run({
+      "key": Button1.text
+    }).then(() => {
+      storeValue('my-secret-key', Button3.text);
+      Query1.run();
+    }).catch(() => {});const a = { a: "key"} }}`,
+    );
+
+    cy.get("span").contains("{{").should("have.class", "binding-brackets");
+    cy.get("span").contains("}}").should("have.class", "binding-brackets");
+  });
+});

app/client/src/components/editorComponents/CodeEditor/MarkHelpers/bindingMarker.test.ts

@@ -0,0 +1,64 @@
+import { AUTOCOMPLETE_MATCH_REGEX } from "constants/BindingsConstants";
+
+describe("AUTOCOMPLETE_MATCH_REGEX match", () => {
+  it("1. should match all valid {{ }} bindings", () => {
+    const tests = [
+      {
+        value: `Hello {{appsmith.mode}}A{{Button1.text}} {{{ a: 2 }}}A`,
+        matches: [
+          { start: 6, end: 8 },
+          { start: 21, end: 23 },
+          { start: 24, end: 26 },
+          { start: 38, end: 40 },
+          { start: 41, end: 43 },
+          { start: 51, end: 53 },
+        ],
+      },
+      {
+        value: `{{Api1.run().then(() => {
+      showAlert("", '');
+    });}}`,
+        matches: [
+          { start: 0, end: 2 },
+          { start: 58, end: 60 },
+        ],
+      },
+      {
+        value: `{{(() => { const a = "}"; return a;})()}}`,
+        matches: [
+          { start: 0, end: 2 },
+          { start: 39, end: 41 },
+        ],
+      },
+      {
+        value: `{{Api1.run().then(() => {
+      Api1.run();
+    }).catch(() => {
+      showAlert("", '');
+    });}}`,
+        matches: [
+          { start: 0, end: 2 },
+          { start: 97, end: 99 },
+        ],
+      },
+      {
+        value: `{{ FilePicker.files[0] ? FilePicker.files[0] : {}}}`,
+        matches: [
+          { start: 0, end: 2 },
+          { start: 49, end: 51 },
+        ],
+      },
+    ];
+
+    test.each(
+      tests.map(({ matches, value }) => {
+        let match;
+        while ((match = AUTOCOMPLETE_MATCH_REGEX.exec(value)) != null) {
+          expect(match.index).toBe(matches[0].start);
+          expect(AUTOCOMPLETE_MATCH_REGEX.lastIndex).toBe(matches[0].end);
+          matches.shift();
+        }
+      }),
+    );
+  });
+});

app/client/src/constants/BindingsConstants.ts

@@ -1,4 +1,4 @@
 export const DATA_BIND_REGEX = /{{([\s\S]*?)}}/;
 export const DATA_BIND_REGEX_GLOBAL = /{{([\s\S]*?)}}/g;
-export const AUTOCOMPLETE_MATCH_REGEX = /{{\s*.*?\s*}}/g;
+export const AUTOCOMPLETE_MATCH_REGEX = /(?<!{){{|}}(?!})/g;
 export const QUOTED_BINDING_REGEX = /["']({{[\s\S]*?}})["']/g;