update markdown editor and renderer

src/components/Tutorial/Builder/Builder.js

@@ -355,9 +355,13 @@ class Builder extends Component {
   };
 
   render() {
-    var filteredTutorials = this.props.tutorials.filter(
-      (tutorial) => tutorial.creator === this.props.user.email
-    );
+    if (this.props.user.role === "admin") {
+      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>