Improve code mirror use

rsconcept/frontend/src/components/Common/ReferenceInput.tsx

@@ -1,76 +0,0 @@
-import { useState } from 'react';
-
-import { useRSForm } from '../../context/RSFormContext';
-import useResolveText from '../../hooks/useResolveText';
-import Modal from './Modal';
-import PrettyJson from './PrettyJSON';
-import TextArea, { TextAreaProps } from './TextArea';
-
-interface ReferenceInputProps
-extends TextAreaProps {
-  initialValue?: string
-  value?: string
-  resolved?: string
-}
-
-function ReferenceInput({ 
-  initialValue, resolved, value,
-  onKeyDown, onChange, onFocus, onBlur, ... props
-}: ReferenceInputProps) {
-  const { schema } = useRSForm();
-  const { resolveText, refsData } = useResolveText({schema: schema});
-
-  const [showResolve, setShowResolve] = useState(false);
-  const [isFocused, setIsFocused] = useState(false);
-
-  function handleKeyboard(event: React.KeyboardEvent<HTMLTextAreaElement>) {
-    if (event.altKey) {
-      if (event.key === 'r' && value) {
-        event.preventDefault();
-        resolveText(value, () => {
-          setShowResolve(true);
-        });
-        return;
-      }
-    }
-    if (onKeyDown) onKeyDown(event);
-  }
-
-  function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
-    if (onChange) onChange(event);
-  }
-
-  function handleFocusIn(event: React.FocusEvent<HTMLTextAreaElement>) {
-    setIsFocused(true);
-    if (onFocus) onFocus(event);
-  }
-
-  function handleFocusOut(event: React.FocusEvent<HTMLTextAreaElement>) {
-    setIsFocused(false);
-    if (onBlur) onBlur(event);
-  }
-
-  return (
-    <>
-      { showResolve &&
-      <Modal
-        readonly
-        hideWindow={() => setShowResolve(false)}
-      >
-        <div className='max-h-[60vh] max-w-[80vw] overflow-auto'>
-          <PrettyJson data={refsData} />
-        </div>
-      </Modal>}
-      <TextArea
-        value={isFocused ? value : (value !== initialValue ? value : resolved)}
-        onKeyDown={handleKeyboard}
-        onChange={handleChange}
-        onFocus={handleFocusIn}
-        onBlur={handleFocusOut}
-        {...props}
-      />
-    </>
-  );
-}
-
-export default ReferenceInput;

rsconcept/frontend/src/index.css

@@ -279,6 +279,8 @@
 }
 
 .cm-editor {
+  resize: vertical;
+  overflow: auto !important;
   border-color: var(--cl-bg-40);
   .dark & {
     border-color: var(--cd-bg-40);

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

@@ -3,7 +3,6 @@ import { toast } from 'react-toastify';
 
 import ConceptTooltip from '../../components/Common/ConceptTooltip';
 import MiniButton from '../../components/Common/MiniButton';
-import ReferenceInput from '../../components/Common/ReferenceInput';
 import SubmitButton from '../../components/Common/SubmitButton';
 import TextArea from '../../components/Common/TextArea';
 import HelpConstituenta from '../../components/Help/HelpConstituenta';
@@ -192,15 +191,14 @@ function EditorConstituenta({
       </div>
       </div>
       <div className='flex flex-col gap-2 mt-1'>
-        <ReferenceInput id='term' label='Термин'
+        <RefsInput id='term' label='Термин'
           placeholder='Обозначение, используемое в текстовых определениях данной схемы'
-          rows={2}
+          height='3.5rem'
           value={term}
           initialValue={activeCst?.term_raw ?? ''}
           resolved={activeCst?.term_resolved ?? ''}
-          disabled={!isEnabled}
+          editable={isEnabled}
-          spellCheck
+          onChange={newValue => setTerm(newValue)}
-          onChange={event => setTerm(event.target.value)}
           onFocus={() => setEditMode(EditMode.TEXT)}
         />
         <TextArea id='typification' label='Типизация'
@@ -227,7 +225,6 @@ function EditorConstituenta({
           initialValue={activeCst?.definition_raw ?? ''}
           resolved={activeCst?.definition_resolved ?? ''}
           editable={isEnabled}
-          // spellCheck
           onChange={newValue => setTextDefinition(newValue)}
           onFocus={() => setEditMode(EditMode.TEXT)}
         />