diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts
index fcf3d71ef..4eda4ee9f 100644
--- a/src/frontend/src/constants/constants.ts
+++ b/src/frontend/src/constants/constants.ts
@@ -25,10 +25,18 @@ export const INVALID_CHARACTERS = [
/**
* regex to highlight the variables in the text
- * @constant
+ * @constant regexHighlight
+ * @type {RegExp}
+ * @default
+ * @example
+ * {{variable}} or {variable}
+ * @returns {RegExp}
+ * @description
+ * This regex is used to highlight the variables in the text.
+ * It matches the variables in the text that are between {{}} or {}.
*/
-export const regexHighlight = /\{([^}]+)\}/g;
+export const regexHighlight = /\{\{(.*?)\}\}|\{([^{}]+)\}/g;
export const specialCharsRegex = /[!@#$%^&*()\-_=+[\]{}|;:'",.<>/?\\`ยด]/;
export const programmingLanguages: languageMap = {
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index 253115bf3..83f6c5bce 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -97,13 +97,24 @@ export default function GenericModal({
useEffect(() => {
setInputValue(value);
}, [value, modalOpen]);
-
const coloredContent = (inputValue || "")
.replace(//g, ">")
- .replace(regexHighlight, varHighlightHTML({ name: "$1" }))
- .replace(/\n/g, "
");
+ .replace(regexHighlight, (match, p1, p2) => {
+ // Decide which group was matched. If p1 is not undefined, do nothing
+ // we don't want to change the text. If p2 is not undefined, then we
+ // have a variable, so we should highlight it.
+ // ! This will not work with multiline or indented json yet
+ if (p1 !== undefined) {
+ return match;
+ } else if (p2 !== undefined) {
+ return varHighlightHTML({ name: p2 });
+ }
+ return match;
+ })
+ .replace(/\n/g, "
");
+ console.log(coloredContent);
function getClassByNumberLength(): string {
let sumOfCaracteres: number = 0;
wordsHighlight.forEach((element) => {
@@ -159,7 +170,7 @@ export default function GenericModal({
setIsEdit(true);
return setErrorData({
title: PROMPT_ERROR_ALERT,
- list: [error.toString()],
+ list: [error.response.data.detail ?? ""],
});
});
}