OUT-2310, OUT-2287, OUT-2246 | client home crashed with undefined on replaceAll

src/app/client-preview/page.tsx

@@ -168,7 +168,7 @@ export default async function ClientPreviewPage({
       <div
         className={`overflow-y-auto overflow-x-hidden max-h-screen w-full`}
         style={{
-          fontFamily: workspace.font.replaceAll('+', ' '),
+          fontFamily: workspace.font?.replaceAll('+', ' '),
           background: `${settings.backgroundColor}`,
         }}
       >

src/app/components/EditorInterface.tsx

@@ -217,7 +217,7 @@ const EditorInterface = ({
       if (
         appState?.appState.originalTemplate?.replace(/\s/g, '') !==
           replaceCustomLabelsWithPlaceholders(
-            defaultState.replaceAll(' ', ''),
+            defaultState?.replaceAll(' ', ''),
             appState?.appState?.customLabels,
           ) ||
         appState?.appState.bannerImgUrl !== defaultBannerImagePath ||

src/components/autofillFields/AutofillFields.tsx

@@ -113,7 +113,7 @@ const AutofillFields = () => {
         {/* edit mode */}
         <When condition={!appState?.appState.readOnly}>
           {staticAutofillValues.map((el, key) => {
-            const labelText = el.replaceAll('{{', '').replaceAll('}}', '')
+            const labelText = el?.replaceAll('{{', '').replaceAll('}}', '')
             return (
               <AutofillText
                 key={key}

src/components/tiptap/autofieldSelector/AutofillMenu.tsx

@@ -37,16 +37,25 @@ export const AutofillMenu = forwardRef((props: any, ref: any) => {
   }
 
   const upHandler = () => {
+    if (props.items.length === 0) {
+      return
+    }
     setSelectedIndex(
       (selectedIndex + props.items.length - 1) % props.items.length,
     )
   }
 
   const downHandler = () => {
+    if (props.items.length === 0) {
+      return
+    }
     setSelectedIndex((selectedIndex + 1) % props.items.length)
   }
 
   const enterHandler = () => {
+    if (props.items.length === 0) {
+      return
+    }
     selectItem(selectedIndex)
   }
 

src/components/tiptap/autofieldSelector/autofillMenuSuggestion.ts

@@ -39,7 +39,10 @@ export const autofillMenuSuggestion = {
       .map((text) => prepareCustomLabel(text, appContextData?.customLabels))
 
       .filter((item: any) =>
-        item.toLowerCase().replaceAll('{{', '').startsWith(query.toLowerCase()),
+        item
+          .toLowerCase()
+          ?.replaceAll('{{', '')
+          .startsWith(query.toLowerCase()),
       )
       .slice(0, 10)
   },

src/components/tiptap/floatingMenu/FloatingMenu.tsx

@@ -9,7 +9,6 @@ import {
   BulletListIcon,
   UploadIcon2,
   CalloutIcon,
-  LinkIcon,
   TableIcon,
   EmbedIcon,
 } from '@/icons'
@@ -86,19 +85,28 @@ export const FloatingMenu = forwardRef((props: any, ref: any) => {
   }
 
   const upHandler = () => {
+    if (props.items.length === 0) {
+      return
+    }
     setSelectedIndex(
       (selectedIndex + props.items.length - 1) % props.items.length,
     )
   }
 
   const downHandler = () => {
+    if (props.items.length === 0) {
+      return
+    }
     setSelectedIndex((selectedIndex + 1) % props.items.length)
   }
 
   const enterHandler = () => {
+    if (props.items.length === 0) {
+      return
+    }
     selectItem(selectedIndex)
     //handle link input here
-    if (props.items[0].title === 'Link') {
+    if (props.items[0]?.title === 'Link') {
       appState?.toggleShowLinkInput(true)
     }
   }

src/utils/customLabels.ts

@@ -55,7 +55,7 @@ export const prepareCustomLabel = (
     if (!opts?.isClientMode) {
       replacement = customLabels?.[key] || replacement
     }
-    result = result.replaceAll(placeholder, replacement.toLowerCase())
+    result = result?.replaceAll(placeholder, replacement.toLowerCase())
   }
   return result
 }