🚸 (editor) Avoid highlighting variables in text bubble if not created

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 <PlateTextContent text={text} />
 }
 
-const PlateTextContent = ({ text }: { text: string }) => (
-  <>
-    {text.split(/\{\{(.*?\}\})/g).map((str, idx) => {
-      if (str.endsWith('}}')) {
-        return (
-          <span className="slate-variable" key={idx}>
-            {str.trim().slice(0, -2)}
-          </span>
-        )
-      }
-      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 (
+            <span className="slate-variable" key={idx}>
+              {str.trim().slice(0, -2)}
+            </span>
+          )
+        }
+        return str
+      })}
+    </>
+  )
+}