Styles CSS Editor Created

Co-authored-by: buddhajjigae <[email protected]>
Co-authored-by: xkevinpark <[email protected]>
Co-authored-by: williamdyoon <[email protected]>
Co-authored-by: MadinventorZero <[email protected]>

Author: 5 people

app/src/components/bottom/BottomTabs.tsx

@@ -4,6 +4,7 @@ import StateContext from '../../context/context';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
 import CodePreview from './CodePreview';
+import StylesEditor from './StylesEditor';
 import Box from '@material-ui/core/Box';
 import Tree from '../../tree/TreeChart';
 import { emitKeypressEvents } from 'readline';
@@ -39,6 +40,8 @@ const BottomTabs = () => {
     setTheme(e.target.value);
   };
 
+  console.log("Editor Theme: ", theme);
+
   return (
     <div className={classes.root} style={style}>
       <Box display="flex" justifyContent="space-between" alignItems="center" paddingBottom="10px" paddingRight="10px">
@@ -60,6 +63,11 @@ const BottomTabs = () => {
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
             label="Component Tree"
           />
+          <Tab
+            disableRipple
+            classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
+            label="CSS Editor"
+          />
         </Tabs>
         <div className={classes.projectTypeWrapper}> 
          <FormControl size='small'>
@@ -80,6 +88,7 @@ const BottomTabs = () => {
       </Box>
       {tab === 0 && <CodePreview theme={theme} setTheme={setTheme} />}
       {tab === 1 && <Tree data={components} />}
+      {tab === 2 && <StylesEditor theme={theme} setTheme={setTheme} />}
     </div>
   );
 };

app/src/components/bottom/StylesEditor.tsx

@@ -0,0 +1,99 @@
+import React, { useContext, useState, useRef, useEffect } from 'react';
+import StateContext from '../../context/context';
+import AceEditor from 'react-ace';
+import 'ace-builds/src-noconflict/mode-css';
+import 'ace-builds/src-noconflict/theme-monokai';
+import 'ace-builds/src-noconflict/theme-github';
+import 'ace-builds/src-noconflict/theme-solarized_dark';
+import 'ace-builds/src-noconflict/theme-solarized_light';
+import 'ace-builds/src-noconflict/theme-terminal';
+import 'ace-builds/src-min-noconflict/ext-searchbox';
+import { Component } from '../../interfaces/Interfaces';
+import useResizeObserver from '../../tree/useResizeObserver';
+import { string } from 'prop-types';
+import Fab from '@material-ui/core/Fab';
+import SaveIcon from '@material-ui/icons/Save';
+
+const StylesEditor: React.FC<{
+  theme: string | null;
+  setTheme: any | null;
+}> = ({ theme, setTheme }) => {
+  const wrapper = useRef();
+  const [css, setCss] = useState();
+  // const [state, dispatch] = useContext(StateContext);
+
+  useEffect(() => {
+    loadFile();
+  }, []);
+
+  const loadFile = () => {
+    const myHeaders = new Headers({
+      'Content-Type': 'text/css',
+      Accept: 'text/css',
+    });
+    fetch('/demoRender', {
+      headers: myHeaders,
+    })
+      .then(response => response.text())
+      .then((data) => {
+        setCss(data);
+      });
+  }
+
+  const saveFile = () => {
+    console.log('saveFile: ', css);
+    // const myHeaders = new Headers({
+    //   headers: { 'Content-Type': 'application/json' },
+    // });
+    fetch('/user-styles/save', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ data: css }),
+    })
+      .then(response => response.text())
+      .then((data) => {
+        // setCss(data);
+        //message save!
+      });
+  }
+  const saveCss = (e) => {
+    e.preventDefault();
+    saveFile();
+  }
+
+  const handleChange = (text) => {
+    setCss(text);
+  }
+
+  return (
+    <div
+      className='text-editor'
+      ref={wrapper}
+      style={{
+        height: '40vh',
+        maxWidth: '100%',
+        justifyContent: 'center',
+      }}
+    >
+      <AceEditor
+        mode="css"
+        theme={'solarized_dark'}
+        width="100%"
+        height="100%"
+        onChange={handleChange}
+        value={css}
+        name="Css_div"
+        // readOnly={false}
+        fontSize={16}
+        tabSize={2}
+        enableBasicAutocompletion={true}
+        enableLiveAutocompletion={true}
+      />
+      <Fab className='btn' onClick={saveCss} color="secondary" aria-label="add">
+        <SaveIcon />
+      </Fab>
+    </div>
+  );
+};
+
+export default StylesEditor;