update markdown editor and renderer

package.json

@@ -30,7 +30,7 @@
     "react": "^17.0.2",
     "react-cookie-consent": "^7.2.1",
     "react-dom": "^17.0.2",
-    "react-markdown": "^5.0.2",
+    "react-markdown": "^8.0.0",
     "react-markdown-editor-lite": "^1.3.2",
     "react-mde": "^11.5.0",
     "react-redux": "^7.2.4",
@@ -39,6 +39,8 @@
     "reactour": "^1.18.7",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
+    "remark-gemoji": "^7.0.1",
+    "remark-gfm": "^3.0.1",
     "styled-components": "^4.4.1",
     "uuid": "^8.3.1",
     "watchpack": "^2.3.1"

src/components/Tutorial/Builder/Builder.js

@@ -355,9 +355,13 @@ class Builder extends Component {
   };
 
   render() {
-    var filteredTutorials = this.props.tutorials.filter(
+    if (this.props.user.role === "admin") {
-      (tutorial) => tutorial.creator === this.props.user.email
+      var filteredTutorials = this.props.tutorials;
-    );
+    } else {
+      filteredTutorials = this.props.tutorials.filter(
+        (tutorial) => tutorial.creator === this.props.user.email
+      );
+    }
     return (
       <div>
         <Breadcrumbs

src/components/Tutorial/Builder/MarkdownEditor.js

@@ -18,12 +18,12 @@ import axios from "axios";
 const mdParser = new MarkdownIt(/* Markdown-it options */);
 
 const MarkdownEditor = (props) => {
-  //const [value, setValue] = React.useState(props.value);
+  const [value, setValue] = React.useState(props.value);
 
   const mdEditor = React.useRef(null);
 
   function handleChange({ html, text }) {
-    //setValue(text);
+    setValue(text);
     var value = text;
     props.changeContent(value, props.index, props.property, props.property2);
     if (value.replace(/\s/g, "") === "") {
@@ -62,7 +62,7 @@ const MarkdownEditor = (props) => {
         style={{ height: "500px" }}
         renderHTML={(text) => mdParser.render(text)}
         onChange={handleChange}
-        //value={value}
+        value={value}
         id={props.property}
         label={props.label}
         property={props.property}

src/components/Tutorial/Instruction.js

@@ -7,6 +7,8 @@ import BlocklyWindow from "../Blockly/BlocklyWindow";
 import Grid from "@material-ui/core/Grid";
 import Typography from "@material-ui/core/Typography";
 import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import remarkGemoji from "remark-gemoji";
 
 class Instruction extends Component {
   render() {
@@ -15,14 +17,13 @@ class Instruction extends Component {
     var areRequirements = step.requirements && step.requirements.length > 0;
     return (
       <div>
-        {/* <Typography variant="h4" style={{ marginBottom: "5px" }}>
-          {step.headline}
-        </Typography> */}
         <Typography style={isHardware ? {} : { marginBottom: "5px" }}>
           <ReactMarkdown
             className={"tutorial"}
             linkTarget={"_blank"}
             skipHtml={false}
+            allowDangerousHtml={true}
+            remarkPlugins={[remarkGfm, remarkGemoji]}
           >
             {step.text}
           </ReactMarkdown>