Merge pull request #34 from sean1292/ace

Code preview is now editable

Author: ibeeliot

package.json

@@ -94,10 +94,12 @@
     "@material-ui/icons": "^4.0.1",
     "@material-ui/styles": "^4.9.6",
     "@types/prettier": "^1.19.0",
+    "@types/prismjs": "^1.16.0",
     "@types/react": "^16.8.14",
     "@types/react-dom": "^16.8.4",
     "@types/react-redux": "^7.0.8",
     "@types/react-syntax-highlighter": "^11.0.4",
+    "ace-builds": "^1.4.8",
     "autoprefixer": "^9.0.1",
     "babel-polyfill": "^6.26.0",
     "classnames": "^2.2.6",
@@ -113,13 +115,16 @@
     "lodash.throttle": "^4.1.1",
     "material-table": "^1.25.2",
     "prettier": "^1.19.1",
+    "prismjs": "^1.19.0",
     "prop-types": "^15.6.2",
     "react": "^16.13.0",
+    "react-ace": "^8.1.0",
     "react-d3-tree": "^1.12.3",
     "react-dom": "^16.4.1",
     "react-draggable": "^3.0.5",
     "react-konva": "^16.12.0-0",
     "react-redux": "^5.0.7",
+    "react-simple-code-editor": "^0.11.0",
     "react-sortable-tree": "^2.2.0",
     "react-syntax-highlighter": "^10.2.1",
     "redux": "^4.0.0",

src/actionTypes/index.ts

@@ -5,7 +5,8 @@ export const DELETE_CHILD: string = 'DELETE_CHILD';
 export const UPDATE_COMPONENT: string = 'UPDATE_COMPONENT';
 export const DELETE_COMPONENT: string = 'DELETE_COMPONENT';
 export const CHANGE_FOCUS_COMPONENT: string = 'CHANGE_FOCUS_COMPONENT';
-export const CHANGE_COMPONENT_FOCUS_CHILD: string = 'CHANGE_COMPONENT_FOCUS_CHILD';
+export const CHANGE_COMPONENT_FOCUS_CHILD: string =
+  'CHANGE_COMPONENT_FOCUS_CHILD';
 export const CHANGE_FOCUS_CHILD: string = 'CHANGE_FOCUS_CHILD';
 export const UPDATE_CHILDREN: string = 'UPDATE_CHILDREN';
 export const REASSIGN_PARENT: string = 'REASSIGN_PARENT';
@@ -34,5 +35,6 @@ export const TOGGLE_CLASS: string = 'TOGGLE_CLASS';
 export const CHANGE_TUTORIAL: string = 'CHANGE_TUTORIAL';
 export const UNDO: string = 'UNDO';
 export const REDO: string = 'REDO';
+export const UPDATE_CODE: string = 'UPDATE_CODE';
 export const EDIT_MODE: string = 'EDIT_MODE';
-export const EDIT_COMPONENT: string = 'EDIT_COMPONENT';
+export const EDIT_COMPONENT: string = 'EDIT_COMPONENT';

src/actions/components.ts

@@ -3,7 +3,7 @@ import {
   ComponentsInt,
   PropInt,
   ChildInt,
-  Action,
+  Action
 } from '../utils/Interfaces';
 
 import {
@@ -36,6 +36,7 @@ import {
   CHANGE_TUTORIAL,
   UNDO,
   REDO,
+  UPDATE_CODE,
   EDIT_MODE,
   EDIT_COMPONENT
 } from '../actionTypes/index';
@@ -46,12 +47,12 @@ import createApplicationUtil from '../utils/createApplication.util';
 
 export const changeTutorial = (tutorial: number) => ({
   type: CHANGE_TUTORIAL,
-  payload: { tutorial },
+  payload: { tutorial }
 });
 
 export const changeImagePath = (imageSource: string) => ({
   type: CHANGE_IMAGE_SOURCE,
-  payload: { imageSource },
+  payload: { imageSource }
 });
 
 export const loadInitData = () => (dispatch: (arg: Action) => void) => {
@@ -61,8 +62,8 @@ export const loadInitData = () => (dispatch: (arg: Action) => void) => {
       payload: {
         data: data
           ? { ...data.workspace, history: [], historyIndex: 0, future: [] } //erase history upon opening app
-          : {},
-      },
+          : {}
+      }
     });
   });
 };
@@ -76,7 +77,7 @@ export const addComponent = ({ title }: { title: string }) => (
 export const addChild = ({
   title,
   childType,
-  HTMLInfo,
+  HTMLInfo
 }: {
   title: string;
   childType: string;
@@ -92,7 +93,7 @@ export const deleteChild = ({}) => (dispatch: (arg: Action) => void) => {
 
 export const deleteComponent = ({
   componentId,
-  stateComponents,
+  stateComponents
 }: {
   componentId: number;
   stateComponents: ComponentsInt;
@@ -107,8 +108,8 @@ export const deleteComponent = ({
           payload: {
             parentId: parent.id,
             childId: child.childId,
-            calledFromDeleteComponent: true,
-          },
+            calledFromDeleteComponent: true
+          }
         });
       });
   });
@@ -134,26 +135,38 @@ export const changeFocusChild = ({ childId }: { childId: number }) => (
 
 export const changeComponentFocusChild = ({
   componentId,
-  childId,
+  childId
 }: {
   componentId: number;
   childId: number;
 }) => (dispatch: (arg: Action) => void) => {
   dispatch({
     type: CHANGE_COMPONENT_FOCUS_CHILD,
-    payload: { componentId, childId },
+    payload: { componentId, childId }
   });
 };
 
 export const deleteImage = () => ({
-  type: DELETE_IMAGE,
+  type: DELETE_IMAGE
 });
 
+export const updateCode = ({
+  componentId,
+  code
+}: {
+  componentId: number;
+  code: string;
+}) => (dispatch: (arg: Action) => void) => {
+  dispatch({
+    type: UPDATE_CODE,
+    payload: { componentId, code }
+  });
+};
 export const exportFiles = ({
   components,
   path,
   appName,
-  exportAppBool,
+  exportAppBool
 }: {
   components: ComponentsInt;
   path: string;
@@ -162,26 +175,26 @@ export const exportFiles = ({
 }) => (dispatch: (arg: Action) => void) => {
   // this dispatch sets the global state property 'loading' to true until the createFiles call resolves below
   dispatch({
-    type: EXPORT_FILES,
+    type: EXPORT_FILES
   });
   createFiles(components, path, appName, exportAppBool)
     .then((dir: any) =>
       dispatch({
         type: EXPORT_FILES_SUCCESS,
-        payload: { status: true, dir: dir[0] },
+        payload: { status: true, dir: dir[0] }
       })
     )
     .catch((err: string) =>
       dispatch({
         type: EXPORT_FILES_ERROR,
-        payload: { status: true, err },
+        payload: { status: true, err }
       })
     );
 };
 
 export const handleClose = () => ({
   type: HANDLE_CLOSE,
-  payload: false,
+  payload: false
 });
 
 export const handleTransform = (
@@ -191,7 +204,7 @@ export const handleTransform = (
     x,
     y,
     width,
-    height,
+    height
   }: { x: number; y: number; width: number; height: number }
 ) => ({
   type: HANDLE_TRANSFORM,
@@ -201,16 +214,16 @@ export const handleTransform = (
     x,
     y,
     width,
-    height,
-  },
+    height
+  }
 });
 
 export const createApplication = ({
   path,
   components = [],
   genOption,
   appName = 'reactype_app',
-  exportAppBool,
+  exportAppBool
 }: {
   path: string;
   components: ComponentsInt;
@@ -225,48 +238,48 @@ export const createApplication = ({
         appName,
         path,
         components,
-        exportAppBool,
+        exportAppBool
       })
     );
   } else if (genOption) {
     exportAppBool = true;
     dispatch({
-      type: CREATE_APPLICATION,
+      type: CREATE_APPLICATION
     });
     createApplicationUtil({
       path,
       appName,
-      genOption,
+      genOption
     })
       .then(() => {
         dispatch({
-          type: CREATE_APPLICATION_SUCCESS,
+          type: CREATE_APPLICATION_SUCCESS
         });
         dispatch(
           exportFiles({
             appName,
             path,
             components,
-            exportAppBool,
+            exportAppBool
           })
         );
       })
       .catch((err: string) =>
         dispatch({
           type: CREATE_APPLICATION_ERROR,
-          payload: { status: true, err },
+          payload: { status: true, err }
         })
       );
   }
 };
 
 export const openExpansionPanel = (component: ComponentInt) => ({
   type: OPEN_EXPANSION_PANEL,
-  payload: { component },
+  payload: { component }
 });
 
 export const deleteAllData = () => ({
-  type: DELETE_ALL_DATA,
+  type: DELETE_ALL_DATA
 });
 
 export const deleteProp = (propId: number) => (
@@ -289,16 +302,16 @@ export const toggleComponentClass = ({ id }: { id: number }) => (
 
 export const addProp = (prop: PropInt) => ({
   type: ADD_PROP,
-  payload: { ...prop },
+  payload: { ...prop }
 });
 
 //action creators for undo and redo
 export const undo = () => ({
-  type: UNDO,
+  type: UNDO
 });
 
 export const redo = () => ({
-  type: REDO,
+  type: REDO
 });
 
 export const toggleEditMode = ({ id }: { id: number }) => (
@@ -307,23 +320,22 @@ export const toggleEditMode = ({ id }: { id: number }) => (
   dispatch({ type: EDIT_MODE, payload: { id } });
 };
 
-export const editComponent = ({ id, title }: { id: number, title: string }) => (
+export const editComponent = ({ id, title }: { id: number; title: string }) => (
   dispatch: (arg: Action) => void
 ) => {
-  dispatch({ type: EDIT_COMPONENT , payload: { id, title } });
+  dispatch({ type: EDIT_COMPONENT, payload: { id, title } });
 };
- 
 
 export const updateHtmlAttr = ({
   attr,
-  value,
+  value
 }: {
   attr: string;
   value: string;
 }) => (dispatch: (arg: Action) => void) => {
   dispatch({
     type: UPDATE_HTML_ATTR,
-    payload: { attr, value },
+    payload: { attr, value }
   });
 };
 

src/components/BottomPanel.tsx

@@ -9,18 +9,19 @@ const IPC = require('electron').ipcRenderer;
 const mapDispatchToProps = (dispatch: any) => ({
   handleNotificationClose: () => dispatch(handleClose()),
   deleteProp: (id: number) => dispatch(deleteProp(id)),
-  addProp: (prop: PropInt) => dispatch(addProp(prop)),
+  addProp: (prop: PropInt) => dispatch(addProp(prop))
 });
 
 const mapStateToProps = (store: any) => ({
   focusChild: store.workspace.focusChild,
-  components: store.workspace.components,
+  components: store.workspace.components
 });
 
 interface BottomPanelPropsInt extends PropsInt {
   deleteProp(id: number): void;
   addProp(prop: PropInt): void;
   changeFocusComponent(arg: { title: string }): void;
+  updateCode(arg: { componentId: number; code: string }): void;
 }
 
 class BottomPanel extends Component<BottomPanelPropsInt> {
@@ -32,6 +33,7 @@ class BottomPanel extends Component<BottomPanelPropsInt> {
       addProp,
       focusChild,
       changeFocusComponent,
+      updateCode
     } = this.props;
 
     return (
@@ -43,6 +45,7 @@ class BottomPanel extends Component<BottomPanelPropsInt> {
           addProp={addProp}
           focusChild={focusChild}
           changeFocusComponent={changeFocusComponent}
+          updateCode={updateCode}
         />
       </div>
     );