feat: Add markdown editor in card description (#333)

client/package.json

@@ -68,6 +68,7 @@
     "connected-react-router": "^6.9.3",
     "date-fns": "^2.29.1",
     "dequal": "^2.0.3",
+    "easymde": "^2.18.0",
     "history": "^4.10.1",
     "i18next": "^21.8.14",
     "i18next-browser-languagedetector": "^6.1.4",
@@ -90,6 +91,7 @@
     "react-redux": "^7.2.8",
     "react-router-dom": "^5.3.1",
     "react-scripts": "5.0.1",
+    "react-simplemde-editor": "^5.2.0",
     "react-textarea-autosize": "^8.3.4",
     "redux": "^4.2.0",
     "redux-logger": "^3.0.6",

client/src/components/CardModal/DescriptionEdit.jsx

@@ -1,19 +1,18 @@
-import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, { useCallback, useImperativeHandle, useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import TextareaAutosize from 'react-textarea-autosize';
+import { Button, Form } from 'semantic-ui-react';
-import { Button, Form, TextArea } 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, handleFieldChange, setValue] = useField(null);
+  const [value, , setValue] = useField(null);
-
-  const field = useRef(null);
 
   const open = useCallback(() => {
     setIsOpened(true);
@@ -55,20 +54,40 @@ const DescriptionEdit = React.forwardRef(({ children, defaultValue, onUpdate },
     [close],
   );
 
-  const [handleFieldBlur, handleControlMouseOver, handleControlMouseOut] = useClosableForm(
+  const [, handleControlMouseOver, handleControlMouseOut] = useClosableForm(close, isOpened);
-    close,
-    isOpened,
-  );
 
   const handleSubmit = useCallback(() => {
     close();
   }, [close]);
 
-  useEffect(() => {
+  const mdEditorOptions = useMemo(() => {
-    if (isOpened) {
+    return {
-      field.current.ref.current.focus();
+      autofocus: true,
-    }
+      spellChecker: false,
-  }, [isOpened]);
+      status: false,
+      toolbar: [
+        'bold',
+        'italic',
+        'heading',
+        'strikethrough',
+        '|',
+        'quote',
+        'unordered-list',
+        'ordered-list',
+        'table',
+        '|',
+        'link',
+        'image',
+        '|',
+        'fullscreen',
+        '|',
+        'undo',
+        'redo',
+        '|',
+        'guide',
+      ],
+    };
+  }, []);
 
   if (!isOpened) {
     return React.cloneElement(children, {
@@ -78,18 +97,15 @@ const DescriptionEdit = React.forwardRef(({ children, defaultValue, onUpdate },
 
   return (
     <Form onSubmit={handleSubmit}>
-      <TextArea
+      <SimpleMDE
-        ref={field}
-        as={TextareaAutosize}
         value={value}
         placeholder={t('common.enterDescription')}
-        minRows={3}
-        spellCheck={false}
         className={styles.field}
+        options={mdEditorOptions}
         onKeyDown={handleFieldKeyDown}
-        onChange={handleFieldChange}
+        onChange={setValue}
-        onBlur={handleFieldBlur}
       />
+
       <div className={styles.controls}>
         {/* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */}
         <Button

client/src/components/CardModal/DescriptionEdit.module.scss

@@ -6,15 +6,12 @@
 
   .field {
     background: #fff;
-    border: 1px solid rgba(9, 30, 66, 0.13);
-    border-radius: 3px;
     color: #17394d;
     display: block;
     font-size: 14px;
     line-height: 1.5;
     margin-bottom: 4px;
     overflow: hidden;
-    padding: 8px 12px;
     resize: none;
 
     &:focus {