From 34ea251d60b7b3224321911e1a80490b2c442f69 Mon Sep 17 00:00:00 2001 From: Grant Sander Date: Wed, 17 Mar 2021 14:06:01 -0500 Subject: [PATCH 1/7] MD component pass-thru --- examples/js/index.js | 13 ++++++++++++- src/components/markdown/markdown.js | 23 ++++++++++++++++++++--- 2 files changed, 32 insertions(+), 4 deletions(-) diff --git a/examples/js/index.js b/examples/js/index.js index 412ef8e2d..9aff29ce0 100644 --- a/examples/js/index.js +++ b/examples/js/index.js @@ -21,7 +21,8 @@ import { CodePane, MarkdownSlide, MarkdownSlideSet, - Notes + Notes, + Markdown } from 'spectacle'; const formidableLogo = @@ -192,6 +193,16 @@ const Presentation = () => ( This is a slide embedded in a div + + Markdown can be sprinkled into any slide! + {` + ## Hey world + + - One + - Two + - Three + `} + {` # This is a Markdown Slide diff --git a/src/components/markdown/markdown.js b/src/components/markdown/markdown.js index 50f4fb914..a30478742 100644 --- a/src/components/markdown/markdown.js +++ b/src/components/markdown/markdown.js @@ -27,7 +27,8 @@ export const Markdown = ({ getPropsForAST: () => {} }, children: rawMarkdownText, - animateListItems = false + animateListItems = false, + componentProps = {} }) => { const { theme: { markdownComponentMap: themeComponentMap = {} } = {} @@ -85,12 +86,19 @@ export const Markdown = ({ CodeBlockComponent ); + const componentMapWithPassedThroughProps = Object.entries( + componentMap + ).reduce((newMap, [key, Component]) => { + newMap[key] = props => ; + return newMap; + }, {}); + // Create the compiler for the _user-visible_ markdown (not presenter notes) const compiler = unified() .use(remark2rehype) .use(rehype2react, { createElement: React.createElement, - components: componentMap + components: componentMapWithPassedThroughProps }); // Compile each of the values we got back from the template function @@ -153,11 +161,20 @@ export const MarkdownSlide = ({ componentMap, template, animateListItems = false, + componentProps = {}, ...rest }) => { return ( - + ); }; From 10e4d31388f146591a40762ec37eb474221433f2 Mon Sep 17 00:00:00 2001 From: Grant Sander Date: Wed, 17 Mar 2021 16:12:26 -0500 Subject: [PATCH 2/7] Add docs/tests --- docs/content/api-reference.md | 9 +-- src/components/markdown/markdown.test.js | 81 +++++++++++++++++++++++- 2 files changed, 84 insertions(+), 6 deletions(-) diff --git a/docs/content/api-reference.md b/docs/content/api-reference.md index 3288d8e51..e2ff0bfd6 100644 --- a/docs/content/api-reference.md +++ b/docs/content/api-reference.md @@ -174,10 +174,11 @@ Image is a component to display a picture within a slide. It is analogous to an The Markdown components let you include a block of Markdown within a slide using ``, author a complete slide with Markdown using ``, or author a series of slides with Markdown using ``. Markdown tags get converted into Spectacle components. The `---` three dash marker when used inside `` is used to divide content into separate slides. Markdown also supports presenter notes using the `Notes:` marker. `` must be a child of `` where `` and `` are children of ``. -| Props | Type | Example | -| ------------------ | ----------------- | ------------------------------------ | -| `children` | PropTypes.string | `# Hi there` | -| `animateListItems` | PropTypes.boolean | `` | +| Props | Type | Example | +| ------------------ | ----------------- | ------------------------------------ | +| `children` | PropTypes.string | `# Hi there` | +| `componentProps` | PropTypes.object | `# I'm purple!` | +| `animateListItems` | PropTypes.boolean | `` | ```jsx diff --git a/src/components/markdown/markdown.test.js b/src/components/markdown/markdown.test.js index 4d8d044b5..cc59088c2 100644 --- a/src/components/markdown/markdown.test.js +++ b/src/components/markdown/markdown.test.js @@ -1,10 +1,11 @@ import React from 'react'; import Enzyme, { mount } from 'enzyme'; -import { MarkdownSlide, MarkdownSlideSet } from './markdown'; +import { Markdown, MarkdownSlide, MarkdownSlideSet } from './markdown'; import Adapter from 'enzyme-adapter-react-16'; import Deck from '../deck/deck'; -import { ListItem } from '../typography'; +import { Heading, ListItem } from '../typography'; import Appear from '../appear'; +import Slide from '../slide/slide'; Enzyme.configure({ adapter: new Adapter() }); @@ -80,4 +81,80 @@ describe('', () => { expect(wrapper.find('ul')).toHaveLength(2); expect(wrapper.find(Appear)).toHaveLength(6); }); + + it('Markdown should pass componentProps down to constituent components', () => { + const wrapper = mountInsideDeck( + + Im not styled... + {` + # What's up world, I'm styled. + + - List item + - And another one + `} + + ); + + expect( + wrapper + .find(Heading) + .at(0) + .prop('color') + ).not.toBe('purple'); + + expect( + wrapper + .find(Heading) + .at(1) + .prop('color') + ).toBe('purple'); + + expect( + wrapper + .find(ListItem) + .at(0) + .prop('color') + ).toBe('purple'); + }); + + it('MarkdownSlide should pass componentProps down to constituent components', () => { + const wrapper = mountInsideDeck( + {` + # What's up world, I'm styled. + `} + ); + + expect( + wrapper + .find(Heading) + .at(0) + .prop('color') + ).toBe('purple'); + }); + + it('MarkdownSlideSet should pass componentProps down to constituent components', () => { + const wrapper = mountInsideDeck( + {` + # What's up world, I'm styled. + + --- + + # Another slide + `} + ); + + expect( + wrapper + .find(Heading) + .at(0) + .prop('color') + ).toBe('purple'); + + expect( + wrapper + .find(Heading) + .at(1) + .prop('color') + ).toBe('purple'); + }); }); From 658ccb295f263c387127851a33c0b377beac05fe Mon Sep 17 00:00:00 2001 From: Grant Sander Date: Wed, 17 Mar 2021 16:13:05 -0500 Subject: [PATCH 3/7] Update deps --- src/components/markdown/markdown.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/markdown/markdown.js b/src/components/markdown/markdown.js index a30478742..a41625e12 100644 --- a/src/components/markdown/markdown.js +++ b/src/components/markdown/markdown.js @@ -134,9 +134,10 @@ export const Markdown = ({ }, [ rawMarkdownText, getPropsForAST, - userProvidedComponentMap, themeComponentMap, - animateListItems + userProvidedComponentMap, + animateListItems, + componentProps ]); const { children, ...restProps } = templateProps; From 2f41f560656a2fc25b32c891f93371aa61234ae5 Mon Sep 17 00:00:00 2001 From: Grant Sander Date: Wed, 17 Mar 2021 16:17:21 -0500 Subject: [PATCH 4/7] Undo changes to example --- examples/js/index.js | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/examples/js/index.js b/examples/js/index.js index 9aff29ce0..412ef8e2d 100644 --- a/examples/js/index.js +++ b/examples/js/index.js @@ -21,8 +21,7 @@ import { CodePane, MarkdownSlide, MarkdownSlideSet, - Notes, - Markdown + Notes } from 'spectacle'; const formidableLogo = @@ -193,16 +192,6 @@ const Presentation = () => ( This is a slide embedded in a div - - Markdown can be sprinkled into any slide! - {` - ## Hey world - - - One - - Two - - Three - `} - {` # This is a Markdown Slide From cc5e801c2a8af8b354282526d8c847173a49b475 Mon Sep 17 00:00:00 2001 From: Grant Sander Date: Wed, 17 Mar 2021 16:20:24 -0500 Subject: [PATCH 5/7] Update index.d.ts --- index.d.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/index.d.ts b/index.d.ts index b68b37dd1..45ac800b0 100644 --- a/index.d.ts +++ b/index.d.ts @@ -105,19 +105,24 @@ declare module 'spectacle' { size: number; }>; + type MdComponentProps = { [key: string]: any }; + export const Markdown: React.FC<{ animateListItems?: boolean; children: React.ReactNode; + componentProps?: MdComponentProps; }>; export const MarkdownSlide: React.FC<{ animateListItems?: boolean; children: React.ReactNode; + componentProps?: MdComponentProps; }>; export const MarkdownSlideSet: React.FC<{ animateListItems?: boolean; children: React.ReactNode; + componentProps?: MdComponentProps; }>; export const SpectacleLogo: React.FC<{ From 742d867b785f087daa018296af9ccba0576e8198 Mon Sep 17 00:00:00 2001 From: Grant Sander Date: Wed, 17 Mar 2021 16:21:16 -0500 Subject: [PATCH 6/7] Update api-reference.md --- docs/content/api-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/api-reference.md b/docs/content/api-reference.md index e2ff0bfd6..44141e044 100644 --- a/docs/content/api-reference.md +++ b/docs/content/api-reference.md @@ -175,7 +175,7 @@ Image is a component to display a picture within a slide. It is analogous to an The Markdown components let you include a block of Markdown within a slide using ``, author a complete slide with Markdown using ``, or author a series of slides with Markdown using ``. Markdown tags get converted into Spectacle components. The `---` three dash marker when used inside `` is used to divide content into separate slides. Markdown also supports presenter notes using the `Notes:` marker. `` must be a child of `` where `` and `` are children of ``. | Props | Type | Example | -| ------------------ | ----------------- | ------------------------------------ | +| ------------------ | ----------------- | ----------------------------------------------------------------------------------- | | `children` | PropTypes.string | `# Hi there` | | `componentProps` | PropTypes.object | `# I'm purple!` | | `animateListItems` | PropTypes.boolean | `` | From 1e6ec8dabaf249f877d0733706e83ecaa5ce1426 Mon Sep 17 00:00:00 2001 From: Grant Sander Date: Thu, 18 Mar 2021 08:45:40 -0500 Subject: [PATCH 7/7] Update example to include componentProps --- examples/js/index.js | 5 ++++- examples/one-page.html | 18 +++++++++++++++++- 2 files changed, 21 insertions(+), 2 deletions(-) diff --git a/examples/js/index.js b/examples/js/index.js index 412ef8e2d..d18867f4f 100644 --- a/examples/js/index.js +++ b/examples/js/index.js @@ -192,9 +192,12 @@ const Presentation = () => ( This is a slide embedded in a div - + {` # This is a Markdown Slide + + - You can pass props down to all elements on the slide. + - Just use the \`componentProps\` prop. `} diff --git a/examples/one-page.html b/examples/one-page.html index 47eb017b6..286abd1ae 100644 --- a/examples/one-page.html +++ b/examples/one-page.html @@ -179,9 +179,25 @@ <${Heading}>This is a slide embedded in a div - <${MarkdownSlide}> + <${MarkdownSlide} componentProps=${{ + color: 'yellow' + }}> ${` # This is a Markdown Slide + + - You can pass props down to all elements on the slide. + - Just use the \`componentProps\` prop. + `} + + <${MarkdownSlide} animateListItems> + ${` + # This is also a Markdown Slide + + It uses the \`animateListItems\` prop. + + - Its list items... + - they will appear in... + - one at a time. `} <${MarkdownSlideSet}>