Make style in code preview appear, but commented out for now

Co-authored-by: Ron Fu

Author: WilliamCheng12345

app/src/components/left/DragDropPanel.tsx

@@ -40,6 +40,7 @@ const DragDropPanel = (props): JSX.Element => {
 
   // filter out separator so that it will not appear on the html panel
   const htmlTypesToRender = state.HTMLTypes.filter(type => type.name !== 'separator');
+
   return (
     <div className="HTMLItems">
       <div id="HTMLItemsTopHalf">
@@ -48,19 +49,19 @@ const DragDropPanel = (props): JSX.Element => {
           >
             <h3>HTML ELEMENTS</h3>
             {htmlTypesToRender.map(option => {
-              if(option.id === 17 || option.id === 18) {
-                return; 
+              if(option.id !== 17 || option.id !== 18) {
+                return (
+                  <HTMLItem
+                    name={option.name}
+                    key={`html-${option.name}`}
+                    id={option.id}
+                    Icon={option.icon}
+                    handleDelete={handleDelete}
+                    isThemeLight={isThemeLight}
+                  />
+                  ); 
               }
-              return (
-              <HTMLItem
-                name={option.name}
-                key={`html-${option.name}`}
-                id={option.id}
-                Icon={option.icon}
-                handleDelete={handleDelete}
-                isThemeLight={isThemeLight}
-              />
-              ); 
+
             })}
             <h3>REACT ROUTER</h3>
             {htmlTypesToRender.map(option => {

app/src/components/main/Canvas.tsx

@@ -25,6 +25,7 @@ function Canvas() {
     function onClickHandler(event) {
       event.stopPropagation();
       // note: a null value for the child id means that we are focusing on the top-level component rather than any child
+      console.log(state.canvasFocus); 
       changeFocus(state.canvasFocus.componentId, null);
     };
 

app/src/helperFunctions/generateCode.ts

@@ -52,7 +52,6 @@ const generateUnformattedCode = (
       } else if (child.type === 'HTML Element') {
         const referencedHTML = HTMLTypes.find(elem => elem.id === child.typeId);
         child['tag'] = referencedHTML.tag;
-        console.log(referencedHTML); 
         if (
           referencedHTML.tag === 'div' ||
           referencedHTML.tag === 'separator' || 
@@ -79,10 +78,16 @@ const generateUnformattedCode = (
   // Raised formatStyles so that it is declared before it is referenced. It was backwards.
   // format styles stored in object to match React inline style format
   const formatStyles = (styleObj: any) => {
+    console.log(styleObj); 
+
     if (Object.keys(styleObj).length === 0) return ``;
     const formattedStyles = [];
     for (let i in styleObj) {
-      const styleString = i + ': ' + "'" + styleObj[i] + "'";
+      let styleString = i + ': ' + "'" + styleObj[i] + "'"; 
+      // if(i === 'style') {
+      //   styleString = i + ':' + JSON.stringify(styleObj[i]); 
+      // }
+
       formattedStyles.push(styleString);
     }
     return ' style={{' + formattedStyles.join(',') + '}}';