markdown editor design (fixes: #387)

package.json

@@ -11,16 +11,20 @@
     "aws-amplify": "^3.3.27",
     "axios": "^0.21.1",
     "dotenv": "^8.2.0",
-    "immutability-helper": "^3.1.1",
+    "draft-js": "^0.11.7",
+    "draftjs-to-markdown": "^0.6.0",
     "file-saver": "^2.0.5",
+    "immutability-helper": "^3.1.1",
     "js-file-download": "^0.4.12",
+    "markdown-draft-js": "^2.3.0",
     "moment": "^2.29.1",
     "node-sass": "^6.0.0",
     "parcel-bundler": "^1.12.4",
     "react": "^17.0.2",
     "react-dnd": "^14.0.2",
     "react-dnd-html5-backend": "^14.0.0",
     "react-dom": "^17.0.2",
+    "react-draft-wysiwyg": "^1.14.7",
     "react-dropzone": "^11.3.2",
     "react-hook-form": "^6.15.4",
     "react-player": "^2.9.0",

src/App.jsx

@@ -52,6 +52,7 @@ import AddTest from './screens/addTest/AddTest'
 import LogoutUser from './screens/logoutUser/LogoutUser'
 import Category from './screens/category/Category'
 import PageNotFound from './screens/pageNotFound/PageNotFound'
+import MarkDownEditor from './components/markDownEditor/MarkDownEditor'
 
 function App () {
   return (
@@ -121,6 +122,7 @@ function App () {
             <PrivateRoute component={MyProfile} exact path='/myProfile' />
             <PrivateRoute component={UserInfo} exact path='/userInfo' />
             <PrivateRoute component={() => <MyCoursePage unpaid='unpaid' />} path='/coursepage' />
+            <Route path="/markdown-editor" component={MarkDownEditor} />
             <PrivateRoute component={PageNotFound} />
           </Switch>
         </ScrollToTop>

src/components/markDownEditor/MarkDownEditor.jsx

@@ -0,0 +1,163 @@
+import React, { useState } from "react";
+import { Editor } from "react-draft-wysiwyg";
+import "../../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
+// import draftToMarkdown from "draftjs-to-markdown";
+import Button from "../button/Button";
+import DashboardLayout from "../../layout/dashboardLayout/DashboardLayout";
+import { RichUtils } from 'draft-js';
+import { draftToMarkdown, markdownToDraft } from 'markdown-draft-js';
+import { EditorState, convertToRaw, convertFromRaw } from 'draft-js';
+
+import './MarkDownEditor.scss'
+
+const MarkDownEditor = () => {
+    const [editorState, setEditorState] = useState(EditorState.createEmpty());
+    const [markDown, setMarkDown] = useState(false);
+    const [markDownText, setMarkDownText] = useState(null);
+
+    function onEditorStateChange(editorState) {
+        setEditorState(editorState);
+    }
+
+    function changeToMarkDown() {
+        const rawContentState = convertToRaw(editorState.getCurrentContent());
+        setMarkDownText(draftToMarkdown(rawContentState));
+        setMarkDown(true)
+    }
+
+     function changeToEditor() {
+
+         const markDownData = markdownToDraft(markDownText);
+         const rawMarkDown = convertFromRaw(markDownData);
+
+        setEditorState(EditorState.createWithContent(rawMarkDown))
+        setMarkDown(false)
+    }
+
+        function uploadImageCallBack(file) {
+        // return new Promise(
+        //     (resolve, reject) => {
+        //     const xhr = new XMLHttpRequest(); // eslint-disable-line no-undef
+        //     xhr.open('POST', 'https://api.imgur.com/3/image');
+        //     xhr.setRequestHeader('Authorization', 'Client-ID 8d26ccd12712fca');
+        //     const data = new FormData(); // eslint-disable-line no-undef
+        //     data.append('image', file);
+        //     xhr.send(data);
+        //     xhr.addEventListener('load', () => {
+        //         const response = JSON.parse(xhr.responseText);
+        //         resolve(response);
+        //     });
+        //     xhr.addEventListener('error', () => {
+        //         const error = JSON.parse(xhr.responseText);
+        //         reject(error);
+        //     });
+        //     },
+        // );
+        }
+
+        const toolbarOptions = {
+            options: ['inline', 'blockType', 'fontSize', 'fontFamily', 'list', 'textAlign', 'link', 'image', 'remove', 'history'],
+            image: {
+                className: 'button-color',
+                uploadCallback: uploadImageCallBack,
+                previewImage: true 
+            },
+            // blockType: {
+            //     className: 'button-color'
+            // },
+            // inline: {
+            //     className: 'button-color'
+            // },
+            // history: {
+            //     className: 'button-color'
+            // },
+            // remove: {
+            //     className: 'button-color'
+            // },
+            // fontSize: {
+            //     className: 'button-color'
+            // },
+            // fontFamily: {
+            //     className: 'button-color'
+            // },
+            // list: {
+            //     className: 'button-color'
+            // },
+            // textAlign: {
+            //     className: 'button-color'
+            // },
+            // link: {
+            //     className: 'button-color'
+            // },
+
+        }
+
+        // const styleButton = (array) => {
+
+        //   const customStyle =  array.map(item => Object.prototype.constructor({`${item ":" "button-color"}`}))
+        //     return [...customStyle]
+        // }
+
+        // const styledButtonClass = styleButton(toolbarOptions.options);
+        // console.log(styledButtonClass)
+
+        //styling mark down editor
+        const editorStyle = {
+            border: "0.5px solid var(--dropdowns)",
+            backgroundColor: "var(--cards)", 
+            height: "200px",
+            borderRadius: '4px',
+            color: 'var(--primary-white)', 
+            marginBottom: "40px",
+            padding: '8px',
+            overflowY: "auto"
+        }
+
+        const toolbarStyle = {
+            background: 'var(--dropdowns)',
+            marginBottom: "14px",
+            border: "0.5px solid var(--dropdowns)",
+            borderRadius: '4px',
+            padding: '8px'
+        }
+
+    return (
+        <>
+            <div className="mark-down-container">
+                {!markDown ? <Editor
+                    toolbarStyle={toolbarStyle}
+                    editorStyle={editorStyle}
+                    editorState={editorState}
+                    onEditorStateChange={onEditorStateChange}
+                    toolbar={toolbarOptions}
+                    // toolbarCustomButtons={[<CustomOption />]}
+                /> 
+                : <textarea style={editorStyle} value={markDownText} onChange={e => setMarkDownText(e.target.value)} />
+                }
+                {
+                !markDown
+                ? <button className="secondary-btn markdown-button" onClick={changeToMarkDown}>Mark down</button>
+                : <button className="secondary-btn markdown-button" onClick={changeToEditor}>Editor</button>
+                }
+            </div>
+        <div>
+        </div>
+        </>
+    )
+}
+
+// const CustomOption = ({editorState, onChange}) => {
+
+//     const toggleMarkDown = () => {
+//     const newState = RichUtils.toggleInlineStyle(
+//       editorState,
+//       'Mark Down',
+//     );
+//     if (newState) {
+//       onChange(newState);
+//     }
+//   };
+//     return(<div className="rdw-storybook-custom-option" onClick={toggleMarkDown}>MD</div>)
+// }
+
+export default MarkDownEditor

src/components/markDownEditor/MarkDownEditor.scss

@@ -0,0 +1,39 @@
+.mark-down-container {
+  width: 100%;
+  height: auto;
+  position: relative;
+
+  textarea {
+    width: 100%;
+    resize: none;
+  }
+
+  .markdown-button {
+    position: absolute;
+    z-index: 100;
+    bottom: 55px;
+    right: 10px;
+    width: 100px;
+    height: 30px;
+    padding: 0;
+    // outline: none;
+    // border: 1px solid var(--strokes);
+    // background: var(--background-color);
+    // color: var(--primary-white);
+    // padding: 8px 12px;
+    // border-radius: 4px;
+    // cursor: pointer;
+  }
+}
+
+.button-color {
+  background-color: var(--primary-grey);
+  border-color: var(--primary-grey);
+  padding: 8px;
+}
+
+.rdw-storybook-custom-option {
+  border: 1px solid #f1f1f1;
+  padding: 3px 10px;
+  height: 22px;
+}