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