🚸 (theme) Improve custom font flow by asking for font-face props directly

apps/builder/src/components/inputs/CodeEditor.tsx

@@ -163,6 +163,7 @@ export const CodeEditor = ({
           basicSetup={{
             highlightActiveLine: false,
           }}
+          placeholder={props.placeholder}
         />
         {isVariableButtonDisplayed && (
           <VariablesButton

apps/builder/src/features/theme/components/general/CustomFontForm.tsx

@@ -1,4 +1,5 @@
 import { TextInput } from '@/components/inputs'
+import { CodeEditor } from '@/components/inputs/CodeEditor'
 import { Stack } from '@chakra-ui/react'
 import { CustomFont } from '@typebot.io/schemas'
 
@@ -9,22 +10,27 @@ type Props = {
 
 export const CustomFontForm = ({ font, onFontChange }: Props) => {
   const updateFamily = (family: string) => onFontChange({ ...font, family })
-  const updateUrl = (url: string) => onFontChange({ ...font, url })
+  const updateCss = (css: string) => onFontChange({ ...font, css })
   return (
     <Stack>
       <TextInput
         direction="row"
         label="Family:"
+        placeholder='MyAwesomeWebFont, "Helvetica Neue", sans-serif'
         defaultValue={font.family}
         onChange={updateFamily}
         withVariableButton={false}
       />
-      <TextInput
-        direction="row"
-        label="URL:"
-        defaultValue={font.url}
-        onChange={updateUrl}
-        withVariableButton={false}
+      <CodeEditor
+        onChange={updateCss}
+        defaultValue={font.css}
+        lang="css"
+        placeholder={`@font-face {
+  font-family: 'MyAwesomeWebFont';
+  src: url('https://example.com/webfont.woff') format('woff'),
+    url('https://example.com/webfont.ttf') format('truetype');
+}`}
+        maxHeight="200px"
       />
     </Stack>
   )