feat(engine): ✨ Add link support in text bubbles

apps/builder/components/shared/Graph/Nodes/StepNode/TextBubbleEditor/ToolBar.tsx

@@ -48,7 +48,9 @@ export const ToolBar = (props: Props) => {
           icon={<UnderlineIcon />}
         />
       </span>
-      <LinkToolbarButton icon={<LinkIcon />} />
+      <span data-testid="link-button">
+        <LinkToolbarButton icon={<LinkIcon />} />
+      </span>
     </HStack>
   )
 }

apps/builder/libs/plate.tsx

@@ -1,4 +1,3 @@
-import { Link } from '@chakra-ui/react'
 import {
   createBoldPlugin,
   createItalicPlugin,
@@ -21,5 +20,18 @@ export const platePlugins = createPlugins(
     createUnderlinePlugin(),
     createLinkPlugin(),
   ],
-  { components: { [ELEMENT_LINK]: Link } }
+  {
+    components: {
+      [ELEMENT_LINK]: (props) => (
+        <a
+          href={props.element.url}
+          target="_blank"
+          rel="noreferrer"
+          className={props.className}
+        >
+          {props.children}
+        </a>
+      ),
+    },
+  }
 )

apps/builder/package.json

@@ -26,12 +26,12 @@
     "@giphy/react-components": "^5.4.0",
     "@googleapis/drive": "^2.1.0",
     "@next-auth/prisma-adapter": "1.0.1",
-    "@udecode/plate-basic-marks": "^9.2.1",
+    "@udecode/plate-basic-marks": "^10.0.0",
     "@udecode/plate-common": "^7.0.2",
-    "@udecode/plate-core": "^9.2.1",
-    "@udecode/plate-link": "^9.2.1",
-    "@udecode/plate-ui-link": "^9.2.1",
-    "@udecode/plate-ui-toolbar": "^9.2.1",
+    "@udecode/plate-core": "^10.0.0",
+    "@udecode/plate-link": "^10.0.0",
+    "@udecode/plate-ui-link": "^10.0.0",
+    "@udecode/plate-ui-toolbar": "^10.0.0",
     "aws-sdk": "^2.1065.0",
     "bot-engine": "*",
     "browser-image-compression": "^1.0.17",

apps/builder/playwright/tests/bubbles/text.spec.ts

@@ -41,6 +41,14 @@ test.describe('Text bubble step', () => {
     await page.type('div[role="textbox"]', 'Everything text')
     await page.press('div[role="textbox"]', 'Shift+Enter')
 
+    await page.type('div[role="textbox"]', 'My super link')
+    await page.press('div[role="textbox"]', 'Shift+Meta+ArrowLeft')
+    await page.waitForTimeout(200)
+    page.on('dialog', async (dialog) => {
+      await dialog.accept('https://github.com')
+    })
+    await page.click('[data-testid="link-button"]')
+
     await page.click('text=Preview')
     await expect(
       typebotViewer(page).locator('span.slate-bold >> nth=0')
@@ -51,5 +59,8 @@ test.describe('Text bubble step', () => {
     await expect(
       typebotViewer(page).locator('span.slate-underline >> nth=0')
     ).toHaveText('Underlined text')
+    await expect(
+      typebotViewer(page).locator('a[href="https://github.com"]')
+    ).toHaveText('My super link')
   })
 })