From 2fead013b359a06009f99cb506fa5e05c79f9078 Mon Sep 17 00:00:00 2001
From: Rafly Maulana <mraflymaulana@gmail.com>
Date: Sat, 19 Nov 2022 20:39:41 +0700
Subject: [PATCH] Use Markdown Editor in card description when editting

Since the card support markdown render, it'd be great if we also had markdown editor so for those who doesn't understand a lot about markdown could use this feature.

With this new feature, there also a drawbacks such as no longer saving when input are onBlur since if we still using this `blur` callback, it'd be called when user trying to click at the editor toolbar such as **Bold** button.
---
 .../components/CardModal/DescriptionEdit.jsx  | 36 +++++++++----------
 1 file changed, 16 insertions(+), 20 deletions(-)

diff --git a/client/src/components/CardModal/DescriptionEdit.jsx b/client/src/components/CardModal/DescriptionEdit.jsx
index 1eb24952..df0ab26f 100755
--- a/client/src/components/CardModal/DescriptionEdit.jsx
+++ b/client/src/components/CardModal/DescriptionEdit.jsx
@@ -1,19 +1,19 @@
-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, TextArea } from 'semantic-ui-react';
+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, handleFieldChange, setValue] = useField(null);
-
-  const field = useRef(null);
+  const [value, , setValue] = useField(null);
 
   const open = useCallback(() => {
     setIsOpened(true);
@@ -55,20 +55,18 @@ const DescriptionEdit = React.forwardRef(({ children, defaultValue, onUpdate },
     [close],
   );
 
-  const [handleFieldBlur, handleControlMouseOver, handleControlMouseOut] = useClosableForm(
-    close,
-    isOpened,
-  );
+  const [, handleControlMouseOver, handleControlMouseOut] = useClosableForm(close, isOpened);
 
   const handleSubmit = useCallback(() => {
     close();
   }, [close]);
 
-  useEffect(() => {
-    if (isOpened) {
-      field.current.ref.current.focus();
-    }
-  }, [isOpened]);
+  const mdEditorOptions = useMemo(() => {
+    return {
+      autofocus: true,
+      spellChecker: false,
+    };
+  }, []);
 
   if (!isOpened) {
     return React.cloneElement(children, {
@@ -78,18 +76,16 @@ const DescriptionEdit = React.forwardRef(({ children, defaultValue, onUpdate },
 
   return (
     <Form onSubmit={handleSubmit}>
-      <TextArea
-        ref={field}
+      <SimpleMDE
         as={TextareaAutosize}
         value={value}
         placeholder={t('common.enterDescription')}
-        minRows={3}
-        spellCheck={false}
         className={styles.field}
+        options={mdEditorOptions}
         onKeyDown={handleFieldKeyDown}
-        onChange={handleFieldChange}
-        onBlur={handleFieldBlur}
+        onChange={setValue}
       />
+
       <div className={styles.controls}>
         {/* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */}
         <Button