⚡ (settings) Parse custom head code to remove invalid text nodes

apps/viewer/package.json

@@ -29,6 +29,7 @@
     "libphonenumber-js": "1.10.30",
     "next": "13.4.3",
     "nextjs-cors": "2.1.2",
+    "node-html-parser": "^6.1.5",
     "nodemailer": "6.9.2",
     "openai": "3.2.1",
     "openai-edge": "^1.1.0",

apps/viewer/src/features/chat/api/sendMessage.ts

@@ -25,12 +25,13 @@ import {
   setResultAsCompleted,
   startBotFlow,
 } from '../helpers'
-import { env, isDefined, omit } from '@typebot.io/lib'
+import { env, isDefined, isNotEmpty, omit } from '@typebot.io/lib'
 import { prefillVariables } from '@/features/variables/prefillVariables'
 import { injectVariablesFromExistingResult } from '@/features/variables/injectVariablesFromExistingResult'
 import { deepParseVariables } from '@/features/variables/deepParseVariable'
 import { parseVariables } from '@/features/variables/parseVariables'
 import { saveLog } from '@/features/logs/saveLog'
+import { NodeType, parse } from 'node-html-parser'
 
 export const sendMessage = publicProcedure
   .meta({
@@ -448,7 +449,9 @@ const parseStartClientSideAction = (
 ): NonNullable<ChatReply['clientSideActions']>[number] | undefined => {
   const blocks = typebot.groups.flatMap((group) => group.blocks)
   const startPropsToInject = {
-    customHeadCode: typebot.settings.metadata.customHeadCode,
+    customHeadCode: isNotEmpty(typebot.settings.metadata.customHeadCode)
+      ? parseHeadCode(typebot.settings.metadata.customHeadCode)
+      : undefined,
     gtmId: typebot.settings.metadata.googleTagManagerId,
     googleAnalyticsId: (
       blocks.find(
@@ -479,3 +482,33 @@ const parseStartClientSideAction = (
     startPropsToInject,
   }
 }
+
+const parseHeadCode = (code: string) => {
+  code = injectTryCatch(code)
+  return parse(code)
+    .childNodes.filter((child) => child.nodeType !== NodeType.TEXT_NODE)
+    .join('\n')
+}
+
+const injectTryCatch = (headCode: string) => {
+  const scriptTagRegex = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi
+  const scriptTags = headCode.match(scriptTagRegex)
+  if (scriptTags) {
+    scriptTags.forEach(function (tag) {
+      const wrappedTag = tag.replace(
+        /(<script\b[^>]*>)([\s\S]*?)(<\/script>)/gi,
+        function (_, openingTag, content, closingTag) {
+          return `${openingTag}
+try {
+  ${content}
+} catch (e) {
+  console.warn(e); 
+}
+${closingTag}`
+        }
+      )
+      headCode = headCode.replace(tag, wrappedTag)
+    })
+  }
+  return headCode
+}

packages/embeds/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.0.73",
+  "version": "0.0.74",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

packages/embeds/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.0.73",
+  "version": "0.0.74",
   "description": "React library to display typebots on your website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/lib/utils.ts

@@ -287,7 +287,6 @@ export const parseNumberWithCommas = (num: number) =>
   num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
 
 export const injectCustomHeadCode = (customHeadCode: string) => {
-  customHeadCode = injectTryCatch(customHeadCode)
   const headCodes = customHeadCode.split('</noscript>')
   headCodes.forEach((headCode) => {
     const [codeToInject, noScriptContentToInject] = headCode.split('<noscript>')
@@ -307,29 +306,6 @@ export const injectCustomHeadCode = (customHeadCode: string) => {
   })
 }
 
-const injectTryCatch = (headCode: string) => {
-  const scriptTagRegex = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi
-  const scriptTags = headCode.match(scriptTagRegex)
-  if (scriptTags) {
-    scriptTags.forEach(function (tag) {
-      const wrappedTag = tag.replace(
-        /(<script\b[^>]*>)([\s\S]*?)(<\/script>)/gi,
-        function (_, openingTag, content, closingTag) {
-          return `${openingTag}
-try {
-  ${content}
-} catch (e) {
-  console.warn(e); 
-}
-${closingTag}`
-        }
-      )
-      headCode = headCode.replace(tag, wrappedTag)
-    })
-  }
-  return headCode
-}
-
 export const getAtPath = <T>(obj: T, path: string): unknown => {
   if (isNotDefined(obj)) return undefined
   const pathParts = path.split('.')

pnpm-lock.yaml

@@ -547,6 +547,9 @@ importers:
       nextjs-cors:
         specifier: 2.1.2
         version: 2.1.2(next@13.4.3)
+      node-html-parser:
+        specifier: ^6.1.5
+        version: 6.1.5
       nodemailer:
         specifier: 6.9.2
         version: 6.9.2
@@ -16474,6 +16477,13 @@ packages:
     resolution: {integrity: sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==}
     engines: {node: '>= 6.13.0'}
 
+  /node-html-parser@6.1.5:
+    resolution: {integrity: sha512-fAaM511feX++/Chnhe475a0NHD8M7AxDInsqQpz6x63GRF7xYNdS8Vo5dKsIVPgsOvG7eioRRTZQnWBrhDHBSg==}
+    dependencies:
+      css-select: 5.1.0
+      he: 1.2.0
+    dev: false
+
   /node-int64@0.4.0:
     resolution: {integrity: sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==}
     dev: true