♻️ Simplify text bubble content shape

Remove html and plainText field because it was redundant

Closes #386

apps/builder/src/assets/styles/plate.css

@@ -1,3 +1,10 @@
+.slate-variable {
+  background-color: #ff8b1a;
+  color: #ffffff;
+  padding: 0.125rem 0.25rem;
+  border-radius: 0.35rem;
+}
+
 .slate-bold {
   font-weight: bold;
 }

apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleContent.tsx

@@ -1,28 +1,25 @@
 import { Flex } from '@chakra-ui/react'
-import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { TextBubbleBlock } from '@typebot.io/schemas'
 import React from 'react'
-import { isEmpty } from '@typebot.io/lib'
-import { parseVariableHtmlTags } from '@/features/variables/helpers/parseVariableHtmlTags'
+import { PlateBlock } from './plate/PlateBlock'
 
 type Props = {
   block: TextBubbleBlock
 }
 
 export const TextBubbleContent = ({ block }: Props) => {
-  const { typebot } = useTypebot()
+  const isEmpty = block.content.richText.length === 0
   return (
     <Flex
       w="90%"
       flexDir={'column'}
-      opacity={block.content.html === '' ? '0.5' : '1'}
+      opacity={isEmpty ? '0.5' : '1'}
       className="slate-html-container"
-      color={isEmpty(block.content.plainText) ? 'gray.500' : 'inherit'}
-      dangerouslySetInnerHTML={{
-        __html: isEmpty(block.content.plainText)
-          ? `<p>Click to edit...</p>`
-          : parseVariableHtmlTags(block.content.html, typebot?.variables ?? []),
-      }}
-    />
+      color={isEmpty ? 'gray.500' : 'inherit'}
+    >
+      {block.content.richText.map((element, idx) => (
+        <PlateBlock key={idx} element={element} />
+      ))}
+    </Flex>
   )
 }

apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleEditor.tsx

@@ -3,14 +3,8 @@ import React, { useEffect, useRef, useState } from 'react'
 import { Plate, PlateProvider, usePlateEditorRef } from '@udecode/plate-core'
 import { editorStyle, platePlugins } from '@/lib/plate'
 import { BaseEditor, BaseSelection, Transforms } from 'slate'
-import {
-  defaultTextBubbleContent,
-  TextBubbleContent,
-  Variable,
-} from '@typebot.io/schemas'
+import { Variable } from '@typebot.io/schemas'
 import { ReactEditor } from 'slate-react'
-import { serializeHtml } from '@udecode/plate-serializer-html'
-import { parseHtmlStringToPlainText } from '../utils'
 import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
 import { colors } from '@/lib/theme'
 import { useOutsideClick } from '@/hooks/useOutsideClick'
@@ -20,7 +14,7 @@ import { TextEditorToolBar } from './TextEditorToolBar'
 type TextBubbleEditorContentProps = {
   id: string
   textEditorValue: TElement[]
-  onClose: (newContent: TextBubbleContent) => void
+  onClose: (newContent: TElement[]) => void
 }
 
 const TextBubbleEditorContent = ({
@@ -37,7 +31,7 @@ const TextBubbleEditorContent = ({
 
   const textEditorRef = useRef<HTMLDivElement>(null)
 
-  const closeEditor = () => onClose(convertValueToBlockContent(textEditorValue))
+  const closeEditor = () => onClose(textEditorValue)
 
   useOutsideClick({
     ref: textEditorRef,
@@ -67,18 +61,6 @@ const TextBubbleEditorContent = ({
     }
   }
 
-  const convertValueToBlockContent = (value: TElement[]): TextBubbleContent => {
-    if (value.length === 0) defaultTextBubbleContent
-    const html = serializeHtml(editor, {
-      nodes: value,
-    })
-    return {
-      html,
-      richText: value,
-      plainText: parseHtmlStringToPlainText(html),
-    }
-  }
-
   const handleVariableSelected = (variable?: Variable) => {
     setIsVariableDropdownOpen(false)
     if (!rememberedSelection.current || !variable) return
@@ -170,7 +152,7 @@ const TextBubbleEditorContent = ({
 type TextBubbleEditorProps = {
   id: string
   initialValue: TElement[]
-  onClose: (newContent: TextBubbleContent) => void
+  onClose: (newContent: TElement[]) => void
 }
 
 export const TextBubbleEditor = ({

apps/builder/src/features/blocks/bubbles/textBubble/components/plate/PlateBlock.tsx

@@ -0,0 +1,27 @@
+import { TElement, TText, TDescendant } from '@udecode/plate-common'
+import { PlateText } from './PlateText'
+
+export const PlateBlock = ({ element }: { element: TElement | TText }) => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  if (element.text) return <PlateText {...(element as any)} />
+  switch (element.type) {
+    case 'a': {
+      return (
+        <a href={element.url as string} target="_blank" className="slate-a">
+          {(element.children as TDescendant[])?.map((child, idx) => (
+            <PlateBlock key={idx} element={child} />
+          ))}
+        </a>
+      )
+    }
+    default: {
+      return (
+        <div>
+          {(element.children as TDescendant[])?.map((child, idx) => (
+            <PlateBlock key={idx} element={child} />
+          ))}
+        </div>
+      )
+    }
+  }
+}

apps/builder/src/features/blocks/bubbles/textBubble/components/plate/PlateText.tsx

@@ -0,0 +1,38 @@
+export const PlateText = ({
+  text,
+  bold,
+  italic,
+  underline,
+}: {
+  text: string
+  bold?: boolean
+  italic?: boolean
+  underline?: boolean
+}) => {
+  let className = ''
+  if (bold) className += 'slate-bold'
+  if (italic) className += ' slate-italic'
+  if (underline) className += ' slate-underline'
+  if (className)
+    return (
+      <span className={className}>
+        <PlateTextContent text={text} />
+      </span>
+    )
+  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
+    })}
+  </>
+)

apps/builder/src/features/blocks/bubbles/textBubble/utils.ts

@@ -1,17 +0,0 @@
-import { Parser } from 'htmlparser2'
-import { isNotEmpty } from '@typebot.io/lib'
-
-export const parseHtmlStringToPlainText = (html: string): string => {
-  let plainText = ''
-  const parser = new Parser({
-    onopentag(name) {
-      if (name === 'div' && isNotEmpty(plainText)) plainText += '\n'
-    },
-    ontext(text) {
-      plainText += `${text}`
-    },
-  })
-  parser.write(html)
-  parser.end()
-  return plainText
-}

apps/builder/src/features/blocks/integrations/googleSheets/googleSheets.spec.ts

@@ -120,12 +120,12 @@ test.describe.parallel('Google sheets integration', () => {
     await page.getByPlaceholder('Type a value...').nth(-1).fill('test@test.com')
 
     await page.click('text=Select a column')
-    await page.click('text="First name"')
+    await page.getByRole('menuitem', { name: 'First name' }).click()
     await createNewVar(page, 'First name')
 
     await page.click('text=Add a value')
     await page.click('text=Select a column')
-    await page.click('text="Last name"')
+    await page.getByRole('menuitem', { name: 'Last name' }).click()
     await createNewVar(page, 'Last name')
 
     await page.click('text=Preview')

apps/builder/src/features/graph/components/nodes/block/BlockNode.tsx

@@ -13,7 +13,6 @@ import {
   DraggableBlock,
   Block,
   BlockWithOptions,
-  TextBubbleContent,
   TextBubbleBlock,
   LogicBlockType,
 } from '@typebot.io/schemas'
@@ -39,6 +38,7 @@ import { hasDefaultConnector } from '@/features/typebot/helpers/hasDefaultConnec
 import { setMultipleRefs } from '@/helpers/setMultipleRefs'
 import { TargetEndpoint } from '../../endpoints/TargetEndpoint'
 import { SettingsModal } from './SettingsModal'
+import { TElement } from '@udecode/plate-common'
 
 export const BlockNode = ({
   block,
@@ -72,7 +72,7 @@ export const BlockNode = ({
     openedBlockId === block.id
   )
   const [isEditing, setIsEditing] = useState<boolean>(
-    isTextBubbleBlock(block) && block.content.plainText === ''
+    isTextBubbleBlock(block) && block.content.richText.length === 0
   )
   const blockRef = useRef<HTMLDivElement | null>(null)
 
@@ -134,8 +134,8 @@ export const BlockNode = ({
       })
   }
 
-  const handleCloseEditor = (content: TextBubbleContent) => {
-    const updatedBlock = { ...block, content } as Block
+  const handleCloseEditor = (content: TElement[]) => {
+    const updatedBlock = { ...block, content: { richText: content } }
     updateBlock(indices, updatedBlock)
     setIsEditing(false)
   }

apps/builder/src/features/variables/helpers/parseVariableHtmlTags.ts

@@ -1,18 +0,0 @@
-import { Variable } from '@typebot.io/schemas'
-
-export const parseVariableHtmlTags = (
-  content: string,
-  variables: Variable[]
-) => {
-  const varNames = variables.map((variable) => variable.name)
-  return content.replace(/\{\{(.*?)\}\}/g, (fullMatch, foundVar) => {
-    if (content.includes(`href="{{${foundVar}}}"`)) return fullMatch
-    if (varNames.some((val) => foundVar === val)) {
-      return `<span style="background-color:#ff8b1a; color:#ffffff; padding: 0.125rem 0.25rem; border-radius: 0.35rem">${fullMatch.replace(
-        /{{|}}/g,
-        ''
-      )}</span>`
-    }
-    return fullMatch
-  })
-}

apps/builder/src/test/assets/typebots/api.json

@@ -27,7 +27,6 @@
           "type": "text",
           "groupId": "kinRXxYop2X4d7F9qt8WNB",
           "content": {
-            "html": "<div>Welcome to <span class=\"slate-bold\">AA</span> (Awesome Agency)</div>",
             "richText": [
               {
                 "type": "p",
@@ -37,8 +36,7 @@
                   { "text": " (Awesome Agency)" }
                 ]
               }
-            ],
-            "plainText": "Welcome to AA (Awesome Agency)"
+            ]
           }
         },
         {
@@ -76,14 +74,12 @@
           "type": "text",
           "groupId": "o4SH1UtKANnW5N5D67oZUz",
           "content": {
-            "html": "<div>Great! Nice to meet you {{Name}}</div>",
             "richText": [
               {
                 "type": "p",
                 "children": [{ "text": "Great! Nice to meet you {{Name}}" }]
               }
-            ],
-            "plainText": "Great! Nice to meet you {{Name}}"
+            ]
           }
         },
         {
@@ -91,7 +87,6 @@
           "type": "text",
           "groupId": "o4SH1UtKANnW5N5D67oZUz",
           "content": {
-            "html": "<div>What&#x27;s the best email we can reach you at?</div>",
             "richText": [
               {
                 "type": "p",
@@ -99,8 +94,7 @@
                   { "text": "What's the best email we can reach you at?" }
                 ]
               }
-            ],
-            "plainText": "What's the best email we can reach you at?"
+            ]
           }
         },
         {
@@ -125,11 +119,9 @@
           "type": "text",
           "groupId": "q5dAhqSTCaNdiGSJm9B9Rw",
           "content": {
-            "html": "<div>What&#x27;s your name?</div>",
             "richText": [
               { "type": "p", "children": [{ "text": "What's your name?" }] }
-            ],
-            "plainText": "What's your name?"
+            ]
           }
         },
         {
@@ -158,14 +150,12 @@
           "type": "text",
           "groupId": "fKqRz7iswk7ULaj5PJocZL",
           "content": {
-            "html": "<div>What services are you interested in?</div>",
             "richText": [
               {
                 "type": "p",
                 "children": [{ "text": "What services are you interested in?" }]
               }
-            ],
-            "plainText": "What services are you interested in?"
+            ]
           }
         },
         {
@@ -213,7 +203,6 @@
           "type": "text",
           "groupId": "7qHBEyCMvKEJryBHzPmHjV",
           "content": {
-            "html": "<div>Can you tell me a bit more about your needs?</div>",
             "richText": [
               {
                 "type": "p",
@@ -221,8 +210,7 @@
                   { "text": "Can you tell me a bit more about your needs?" }
                 ]
               }
-            ],
-            "plainText": "Can you tell me a bit more about your needs?"
+            ]
           }
         },
         {
@@ -247,9 +235,7 @@
           "type": "text",
           "groupId": "vF7AD7zSAj7SNvN3gr9N94",
           "content": {
-            "html": "<div>Perfect!</div>",
-            "richText": [{ "type": "p", "children": [{ "text": "Perfect!" }] }],
-            "plainText": "Perfect!"
+            "richText": [{ "type": "p", "children": [{ "text": "Perfect!" }] }]
           }
         },
         {
@@ -257,14 +243,12 @@
           "type": "text",
           "groupId": "vF7AD7zSAj7SNvN3gr9N94",
           "content": {
-            "html": "<div>We&#x27;ll get back to you at {{Email}}</div>",
             "richText": [
               {
                 "type": "p",
                 "children": [{ "text": "We'll get back to you at {{Email}}" }]
               }
-            ],
-            "plainText": "We'll get back to you at {{Email}}"
+            ]
           },
           "outgoingEdgeId": "fTVo43AG97eKcaTrZf9KyV"
         }

apps/builder/src/test/assets/typebots/editor/buttonsDnd.json

@@ -28,9 +28,7 @@
           "id": "sqUp2x8SXx8JBC8a9XuKGL9",
           "type": "text",
           "content": {
-            "html": "<div>Hello!</div>",
-            "richText": [{ "type": "p", "children": [{ "text": "Hello!" }] }],
-            "plainText": "Hello!"
+            "richText": [{ "type": "p", "children": [{ "text": "Hello!" }] }]
           },
           "groupId": "clc0ad9ah000n3b6sw5w6h1mp"
         },
@@ -38,11 +36,9 @@
           "id": "suRXuWyuJ7kpsdLUYKA6VqM",
           "type": "text",
           "content": {
-            "html": "<div>How are you?</div>",
             "richText": [
               { "type": "p", "children": [{ "text": "How are you?" }] }
-            ],
-            "plainText": "How are you?"
+            ]
           },
           "groupId": "clc0ad9ah000n3b6sw5w6h1mp"
         },

apps/builder/src/test/assets/typebots/editor/previewFromGroup.json

@@ -30,11 +30,9 @@
           "groupId": "cl3wo7ucc000g2e6gdus80qeb",
           "type": "text",
           "content": {
-            "html": "<div>Hello this is group 1</div>",
             "richText": [
               { "type": "p", "children": [{ "text": "Hello this is group 1" }] }
-            ],
-            "plainText": "Hello this is group 1"
+            ]
           }
         },
         {
@@ -42,11 +40,9 @@
           "groupId": "cl3wo7ucc000g2e6gdus80qeb",
           "type": "text",
           "content": {
-            "html": "<div>What&#x27;s your name?</div>",
             "richText": [
               { "type": "p", "children": [{ "text": "What's your name?" }] }
-            ],
-            "plainText": "What's your name?"
+            ]
           }
         },
         {
@@ -70,11 +66,9 @@
           "groupId": "cl3wo87et000l2e6ga64ipat6",
           "type": "text",
           "content": {
-            "html": "<div>Hello this is group 2</div>",
             "richText": [
               { "type": "p", "children": [{ "text": "Hello this is group 2" }] }
-            ],
-            "plainText": "Hello this is group 2"
+            ]
           }
         },
         {
@@ -82,11 +76,9 @@
           "groupId": "cl3wo87et000l2e6ga64ipat6",
           "type": "text",
           "content": {
-            "html": "<div>What&#x27;s your name?</div>",
             "richText": [
               { "type": "p", "children": [{ "text": "What's your name?" }] }
-            ],
-            "plainText": "What's your name?"
+            ]
           }
         },
         {
@@ -110,11 +102,9 @@
           "groupId": "cl3wo8kfl000p2e6gszlvkub0",
           "type": "text",
           "content": {
-            "html": "<div>Hello this is group 3</div>",
             "richText": [
               { "type": "p", "children": [{ "text": "Hello this is group 3" }] }
-            ],
-            "plainText": "Hello this is group 3"
+            ]
           }
         },
         {
@@ -122,11 +112,9 @@
           "groupId": "cl3wo8kfl000p2e6gszlvkub0",
           "type": "text",
           "content": {
-            "html": "<div>What&#x27;s your name?</div>",
             "richText": [
               { "type": "p", "children": [{ "text": "What's your name?" }] }
-            ],
-            "plainText": "What's your name?"
+            ]
           }
         },
         {

apps/builder/src/test/assets/typebots/inputs/variableButton.json

@@ -71,11 +71,7 @@
           "id": "cl4fr7wsv0008396mf9oi9lvi",
           "type": "text",
           "content": {
-            "html": "<div>Ok great!</div>",
-            "richText": [
-              { "type": "p", "children": [{ "text": "Ok great!" }] }
-            ],
-            "plainText": "Ok great!"
+            "richText": [{ "type": "p", "children": [{ "text": "Ok great!" }] }]
           },
           "groupId": "cl4fr7wsv0007396m7xgbeymx"
         }

apps/builder/src/test/assets/typebots/integrations/easyConfigWebhook.json

@@ -29,11 +29,9 @@
           "groupId": "cl10u68pw00032e6depze2oiy",
           "type": "text",
           "content": {
-            "html": "<div>Hi how are you?</div>",
             "richText": [
               { "type": "p", "children": [{ "text": "Hi how are you?" }] }
-            ],
-            "plainText": "Hi how are you?"
+            ]
           }
         },
         {
@@ -58,11 +56,9 @@
           "groupId": "cl10u6jzd00072e6dvo0zwy0s",
           "type": "text",
           "content": {
-            "html": "<div>How old are you?</div>",
             "richText": [
               { "type": "p", "children": [{ "text": "How old are you?" }] }
-            ],
-            "plainText": "How old are you?"
+            ]
           }
         },
         {
@@ -78,11 +74,9 @@
           "groupId": "cl10u6jzd00072e6dvo0zwy0s",
           "type": "text",
           "content": {
-            "html": "<div>Do you like cookies?</div>",
             "richText": [
               { "type": "p", "children": [{ "text": "Do you like cookies?" }] }
-            ],
-            "plainText": "Do you like cookies?"
+            ]
           }
         },
         {
@@ -110,11 +104,9 @@
           "groupId": "cl10u6jzd00072e6dvo0zwy0s",
           "type": "text",
           "content": {
-            "html": "<div>Alright, cheers!</div>",
             "richText": [
               { "type": "p", "children": [{ "text": "Alright, cheers!" }] }
-            ],
-            "plainText": "Alright, cheers!"
+            ]
           }
         },
         {

apps/builder/src/test/assets/typebots/integrations/googleSheetsGet.json

@@ -61,7 +61,6 @@
           "groupId": "pd3PECJqHB9xHMfc52SbrZ",
           "type": "text",
           "content": {
-            "html": "<div>Your name is: {{First name}} {{Last name}}</div>",
             "richText": [
               {
                 "type": "p",
@@ -69,8 +68,7 @@
                   { "text": "Your name is: {{First name}} {{Last name}}" }
                 ]
               }
-            ],
-            "plainText": "Your name is: {{First name}} {{Last name}}"
+            ]
           }
         }
       ]

apps/builder/src/test/assets/typebots/integrations/sendEmail.json

@@ -29,11 +29,9 @@
           "groupId": "b5r2MMyftV1nv9vyr6VkZh",
           "type": "text",
           "content": {
-            "html": "<div>Send email</div>",
             "richText": [
               { "type": "p", "children": [{ "text": "Send email" }] }
-            ],
-            "plainText": "Send email"
+            ]
           }
         },
         {

apps/builder/src/test/assets/typebots/integrations/webhook.json

@@ -29,9 +29,7 @@
           "groupId": "kBneEpKdMYrF65XxUQ5GS7",
           "type": "text",
           "content": {
-            "html": "<div>Ready?</div>",
-            "richText": [{ "type": "p", "children": [{ "text": "Ready?" }] }],
-            "plainText": "Ready?"
+            "richText": [{ "type": "p", "children": [{ "text": "Ready?" }] }]
           }
         },
         {

apps/builder/src/test/assets/typebots/logic/condition.json

@@ -27,11 +27,9 @@
           "type": "text",
           "groupId": "eh2ohNATnGg6RTdjG9h5kb",
           "content": {
-            "html": "<div>How old are you?</div>",
             "richText": [
               { "type": "p", "children": [{ "text": "How old are you?" }] }
-            ],
-            "plainText": "How old are you?"
+            ]
           }
         },
         {
@@ -99,14 +97,12 @@
           "type": "text",
           "groupId": "fGrzjahWecA8hoNMRrLSwn",
           "content": {
-            "html": "<div>You are older than 80</div>",
             "richText": [
               {
                 "type": "p",
                 "children": [{ "text": "You are older than 80" }]
               }
-            ],
-            "plainText": "You are older than 80"
+            ]
           }
         }
       ],
@@ -121,14 +117,12 @@
           "type": "text",
           "groupId": "49Jv45UJi9R3U4FuWS8R2c",
           "content": {
-            "html": "<div>You are older than 20</div>",
             "richText": [
               {
                 "type": "p",
                 "children": [{ "text": "You are older than 20" }]
               }
-            ],
-            "plainText": "You are older than 20"
+            ]
           }
         }
       ],
@@ -143,14 +137,12 @@
           "type": "text",
           "groupId": "fD28kefdySKK7XA7SyTozC",
           "content": {
-            "html": "<div>You are younger than 20</div>",
             "richText": [
               {
                 "type": "p",
                 "children": [{ "text": "You are younger than 20" }]
               }
-            ],
-            "plainText": "You are younger than 20"
+            ]
           }
         }
       ],

apps/builder/src/test/assets/typebots/logic/linkTypebots/1.json

@@ -42,11 +42,9 @@
           "groupId": "jMbvgRQfXUaXg37LRNqRaJ",
           "type": "text",
           "content": {
-            "html": "<div>Hello world</div>",
             "richText": [
               { "type": "p", "children": [{ "text": "Hello world" }] }
-            ],
-            "plainText": "Hello world"
+            ]
           }
         },
         {

apps/builder/src/test/assets/typebots/logic/linkTypebots/2.json

@@ -44,11 +44,9 @@
           "type": "text",
           "groupId": "uhqCZSNbsYVFxop7Gc8xvn",
           "content": {
-            "html": "<div>Second block</div>",
             "richText": [
               { "type": "p", "children": [{ "text": "Second block" }] }
-            ],
-            "plainText": "Second block"
+            ]
           }
         }
       ],

apps/builder/src/test/assets/typebots/logic/setVariable.json

@@ -28,11 +28,9 @@
           "id": "souEkLukHsYU9jrN2rAP7YT",
           "type": "text",
           "content": {
-            "html": "<div>How old are you?</div>",
             "richText": [
               { "type": "p", "children": [{ "text": "How old are you?" }] }
-            ],
-            "plainText": "How old are you?"
+            ]
           },
           "groupId": "cl9d7ruqe00033b6oe5nzpeub"
         },
@@ -82,7 +80,6 @@
           "id": "svpmd4uNoAXpoKyfYuuXTQe",
           "type": "text",
           "content": {
-            "html": "<div>Multiplication: {{Total}}</div><div>Custom var: {{Custom var}}</div><div>Addition: {{Addition}}</div>",
             "richText": [
               {
                 "type": "p",
@@ -96,8 +93,7 @@
                 "type": "p",
                 "children": [{ "text": "Addition: {{Addition}}" }]
               }
-            ],
-            "plainText": "Multiplication: {{Total}}Custom var: {{Custom var}}Addition: {{Addition}}"
+            ]
           },
           "groupId": "cl9d7ruqe00053b6o8l0h608t"
         }

apps/builder/src/test/assets/typebots/logic/wait.json

@@ -56,11 +56,7 @@
           "id": "clddbpwh9000j3b6srnzdpbcx",
           "type": "text",
           "content": {
-            "html": "<div>Hi there!</div>",
-            "richText": [
-              { "type": "p", "children": [{ "text": "Hi there!" }] }
-            ],
-            "plainText": "Hi there!"
+            "richText": [{ "type": "p", "children": [{ "text": "Hi there!" }] }]
           },
           "groupId": "clddbpwh9000i3b6s9e1vdjrd"
         }

apps/builder/src/test/assets/typebots/results/submissionHeader.json

@@ -27,7 +27,6 @@
           "type": "text",
           "groupId": "kinRXxYop2X4d7F9qt8WNB",
           "content": {
-            "html": "<div>Welcome to <span class=\"slate-bold\">AA</span> (Awesome Agency)</div>",
             "richText": [
               {
                 "type": "p",
@@ -37,8 +36,7 @@
                   { "text": " (Awesome Agency)" }
                 ]
               }
-            ],
-            "plainText": "Welcome to AA (Awesome Agency)"
+            ]
           }
         },
         {
@@ -76,14 +74,12 @@
           "type": "text",
           "groupId": "o4SH1UtKANnW5N5D67oZUz",
           "content": {
-            "html": "<div>Great! Nice to meet you {{Name}}</div>",
             "richText": [
               {
                 "type": "p",
                 "children": [{ "text": "Great! Nice to meet you {{Name}}" }]
               }
-            ],
-            "plainText": "Great! Nice to meet you {{Name}}"
+            ]
           }
         },
         {
@@ -91,7 +87,6 @@
           "type": "text",
           "groupId": "o4SH1UtKANnW5N5D67oZUz",
           "content": {
-            "html": "<div>What&#x27;s the best email we can reach you at?</div>",
             "richText": [
               {
                 "type": "p",
@@ -99,8 +94,7 @@
                   { "text": "What's the best email we can reach you at?" }
                 ]
               }
-            ],
-            "plainText": "What's the best email we can reach you at?"
+            ]
           }
         },
         {
@@ -125,11 +119,9 @@
           "type": "text",
           "groupId": "group1",
           "content": {
-            "html": "<div>What&#x27;s your name?</div>",
             "richText": [
               { "type": "p", "children": [{ "text": "What's your name?" }] }
-            ],
-            "plainText": "What's your name?"
+            ]
           }
         },
         {
@@ -158,14 +150,12 @@
           "type": "text",
           "groupId": "fKqRz7iswk7ULaj5PJocZL",
           "content": {
-            "html": "<div>What services are you interested in?</div>",
             "richText": [
               {
                 "type": "p",
                 "children": [{ "text": "What services are you interested in?" }]
               }
-            ],
-            "plainText": "What services are you interested in?"
+            ]
           }
         },
         {
@@ -213,7 +203,6 @@
           "type": "text",
           "groupId": "7qHBEyCMvKEJryBHzPmHjV",
           "content": {
-            "html": "<div>Can you tell me a bit more about your needs?</div>",
             "richText": [
               {
                 "type": "p",
@@ -221,8 +210,7 @@
                   { "text": "Can you tell me a bit more about your needs?" }
                 ]
               }
-            ],
-            "plainText": "Can you tell me a bit more about your needs?"
+            ]
           }
         },
         {
@@ -247,9 +235,7 @@
           "type": "text",
           "groupId": "vF7AD7zSAj7SNvN3gr9N94",
           "content": {
-            "html": "<div>Perfect!</div>",
-            "richText": [{ "type": "p", "children": [{ "text": "Perfect!" }] }],
-            "plainText": "Perfect!"
+            "richText": [{ "type": "p", "children": [{ "text": "Perfect!" }] }]
           }
         },
         {
@@ -257,14 +243,12 @@
           "type": "text",
           "groupId": "vF7AD7zSAj7SNvN3gr9N94",
           "content": {
-            "html": "<div>We&#x27;ll get back to you at {{Email}}</div>",
             "richText": [
               {
                 "type": "p",
                 "children": [{ "text": "We'll get back to you at {{Email}}" }]
               }
-            ],
-            "plainText": "We'll get back to you at {{Email}}"
+            ]
           },
           "outgoingEdgeId": "r2zwZYe33EdggUeG9Lmi3R"
         }

apps/builder/src/test/assets/typebots/settings.json

@@ -46,11 +46,9 @@
           "groupId": "4H8ucvLjTiQ7sAyB23Huka",
           "type": "text",
           "content": {
-            "html": "<div>What&#x27;s your name?</div>",
             "richText": [
               { "type": "p", "children": [{ "text": "What's your name?" }] }
-            ],
-            "plainText": "What's your name?"
+            ]
           }
         },
         {

apps/builder/src/test/assets/typebots/singleChoiceTarget.json

@@ -64,11 +64,9 @@
           "groupId": "ih574JsgYCSSt3t77DH9gp",
           "type": "text",
           "content": {
-            "html": "<div>I love burgers!</div>",
             "richText": [
               { "type": "p", "children": [{ "text": "I love burgers!" }] }
-            ],
-            "plainText": "I love burgers!"
+            ]
           }
         }
       ]
@@ -83,9 +81,7 @@
           "groupId": "5bMwu6Wv79avgdz3TKjVXr",
           "type": "text",
           "content": {
-            "html": "<div>Cool!</div>",
-            "richText": [{ "type": "p", "children": [{ "text": "Cool!" }] }],
-            "plainText": "Cool!"
+            "richText": [{ "type": "p", "children": [{ "text": "Cool!" }] }]
           }
         }
       ]

apps/builder/src/test/assets/typebots/theme.json

@@ -28,9 +28,7 @@
           "id": "swUB2pSmvcv3NC7ySzskRpL",
           "type": "text",
           "content": {
-            "html": "<div>Ready?</div>",
-            "richText": [{ "type": "p", "children": [{ "text": "Ready?" }] }],
-            "plainText": "Ready?"
+            "richText": [{ "type": "p", "children": [{ "text": "Ready?" }] }]
           },
           "groupId": "6Dj1i7LeM3qXg5SKMhMyo1"
         },
@@ -60,9 +58,7 @@
           "id": "cl4vdo1fz0008396nolxr0yln",
           "type": "text",
           "content": {
-            "html": "<div>Cool go</div>",
-            "richText": [{ "type": "p", "children": [{ "text": "Cool go" }] }],
-            "plainText": "Cool go"
+            "richText": [{ "type": "p", "children": [{ "text": "Cool go" }] }]
           },
           "groupId": "2TR5xAQobKAg8hbArfh5br"
         },
@@ -94,9 +90,7 @@
           "groupId": "cl4vdu8nn00023f6l6ptvimhw",
           "type": "text",
           "content": {
-            "html": "<div>Cool go</div>",
-            "richText": [{ "type": "p", "children": [{ "text": "Cool go" }] }],
-            "plainText": "Cool go"
+            "richText": [{ "type": "p", "children": [{ "text": "Cool go" }] }]
           }
         },
         {