add markdown editor

package.json

@@ -19,7 +19,6 @@
     "@testing-library/user-event": "^7.2.1",
     "axios": "^0.21.0",
     "blockly": "^6.20210701.0",
-    "diff-js-xml": "^1.0.6",
     "file-saver": "^2.0.2",
     "mnemonic-id": "^3.2.7",
     "moment": "^2.28.0",
@@ -35,7 +34,8 @@
     "reactour": "^1.18.0",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
-    "styled-components": "^4.4.1",
+    "rich-markdown-editor": "^11.17.7",
+    "styled-components": "^5.0.0",
     "uuid": "^8.3.1"
   },
   "scripts": {

src/components/Blockly/BlocklyWindow.js

@@ -20,7 +20,6 @@ class BlocklyWindow extends Component {
 
   componentDidMount() {
     const workspace = Blockly.getMainWorkspace();
-    if (!this.props.readOnly) {
     this.props.onChangeWorkspace({});
     this.props.clearStats();
     workspace.addChangeListener((event) => {
@@ -31,7 +30,6 @@ class BlocklyWindow extends Component {
         Blockly.Events.disableOrphans(event);
       }
     });
-    }
     Blockly.svgResize(workspace);
     const zoomToFit = new ZoomToFitControl(workspace);
     zoomToFit.init();
@@ -39,7 +37,6 @@ class BlocklyWindow extends Component {
 
   componentDidUpdate(props) {
     const workspace = Blockly.getMainWorkspace();
-    if (!this.props.readOnly) {
     var xml = this.props.initialXml;
     // if svg is true, then the update process is done in the BlocklySvg component
     if (props.initialXml !== xml && !this.props.svg) {
@@ -56,7 +53,6 @@ class BlocklyWindow extends Component {
       // var toolbox = workspace.getToolbox();
       // workspace.updateToolbox(toolbox.toolboxDef_);
     }
-    }
     Blockly.svgResize(workspace);
   }
 

src/components/Faq.js

@@ -1,39 +1,38 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
 
-import Breadcrumbs from './Breadcrumbs';
+import Breadcrumbs from "./Breadcrumbs";
 
-import { withRouter } from 'react-router-dom';
+import { withRouter } from "react-router-dom";
 
-import Button from '@material-ui/core/Button';
+import Button from "@material-ui/core/Button";
-import Typography from '@material-ui/core/Typography';
+import Typography from "@material-ui/core/Typography";
-import * as Blockly from 'blockly'
+import * as Blockly from "blockly";
-import ReactMarkdown from 'react-markdown';
+import ReactMarkdown from "react-markdown";
-import Container from '@material-ui/core/Container';
+import Container from "@material-ui/core/Container";
-import ExpansionPanel from '@material-ui/core/ExpansionPanel';
+import ExpansionPanel from "@material-ui/core/ExpansionPanel";
-import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
+import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
-import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
+import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
-import { FaqQuestions } from '../data/faq'
+import { FaqQuestions } from "../data/faq";
-
+import Editor from "rich-markdown-editor";
 
 class Faq extends Component {
-
   state = {
-        panel: '',
+    panel: "",
-        expanded: false
+    expanded: false,
-    }
+    text: "",
-
+  };
 
   handleChange = (panel) => {
-        this.setState({ panel: this.state.panel === panel ? '' : panel });
+    this.setState({ panel: this.state.panel === panel ? "" : panel });
   };
 
   componentDidMount() {
     // Ensure that Blockly.setLocale is adopted in the component.
     // Otherwise, the text will not be displayed until the next update of the component.
 
-        window.scrollTo(0, 0)
+    window.scrollTo(0, 0);
     this.forceUpdate();
   }
 
@@ -41,54 +40,81 @@ class Faq extends Component {
     const { panel } = this.state;
     return (
       <div>
-                <Breadcrumbs content={[{ link: this.props.location.pathname, title: 'FAQ' }]} />
+        <Breadcrumbs
+          content={[{ link: this.props.location.pathname, title: "FAQ" }]}
+        />
         <Container fixed>
-                    <div style={{ margin: '0px 24px 0px 24px' }}>
+          <div style={{ margin: "0px 24px 0px 24px" }}>
             <h1>FAQ</h1>
             {FaqQuestions().map((object, i) => {
               return (
-                                <ExpansionPanel expanded={panel === `panel${i}`} onChange={() => this.handleChange(`panel${i}`)}>
+                <ExpansionPanel
+                  expanded={panel === `panel${i}`}
+                  onChange={() => this.handleChange(`panel${i}`)}
+                >
                   <ExpansionPanelSummary
-                                        expandIcon={
+                    expandIcon={<FontAwesomeIcon icon={faChevronDown} />}
-                                            <FontAwesomeIcon icon={faChevronDown} />
-                                        }
                   >
                     <Typography variant="h6">{object.question}</Typography>
                   </ExpansionPanelSummary>
                   <ExpansionPanelDetails>
                     <Typography>
-                                            <ReactMarkdown className="news" allowDangerousHtml="true" children={object.answer}>
+                      <ReactMarkdown
-                                            </ReactMarkdown>
+                        className="news"
+                        allowDangerousHtml="true"
+                        children={object.answer}
+                      ></ReactMarkdown>
                     </Typography>
                   </ExpansionPanelDetails>
                 </ExpansionPanel>
-                            )
+              );
             })}
-                        {
+            {this.props.button ? (
-                            this.props.button ?
               <Button
-                                    style={{ marginTop: '20px' }}
+                style={{ marginTop: "20px" }}
                 variant="contained"
                 color="primary"
-                                    onClick={() => { this.props.history.push(this.props.button.link) }}
+                onClick={() => {
+                  this.props.history.push(this.props.button.link);
+                }}
               >
                 {this.props.button.title}
               </Button>
-                                :
+            ) : (
               <Button
-                                    style={{ marginTop: '20px' }}
+                style={{ marginTop: "20px" }}
                 variant="contained"
                 color="primary"
-                                    onClick={() => { this.props.history.push('/') }}
+                onClick={() => {
+                  this.props.history.push("/");
+                }}
+              >
+                {Blockly.Msg.button_back}
+              </Button>
+            )}
+            <Editor
+              defaultValue="Hello world!"
+              // value={this.state.text}
+              onChange={(e) => {
+                this.setState({ text: e() });
+              }}
+              uploadImage={async (file) => {}}
+            />
+            <Button
+              style={{ marginTop: "20px" }}
+              variant="contained"
+              color="primary"
+              onClick={() => {
+                console.log(this.state.text);
+              }}
             >
               {Blockly.Msg.button_back}
             </Button>
-                        }
           </div>
         </Container>
       </div>
     );
-    };
+  }
 }
 
 export default withRouter(Faq);
@@ -175,5 +201,3 @@ vitae egestas augue. Duis vel est augue.
 //             {Blockly.Msg.button_back}
 //         </Button>
 // }}
-
-

src/components/Home.js

@@ -77,7 +77,7 @@ class Home extends Component {
 
   componentWillUnmount() {
     this.props.clearStats();
-    // this.props.workspaceName(null);
+    this.props.workspaceName(null);
   }
 
   onChange = () => {
@@ -112,17 +112,10 @@ class Home extends Component {
             </Tooltip>
             <TrashcanButtons />
             <div className='blocklyWindow'>
-              {this.props.project ? (
+              {this.props.project ?
-                  <BlocklyWindow
+                < BlocklyWindow blocklyCSS={{ height: '80vH' }} initialXml={this.props.project.xml} />
-                    blocklyCSS={{ height: "80vH" }}
+                : < BlocklyWindow blocklyCSS={{ height: '80vH' }} />
-                    initialXml={this.props.project.xml}
+              }
-                  />
-                ) : (
-                <BlocklyWindow
-                  blocklyCSS={{ height: "80vH" }}
-                  initialXml={this.props.workspaceCode?.xml}
-                />
-              )}
             </div>
           </Grid>
           {this.state.codeOn ?
@@ -153,8 +146,7 @@ Home.propTypes = {
 
 const mapStateToProps = state => ({
   message: state.message,
-  statistics: state.general.statistics,
+  statistics: state.general.statistics
-  workspaceCode: state.workspace.code
 });
 
 

src/components/Project/ProjectHome.js

@@ -18,11 +18,6 @@ import Divider from "@material-ui/core/Divider";
 import Typography from "@material-ui/core/Typography";
 import Backdrop from "@material-ui/core/Backdrop";
 import CircularProgress from "@material-ui/core/CircularProgress";
-import Dialog from "../Dialog";
-import Button from "@material-ui/core/Button";
-import { initialXml } from "../Blockly/initialXml";
-import {diffAsXml} from 'diff-js-xml';
-
 
 const styles = (theme) => ({
   link: {
@@ -41,7 +36,6 @@ class ProjectHome extends Component {
     type: "",
     key: "",
     message: "",
-    dialog: false,
   };
 
   componentDidMount() {
@@ -132,43 +126,10 @@ class ProjectHome extends Component {
                           overflow: "hidden",
                         }}
                       >
-                        <div
+                        <Link
-                          onClick={async () => {
+                          to={`/${
-                            const isCodeDifferent = new Promise((resolve) => {
-                              // resolve successfully when there is no existing workspace XML code
-                              if(!this.props.workspaceCode.xml) {
-                                resolve(false)
-                                return
-                              }
-
-                              // get difference of XML
-                              // TODO: check if code of project is different to workspace code
-                              diffAsXml(
-                                this.props.workspaceCode.xml,
-                                initialXml,
-                                undefined,
-                                undefined,
-                                (result) => {
-                                  resolve(result.length !== 0);
-                                }
-                              )
-                            }
-                            );
-
-                            const showDialog = await isCodeDifferent;
-
-                            if (showDialog)
-                              this.setState({
-                                dialog: true,
-                              });
-                            else {
-                              this.props.history.push(
-                                `/${
                             data === "Projekte" ? "project" : "gallery"
-                                }/${project._id}`
+                          }/${project._id}`}
-                              );
-                            }
-                          }}
                           style={{ textDecoration: "none", color: "inherit" }}
                         >
                           <h3 style={{ marginTop: 0 }}>{project.title}</h3>
@@ -178,7 +139,6 @@ class ProjectHome extends Component {
                           <BlocklyWindow
                             svg
                             blockDisabled
-                            readOnly
                             initialXml={project.xml}
                           />
                           <Typography
@@ -191,7 +151,7 @@ class ProjectHome extends Component {
                           >
                             {project.description}
                           </Typography>
-                        </div>
+                        </Link>
                         {this.props.user &&
                         this.props.user.email === project.creator ? (
                           <div>
@@ -246,27 +206,6 @@ class ProjectHome extends Component {
           type={this.state.type}
           key={this.state.key}
         />
-        <Dialog
-          open={this.state.dialog}
-          title="Achtung"
-          actions={
-            <React.Fragment>
-              <Button
-                onClick={() => {
-                  this.setState({ dialog: false });
-                  // TODO: navigate to project 
-                }}
-              >
-                Verwerfen
-              </Button>
-              <Button onClick={() => {}} color="primary">
-                Speichern
-              </Button>
-            </React.Fragment>
-          }
-        >
-          Möchtest du deinen bisherigen Code als Projekt speichern?
-        </Dialog>
       </div>
     );
   }
@@ -287,7 +226,6 @@ const mapStateToProps = (state) => ({
   progress: state.project.progress,
   user: state.auth.user,
   message: state.message,
-  workspaceCode: state.workspace.code,
 });
 
 export default connect(mapStateToProps, {