⚡️ Change code editor

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

@@ -1,24 +1,13 @@
-import {
+import { Box, createStyles, Group, Loader, Stack, Text, useMantineTheme } from '@mantine/core';
-  Box,
-  createStyles,
-  Group,
-  Loader,
-  ScrollArea,
-  Stack,
-  Text,
-  useMantineTheme,
-} from '@mantine/core';
 import { useDebouncedValue } from '@mantine/hooks';
 import { useTranslation } from 'next-i18next';
-import dynamic from 'next/dynamic';
+import { useEffect, useState } from 'react';
-import { ChangeEvent, 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';
-
+import 'prismjs/components/prism-css';
-const CodeEditor = dynamic(
+import 'prismjs/themes/prism.css';
-  () => import('@uiw/react-textarea-code-editor').then((mod) => mod.default),
-  { ssr: false }
-);
 
 export const CustomCssChanger = () => {
   const { t } = useTranslation('settings/customization/page-appearance');
@@ -56,19 +45,17 @@ export const CustomCssChanger = () => {
         {t('customCSS.description')}
       </Text>
       <div className={classes.codeEditorRoot}>
-        <ScrollArea style={{ height: codeEditorHeight }}>
+        <Editor
-          <CodeEditor
-            className={classes.codeEditor}
-            placeholder={t('customCSS.placeholder')}
           value={nonDebouncedCustomCSS}
-            onChange={(event: ChangeEvent<HTMLTextAreaElement>) =>
+          onValueChange={(code) => setNonDebouncedCustomCSS(code)}
-              setNonDebouncedCustomCSS(event.target.value.trim())
+          highlight={(code) => highlight(code, languages.extend('css', {}), 'css')}
-            }
+          padding={10}
-            language="css"
+          style={{
-            data-color-mode={colorScheme}
+            fontFamily: '"Fira code", "Fira Mono", monospace',
-            minHeight={codeEditorHeight}
+            fontSize: 12,
+            minHeight: codeEditorHeight,
+          }}
         />
-        </ScrollArea>
         {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, LoadingOverlay } from '@mantine/core';
-import { createStyles } from '@mantine/styles';
 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';