Codemirror fixes

rsconcept/frontend/src/index.css

@@ -18,6 +18,13 @@
   @apply bg-gray-100 dark:bg-gray-600 dark:text-zinc-200 hover:bg-gray-50 hover:text-gray-700 dark:hover:text-white dark:hover:bg-gray-500
 }
 
+.cm-editor {
+  @apply border shadow rounded clr-border px-2
+}
+.cm-editor.cm-focused {
+  @apply border shadow rounded outline-2 outline
+}
+
 @layer components {
   h1 {
     @apply text-lg font-bold text-center

rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression.tsx

@@ -1,5 +1,5 @@
+import { ReactCodeMirrorRef } from '@uiw/react-codemirror';
 import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { toast } from 'react-toastify';
 
 import Button from '../../components/Common/Button';
 import Label from '../../components/Common/Label';
@@ -38,9 +38,11 @@ function EditorRSExpression({
 }: EditorRSExpressionProps) {
   const { user } = useAuth();
   const { schema } = useRSForm();
+
   const [isModified, setIsModified] = useState(false);
   const { parseData, checkExpression, resetParse, loading } = useCheckExpression({ schema });
   const expressionCtrl = useRef<HTMLTextAreaElement>(null);
+  const rsInput = useRef<ReactCodeMirrorRef>(null);
 
   useLayoutEffect(() => {
     setIsModified(false);
@@ -51,8 +53,8 @@ function EditorRSExpression({
     toggleEditMode()
   }
 
-  function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
-    onChange(event.target.value);
+  function handleChange(newvalue: string) {
+    onChange(newvalue);
     setIsModified(true);
   }
   
@@ -91,7 +93,6 @@ function EditorRSExpression({
 
   const handleEdit = useCallback((id: TokenID, key?: string) => {
     if (!expressionCtrl.current) {
-      toast.error('Нет доступа к полю редактирования формального выражения');
       return;
     }
     const text = new TextWrapper(expressionCtrl.current);
@@ -112,6 +113,7 @@ function EditorRSExpression({
       return;
     }
     const text = new TextWrapper(expressionCtrl.current);
+    // rsInput.current?.state?.selection
     if (event.shiftKey && event.key === '*' && !event.altKey) {
       text.insertToken(TokenID.DECART);
     } else if (event.altKey) {
@@ -232,16 +234,16 @@ function EditorRSExpression({
         rows={6}
         placeholder={placeholder}
         value={value}
-        onChange={handleChange}
+        onChange={event => handleChange(event.target.value)}
         onFocus={handleFocusIn}
         onKeyDown={handleInput}
         disabled={disabled}
         spellCheck={false}
       />
-      { user?.is_staff && <RSInput
+      { user?.is_staff && 
+      <RSInput ref={rsInput}
         value={value}
-        setValue={setValue}
-        onChange={onChange}
+        onChange={handleChange}
         placeholder={placeholder}
         disabled={disabled}
       /> }

rsconcept/frontend/src/pages/RSFormPage/elements/RSInput.tsx

@@ -1,7 +1,8 @@
 import { Extension } from '@codemirror/state';
 import { createTheme } from '@uiw/codemirror-themes';
-import CodeMirror, { BasicSetupOptions } from '@uiw/react-codemirror';
+import CodeMirror, { BasicSetupOptions, ReactCodeMirrorRef } from '@uiw/react-codemirror';
 import { EditorView } from 'codemirror';
+import { Ref } from 'react';
 
 import { useConceptTheme } from '../../../context/ThemeContext';
 
@@ -9,7 +10,7 @@ import { useConceptTheme } from '../../../context/ThemeContext';
 const lightTheme: Extension = createTheme({
   theme: 'light',
   settings: {
-    fontFamily: 'Roboto',
+    fontFamily: 'inherit',
     background: '#ffffff',
     foreground: '#000000',
     selection: '#036dd626'
@@ -26,7 +27,7 @@ const lightTheme: Extension = createTheme({
 const darkTheme: Extension = createTheme({
   theme: 'dark',
   settings: {
-    fontFamily: 'Roboto',
+    fontFamily: 'inherit',
     background: '#000000',
     foreground: '#ffffff',
     selection: '#036dd626'
@@ -39,14 +40,6 @@ const darkTheme: Extension = createTheme({
   ]
 });
 
-interface RSInputProps {
-  disabled?: boolean
-  placeholder?: string
-  value: string
-  onChange: (newValue: string) => void
-  setValue: (expression: string) => void
-}
-
 const editorSetup: BasicSetupOptions = {
   highlightSpecialChars: true,
   history: true,
@@ -75,22 +68,37 @@ const editorSetup: BasicSetupOptions = {
   lintKeymap: false
 };
 
-function RSInput({ value, disabled, placeholder, setValue }: RSInputProps) {
+const editorExtensions = [
+  EditorView.lineWrapping
+];
+
+interface RSInputProps {
+  ref?: Ref<ReactCodeMirrorRef>
+  value?: string
+  disabled?: boolean
+  height?: string
+  placeholder?: string
+  onChange: (newValue: string) => void
+}
+
+function RSInput({ 
+  disabled, onChange,
+  height='10rem',
+  ...props 
+}: RSInputProps) {
   const { darkMode } = useConceptTheme();
 
   return (
-    <div className='w-full h-[10rem] border text-lg'>
+    <div className={`w-full h-[${height}]`}>
     <CodeMirror
-      value={value}
       basicSetup={editorSetup}
-      extensions={[EditorView.lineWrapping]}
+      extensions={editorExtensions}
       editable={!disabled}
-      placeholder={placeholder}
-      height='10rem'
+      height={height}
       indentWithTab={false}
-
       theme={darkMode ? darkTheme : lightTheme}
-      onChange={(value) => setValue(value)}
+      onChange={(value) => onChange(value)}
+      {...props}
     />
     </div>
   );