diff --git a/apps/builder/src/features/blocks/bubbles/textBubble/components/plate/PlateText.tsx b/apps/builder/src/features/blocks/bubbles/textBubble/components/plate/PlateText.tsx index 2850a8bf7..b99eb717a 100644 --- a/apps/builder/src/features/blocks/bubbles/textBubble/components/plate/PlateText.tsx +++ b/apps/builder/src/features/blocks/bubbles/textBubble/components/plate/PlateText.tsx @@ -1,3 +1,5 @@ +import { useTypebot } from '@/features/editor/providers/TypebotProvider' + export const PlateText = ({ text, bold, @@ -22,17 +24,25 @@ export const PlateText = ({ return } -const PlateTextContent = ({ text }: { text: string }) => ( - <> - {text.split(/\{\{(.*?\}\})/g).map((str, idx) => { - if (str.endsWith('}}')) { - return ( - - {str.trim().slice(0, -2)} - - ) - } - return str - })} - -) +const PlateTextContent = ({ text }: { text: string }) => { + const { typebot } = useTypebot() + return ( + <> + {text.split(/\{\{(.*?\}\})/g).map((str, idx) => { + if (str.endsWith('}}')) { + const variableName = str.trim().slice(0, -2) + const matchingVariable = typebot?.variables.find( + (variable) => variable.name === variableName + ) + if (!matchingVariable) return '{{' + str + return ( + + {str.trim().slice(0, -2)} + + ) + } + return str + })} + + ) +}