Add comments, fix center container height.

packages/spectacle/src/components/markdown/markdown-layout-containers.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { Box, FlexBox } from '../layout-primitives';
+import { FlexBox } from '../layout-primitives';
 
 export const Columns = ({ children }: PropsWithChildren) => (
   <FlexBox flexDirection="row" alignItems="start" flex={1}>
@@ -8,8 +8,8 @@ export const Columns = ({ children }: PropsWithChildren) => (
 );
 
 export const Center = ({ children }: PropsWithChildren) => (
-  <FlexBox justifyContent="center" alignItems="center" height="100vh">
-    <Box>{children}</Box>
+  <FlexBox justifyContent="center" alignItems="center" height="100%">
+    {children}
   </FlexBox>
 );
 

packages/spectacle/src/components/markdown/markdown.tsx

@@ -4,7 +4,7 @@ import presenterNotesPlugin from '../../utils/remark-rehype-presenter-notes';
 import CodePane, { CodePaneProps } from '../code-pane';
 import unified from 'unified';
 import styled from 'styled-components';
-import { compose, layout, position } from 'styled-system';
+import { compose, layout, position, space } from 'styled-system';
 import remark from 'remark-parse';
 import remark2rehype from 'remark-rehype';
 import remarkRaw from 'rehype-raw';
@@ -39,7 +39,7 @@ import {
 } from '../../utils/remark-rehype-directive';
 
 type MarkdownProps = CommonMarkdownProps & MapAndTemplate;
-const Container = styled('div')(compose(position, layout));
+const Container = styled('div')(compose(position, layout), { height: '100%' });
 
 export const Markdown = forwardRef<
   HTMLDivElement,

packages/spectacle/src/utils/remark-rehype-directive.ts

@@ -35,9 +35,19 @@ export const directiveParserPlugin = () => {
       (<ValueNode>matchedNode.children[0]).value
     }Directive`;
 
+    /**
+     * If the parser finds an unknown directive, splice it out from
+     * the node tree, so it doesn't render on/break the slide.
+     */
     if (!directiveNodeTypes.includes(<DirectiveNodes>directiveType)) {
       parent?.children.splice(index, 1);
     } else {
+      /**
+       * If the parser finds a directive node, flatten it and replace
+       * the raw structure with one that contains no children and the position.
+       * The children will be populated with directivesHandlerPlugin to contain
+       * the nodes for each grouping.
+       */
       const directiveNode = {
         type: directiveType,
         children: [],
@@ -63,9 +73,19 @@ export const directivesHandlerPlugin: Plugin = () => {
         const clonedNode = <typeof node>cloneFn(node);
 
         switch (<DirectiveNodes>node.type) {
+          /**
+           * Get the start and end index based on the section directives in the
+           * node tree. These will be used to determine which nodes belong to each
+           * section. If there is no final directive, assume end of slide.
+           */
           case 'sectionDirective': {
             const startIndex = treeNodes.children.indexOf(node);
             const endIndex = (() => {
+              /**
+               * The end index should be the next section directive found in the node
+               * tree or the end of slide. Offset each visit run by the index of the
+               * previous section directive index.
+               */
               const proposedEndIndex =
                 treeNodes.children
                   .slice(startIndex + 1)
@@ -75,11 +95,19 @@ export const directivesHandlerPlugin: Plugin = () => {
                 : treeNodes.children.length - 1;
             })();
 
+            /**
+             * Collect the elements that are within the index bounds of the two
+             * section directives.
+             */
             const elements = treeNodes.children.slice(
               startIndex + 1,
               endIndex + 1
             );
 
+            /**
+             * Finally, assign the nodes within the bounds as children
+             * to the section directive and push it to the overall tree.
+             */
             (<VisitNode>clonedNode).children = [...elements];
             treeChildren.push(clonedNode);
           }