⚡️ Change code editor

src/components/Settings/Customization/Theme/CustomCssChanger.tsx

@@ -1,24 +1,13 @@
-import {
-  Box,
-  createStyles,
-  Group,
-  Loader,
-  ScrollArea,
-  Stack,
-  Text,
-  useMantineTheme,
-} from '@mantine/core';
+import { Box, createStyles, Group, Loader, Stack, Text, useMantineTheme } from '@mantine/core';
 import { useDebouncedValue } from '@mantine/hooks';
 import { useTranslation } from 'next-i18next';
-import dynamic from 'next/dynamic';
-import { ChangeEvent, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import Editor from 'react-simple-code-editor';
+import { highlight, languages } from 'prismjs';
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
-
-const CodeEditor = dynamic(
-  () => import('@uiw/react-textarea-code-editor').then((mod) => mod.default),
-  { ssr: false }
-);
+import 'prismjs/components/prism-css';
+import 'prismjs/themes/prism.css';
 
 export const CustomCssChanger = () => {
   const { t } = useTranslation('settings/customization/page-appearance');
@@ -53,22 +42,20 @@ export const CustomCssChanger = () => {
     <Stack spacing={4} mt="xl">
       <Text>{t('customCSS.label')}</Text>
       <Text color="dimmed" size="xs">
-      {t('customCSS.description')}
+        {t('customCSS.description')}
       </Text>
       <div className={classes.codeEditorRoot}>
-        <ScrollArea style={{ height: codeEditorHeight }}>
-          <CodeEditor
-            className={classes.codeEditor}
-            placeholder={t('customCSS.placeholder')}
-            value={nonDebouncedCustomCSS}
-            onChange={(event: ChangeEvent<HTMLTextAreaElement>) =>
-              setNonDebouncedCustomCSS(event.target.value.trim())
-            }
-            language="css"
-            data-color-mode={colorScheme}
-            minHeight={codeEditorHeight}
-          />
-        </ScrollArea>
+        <Editor
+          value={nonDebouncedCustomCSS}
+          onValueChange={(code) => setNonDebouncedCustomCSS(code)}
+          highlight={(code) => highlight(code, languages.extend('css', {}), 'css')}
+          padding={10}
+          style={{
+            fontFamily: '"Fira code", "Fira Mono", monospace',
+            fontSize: 12,
+            minHeight: codeEditorHeight,
+          }}
+        />
         {codeIsDirty && (
           <Box className={classes.codeEditorFooter}>
             <Group p="xs" spacing="xs">

src/pages/_app.tsx

@@ -29,7 +29,6 @@ import { usePackageAttributesStore } from '../tools/client/zustands/usePackageAt
 import 'video.js/dist/video-js.css';
 
 import '../styles/global.scss';
-import '@uiw/react-textarea-code-editor/dist.css';
 
 function App(
   this: any,

src/widgets/video/VideoFeed.tsx

@@ -1,5 +1,4 @@
-import { LoadingOverlay } from '@mantine/core';
-import { createStyles } from '@mantine/styles';
+import { createStyles, LoadingOverlay } from '@mantine/core';
 import { useEffect, useRef, useState } from 'react';
 import videojs from 'video.js';
 import 'video.js/dist/video-js.css';

src/widgets/video/VideoStreamTile.tsx

@@ -1,6 +1,6 @@
 import { Center, Group, Stack, Title } from '@mantine/core';
 import { IconDeviceCctv, IconHeartBroken } from '@tabler/icons';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';
 import VideoFeed from './VideoFeed';