fix: welcome card text inputs not saving due to shared firstRender state (Backport) (#6780)

.github/workflows/formbricks-release.yml

@@ -89,7 +89,7 @@ jobs:
       - check-latest-release
     with:
       IS_PRERELEASE: ${{ github.event.release.prerelease }}
-      MAKE_LATEST: ${{ needs.check-latest-release.outputs.is_latest }}
+      MAKE_LATEST: ${{ needs.check-latest-release.outputs.is_latest == 'true' }}
 
   docker-build-cloud:
     name: Build & push Formbricks Cloud to ECR
@@ -101,7 +101,7 @@ jobs:
     with:
       image_tag: ${{ needs.docker-build-community.outputs.VERSION }}
       IS_PRERELEASE: ${{ github.event.release.prerelease }}
-      MAKE_LATEST: ${{ needs.check-latest-release.outputs.is_latest }}
+      MAKE_LATEST: ${{ needs.check-latest-release.outputs.is_latest == 'true' }}
     needs:
       - check-latest-release
       - docker-build-community
@@ -154,4 +154,4 @@ jobs:
       release_tag: ${{ github.event.release.tag_name }}
       commit_sha: ${{ github.sha }}
       is_prerelease: ${{ github.event.release.prerelease }}
-      make_latest: ${{ needs.check-latest-release.outputs.is_latest }}
+      make_latest: ${{ needs.check-latest-release.outputs.is_latest == 'true' }}

apps/web/app/s/[surveyId]/loading.tsx

@@ -1,3 +0,0 @@
-import { LinkSurveyLoading } from "@/modules/survey/link/loading";
-
-export default LinkSurveyLoading;

apps/web/lib/constants.ts

@@ -19,8 +19,7 @@ export const ENCRYPTION_KEY = env.ENCRYPTION_KEY;
 // Other
 export const CRON_SECRET = env.CRON_SECRET;
 export const DEFAULT_BRAND_COLOR = "#64748b";
-export const FB_LOGO_URL =
-  "https://s3.eu-central-1.amazonaws.com/listmonk-formbricks/Formbricks-Light-transparent.png";
+export const FB_LOGO_URL = `${WEBAPP_URL}/logo-transparent.png`;
 
 export const PRIVACY_URL = env.PRIVACY_URL;
 export const TERMS_URL = env.TERMS_URL;

apps/web/lingodotdev/client.tsx

@@ -53,9 +53,9 @@ export const I18nProvider = ({ children, language, defaultLanguage }: I18nProvid
     initializeI18n();
   }, [locale, defaultLanguage]);
 
-  // Don't render children until i18n is ready to prevent hydration issues
+  // Don't render children until i18n is ready to prevent race conditions
   if (!isReady) {
-    return <div style={{ visibility: "hidden" }}>{children}</div>;
+    return null;
   }
 
   return (

apps/web/modules/survey/editor/components/edit-welcome-card.tsx

@@ -3,7 +3,6 @@
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { Hand } from "lucide-react";
 import { usePathname } from "next/navigation";
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { TSurvey, TSurveyQuestionId, TSurveyWelcomeCard } from "@formbricks/types/surveys/types";
 import { TUserLocale } from "@formbricks/types/user";
@@ -38,8 +37,6 @@ export const EditWelcomeCard = ({
 }: EditWelcomeCardProps) => {
   const { t } = useTranslation();
 
-  const [firstRender, setFirstRender] = useState(true);
-
   const path = usePathname();
   const environmentId = path?.split("/environments/")[1]?.split("/")[0];
 
@@ -138,8 +135,6 @@ export const EditWelcomeCard = ({
                 setSelectedLanguageCode={setSelectedLanguageCode}
                 locale={locale}
                 isStorageConfigured={isStorageConfigured}
-                firstRender={firstRender}
-                setFirstRender={setFirstRender}
               />
             </div>
             <div className="mt-3">
@@ -155,8 +150,6 @@ export const EditWelcomeCard = ({
                 setSelectedLanguageCode={setSelectedLanguageCode}
                 locale={locale}
                 isStorageConfigured={isStorageConfigured}
-                firstRender={firstRender}
-                setFirstRender={setFirstRender}
               />
             </div>
 
@@ -177,8 +170,6 @@ export const EditWelcomeCard = ({
                     label={t("environments.surveys.edit.next_button_label")}
                     locale={locale}
                     isStorageConfigured={isStorageConfigured}
-                    firstRender={firstRender}
-                    setFirstRender={setFirstRender}
                   />
                 </div>
               </div>

apps/web/modules/survey/link/lib/metadata-utils.ts

@@ -1,8 +1,10 @@
 import { Metadata } from "next";
+import { getTextContent } from "@formbricks/types/surveys/validation";
 import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
 import { getPublicDomain } from "@/lib/getPublicUrl";
 import { getLocalizedValue } from "@/lib/i18n/utils";
 import { COLOR_DEFAULTS } from "@/lib/styling/constants";
+import { recallToHeadline } from "@/lib/utils/recall";
 import { getSurvey } from "@/modules/survey/lib/survey";
 
 type TBasicSurveyMetadata = {
@@ -48,7 +50,9 @@ export const getBasicSurveyMetadata = async (
   const titleFromMetadata = metadata?.title ? getLocalizedValue(metadata.title, langCode) || "" : undefined;
   const titleFromWelcome =
     welcomeCard?.enabled && welcomeCard.headline
-      ? getLocalizedValue(welcomeCard.headline, langCode) || ""
+      ? getTextContent(
+          getLocalizedValue(recallToHeadline(welcomeCard.headline, survey, false, langCode), langCode)
+        ) || ""
       : undefined;
   let title = titleFromMetadata || titleFromWelcome || survey.name;
 

apps/web/modules/survey/link/loading.tsx

@@ -1,11 +0,0 @@
-"use client";
-export const LinkSurveyLoading = () => {
-  return (
-    <div className="flex h-full w-full items-center justify-center">
-      <div className="flex h-1/2 w-3/4 flex-col sm:w-1/2 lg:w-1/4">
-        <div className="ph-no-capture h-16 w-1/3 animate-pulse rounded-lg bg-slate-200 font-medium text-slate-900"></div>
-        <div className="ph-no-capture mt-4 h-full animate-pulse rounded-lg bg-slate-200 text-slate-900"></div>
-      </div>
-    </div>
-  );
-};

apps/web/modules/ui/components/editor/components/toolbar-plugin.tsx

@@ -262,22 +262,27 @@ export const ToolbarPlugin = (
         const root = $getRoot();
         root.clear();
         root.append(...nodes);
-
-        editor.registerUpdateListener(({ editorState }) => {
-          editorState.read(() => {
-            const textInHtml = $generateHtmlFromNodes(editor)
-              .replace(/&lt;/g, "<")
-              .replace(/&gt;/g, ">")
-              .replace(/white-space:\s*pre-wrap;?/g, "");
-            setText.current(textInHtml);
-          });
-        });
       });
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  // Register text-saving update listener - always active for each editor instance
+  useEffect(() => {
+    const unregister = editor.registerUpdateListener(({ editorState }) => {
+      editorState.read(() => {
+        const textInHtml = $generateHtmlFromNodes(editor)
+          .replace(/&lt;/g, "<")
+          .replace(/&gt;/g, ">")
+          .replace(/white-space:\s*pre-wrap;?/g, "");
+        setText.current(textInHtml);
+      });
+    });
+
+    return unregister;
+  }, [editor]);
+
   useEffect(() => {
     return mergeRegister(
       editor.registerUpdateListener(({ editorState }) => {