fix: unformatted recall question in logic editor (#2126)

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/LogicEditor.tsx

@@ -4,6 +4,7 @@ import { useMemo } from "react";
 import { toast } from "react-hot-toast";
 import { BsArrowDown, BsArrowReturnRight } from "react-icons/bs";
 
+import { checkForRecallInHeadline } from "@formbricks/lib/utils/recall";
 import {
   TSurvey,
   TSurveyLogic,
@@ -44,6 +45,10 @@ export default function LogicEditor({
   questionIdx,
   updateQuestion,
 }: LogicEditorProps): JSX.Element {
+  localSurvey = useMemo(() => {
+    return checkForRecallInHeadline(localSurvey);
+  }, [localSurvey]);
+
   const questionValues = useMemo(() => {
     if ("choices" in question) {
       return question.choices.map((choice) => choice.label);

packages/lib/utils/recall.ts

@@ -102,7 +102,7 @@ export const checkForEmptyFallBackValue = (survey: TSurvey): TSurveyQuestion | n
 
 // Processes each question in a survey to ensure headlines are formatted correctly for recall and return the modified survey.
 export const checkForRecallInHeadline = (survey: TSurvey): TSurvey => {
-  const modifiedSurvey = { ...survey };
+  const modifiedSurvey = structuredClone(survey);
   modifiedSurvey.questions.forEach((question) => {
     question.headline = recallToHeadline(question.headline, modifiedSurvey, false);
   });