Introduce extraPaddingLeft to Element

Author: kraenhansen

packages/compass-components/src/components/document-list/element.tsx

@@ -399,13 +399,15 @@ export const HadronElement: React.FunctionComponent<{
   value: HadronElementType;
   editable: boolean;
   editingEnabled: boolean;
+  extraPaddingLeft?: number;
   onEditStart?: (id: string, field: 'key' | 'value' | 'type') => void;
   lineNumberSize: number;
   onAddElement(el: HadronElementType): void;
 }> = ({
   value: element,
   editable,
   editingEnabled,
+  extraPaddingLeft = 0,
   onEditStart,
   lineNumberSize,
   onAddElement,
@@ -445,8 +447,8 @@ export const HadronElement: React.FunctionComponent<{
   }, [lineNumberSize, editingEnabled]);
 
   const elementSpacerWidth = useMemo(
-    () => calculateElementSpacerWidth(editable, level),
-    [editable, level]
+    () => calculateElementSpacerWidth(editable, level) + extraPaddingLeft,
+    [editable, level, extraPaddingLeft]
   );
 
   // To render the "Show more" toggle for the nested expandable elements we need
@@ -711,6 +713,7 @@ export const HadronElement: React.FunctionComponent<{
                 onEditStart={onEditStart}
                 lineNumberSize={lineNumberSize}
                 onAddElement={onAddElement}
+                extraPaddingLeft={extraPaddingLeft}
               ></HadronElement>
             );
           })}