💄 Fix code editor transparent selection

Closes #212

apps/builder/package.json

@@ -22,6 +22,7 @@
     "@codemirror/lang-json": "6.0.1",
     "@codemirror/lint": "6.1.0",
     "@codemirror/state": "6.2.0",
+    "@codemirror/theme-one-dark": "^6.1.0",
     "@dnd-kit/core": "6.0.6",
     "@dnd-kit/sortable": "7.0.1",
     "@dnd-kit/utilities": "3.2.1",
@@ -90,7 +91,6 @@
     "styled-components": "5.3.6",
     "svg-round-corners": "0.4.1",
     "swr": "2.0.0",
-    "thememirror": "^2.0.1",
     "tinycolor2": "1.5.1",
     "trpc-openapi": "1.0.0",
     "typebot-js": "workspace:*",

apps/builder/src/assets/styles/codeMirror.css

@@ -1,7 +1,7 @@
 .cm-editor {
   outline: 0px solid transparent !important;
   height: 100%;
-  border-radius: 1rem;
+  border-radius: 0.25rem;
 }
 
 .cm-scroller {

apps/builder/src/components/CodeEditor.tsx

@@ -11,13 +11,13 @@ import { json, jsonParseLinter } from '@codemirror/lang-json'
 import { css } from '@codemirror/lang-css'
 import { javascript } from '@codemirror/lang-javascript'
 import { html } from '@codemirror/lang-html'
+import { oneDark } from '@codemirror/theme-one-dark'
 import { useEffect, useRef, useState } from 'react'
 import { useDebouncedCallback } from 'use-debounce'
 import { linter, LintSource } from '@codemirror/lint'
 import { VariablesButton } from '@/features/variables'
 import { Variable } from 'models'
 import { env } from 'utils'
-import { espresso, dracula } from 'thememirror'
 
 const linterExtension = linter(jsonParseLinter() as unknown as LintSource)
 
@@ -92,8 +92,8 @@ export const CodeEditor = ({
       updateListenerExtension,
       basicSetup,
       EditorState.readOnly.of(isReadOnly),
-      isDark ? dracula : espresso,
     ]
+    if (isDark) extensions.push(oneDark)
     if (lang === 'json') {
       extensions.push(json())
       extensions.push(linterExtension)
@@ -144,7 +144,7 @@ export const CodeEditor = ({
       spacing={0}
       borderWidth={'1px'}
       borderRadius="md"
-      bg={useColorModeValue('#FCFCFC', '#2D2F3F')}
+      bg={useColorModeValue('#FCFCFC', '#282C34')}
     >
       <Box
         w={isVariableButtonDisplayed ? 'calc(100% - 32px)' : '100%'}