Support Notes for MD parsing (#762)

* Support Notes for MD parsing

* Add notes helper exports

Author: carloskelly13

examples/js/index.js

@@ -209,8 +209,10 @@ const TestJs = () => (
     <Markdown containsSlides>
       {`
         ### First MD generated Slide
+        Notes: These are notes
         ---
         ### Second MD Generated Slide
+        Notes: These are more notes
       `}
     </Markdown>
   </Deck>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "spectacle",
-  "version": "5.5.0",
+  "version": "6.0.0-alpha.0",
   "description": "ReactJS Powered Presentation Framework",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -68,6 +68,7 @@
   "dependencies": {
     "history": "^4.9.0",
     "marksy": "^8.0.0",
+    "normalize-newline": "^3.0.0",
     "prism-react-renderer": "^0.1.7",
     "query-string": "^6.8.2",
     "react-spring": "^8.0.25",

src/components/deck/index.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled, { ThemeContext, ThemeProvider } from 'styled-components';
-
+import normalize from 'normalize-newline';
+import indentNormalizer from '../../utils/indent-normalizer';
 import useDeck, { DeckContext } from '../../hooks/use-deck';
 import isComponentType from '../../utils/is-component-type';
 import useUrlRouting from '../../hooks/use-url-routing';
@@ -24,7 +25,8 @@ import {
 } from '../../utils/constants';
 import searchChildrenForAppear from '../../utils/search-children-appear';
 import OverviewDeck from './overview-deck';
-import { Markdown, Slide } from '../../index';
+import { Markdown, Slide, Notes } from '../../index';
+import { isolateNotes, removeNotes } from '../../utils/notes';
 
 const AnimatedDeckDiv = styled(animated.div)`
   height: 100vh;
@@ -78,11 +80,17 @@ const mapMarkdownIntoSlides = (child, index) => {
     isComponentType(child, 'Markdown') &&
     Boolean(child.props.containsSlides)
   ) {
-    return child.props.children.split(/\n\s*---\n/).map((markdown, mdIndex) => (
-      <Slide key={`md-slide-${index}-${mdIndex}`}>
-        <Markdown>{markdown}</Markdown>
-      </Slide>
-    ));
+    return child.props.children.split(/\n\s*---\n/).map((markdown, mdIndex) => {
+      const content = normalize(indentNormalizer(markdown));
+      const contentWithoutNotes = removeNotes(content);
+      const notes = isolateNotes(content);
+      return (
+        <Slide key={`md-slide-${index}-${mdIndex}`}>
+          <Markdown>{contentWithoutNotes}</Markdown>
+          <Notes>{notes}</Notes>
+        </Slide>
+      );
+    });
   }
   return child;
 };

src/index.js

@@ -20,6 +20,7 @@ import Progress from './components/progress';
 import FullScreen from './components/fullscreen';
 import Markdown from './components/markdown';
 import mdxComponentMap from './utils/mdx-component-mapper';
+import { removeNotes, isolateNotes } from './utils/notes';
 
 export {
   Deck,
@@ -46,5 +47,7 @@ export {
   Table,
   TableCell,
   TableRow,
-  mdxComponentMap
+  mdxComponentMap,
+  removeNotes,
+  isolateNotes
 };

src/utils/notes.js

@@ -0,0 +1,27 @@
+const NOTES_MARKER = 'Notes: ';
+const NOTES_REG = new RegExp(`^${NOTES_MARKER}`, 'm');
+/*
+ * We want to pull the notes out of each slide. This RegEx looks for "Notes: "
+ * that starts on a new line. Anything after the notes marker will be considered notes.
+ */
+export const isolateNotes = content => {
+  const indexOfNotes = content.search(NOTES_REG);
+  if (indexOfNotes >= 0) {
+    // found the notes marker!
+    return content.substring(indexOfNotes + NOTES_MARKER.length);
+  }
+  return '';
+};
+
+/*
+ * When generating the slide components, we only want the slide content to be
+ * compiled by mdx.sync. Remove all the notes content.
+ */
+export const removeNotes = content => {
+  const indexOfNotes = content.search(NOTES_REG);
+  if (indexOfNotes >= 0) {
+    // found the notes marker!
+    return content.substring(0, indexOfNotes);
+  }
+  return content;
+};

yarn.lock

@@ -3707,6 +3707,11 @@ locate-path@^3.0.0:
     p-locate "^3.0.0"
     path-exists "^3.0.0"
 
+lodash.flowright@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.flowright/-/lodash.flowright-3.5.0.tgz#2b5fff399716d7e7dc5724fe9349f67065184d67"
+  integrity sha1-K1//OZcW1+fcVyT+k0n2cGUYTWc=
+
 lodash@^3.10.1:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
@@ -4153,6 +4158,11 @@ nopt@^4.0.1:
     abbrev "1"
     osenv "^0.1.4"
 
+normalize-newline@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/normalize-newline/-/normalize-newline-3.0.0.tgz#1cbea804aba436001f83938ab21ec039d69ae9d3"
+  integrity sha1-HL6oBKukNgAfg5OKsh7AOdaa6dM=
+
 normalize-path@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"