Added switch component

Author: WilliamCheng12345

app/src/components/left/HTMLItem.tsx

@@ -122,11 +122,11 @@ const HTMLItem : React.FC<{
   // updated the id's to reflect the new element types input and label
   return ( // HTML Elements
     <Grid item xs={5} key={`html-g${name}`}>
-      { id <= 16 &&
+      { id <= 17 &&
       <div ref={drag} className={isThemeLight ? `${classes.HTMLPanelItem} ${classes.lightThemeFontColor}` : `${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`} id="HTMLItem">
         <h3>{name}</h3>
         </div>}
-      {id > 16 &&
+      {id > 17 &&
       <span id="customHTMLElement">
       <div ref={drag} className={isThemeLight ? `${classes.HTMLPanelItem} ${classes.lightThemeFontColor}` : `${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`} id="HTMLItem">
         <h3>{name}</h3>

app/src/context/HTMLTypes.tsx

@@ -155,6 +155,15 @@ const HTMLTypes: HTMLType[] = [
     placeHolderShort: 'list item',
     placeHolderLong: '',
     icon: ListIcon
+  }, 
+  {
+    id: 17,
+    tag: 'switch',
+    name: 'Switch',
+    style: {},
+    placeHolderShort: 'switch item',
+    placeHolderLong: '',
+    icon: ListIcon
   }
 ];
 

app/src/helperFunctions/generateCode.ts

@@ -120,7 +120,8 @@ const generateUnformattedCode = (
     childElement.tag === 'ol' || 
     childElement.tag === 'ul' ||
     childElement.tag === 'menu' ||
-    childElement.tag === 'li';
+    childElement.tag === 'li' ||
+    childElement.tag === 'switch';
 
     if (childElement.tag === 'img') {
       return `${levelSpacer(level, 5)}<${childElement.tag} src="${activeLink}" ${elementTagDetails(childElement)}/>${levelSpacer(2, (3 + level))}`;

app/src/helperFunctions/renderChildren.tsx

@@ -34,7 +34,7 @@ const renderChildren = (children: ChildElement[]) => {
     }
     // ommitted orderedlists, unorderedlists, and menus, ommitted li items as non-nestable types because they can be nested within.
     // child is a non-nestable type of HTML element (everything except for divs and forms)
-    else if (type === 'HTML Element' && typeId !== 11 && typeId !== 1000 && typeId !== 2 && typeId !== 3 && typeId !== 14 && typeId !== 15 && typeId !== 16) {
+    else if (type === 'HTML Element' && typeId !== 11 && typeId !== 1000 && typeId !== 2 && typeId !== 3 && typeId !== 14 && typeId !== 15 && typeId !== 16 && typeId != 17) {
       return (
         <DirectChildHTML
           childId={childId}
@@ -48,7 +48,7 @@ const renderChildren = (children: ChildElement[]) => {
     }
     // Added Orderedlists, Unorderedlists, and Menus, changed lists to nestable because they are nestable.
     // child is a nestable type of HTML element (divs and forms)
-    else if (type === 'HTML Element' && (typeId === 11 || typeId === 2 || typeId === 3 || typeId === 14 || typeId === 15 || typeId === 16)) {
+    else if (type === 'HTML Element' && (typeId === 11 || typeId === 2 || typeId === 3 || typeId === 14 || typeId === 15 || typeId === 16 || typeId === 17)) {
       return (       
         <DirectChildHTMLNestable
           childId={childId}