add autosave to blocks

closes #58

src/components/CodeViewer.js

@@ -1,30 +1,30 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
 
 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 withWidth from '@material-ui/core/withWidth';
-import { withStyles } from '@material-ui/core/styles';
-import MuiAccordion from '@material-ui/core/Accordion';
-import MuiAccordionSummary from '@material-ui/core/AccordionSummary';
-import MuiAccordionDetails from '@material-ui/core/AccordionDetails';
-import { Card } from '@material-ui/core';
-import * as Blockly from 'blockly'
-
+import withWidth from "@material-ui/core/withWidth";
+import { withStyles } from "@material-ui/core/styles";
+import MuiAccordion from "@material-ui/core/Accordion";
+import MuiAccordionSummary from "@material-ui/core/AccordionSummary";
+import MuiAccordionDetails from "@material-ui/core/AccordionDetails";
+import { Card, Switch } from "@material-ui/core";
+import * as Blockly from "blockly";
+import { default as MonacoEditor } from "@monaco-editor/react";
+import { DiffEditor as MonacoDiffEditor } from "@monaco-editor/react";
 
 const Accordion = withStyles((theme) => ({
   root: {
     border: `1px solid ${theme.palette.secondary.main}`,
-    boxShadow: 'none',
-    '&:before': {
-      display: 'none',
+    boxShadow: "none",
+    "&:before": {
+      display: "none",
     },
-    '&$expanded': {
-      margin: 'auto',
+    "&$expanded": {
+      margin: "auto",
     },
   },
   expanded: {},
@@ -34,15 +34,15 @@ const AccordionSummary = withStyles((theme) => ({
   root: {
     backgroundColor: theme.palette.secondary.main,
     borderBottom: `1px solid white`,
-    marginBottom: '-1px',
-    minHeight: '50px',
-    '&$expanded': {
-      minHeight: '50px',
+    marginBottom: "-1px",
+    minHeight: "50px",
+    "&$expanded": {
+      minHeight: "50px",
     },
   },
   content: {
-    '&$expanded': {
-      margin: '12px 0',
+    "&$expanded": {
+      margin: "12px 0",
     },
   },
   expanded: {},
@@ -54,40 +54,60 @@ const AccordionDetails = withStyles((theme) => ({
   },
 }))(MuiAccordionDetails);
 
-
 class CodeViewer extends Component {
-
   constructor(props) {
     super(props);
     this.state = {
+      code: this.props.arduino,
+      changed: false,
       expanded: true,
-      componentHeight: null
+      componentHeight: null,
     };
     this.myDiv = React.createRef();
   }
 
   componentDidMount() {
-    Prism.highlightAll();
-    this.setState({ componentHeight: this.myDiv.current.offsetHeight + 'px' });
+    this.setState({ componentHeight: this.myDiv.current.offsetHeight + "px" });
   }
 
-  componentDidUpdate(props, state) {
-    if (this.myDiv.current && this.myDiv.current.offsetHeight + 'px' !== this.state.componentHeight) {
-      this.setState({ componentHeight: this.myDiv.current.offsetHeight + 'px' });
+  componentDidUpdate(prevProps, prevState) {
+    // if (this.props.arduino !== prevProps.arduino) {
+    //   this.setState({ changed: true });
+
+    //   console.log(`code changed: ${this.state.changed}`);
+    //   if (this.state.changed && prevState.code !== this.props.arduino) {
+    //     this.setState({ code: this.props.arduino });
+    //     this.setState({ changed: false });
+    //   }
+
+    // if (this.state.code !== prevState.code && this.state.changed) {
+    //   this.setState({ changed: false });
+    // }
+
+    // if (this.props.arduino !== this.state.code) {
+    //   this.setState({ changed: true });
+    //   //this.setState({ code: this.props.arduino });
+    // }
+
+    if (
+      this.myDiv.current &&
+      this.myDiv.current.offsetHeight + "px" !== this.state.componentHeight
+    ) {
+      this.setState({
+        componentHeight: this.myDiv.current.offsetHeight + "px",
+      });
     }
-    Prism.highlightAll();
   }
 
   onChange = () => {
     this.setState({ expanded: !this.state.expanded });
-
-  }
+  };
 
   render() {
-    var curlyBrackets = '{ }';
-    var unequal = '<>';
+    var curlyBrackets = "{ }";
+    var unequal = "<>";
     return (
-      <Card style={{ height: '100%', maxHeight: '60vH' }} ref={this.myDiv}>
+      <Card style={{ height: "100%", maxHeight: "60vH" }} ref={this.myDiv}>
         <Accordion
           square={true}
           style={{ margin: 0 }}
@@ -95,15 +115,32 @@ class CodeViewer extends Component {
           onChange={this.onChange}
         >
           <AccordionSummary>
-            <b style={{ fontSize: '20px', marginRight: '5px', width: '35px' }}>{curlyBrackets}</b>
-            <div style={{ margin: 'auto 5px 2px 0px' }}>{Blockly.Msg.codeviewer_arduino}</div>
+            <b style={{ fontSize: "20px", marginRight: "5px", width: "35px" }}>
+              {curlyBrackets}
+            </b>
+            <div style={{ margin: "auto 5px 2px 0px" }}>
+              {Blockly.Msg.codeviewer_arduino}
+            </div>
           </AccordionSummary>
-          <AccordionDetails style={{ padding: 0, height: `calc(${this.state.componentHeight} - 50px - 50px)`, backgroundColor: 'white' }}>
-            <pre className="line-numbers" style={{ paddingBottom: 0, width: '100%', overflow: 'auto', scrollbarWidth: 'thin', height: 'calc(100% - 30px)', margin: '15px 0', paddingTop: 0, whiteSpace: 'pre-wrap', backgroundColor: 'white' }}>
-              <code className="language-clike">
-                {this.props.arduino}
-              </code>
-            </pre>
+          <AccordionDetails
+            style={{
+              padding: 0,
+              height: `calc(${this.state.componentHeight} - 50px - 50px)`,
+              backgroundColor: "white",
+            }}
+          >
+            <MonacoEditor
+              height="80vh"
+              defaultLanguage="cpp"
+              value={this.props.arduino}
+              // modified={this.props.arduino}
+              // original={this.state.code}
+              options={{
+                readOnly: true,
+
+                fontSize: "12px",
+              }}
+            />
           </AccordionDetails>
         </Accordion>
         <Accordion
@@ -113,32 +150,43 @@ class CodeViewer extends Component {
           onChange={this.onChange}
         >
           <AccordionSummary>
-            <b style={{ fontSize: '20px', marginRight: '5px', width: '35px' }}>{unequal}</b>
-            <div style={{ margin: 'auto 5px 2px 0px' }}>{Blockly.Msg.codeviewer_xml}</div>
+            <b style={{ fontSize: "20px", marginRight: "5px", width: "35px" }}>
+              {unequal}
+            </b>
+            <div style={{ margin: "auto 5px 2px 0px" }}>
+              {Blockly.Msg.codeviewer_xml}
+            </div>
           </AccordionSummary>
-          <AccordionDetails style={{ padding: 0, height: `calc(${this.state.componentHeight} - 50px - 50px)`, backgroundColor: 'white' }}>
-            <pre className="line-numbers" style={{ paddingBottom: 0, width: '100%', overflow: 'auto', scrollbarWidth: 'thin', height: 'calc(100% - 30px)', margin: '15px 0', paddingTop: 0, whiteSpace: 'pre-wrap', backgroundColor: 'white' }}>
-              <code className="language-xml">
-                {`${this.props.xml}`}
-              </code>
-            </pre>
+          <AccordionDetails
+            style={{
+              padding: 0,
+              height: `calc(${this.state.componentHeight} - 50px - 50px)`,
+              backgroundColor: "white",
+            }}
+          >
+            <MonacoEditor
+              height="80vh"
+              defaultLanguage="xml"
+              value={this.props.xml}
+              readOnly={true}
+            />
           </AccordionDetails>
         </Accordion>
       </Card>
     );
-  };
+  }
 }
 
 CodeViewer.propTypes = {
   arduino: PropTypes.string.isRequired,
   xml: PropTypes.string.isRequired,
-  tooltip: PropTypes.string.isRequired
+  tooltip: PropTypes.string.isRequired,
 };
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
   arduino: state.workspace.code.arduino,
   xml: state.workspace.code.xml,
-  tooltip: state.workspace.code.tooltip
+  tooltip: state.workspace.code.tooltip,
 });
 
 export default connect(mapStateToProps, null)(withWidth()(CodeViewer));