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>