add a new code Editor

package-lock.json

@@ -17,6 +17,7 @@
         "@fortawesome/free-solid-svg-icons": "^5.14.0",
         "@fortawesome/react-fontawesome": "^0.1.11",
         "@material-ui/core": "^4.11.0",
+        "@monaco-editor/react": "^4.3.1",
         "@sentry/react": "^6.0.0",
         "@sentry/tracing": "^6.0.0",
         "@testing-library/jest-dom": "^4.2.4",
@@ -3120,6 +3121,31 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/@monaco-editor/loader": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.2.0.tgz",
+      "integrity": "sha512-cJVCG/T/KxXgzYnjKqyAgsKDbH9mGLjcXxN6AmwumBwa2rVFkwvGcUj1RJtD0ko4XqLqJxwqsN/Z/KURB5f1OQ==",
+      "dependencies": {
+        "state-local": "^1.0.6"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.21.0 < 1"
+      }
+    },
+    "node_modules/@monaco-editor/react": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.3.1.tgz",
+      "integrity": "sha512-f+0BK1PP/W5I50hHHmwf11+Ea92E5H1VZXs+wvKplWUWOfyMa1VVwqkJrXjRvbcqHL+XdIGYWhWNdi4McEvnZg==",
+      "dependencies": {
+        "@monaco-editor/loader": "^1.2.0",
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.25.0 < 1",
+        "react": "^16.8.0 || ^17.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
@@ -16643,6 +16669,12 @@
         "node": "*"
       }
     },
+    "node_modules/monaco-editor": {
+      "version": "0.31.1",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.31.1.tgz",
+      "integrity": "sha512-FYPwxGZAeP6mRRyrr5XTGHD9gRXVjy7GUzF4IPChnyt3fS5WrNxIkS8DNujWf6EQy0Zlzpxw8oTVE+mWI2/D1Q==",
+      "peer": true
+    },
     "node_modules/move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -21503,6 +21535,11 @@
       "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.2.0.tgz",
       "integrity": "sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA=="
     },
+    "node_modules/state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
+    },
     "node_modules/static-extend": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
@@ -27515,6 +27552,23 @@
         "react-is": "^16.8.0"
       }
     },
+    "@monaco-editor/loader": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.2.0.tgz",
+      "integrity": "sha512-cJVCG/T/KxXgzYnjKqyAgsKDbH9mGLjcXxN6AmwumBwa2rVFkwvGcUj1RJtD0ko4XqLqJxwqsN/Z/KURB5f1OQ==",
+      "requires": {
+        "state-local": "^1.0.6"
+      }
+    },
+    "@monaco-editor/react": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.3.1.tgz",
+      "integrity": "sha512-f+0BK1PP/W5I50hHHmwf11+Ea92E5H1VZXs+wvKplWUWOfyMa1VVwqkJrXjRvbcqHL+XdIGYWhWNdi4McEvnZg==",
+      "requires": {
+        "@monaco-editor/loader": "^1.2.0",
+        "prop-types": "^15.7.2"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
@@ -38126,6 +38180,12 @@
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.0.tgz",
       "integrity": "sha512-z6IJ5HXYiuxvFTI6eiQ9dm77uE0gyy1yXNApVHqTcnIKfY9tIwEjlzsZ6u1LQXvVgKeTnv9Xm7NDvJ7lso3MtA=="
     },
+    "monaco-editor": {
+      "version": "0.31.1",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.31.1.tgz",
+      "integrity": "sha512-FYPwxGZAeP6mRRyrr5XTGHD9gRXVjy7GUzF4IPChnyt3fS5WrNxIkS8DNujWf6EQy0Zlzpxw8oTVE+mWI2/D1Q==",
+      "peer": true
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -42087,6 +42147,11 @@
       "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.2.0.tgz",
       "integrity": "sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA=="
     },
+    "state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
+    },
     "static-extend": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",

package.json

@@ -12,6 +12,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.14.0",
     "@fortawesome/react-fontawesome": "^0.1.11",
     "@material-ui/core": "^4.11.0",
+    "@monaco-editor/react": "^4.3.1",
     "@sentry/react": "^6.0.0",
     "@sentry/tracing": "^6.0.0",
     "@testing-library/jest-dom": "^4.2.4",

src/components/CodeEditor/CodeEditor.js

@@ -0,0 +1,206 @@
+import React from "react";
+import { useState, useRef } from "react";
+import { default as MonacoEditor } from "@monaco-editor/react";
+import { withRouter } from "react-router-dom";
+import { Button, Grid } from "@material-ui/core";
+import Blockly from "blockly/core";
+import Divider from "@material-ui/core/Divider";
+import { saveAs } from "file-saver";
+import Drawer from "@material-ui/core/Drawer";
+import Sidebar from "./Sidebar";
+import Dialog from "../Dialog";
+
+const CodeEditor = (props) => {
+  const [fileHandle, setFileHandle] = useState();
+  const [fileContent, setFileContent] = useState("");
+  const [progress, setProgress] = useState(false);
+  const [id, setId] = useState("");
+  const [open, setOpen] = useState(false);
+  const [error, setError] = useState("");
+  const editorRef = useRef(null);
+
+  const compile = () => {
+    setProgress(true);
+    const data = {
+      board: process.env.REACT_APP_BOARD,
+      sketch: editorRef.current.getValue(),
+    };
+    fetch(`${process.env.REACT_APP_COMPILER_URL}/compile`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(data),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        console.log(data);
+        if (data.code === "Internal Server Error") {
+          setProgress(false);
+          setOpen(true);
+          setError(data.message);
+        }
+        setProgress(false);
+        const result = data.data.id;
+        setId(result);
+        console.log(result);
+        const filename = "sketch";
+        window.open(
+          `${process.env.REACT_APP_COMPILER_URL}/download?id=${result}&board=${process.env.REACT_APP_BOARD}&filename=${filename}`,
+          "_self"
+        );
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  const saveIno = () => {
+    var filename = "sketch";
+    var code = editorRef.current.getValue();
+
+    filename = `${filename}.ino`;
+    var blob = new Blob([code], { type: "text/plain;charset=utf-8" });
+    saveAs(blob, filename);
+  };
+
+  const openIno = async () => {
+    const [myFileHandle] = await window.showOpenFilePicker();
+    setFileHandle(myFileHandle);
+
+    const file = await myFileHandle.getFile();
+    const contents = await file.text();
+    setFileContent(contents);
+  };
+
+  const toggleDrawer = (anchor, open) => (event) => {
+    if (
+      event.type === "keydown" &&
+      (event.key === "Tab" || event.key === "Shift")
+    ) {
+      return;
+    }
+
+    setOpen(false);
+  };
+
+  const loadCode = () => {
+    editorRef.current.setValue("test");
+  };
+
+  return (
+    <div>
+      <Grid container spacing={2}>
+        <Drawer
+          anchor={"bottom"}
+          open={open}
+          onClose={toggleDrawer("bottom", false)}
+        >
+          <h2
+            style={{
+              color: "#4EAF47",
+              paddingLeft: "1rem",
+              paddingRight: "1rem",
+            }}
+          >
+            {Blockly.Msg.drawer_ideerror_head}
+          </h2>
+          <p
+            style={{
+              color: "#4EAF47",
+              paddingLeft: "1rem",
+              paddingRight: "1rem",
+            }}
+          >
+            {Blockly.Msg.drawer_ideerror_text}
+          </p>
+          <Divider style={{ backgroundColor: "white" }} />
+          <p
+            style={{
+              backgroundColor: "black",
+              color: "#E47128",
+              padding: "1rem",
+            }}
+          >
+            {" "}
+            {`${error}`}{" "}
+          </p>
+        </Drawer>
+        <Grid item lg={8}>
+          <h1>Code Editor</h1>
+          <MonacoEditor
+            height="80vh"
+            defaultLanguage="cpp"
+            defaultValue={`
+void setup () {
+
+}
+
+void loop(){
+
+}`}
+            value={fileContent}
+            onMount={(editor, monaco) => {
+              editorRef.current = editor;
+            }}
+          />
+        </Grid>
+        <Grid item lg={4}>
+          <Button
+            style={{ padding: "1rem", margin: "1rem" }}
+            variant="contained"
+            color="primary"
+            onClick={() => compile()}
+          >
+            Kompilieren
+          </Button>
+          <Button
+            style={{ padding: "1rem", margin: "1rem" }}
+            variant="contained"
+            color="primary"
+            onClick={() => saveIno()}
+          >
+            Save Code
+          </Button>
+          <Button
+            style={{ padding: "1rem", margin: "1rem" }}
+            variant="contained"
+            color="primary"
+            onClick={() => openIno()}
+          >
+            Open Code
+          </Button>
+          <Button
+            style={{ padding: "1rem", margin: "1rem" }}
+            variant="contained"
+            color="primary"
+            onClick={() => loadCode()}
+          >
+            Reset Editor
+          </Button>
+          <Sidebar />
+          <Dialog
+            style={{ zIndex: 9999999 }}
+            fullWidth
+            maxWidth={"sm"}
+            open={progress}
+            title={Blockly.Msg.tabletDialog_headline}
+            content={""}
+          >
+            <div>{Blockly.Msg.tabletDialog_text}</div>
+            <div>
+              {Blockly.Msg.tabletDialog_more}{" "}
+              <a
+                href="https://sensebox.de/app"
+                target="_blank"
+                rel="noreferrer"
+              >
+                https://sensebox.de/app
+              </a>
+            </div>
+          </Dialog>
+        </Grid>
+      </Grid>
+    </div>
+  );
+};
+
+export default withRouter(CodeEditor);

src/components/CodeEditor/Compile.js

@@ -0,0 +1,338 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { workspaceName } from "../../actions/workspaceActions";
+
+import { detectWhitespacesAndReturnReadableResult } from "../../helpers/whitespace";
+
+import { withStyles } from "@material-ui/core/styles";
+import Button from "@material-ui/core/Button";
+import Backdrop from "@material-ui/core/Backdrop";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import IconButton from "@material-ui/core/IconButton";
+import Tooltip from "@material-ui/core/Tooltip";
+import Divider from "@material-ui/core/Divider";
+import { faClipboardCheck } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import * as Blockly from "blockly/core";
+import Copy from "../copy.svg";
+import Prism from "prismjs";
+import "prismjs/themes/prism.css";
+import "prismjs/plugins/line-numbers/prism-line-numbers";
+import "prismjs/plugins/line-numbers/prism-line-numbers.css";
+import MuiDrawer from "@material-ui/core/Drawer";
+import Dialog from "../Dialog";
+
+const styles = (theme) => ({
+  backdrop: {
+    zIndex: theme.zIndex.drawer + 1,
+    color: "#fff",
+  },
+  iconButton: {
+    backgroundColor: theme.palette.button.compile,
+    color: theme.palette.primary.contrastText,
+    width: "40px",
+    height: "40px",
+    "&:hover": {
+      backgroundColor: theme.palette.button.compile,
+      color: theme.palette.primary.contrastText,
+    },
+  },
+  button: {
+    backgroundColor: theme.palette.button.compile,
+    color: theme.palette.primary.contrastText,
+    "&:hover": {
+      backgroundColor: theme.palette.button.compile,
+      color: theme.palette.primary.contrastText,
+    },
+  },
+});
+
+const Drawer = withStyles((theme) => ({
+  paperAnchorBottom: {
+    backgroundColor: "black",
+    height: "20vH",
+  },
+}))(MuiDrawer);
+
+class Compile extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      progress: false,
+      open: false,
+      file: false,
+      title: "",
+      content: "",
+      name: props.name,
+      error: "",
+      appLink: "",
+      appDialog: false,
+    };
+  }
+
+  componentDidMount() {
+    Prism.highlightAll();
+  }
+
+  componentDidUpdate(props) {
+    if (props.name !== this.props.name) {
+      this.setState({ name: this.props.name });
+    }
+    Prism.highlightAll();
+  }
+
+  compile = () => {
+    this.setState({ progress: true });
+    const data = {
+      board: process.env.REACT_APP_BOARD,
+      sketch: this.props.arduino,
+    };
+    fetch(`${process.env.REACT_APP_COMPILER_URL}/compile`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(data),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        console.log(data);
+        if (data.code === "Internal Server Error") {
+          this.setState({
+            progress: false,
+            file: false,
+            open: true,
+            title: Blockly.Msg.compiledialog_headline,
+            content: Blockly.Msg.compiledialog_text,
+            error: data.message,
+          });
+        }
+        this.setState({ id: data.data.id }, () => {
+          this.createFileName();
+        });
+      })
+      .catch((err) => {
+        console.log(err);
+        //this.setState({ progress: false, file: false, open: true, title: Blockly.Msg.compiledialog_headline, content: Blockly.Msg.compiledialog_text });
+      });
+  };
+
+  download = () => {
+    const id = this.state.id;
+    const filename = detectWhitespacesAndReturnReadableResult(this.state.name);
+    this.toggleDialog();
+    this.props.workspaceName(this.state.name);
+    window.open(
+      `${process.env.REACT_APP_COMPILER_URL}/download?id=${id}&board=${process.env.REACT_APP_BOARD}&filename=${filename}`,
+      "_self"
+    );
+    this.setState({ progress: false });
+  };
+
+  toggleDialog = () => {
+    this.setState({ open: !this.state, progress: false, appDialog: false });
+  };
+
+  createFileName = () => {
+    if (this.props.platform === true) {
+      const filename = detectWhitespacesAndReturnReadableResult(
+        this.state.name
+      );
+      this.setState({
+        link: `blocklyconnect-app://sketch/${filename}/${this.state.id}`,
+      });
+      this.setState({ appDialog: true });
+    } else {
+      if (this.state.name) {
+        this.download();
+      } else {
+        this.setState({
+          file: true,
+          open: true,
+          title: "Projekt kompilieren",
+          content:
+            "Bitte gib einen Namen für die Bennenung des zu kompilierenden Programms ein und bestätige diesen mit einem Klick auf 'Eingabe'.",
+        });
+      }
+    }
+
+    // if (this.state.name) {
+    //   this.download();
+    // } else {
+    //   this.setState({
+    //     file: true,
+    //     open: true,
+    //     title: "Projekt kompilieren",
+    //     content:
+    //       "Bitte gib einen Namen für die Bennenung des zu kompilierenden Programms ein und bestätige diesen mit einem Klick auf 'Eingabe'.",
+    //   });
+    // }
+  };
+
+  setFileName = (e) => {
+    this.setState({ name: e.target.value });
+  };
+
+  toggleDrawer = (anchor, open) => (event) => {
+    if (
+      event.type === "keydown" &&
+      (event.key === "Tab" || event.key === "Shift")
+    ) {
+      return;
+    }
+
+    this.setState({ open: false });
+  };
+
+  render() {
+    return (
+      <div style={{}}>
+        {this.props.iconButton ? (
+          <Tooltip
+            title={Blockly.Msg.tooltip_compile_code}
+            arrow
+            style={{ marginRight: "5px" }}
+          >
+            <IconButton
+              className={`compileBlocks ${this.props.classes.iconButton}`}
+              onClick={() => this.compile()}
+            >
+              <FontAwesomeIcon icon={faClipboardCheck} size="l" />
+            </IconButton>
+          </Tooltip>
+        ) : (
+          <Button
+            style={{ float: "right", color: "white" }}
+            variant="contained"
+            className={this.props.classes.button}
+            onClick={() => this.compile()}
+          >
+            <FontAwesomeIcon
+              icon={faClipboardCheck}
+              style={{ marginRight: "5px" }}
+            />{" "}
+            Kompilieren
+          </Button>
+        )}
+
+        {this.props.platform === false ? (
+          <Backdrop
+            className={this.props.classes.backdrop}
+            open={this.state.progress}
+          >
+            <div className="overlay">
+              <img src={Copy} width="400" alt="copyimage"></img>
+              <h2>{Blockly.Msg.compile_overlay_head}</h2>
+              <p>{Blockly.Msg.compile_overlay_text}</p>
+              <p>
+                {Blockly.Msg.compile_overlay_help}
+                <a href="/faq" target="_blank">
+                  FAQ
+                </a>
+              </p>
+              <CircularProgress color="inherit" />
+            </div>
+          </Backdrop>
+        ) : (
+          <Backdrop
+            className={this.props.classes.backdrop}
+            open={this.state.progress}
+          >
+            <div className="overlay">
+              {/* <img src={Copy} width="400" alt="copyimage"></img> */}
+              <h2>Dein Code wird kompiliert!</h2>
+              <p>übertrage ihn anschließend mithlfe der senseBoxConnect-App</p>
+              <p>
+                {Blockly.Msg.compile_overlay_help}
+                <a href="/faq" target="_blank">
+                  FAQ
+                </a>
+              </p>
+              <CircularProgress color="inherit" />
+            </div>
+          </Backdrop>
+        )}
+        <Drawer
+          anchor={"bottom"}
+          open={this.state.open}
+          onClose={this.toggleDrawer("bottom", false)}
+        >
+          <h2
+            style={{
+              color: "#4EAF47",
+              paddingLeft: "1rem",
+              paddingRight: "1rem",
+            }}
+          >
+            {Blockly.Msg.drawer_ideerror_head}
+          </h2>
+          <p
+            style={{
+              color: "#4EAF47",
+              paddingLeft: "1rem",
+              paddingRight: "1rem",
+            }}
+          >
+            {Blockly.Msg.drawer_ideerror_text}
+          </p>
+          <Divider style={{ backgroundColor: "white" }} />
+          <p
+            style={{
+              backgroundColor: "black",
+              color: "#E47128",
+              padding: "1rem",
+            }}
+          >
+            {" "}
+            {`${this.state.error}`}{" "}
+          </p>
+        </Drawer>
+        <Dialog
+          style={{ zIndex: 9999999 }}
+          fullWidth
+          maxWidth={"sm"}
+          open={this.state.appDialog}
+          title=""
+          content={""}
+          onClose={this.toggleDialog}
+          onClick={this.toggleDialog}
+          button={Blockly.Msg.button_close}
+        >
+          <div>
+            <p>Dein Code wurde erfolgreich kompiliert</p>
+            <a href={this.state.link}>
+              <Button
+                style={{ color: "white" }}
+                variant="contained"
+                className={this.props.classes.button}
+                onClick={() => this.toggleDialog()}
+              >
+                <FontAwesomeIcon
+                  icon={faClipboardCheck}
+                  style={{ marginRight: "5px" }}
+                />{" "}
+                Starte Übertragung
+              </Button>
+            </a>
+          </div>
+        </Dialog>
+      </div>
+    );
+  }
+}
+
+Compile.propTypes = {
+  arduino: PropTypes.string.isRequired,
+  name: PropTypes.string,
+  workspaceName: PropTypes.func.isRequired,
+  platform: PropTypes.bool.isRequired,
+};
+
+const mapStateToProps = (state) => ({
+  arduino: state.workspace.code.arduino,
+  name: state.workspace.name,
+  platform: state.general.platform,
+});
+
+export default connect(mapStateToProps, { workspaceName })(
+  withStyles(styles, { withTheme: true })(Compile)
+);

src/components/CodeEditor/Sidebar.js

@@ -0,0 +1,114 @@
+import React from "react";
+import Blockly from "blockly";
+import Accordion from "@material-ui/core/Accordion";
+import AccordionSummary from "@material-ui/core/AccordionSummary";
+import AccordionDetails from "@material-ui/core/AccordionDetails";
+import Typography from "@material-ui/core/Typography";
+import { LibraryVersions } from "../../data/versions.js";
+import { ArduinoExamples } from "../../data/arduinoExamples.js";
+import Editor, { useMonaco } from "@monaco-editor/react";
+import { Button } from "@material-ui/core";
+import Dialog from "../Dialog";
+
+const Sidebar = () => {
+  const [alert, setAlert] = React.useState(false);
+
+  const monaco = useMonaco();
+  const loadCode = (code) => {
+    console.log(code);
+    console.log(monaco);
+    const defaultCode = `
+void setup () {
+    
+}
+    
+void loop(){
+    
+}`;
+    var currentCode = monaco.editor.getModels()[0].getValue();
+
+    setAlert(true);
+    monaco.editor.getModels()[0].setValue(code);
+  };
+
+  const toggleDialog = () => {
+    setAlert(false);
+  };
+
+  return (
+    <div>
+      <Accordion>
+        <AccordionSummary
+          expandIcon={""}
+          aria-controls="panel1a-content"
+          id="panel1a-header"
+        >
+          <Typography>Beispiele</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography>
+            {ArduinoExamples().map((object, i) => {
+              return (
+                <Button
+                  style={{ padding: "1rem", margin: "1rem" }}
+                  variant="contained"
+                  color="primary"
+                  onClick={() => loadCode(object.code)}
+                >
+                  {object.name}
+                </Button>
+              );
+            })}
+          </Typography>
+        </AccordionDetails>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary
+          expandIcon={""}
+          aria-controls="panel2a-content"
+          id="panel2a-header"
+        >
+          <Typography>Installierte Libraries</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography>
+            <p>
+              For Dokumentation take a look at the installed libraries and their
+              source
+            </p>
+            {LibraryVersions().map((object, i) => {
+              return (
+                <p>
+                  <a href={object.link} target="_blank" rel="noreferrer">
+                    {object.library} {object.version}
+                  </a>
+                </p>
+              );
+            })}
+          </Typography>
+        </AccordionDetails>
+        <Dialog
+          style={{ zIndex: 9999999 }}
+          fullWidth
+          maxWidth={"sm"}
+          open={alert}
+          title={Blockly.Msg.tabletDialog_headline}
+          content={""}
+          onClose={() => toggleDialog()}
+          onClick={() => toggleDialog()}
+          button={Blockly.Msg.button_close}
+        >
+          <div>{Blockly.Msg.tabletDialog_text}</div>
+          <div>
+            {Blockly.Msg.tabletDialog_more}{" "}
+            <a href="https://sensebox.de/app" target="_blank" rel="noreferrer">
+              https://sensebox.de/app
+            </a>
+          </div>
+        </Dialog>
+      </Accordion>
+    </div>
+  );
+};
+
+export default Sidebar;

src/components/Navbar.js

@@ -230,6 +230,11 @@ class Navbar extends Component {
                 icon: faLightbulb,
                 link: "/gallery",
               },
+              {
+                text: "CodeEditor",
+                icon: faLightbulb,
+                link: "/codeeditor",
+              },
               {
                 text: Blockly.Msg.navbar_projects,
                 icon: faLayerGroup,

src/components/Route/Routes.js

@@ -24,6 +24,7 @@ import Login from "../User/Login";
 import Account from "../User/Account";
 import News from "../News";
 import Faq from "../Faq";
+import CodeEditor from "../CodeEditor/CodeEditor";
 
 class Routes extends Component {
   componentDidUpdate() {
@@ -47,6 +48,9 @@ class Routes extends Component {
           <Route path="/tutorial/:tutorialId" exact>
             <Tutorial />
           </Route>
+          <Route path="/CodeEditor" exact>
+            <CodeEditor />
+          </Route>
           {/* Sharing */}
           <PublicRoute path="/share/:shareId" exact>
             <Project />

src/data/versions.js

@@ -0,0 +1,104 @@
+import * as Blockly from "blockly/core";
+
+export const LibraryVersions = () => {
+  return [
+    {
+      version: "1.4.2",
+      library: "sensebox/SenseBoxMCU-Lib",
+      link: "https://github.com/sensebox/SenseBoxMCU-Lib",
+    },
+    {
+      version: "1.0.12",
+      library: "sparkfun/SparkFun_SCD30_Arduino_Library",
+    },
+    { version: "1.2.3", library: "adafruit/Adafruit-GFX-Library" },
+    {
+      version: "2.1.2",
+      library: "adafruit/Adafruit_BME280_Library",
+    },
+    {
+      version: "2.1.0",
+      library: "adafruit/Adafruit_BMP280_Library",
+    },
+    {
+      version: "1.1.1",
+      library: "adafruit/Adafruit_BME680",
+    },
+    {
+      version: "2.0.1",
+      library: "adafruit/Adafruit_BMP3XX",
+    },
+    {
+      version: "2.0.0",
+      library: "adafruit/Adafruit_HDC1000_Library",
+    },
+    {
+      version: "1.7.1",
+      library: "adafruit/Adafruit_BusIO",
+    },
+    {
+      version: "1.0.6",
+      library: "adafruit/Adafruit_NeoPixel",
+    },
+    {
+      version: "1.1.2",
+      library: "adafruit/Adafruit_SSD1306",
+    },
+    {
+      version: "1.0.2",
+      library: "adafruit/Adafruit_Sensor",
+    },
+    {
+      version: "3.8.0",
+      library: "milesburton/Arduino-Temperature-Control-Library",
+    },
+    {
+      version: "1.5.0",
+      library: "arduino-libraries/ArduinoBearSSL",
+    },
+    {
+      version: "1.3.4",
+      library: "arduino-libraries/ArduinoECCX08",
+    },
+    {
+      version: "2.0.0",
+      library: "arduino-libraries/ArduinoECCX08", //todo
+    },
+    {
+      version: "0.7.1",
+      library: "cmaglie/FlashStorage",
+    },
+    {
+      version: "1.5.1",
+      library: "matthijskooijman/arduino-lmic",
+    },
+    {
+      version: "3.0.1",
+      library: "thesolarnomad/lora-serialization ",
+    },
+    {
+      version: "todo",
+      library: "TSL45xxx",
+    },
+    {
+      version: "2.3.4",
+      library: "teensy/td_libs_OneWire.html",
+    },
+    {
+      version: "1.0.0",
+      library: "watterott/Arduino-Libs/tree/master/RV8523",
+    },
+    {
+      version: "1.0.0",
+      library: "sensebox/SDS011-select-serial ",
+    },
+    {
+      version: "1.0.0",
+      library: "Lucas-Steinmann/SSD1306-Plot-Library",
+    },
+    {
+      version: "1.0.0",
+      library: "senseBoxIO",
+    },
+  ];
+};

yarn.lock

@@ -1542,6 +1542,21 @@
     "prop-types" "^15.7.2"
     "react-is" "^16.8.0"
 
+"@monaco-editor/loader@^1.2.0":
+  "integrity" "sha512-cJVCG/T/KxXgzYnjKqyAgsKDbH9mGLjcXxN6AmwumBwa2rVFkwvGcUj1RJtD0ko4XqLqJxwqsN/Z/KURB5f1OQ=="
+  "resolved" "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.2.0.tgz"
+  "version" "1.2.0"
+  dependencies:
+    "state-local" "^1.0.6"
+
+"@monaco-editor/react@^4.3.1":
+  "integrity" "sha512-f+0BK1PP/W5I50hHHmwf11+Ea92E5H1VZXs+wvKplWUWOfyMa1VVwqkJrXjRvbcqHL+XdIGYWhWNdi4McEvnZg=="
+  "resolved" "https://registry.npmjs.org/@monaco-editor/react/-/react-4.3.1.tgz"
+  "version" "4.3.1"
+  dependencies:
+    "@monaco-editor/loader" "^1.2.0"
+    "prop-types" "^15.7.2"
+
 "@nodelib/fs.scandir@2.1.4":
   "integrity" "sha512-33g3pMJk3bg5nXbL/+CY6I2eJDzZAni49PfJnL5fghPTggPvBd/pFNSgJsdAgWptuFu7qq/ERvOYFlhvsLTCKA=="
   "resolved" "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz"
@@ -8224,6 +8239,11 @@
   "resolved" "https://registry.npmjs.org/moment/-/moment-2.29.0.tgz"
   "version" "2.29.0"
 
+"monaco-editor@>= 0.21.0 < 1", "monaco-editor@>= 0.25.0 < 1":
+  "integrity" "sha512-FYPwxGZAeP6mRRyrr5XTGHD9gRXVjy7GUzF4IPChnyt3fS5WrNxIkS8DNujWf6EQy0Zlzpxw8oTVE+mWI2/D1Q=="
+  "resolved" "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.31.1.tgz"
+  "version" "0.31.1"
+
 "move-concurrently@^1.0.1":
   "integrity" "sha1-viwAX9oy4LKa8fBdfEszIUxwH5I="
   "resolved" "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz"
@@ -10032,7 +10052,7 @@
     "strip-ansi" "6.0.0"
     "text-table" "0.2.0"
 
-"react-dom@^17.0.0", "react-dom@^17.0.2":
+"react-dom@^16.8.0 || ^17.0.0", "react-dom@^17.0.0", "react-dom@^17.0.2":
   "integrity" "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA=="
   "resolved" "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz"
   "version" "17.0.2"
@@ -10211,7 +10231,7 @@
     "loose-envify" "^1.4.0"
     "prop-types" "^15.6.2"
 
-"react@^16.8.3 || ^17", "react@^17.0.0", "react@^17.0.2", "react@>= 16", "react@17.0.2":
+"react@^16.8.0 || ^17.0.0", "react@^16.8.3 || ^17", "react@^17.0.0", "react@^17.0.2", "react@>= 16", "react@17.0.2":
   "integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA=="
   "resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
   "version" "17.0.2"
@@ -11408,6 +11428,11 @@
   "resolved" "https://registry.npmjs.org/stackframe/-/stackframe-1.2.0.tgz"
   "version" "1.2.0"
 
+"state-local@^1.0.6":
+  "integrity" "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
+  "resolved" "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz"
+  "version" "1.0.7"
+
 "static-extend@^0.1.1":
   "integrity" "sha1-YICcOcv/VTNyJv1eC1IPNB8ftcY="
   "resolved" "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz"