Add RSInput experimental feature

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

@@ -192,8 +192,8 @@ function EditorConstituenta({ activeID, onShowAST, onCreateCst, onOpenEdit, onDe
           value={term}
           disabled={!isEnabled}
           spellCheck
-          onChange={event => { setTerm(event.target.value); }}
+          onChange={event => setTerm(event.target.value)}
-          onFocus={() => { setEditMode(EditMode.TEXT); }}
+          onFocus={() => setEditMode(EditMode.TEXT)}
         />
         <TextArea id='typification' label='Типизация'
           rows={1}
@@ -206,9 +206,9 @@ function EditorConstituenta({ activeID, onShowAST, onCreateCst, onOpenEdit, onDe
           value={expression}
           disabled={!isEnabled}
           isActive={editMode === EditMode.RSLANG}
-          toggleEditMode={() => { setEditMode(EditMode.RSLANG); }}
+          toggleEditMode={() => setEditMode(EditMode.RSLANG)}
           onShowAST={onShowAST}
-          onChange={event => { setExpression(event.target.value); }}
+          onChange={newValue => setExpression(newValue)}
           setValue={setExpression}
           setTypification={setTypification}
         />

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

@@ -4,12 +4,14 @@ import { toast } from 'react-toastify';
 import Button from '../../components/Common/Button';
 import Label from '../../components/Common/Label';
 import { Loader } from '../../components/Common/Loader';
+import { useAuth } from '../../context/AuthContext';
 import { useRSForm } from '../../context/RSFormContext';
 import useCheckExpression from '../../hooks/useCheckExpression';
 import { TokenID } from '../../utils/enums';
 import { IConstituenta, IRSErrorDescription, SyntaxTree } from '../../utils/models';
 import { getCstExpressionPrefix, getTypificationLabel } from '../../utils/staticUI';
 import ParsingResult from './elements/ParsingResult';
+import RSInput from './elements/RSInput';
 import RSLocalButton from './elements/RSLocalButton';
 import RSTokenButton from './elements/RSTokenButton';
 import StatusBar from './elements/StatusBar';
@@ -22,11 +24,11 @@ interface EditorRSExpressionProps {
   isActive: boolean
   disabled?: boolean
   placeholder?: string
-  value: string
-  onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void
   onShowAST: (expression: string, ast: SyntaxTree) => void
   toggleEditMode: () => void
   setTypification: (typificaiton: string) => void
+  value: string
+  onChange: (newValue: string) => void
   setValue: (expression: string) => void
 }
 
@@ -34,6 +36,7 @@ function EditorRSExpression({
   id, activeCst, label, disabled, isActive, placeholder, value, setValue, onShowAST, 
   toggleEditMode, setTypification, onChange
 }: EditorRSExpressionProps) {
+  const { user } = useAuth();
   const { schema } = useRSForm();
   const [isModified, setIsModified] = useState(false);
   const { parseData, checkExpression, resetParse, loading } = useCheckExpression({ schema });
@@ -49,7 +52,7 @@ function EditorRSExpression({
   }
 
   function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
-    onChange(event);
+    onChange(event.target.value);
     setIsModified(true);
   }
   
@@ -225,16 +228,23 @@ function EditorRSExpression({
         htmlFor={id}
       />
       <textarea id={id} ref={expressionCtrl}
-          className='w-full px-3 py-2 mt-2 leading-tight border shadow clr-input'
+        className='w-full px-3 py-2 mt-2 leading-tight border shadow clr-input'
-          rows={6}
+        rows={6}
-          placeholder={placeholder}
+        placeholder={placeholder}
-          value={value}
+        value={value}
-          onChange={handleChange}
+        onChange={handleChange}
-          onFocus={handleFocusIn}
+        onFocus={handleFocusIn}
-          onKeyDown={handleInput}
+        onKeyDown={handleInput}
-          disabled={disabled}
+        disabled={disabled}
-          spellCheck={false}
+        spellCheck={false}
       />
+      { user?.is_staff && <RSInput
+        value={value}
+        setValue={setValue}
+        onChange={onChange}
+        placeholder={placeholder}
+        disabled={disabled}
+      /> }
       <div className='flex w-full gap-4 py-1 mt-1 justify-stretch'>
         <div className='flex flex-col gap-2'>
           <Button

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

@@ -0,0 +1,99 @@
+import { Extension } from '@codemirror/state';
+import { createTheme } from '@uiw/codemirror-themes';
+import CodeMirror, { BasicSetupOptions } from '@uiw/react-codemirror';
+import { EditorView } from 'codemirror';
+
+import { useConceptTheme } from '../../../context/ThemeContext';
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
+const lightTheme: Extension = createTheme({
+  theme: 'light',
+  settings: {
+    fontFamily: 'Roboto',
+    background: '#ffffff',
+    foreground: '#000000',
+    selection: '#036dd626'
+  },
+  styles: [
+    // { tag: t.comment, color: '#787b8099' },
+    // { tag: t.variableName, color: '#0080ff' },
+    // { tag: [t.string, t.special(t.brace)], color: '#5c6166' },
+    // { tag: t.definition(t.typeName), color: '#5c6166' },
+  ]
+});
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
+const darkTheme: Extension = createTheme({
+  theme: 'dark',
+  settings: {
+    fontFamily: 'Roboto',
+    background: '#000000',
+    foreground: '#ffffff',
+    selection: '#036dd626'
+  },
+  styles: [
+    // { tag: t.comment, color: '#787b8099' },
+    // { tag: t.variableName, color: '#0080ff' },
+    // { tag: [t.string, t.special(t.brace)], color: '#5c6166' },
+    // { tag: t.definition(t.typeName), color: '#5c6166' },
+  ]
+});
+
+interface RSInputProps {
+  disabled?: boolean
+  placeholder?: string
+  value: string
+  onChange: (newValue: string) => void
+  setValue: (expression: string) => void
+}
+
+const editorSetup: BasicSetupOptions = {
+  highlightSpecialChars: true,
+  history: true,
+  drawSelection: true,
+  syntaxHighlighting: true,
+  defaultKeymap: true,
+  historyKeymap: true,
+
+  lineNumbers: false,
+  highlightActiveLineGutter: false,
+  foldGutter: false,
+  dropCursor: false,
+  allowMultipleSelections: false,
+  indentOnInput: false,
+  bracketMatching: true,
+  closeBrackets: false,
+  autocompletion: false,
+  rectangularSelection: false,
+  crosshairCursor: false,
+  highlightActiveLine: false,
+  highlightSelectionMatches: false,
+  closeBracketsKeymap: false,
+  searchKeymap: false,
+  foldKeymap: false,
+  completionKeymap: false,
+  lintKeymap: false
+};
+
+function RSInput({ value, disabled, placeholder, setValue }: RSInputProps) {
+  const { darkMode } = useConceptTheme();
+
+  return (
+    <div className='w-full h-[10rem] border text-lg'>
+    <CodeMirror
+      value={value}
+      basicSetup={editorSetup}
+      extensions={[EditorView.lineWrapping]}
+      editable={!disabled}
+      placeholder={placeholder}
+      height='10rem'
+      indentWithTab={false}
+
+      theme={darkMode ? darkTheme : lightTheme}
+      onChange={(value) => setValue(value)}
+    />
+    </div>
+  );
+}
+
+export default RSInput;