file upload with multer

package.json

@@ -21,6 +21,7 @@
     "axios": "^0.22.0",
     "blockly": "^6.20210701.0",
     "file-saver": "^2.0.2",
+    "markdown-it": "^12.3.2",
     "mnemonic-id": "^3.2.7",
     "moment": "^2.28.0",
     "prismjs": "^1.25.0",
@@ -28,6 +29,7 @@
     "react-cookie-consent": "^7.0.0",
     "react-dom": "^17.0.2",
     "react-markdown": "^5.0.2",
+    "react-markdown-editor-lite": "^1.3.2",
     "react-mde": "^11.5.0",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
@@ -39,7 +41,7 @@
     "uuid": "^8.3.1"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "node_modules/react-scripts/bin/react-scripts.js start",
     "dev": "set \"REACT_APP_BLOCKLY_API=http://localhost:8080\" && npm start",
     "build": "react-scripts build",
     "test": "react-scripts test",

src/components/Tutorial/Builder/Builder.js

@@ -41,6 +41,8 @@ import FormControl from "@material-ui/core/FormControl";
 import Select from "@material-ui/core/Select";
 import * as Blockly from "blockly";
 
+import MarkdownEditor from "./MarkdownEditor";
+
 const styles = (theme) => ({
   backdrop: {
     zIndex: theme.zIndex.drawer + 1,

src/components/Tutorial/Builder/MarkdownEditor.js

@@ -0,0 +1,83 @@
+import React, { Component, useRef } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import {
+    tutorialTitle,
+    jsonString,
+    changeContent,
+    setError,
+    deleteError,
+} from "../../../actions/tutorialBuilderActions";
+
+import FormControl from "@material-ui/core/FormControl";
+import Button from "@material-ui/core/Button";
+import MarkdownIt from "markdown-it";
+import Editor from "react-markdown-editor-lite";
+import "react-markdown-editor-lite/lib/index.css";
+
+import axios from "axios";
+
+const mdParser = new MarkdownIt(/* Markdown-it options */);
+
+const MarkdownEditor = (props) => {
+    const [value, setValue] = React.useState(props.value);
+
+    const mdEditor = React.useRef(null);
+
+    function handleChange({ html, text }) {
+        setValue(text);
+        var value = text;
+        console.log(text);
+        props.changeContent(value, props.index, props.property, props.property2);
+        if (value.replace(/\s/g, "") === "") {
+            props.setError(props.index, props.property);
+        } else {
+            props.deleteError(props.index, props.property);
+        }
+    }
+
+    async function uploadImage(files) {
+        return new Promise((resolve, reject) => {
+            const formData = new FormData();
+            formData.append("files", files);
+            axios({
+                method: "post",
+                url: `${process.env.REACT_APP_BLOCKLY_API}/upload/uploadImage`,
+                data: formData,
+                headers: { "Content-Type": "multipart/form-data" },
+            })
+                .then((res) => {
+                    console.log(res);
+                    resolve(`${process.env.REACT_APP_BLOCKLY_API}/upload/`+res.data.filename);
+                })
+                .catch((err) => {
+                    reject(new Error("error"));
+                })
+        })
+    }
+
+    return (
+        <FormControl variant="outlined" fullWidth style={{ marginBottom: "10px" }}>
+            <Editor
+                ref={mdEditor}
+                style={{ height: "500px" }}
+                renderHTML={(text) => mdParser.render(text)}
+                onChange={handleChange}
+                value={value}
+                id={props.property}
+                label={props.label}
+                property={props.property}
+                onImageUpload={uploadImage}
+                plugins={[]}
+            />
+        </FormControl>
+    );
+};
+
+export default connect(null, {
+    tutorialTitle,
+    jsonString,
+    changeContent,
+    setError,
+    deleteError,
+})(MarkdownEditor);

src/components/Tutorial/Builder/Step.js

@@ -20,6 +20,8 @@ import Tooltip from '@material-ui/core/Tooltip';
 import { faPlus, faAngleDoubleUp, faAngleDoubleDown, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
+import MarkdownEditor from "./MarkdownEditor";
+
 const styles = (theme) => ({
   button: {
     backgroundColor: theme.palette.primary.main,
@@ -96,8 +98,29 @@ class Step extends Component {
           </div>
           <div style={{ width: '100%', marginLeft: '54px' }}>
             <StepType value={this.props.step.type} index={index} />
-            <Textfield value={this.props.step.headline} property={'headline'} label={'Überschrift'} index={index} error={this.props.error.steps[index].headline} errorText={`Gib eine Überschrift für die ${this.props.step.type === 'task' ? 'Aufgabe' : 'Anleitung'} ein.`} />
-            <Textfield value={this.props.step.text} property={'text'} label={this.props.step.type === 'task' ? 'Aufgabenstellung' : 'Instruktionen'} index={index} multiline error={this.props.error.steps[index].text} errorText={`Gib Instruktionen für die ${this.props.step.type === 'task' ? 'Aufgabe' : 'Anleitung'} ein.`}/>
+            <Textfield
+              value={this.props.step.headline}
+              property={"headline"}
+              label={"Überschrift"}
+              index={index}
+              error={this.props.error.steps[index].headline}
+              errorText={`Gib eine Überschrift für die ${this.props.step.type === "task" ? "Aufgabe" : "Anleitung"
+                } ein.`}
+            />
+            <MarkdownEditor
+              value={this.props.step.text}
+              property={"text"}
+              label={
+                this.props.step.type === "task"
+                  ? "Aufgabenstellung"
+                  : "Instruktionen"
+              }
+              index={index}
+              multiline
+              error={this.props.error.steps[index].text}
+              errorText={`Gib Instruktionen für die ${this.props.step.type === "task" ? "Aufgabe" : "Anleitung"
+                } ein.`}
+            />
             {index === 0 ?
               <div>
                 <Requirements value={this.props.step.requirements ? this.props.step.requirements : []} index={index} />