Add Line Annotations

[karlhorky]

Followup to https://github.com/pomber/code-surfer/pull/51 with the new version of Code Surfer

@pomber what are your thoughts on this?

Simple example:

<CodeSurfer
  steps={[
    {
      code: `This line will have an "abc" annotation here ->
This line will have an "def" annotation here ->`,
      lang: 'jsx',
      annotations: {
        1: <span>abc</span>,
        2: <span>def</span>,
      },
    },
  ]}
  progress={0}
/>

More complex example:

<CodeSurfer
  lang="jsx"
  steps={[
    {
      code: require('!raw-loader!./packages/example-1-simple-cra/src/index.js'),
      lang: 'jsx',
      annotations: {
        1: (
          <Brace side="left" height="5em">
            JavaScript
          </Brace>
        ),
        8: (
          <Brace side="right" height="3em" style={{}}>
            JSX
          </Brace>
        ),
        13: (
          <Brace side="left" height="3em">
            JavaScript
          </Brace>
        ),
        22: (
          <Brace side="right" height="6em" style={{ marginTop: '-2.5em' }}>
            JSX
          </Brace>
        ),
        27: (
          <>
            <Brace side="top" width="5.7em" style={{ marginLeft: '-1.3em' }}>
              JavaScript
            </Brace>
            <Brace side="top" width="2.2em" style={{ marginLeft: '5.2em' }}>
              JSX
            </Brace>
            <Brace side="top" width="13.3em" style={{ marginLeft: '8.2em' }}>
              JavaScript
            </Brace>
          </>
        ),
      },
    },
  ]}
  progress={0}
/>

[karlhorky]

For anyone who doesn't want to wait for this to be accepted / merged, you can apply via patch-package, with the following files in your project:

@code-surfer+standalone+3.1.1.patch

diff --git a/node_modules/@code-surfer/standalone/dist/standalone.esm.js b/node_modules/@code-surfer/standalone/dist/standalone.esm.js
index 37c0d32..c40f13a 100644
--- a/node_modules/@code-surfer/standalone/dist/standalone.esm.js
+++ b/node_modules/@code-surfer/standalone/dist/standalone.esm.js
@@ -663,7 +663,7 @@ function LineList(_ref) {
         style: getTokenStyle(t, tokeni),
         key: tokeni
       }, token);
-    })));
+    }), stepPair.prev.annotations && stepPair.prev.annotations[lineKey + 1]));
   }));
 }
 

@code-surfer+step-parser+3.1.1.patch

diff --git a/node_modules/@code-surfer/step-parser/dist/step-parser.esm.js b/node_modules/@code-surfer/step-parser/dist/step-parser.esm.js
index 9992da5..71dbe51 100644
--- a/node_modules/@code-surfer/step-parser/dist/step-parser.esm.js
+++ b/node_modules/@code-surfer/step-parser/dist/step-parser.esm.js
@@ -527,7 +527,8 @@ function parseSteps(inputSteps) {
       focusCount: focusCount,
       longestLineIndex: getLongestLineIndex(code),
       title: inputSteps[i].title,
-      subtitle: inputSteps[i].subtitle
+      subtitle: inputSteps[i].subtitle,
+      annotations: inputSteps[i].annotations
     });
   }); // split tokens into columns when needed