ref: Little refactoring

client/src/components/CardModal/DescriptionEdit.jsx

@@ -1,18 +1,15 @@
-import React, { useCallback, useImperativeHandle, useState, useMemo } from 'react';
+import React, { useCallback, useImperativeHandle, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Button, Form } from 'semantic-ui-react';
 import SimpleMDE from 'react-simplemde-editor';
 
-import { useClosableForm, useField } from '../../hooks';
-
 import styles from './DescriptionEdit.module.scss';
-import 'easymde/dist/easymde.min.css';
 
 const DescriptionEdit = React.forwardRef(({ children, defaultValue, onUpdate }, ref) => {
   const [t] = useTranslation();
   const [isOpened, setIsOpened] = useState(false);
-  const [value, , setValue] = useField(null);
+  const [value, setValue] = useState(null);
 
   const open = useCallback(() => {
     setIsOpened(true);
@@ -54,14 +51,12 @@ const DescriptionEdit = React.forwardRef(({ children, defaultValue, onUpdate },
     [close],
   );
 
-  const [, handleControlMouseOver, handleControlMouseOut] = useClosableForm(close, isOpened);
-
   const handleSubmit = useCallback(() => {
     close();
   }, [close]);
 
-  const mdEditorOptions = useMemo(() => {
-    return {
+  const mdEditorOptions = useMemo(
+    () => ({
       autofocus: true,
       spellChecker: false,
       status: false,
@@ -79,15 +74,14 @@ const DescriptionEdit = React.forwardRef(({ children, defaultValue, onUpdate },
         'link',
         'image',
         '|',
-        'fullscreen',
-        '|',
         'undo',
         'redo',
         '|',
         'guide',
       ],
-    };
-  }, []);
+    }),
+    [],
+  );
 
   if (!isOpened) {
     return React.cloneElement(children, {
@@ -99,21 +93,15 @@ const DescriptionEdit = React.forwardRef(({ children, defaultValue, onUpdate },
     <Form onSubmit={handleSubmit}>
       <SimpleMDE
         value={value}
+        options={mdEditorOptions}
         placeholder={t('common.enterDescription')}
         className={styles.field}
-        options={mdEditorOptions}
         onKeyDown={handleFieldKeyDown}
         onChange={setValue}
       />
-
       <div className={styles.controls}>
         {/* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */}
-        <Button
-          positive
-          content={t('action.save')}
-          onMouseOver={handleControlMouseOver}
-          onMouseOut={handleControlMouseOut}
-        />
+        <Button positive content={t('action.save')} />
       </div>
     </Form>
   );

client/src/components/Root.jsx

@@ -11,6 +11,7 @@ import NotFound from './NotFound';
 
 import 'react-datepicker/dist/react-datepicker.css';
 import 'photoswipe/dist/photoswipe.css';
+import 'easymde/dist/easymde.min.css';
 import '../lib/custom-ui/styles.css';
 
 import '../styles.module.scss';