replace react-codemirror

packages/react/src/components/CodeMirror6.jsx

@@ -1,11 +1,10 @@
 import React from 'react';
-import { CodeMirror as _CodeMirror } from 'react-codemirror6';
-// import { CodeMirrorLite as _CodeMirror } from 'react-codemirror6/dist/lite';
+import _CodeMirror from '@uiw/react-codemirror';
 import { EditorView, Decoration } from '@codemirror/view';
 import { StateField, StateEffect } from '@codemirror/state';
 import { javascript } from '@codemirror/lang-javascript';
-// import { materialPalenight } from 'codemirror6-themes';
-import { materialPalenight } from '../themes/material-palenight';
+import strudelTheme from '../themes/strudel-theme';
+import './style.css';
 
 export const setFlash = StateEffect.define();
 const flashField = StateField.define({
@@ -80,24 +79,18 @@ const highlightField = StateField.define({
 });
 
 export default function CodeMirror({ value, onChange, onViewChanged, onCursor, options, editorDidMount }) {
+  console.log('coodemirrrorrr', strudelTheme);
   return (
     <>
       <_CodeMirror
-        onViewChange={onViewChanged}
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          flex: '1 0 auto',
-        }}
         value={value}
-        onChange={onChange}
-        extensions={[
-          javascript(),
-          materialPalenight,
-          highlightField,
-          flashField,
-          // theme, language, ...
-        ]}
+        onChange={(value, viewUpdate) => {
+          onChange(value);
+        }}
+        onCreateEditor={(view) => {
+          onViewChanged(view);
+        }}
+        extensions={[javascript(), strudelTheme, highlightField, flashField]}
       />
     </>
   );

packages/react/src/components/style.css

@@ -1,3 +1,14 @@
 .cm-editor {
   background-color: transparent !important;
+  height: 100%;
+  z-index: 11;
+  font-size: 16px;
+}
+
+.cm-theme-light {
+  width: 100%;
+}
+
+.cm-line > * {
+  background: #00000095;
 }