Add code range highlighting and stepping

[treyhoover]

Description

This adds code range highlighting/stepper support, similar to this project.

Type of Change

• New feature (non-breaking change which adds functionality)
• This change requires a documentation update

How Has This Been Tested?

Added tests for the searchChildrenForStepper util, which is handling most of the logic.

[ryan-roemer]

Weirdly, when I run yarn build-one-page, I get a diff:

diff --git a/examples/one-page.html b/examples/one-page.html
index b7ea1a8..f657c7d 100644
--- a/examples/one-page.html
+++ b/examples/one-page.html
@@ -64,8 +64,7 @@
       `;
       // SPECTACLE_CLI_TEMPLATE_END
 
-      const formidableLogo =
-        'https://avatars2.githubusercontent.com/u/5078602?s=280&v=4';
+      const formidableLogo = 'https://avatars2.githubusercontent.com/u/5078602?s=280&v=4';
       const cppCodeBlock = `#include <iostream>
       #include <cstdlib>
       #include <sstream>
@@ -132,22 +131,13 @@
           </${Slide}>
           <${Slide} transitionEffect="slide">
             <${Heading}>Code Blocks</${Heading}>
-            <${Stepper} defaultValue=${[]} values=${[
-        [1, 1],
-        [23, 25],
-        [40, 42]
-      ]}>
+            <${Stepper} defaultValue=${[]} values=${[[1, 1], [23, 25], [40, 42]]}>
               ${(value, step) => html`<${Box} position="relative">
-                <${CodePane} highlightStart=${value[0]} highlightEnd=${
-                value[1]
-              } fontSize=${18} language="cpp" autoFillHeight>
+                <${CodePane} highlightStart=${value[0]} highlightEnd=${value[1]} fontSize=${18} language="cpp" autoFillHeight>
                   ${cppCodeBlock}
                 </${CodePane}>
                 <${Box} position="absolute" bottom="0rem" left="0rem" right="0rem" bg="black">
-                  ${step === 1 &&
-                    html`<${Text} fontSize="1.5rem" margin="0rem">This is a note!</${Text}>`}${step ===
-                2 &&
-                html`<${Text} fontSize="1.5rem" margin="0rem">You can use the stepper state to render whatever you like as you step through the code.</${Text}>`}
+                  ${step === 1 && html`<${Text} fontSize="1.5rem" margin="0rem">This is a note!</${Text}>`}${step === 2 && html`<${Text} fontSize="1.5rem" margin="0rem">You can use the stepper state to render whatever you like as you step through the code.</${Text}>`}
                 </${Box}>
               </${Box}>`}
             </${Stepper}>
@@ -183,16 +173,9 @@
               </${Box}>
             </${Grid}>
             <${Grid} gridTemplateColumns="1fr 1fr 1fr" gridTemplateRows="1fr 1fr 1fr" alignItems="center" justifyContent="center" gridRowGap=${1}>
-              ${Array(9)
-                .fill('')
-                .map(
-                  (
-                    _,
-                    index
-                  ) => html`<${FlexBox} paddingTop=${0} key=${`formidable-logo-${index}`} flex=${1}>
+              ${Array(9).fill('').map((_, index) => html`<${FlexBox} paddingTop=${0} key=${`formidable-logo-${index}`} flex=${1}>
                 <${Image} src=${formidableLogo} width=${100} />
-              </${FlexBox}>`
-                )}
+              </${FlexBox}>`)}
             </${Grid}>
           </${Slide}>
           <${Slide}>
@@ -242,12 +225,7 @@
         </${Deck}>
       `;
 
-      ReactDOM.render(
-        html`
-          <${Presentation} />
-        `,
-        document.getElementById('root')
-      );
+      ReactDOM.render(html`<${Presentation}/>`, document.getElementById('root'));
     </script>
   </body>
 </html>

@treyhoover can you run yarn build-one-page again and see if you get a diff?

[treyhoover]

@ryan-roemer Weird indeed. Yes, I got one when I ran it again. Updated now.

[ryan-roemer]

LGTM! Nice work!

As I'm less familiar with the core React code workings, let's get another 👍 approval for that.

[treyhoover]

Should I merge now, @carlos-kelly ?

[kale-stew]

Is there a reason this value needs to be set and we can't rely on null?

[treyhoover]

It's just convenient when checking whether to dim the line, as this won't dim anything by default and doesn't require any special case handling. We can leave it undefined and update the `isLineDimmed` function to handle that, though.

…

On Fri, Feb 21, 2020, 5:21 PM Kylie Stewart ***@***.***> wrote: ***@***.**** commented on this pull request. ------------------------------ In src/components/code-pane.js <#843 (comment)> : > theme: propTypes.object }; CodePane.defaultProps = { language: 'javascript', theme: theme, - fontSize: 15 + fontSize: 15, + highlightStart: -Infinity, Is there a reason this value *needs* to be set and we can't rely on null? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#843?email_source=notifications&email_token=ACQT4GSIVZWYYDSHMP3KLZTREBHWFA5CNFSM4KWZRMNKYY3PNVWWK3TUL52HS4DFWFIHK3DMKJSXC5LFON2FEZLWNFSXPKTDN5WW2ZLOORPWSZGOCWRDQXQ#pullrequestreview-362952798>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACQT4GTA4JGFIJZ44IR4LTDREBHWFANCNFSM4KWZRMNA> .