feat(theme): ✨ Add custom css settings

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/WebhookSettings/WebhookSettings.tsx

@@ -159,6 +159,7 @@ export const WebhookSettings = ({
           <AccordionPanel pb={4} as={Stack} spacing="6">
             <CodeEditor
               value={webhook?.body ?? ''}
+              lang="json"
               onChange={handleBodyChange}
             />
           </AccordionPanel>
@@ -181,7 +182,9 @@ export const WebhookSettings = ({
       <Button onClick={handleTestRequestClick} colorScheme="blue">
         Test the request
       </Button>
-      {testResponse && <CodeEditor isReadOnly value={testResponse} />}
+      {testResponse && (
+        <CodeEditor isReadOnly lang="json" value={testResponse} />
+      )}
       {(testResponse || options?.responseVariableMapping) && (
         <Accordion allowToggle allowMultiple>
           <AccordionItem>

apps/builder/components/shared/CodeEditor.tsx

@@ -1,15 +1,18 @@
 import { Box, BoxProps } from '@chakra-ui/react'
 import { EditorState, EditorView, basicSetup } from '@codemirror/basic-setup'
 import { json } from '@codemirror/lang-json'
+import { css } from '@codemirror/lang-css'
 import { useEffect, useRef } from 'react'
 
 type Props = {
   value: string
+  lang: 'css' | 'json'
   onChange?: (value: string) => void
   isReadOnly?: boolean
 }
 export const CodeEditor = ({
   value,
+  lang,
   onChange,
   isReadOnly = false,
   ...props
@@ -31,14 +34,15 @@ export const CodeEditor = ({
       if (update.docChanged && onChange)
         onChange(update.state.doc.toJSON().join(' '))
     })
+    const extensions = [
+      updateListenerExtension,
+      basicSetup,
+      EditorState.readOnly.of(isReadOnly),
+    ]
+    extensions.push(lang === 'json' ? json() : css())
     const editor = new EditorView({
       state: EditorState.create({
-        extensions: [
-          updateListenerExtension,
-          basicSetup,
-          json(),
-          EditorState.readOnly.of(isReadOnly),
-        ],
+        extensions,
       }),
       parent: editorContainer.current,
     })

apps/builder/components/theme/CustomCssSettings/CustomCssSettings.tsx

@@ -0,0 +1,17 @@
+import { CodeEditor } from 'components/shared/CodeEditor'
+import React from 'react'
+
+type Props = {
+  customCss?: string
+  onCustomCssChange: (css: string) => void
+}
+
+export const CustomCssSettings = ({ customCss, onCustomCssChange }: Props) => {
+  return (
+    <CodeEditor
+      value={customCss ?? ''}
+      lang="css"
+      onChange={onCustomCssChange}
+    />
+  )
+}

apps/builder/components/theme/SideMenu.tsx

@@ -8,12 +8,13 @@ import {
   HStack,
   Stack,
 } from '@chakra-ui/react'
-import { ChatIcon, CodeIcon, LayoutIcon, PencilIcon } from 'assets/icons'
+import { ChatIcon, CodeIcon, PencilIcon } from 'assets/icons'
 import { headerHeight } from 'components/shared/TypebotHeader'
 import { useTypebot } from 'contexts/TypebotContext'
 import { ChatTheme, GeneralTheme } from 'models'
 import React from 'react'
 import { ChatThemeSettings } from './ChatSettings'
+import { CustomCssSettings } from './CustomCssSettings/CustomCssSettings'
 import { GeneralSettings } from './GeneralSettings'
 
 export const SideMenu = () => {
@@ -25,6 +26,9 @@ export const SideMenu = () => {
   const handleGeneralThemeChange = (general: GeneralTheme) =>
     updateTypebot({ theme: { ...typebot?.theme, general } })
 
+  const handleCustomCssChange = (customCss: string) =>
+    updateTypebot({ theme: { ...typebot?.theme, customCss } })
+
   return (
     <Stack
       flex="1"
@@ -55,21 +59,6 @@ export const SideMenu = () => {
             />
           </AccordionPanel>
         </AccordionItem>
-        <AccordionItem>
-          <AccordionButton py={6}>
-            <HStack flex="1" pl={2}>
-              <LayoutIcon />
-              <Heading fontSize="lg">Layout</Heading>
-            </HStack>
-            <AccordionIcon />
-          </AccordionButton>
-          <AccordionPanel pb={4}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat.
-          </AccordionPanel>
-        </AccordionItem>
         <AccordionItem>
           <AccordionButton py={6}>
             <HStack flex="1" pl={2}>
@@ -94,10 +83,10 @@ export const SideMenu = () => {
             <AccordionIcon />
           </AccordionButton>
           <AccordionPanel pb={4}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat.
+            <CustomCssSettings
+              customCss={typebot?.theme?.customCss}
+              onCustomCssChange={handleCustomCssChange}
+            />
           </AccordionPanel>
         </AccordionItem>
       </Accordion>

apps/builder/cypress/tests/theme/customCss.ts

@@ -0,0 +1,26 @@
+import { getIframeBody } from 'cypress/support'
+
+describe('Custom CSS settings', () => {
+  beforeEach(() => {
+    cy.task('seed')
+    cy.signOut()
+  })
+
+  it('should reflect changes in real time', () => {
+    cy.loadTypebotFixtureInDatabase('typebots/theme/theme.json')
+    cy.signIn('test2@gmail.com')
+    cy.visit('/typebots/typebot4/theme')
+    cy.findByRole('button', { name: 'Custom CSS' }).click()
+
+    cy.findByTestId('code-editor').type(
+      '.typebot-button {background-color: green}',
+      {
+        parseSpecialCharSequences: false,
+      }
+    )
+    getIframeBody()
+      .findByTestId('button')
+      .should('have.css', 'background-color')
+      .should('eq', 'rgb(0, 128, 0)')
+  })
+})

apps/builder/package.json

@@ -13,6 +13,7 @@
     "@chakra-ui/css-reset": "^1.1.1",
     "@chakra-ui/react": "^1.7.4",
     "@codemirror/basic-setup": "^0.19.1",
+    "@codemirror/lang-css": "^0.19.3",
     "@codemirror/lang-json": "^0.19.1",
     "@codemirror/text": "^0.19.6",
     "@dnd-kit/core": "^4.0.3",