Cleaned up comments. Added prop drilling of name for DirectChildHTML.tsx to be used in annotations

Co-authored-by: jonocr <[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/left/HTMLPanel.tsx

@@ -142,6 +142,7 @@ const HTMLPanel = (props): JSX.Element => {
   };
 
   const handleCreateElement = useCallback((e) => {
+    // Canret
     if(e.key === 'Enter' && e.target.tagName !== "TEXTAREA") {
       e.preventDefault();
       document.getElementById('submitButton').click();

app/src/components/main/DirectChildHTML.tsx

@@ -13,6 +13,7 @@ import Annotation from './Annotation'
 
 function DirectChildHTML({
   childId,
+  name,
   type,
   typeId,
   style,
@@ -68,11 +69,12 @@ function DirectChildHTML({
 
   return (
     <div onClick={onClickHandler} style={combinedStyle} ref={drag}>
-      <strong>{HTMLType.placeHolderShort}</strong>
-      {`  (${childId})`}
+      <strong>{HTMLType.placeHolderShort}</strong>      
       {/* Caret start */}
+      {`  (${childId})`}
       <Annotation
         id={childId}
+        name={name}
       />
       {/* Caret end */}
     </div>

app/src/components/main/DirectChildHTMLNestable.tsx

@@ -128,14 +128,13 @@ const snapShotFunc = () => {
   return (
     <div onClick={onClickHandler} style={combinedStyle} ref={ref}>
       <strong>{HTMLType.placeHolderShort}</strong>
+      {/* Caret start */}
       {`  ( ${childId} )`}
       <Annotation
         id={childId}
         name={name}
       />
       {renderChildren(children)}
-      {/* Caret start */}
-
       {/* Caret end */}
     </div>
   );

app/src/components/main/IndirectChild.tsx

@@ -5,7 +5,7 @@ import StateContext from '../../context/context';
 import { Component } from '../../interfaces/Interfaces';
 import Annotation from './Annotation'
 
-function IndirectChild({ style, children, placeHolder, linkId, childId }) {
+function IndirectChild({ style, children, placeHolder, linkId, childId, name }) {
   const [state, dispatch] = useContext(StateContext);
   let combinedStyle = combineStyles(globalDefaultStyle, style);
 
@@ -34,10 +34,13 @@ function IndirectChild({ style, children, placeHolder, linkId, childId }) {
         placeHolder
       )}
       {children}
+      {/* Caret start */}
       {`  ( ${childId} )`}
       <Annotation
         id={childId}
+        name={name}
       />
+      {/* Caret end */}
     </div>
   );
 }

app/src/components/right/ComponentPanel.tsx

@@ -109,6 +109,7 @@ const ComponentPanel = ({isThemeLight}): JSX.Element => {
   };
 
   const keyBindCreateComponent = useCallback((e) => {
+    // Caret
     if(e.key === 'Enter' && e.target.tagName !== "TEXTAREA") {
       e.preventDefault();
       document.getElementById('addComponentButton').click();