diff --git a/app/client/cypress/e2e/Regression/ClientSide/BugTests/Bug7113_Spec.ts b/app/client/cypress/e2e/Regression/ClientSide/BugTests/Bug7113_Spec.ts new file mode 100644 index 0000000000..a9ce93d9ab --- /dev/null +++ b/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"); + }); +}); diff --git a/app/client/src/components/editorComponents/CodeEditor/MarkHelpers/bindingMarker.test.ts b/app/client/src/components/editorComponents/CodeEditor/MarkHelpers/bindingMarker.test.ts new file mode 100644 index 0000000000..e1e96e789c --- /dev/null +++ b/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(); + } + }), + ); + }); +}); diff --git a/app/client/src/constants/BindingsConstants.ts b/app/client/src/constants/BindingsConstants.ts index 325bb59e7e..0bf4ea3985 100644 --- a/app/client/src/constants/BindingsConstants.ts +++ b/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 = /(?