diff --git a/app/src/components/templateEditor/language/__tests__/languageUtils.test.ts b/app/src/components/templateEditor/language/__tests__/languageUtils.test.ts index ad5b1c25b9..a6b06eefe8 100644 --- a/app/src/components/templateEditor/language/__tests__/languageUtils.test.ts +++ b/app/src/components/templateEditor/language/__tests__/languageUtils.test.ts @@ -38,6 +38,10 @@ can you help with this json? input: `{"name": "{{{name}}}"}`, expected: ["{name}"], }, + { + input: `{"name": "{{ name }}"}`, + expected: ["name"], + }, ] as const; tests.forEach(({ input, expected }) => { expect( @@ -129,6 +133,11 @@ can you help with this json? variables: { name: "John", age: 30 }, expected: `{"name": "{{name}}", "age": "{{age\\}}"}`, }, + { + input: `{"name": "{{ name }}"}`, + variables: { name: "John" }, + expected: `{"name": "John"}`, + }, ] as const; tests.forEach(({ input, variables, expected }) => { expect(formatMustacheLike({ text: input, variables })).toEqual(expected); diff --git a/app/src/components/templateEditor/language/languageUtils.ts b/app/src/components/templateEditor/language/languageUtils.ts index c86c147af5..717dd5c56b 100644 --- a/app/src/components/templateEditor/language/languageUtils.ts +++ b/app/src/components/templateEditor/language/languageUtils.ts @@ -24,7 +24,8 @@ export const extractVariables = ({ const cur = tree.cursor(); do { if (cur.name === "Variable") { - variables.push(text.slice(cur.node.from, cur.node.to)); + const variable = text.slice(cur.node.from, cur.node.to).trim(); + variables.push(variable); } } while (cur.next()); return variables; @@ -74,12 +75,12 @@ export const format = ({ let cur = tree.cursor(); do { if (cur.name === "Variable") { - // grab the content inside of the braces - const variable = result.slice(cur.node.from, cur.node.to); + // grab the content inside of the braces, ignoring whitespace + const variable = result.slice(cur.node.from, cur.node.to).trim(); // grab the position of the content including the braces const Template = cur.node.parent!; if (variable in variables) { - // replace the content (including braces) with the variable value + // replace the content (including braces and whitespace) with the variable value result = `${result.slice(0, Template.from)}${variables[variable]}${result.slice(Template.to)}`; // reparse the result so that positions are updated tree = parser.parse(result);