fix(readonly): wip styled output (#21)

* fix(readonly): wip styled output * fix: line nums/newlines displaying almost properly * fix(styled): cleaving off any linebreaks near string end * fix(style): only committing a single new line when single line break * fix: edge case where end output idx was not string Co-authored-by: julshotal <[email protected]>
readmeio · Oct 9, 2020 · 82b99ab · 82b99ab
1 parent f750c36
commit 82b99ab
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 17 deletions.
diff --git a/public/index.js b/public/index.js
@@ -22,8 +22,8 @@ ReactDOM.render(
               { ch: 0, line: 1 },
             ],
             [
-              { ch: 0, line: 2 },
-              { ch: 0, line: 3 },
+              { ch: 0, line: 4 },
+              { ch: 0, line: 5 },
             ],
           ],
         }

diff --git a/src/codeMirror/index.jsx b/src/codeMirror/index.jsx
@@ -29,13 +29,15 @@ WrappedLine.propTypes = {
 // Final Styled Output
 // Includes Highlighted | Overlayed | null styled lines
 const StructuredOutput = ({ gutteredInput, highlights = [] }) =>
-  gutteredInput.map((ac, idx) => (
-    <WrappedLine
-      key={`cm-wrapped-${idx}`}
-      child={ac}
-      className={['cm-linerow', highlights.length ? highlights[idx] : ''].join(' ')}
-    />
-  ));
+  gutteredInput.map((ac, idx) => {
+    return (
+      <WrappedLine
+        key={`cm-wrapped-${idx}`}
+        child={ac}
+        className={['cm-linerow', highlights.length ? highlights[idx] : ''].join(' ')}
+      />
+    );
+  });
 
 StructuredOutput.propTypes = {
   gutteredInput: PropTypes.any,
@@ -68,23 +70,51 @@ const highlightedLines = (ranges, totalLength) => {
 };
 
 const StyledSyntaxHighlighter = ({ output, ranges }) => {
+  const lineBreakRegex = /\r?\n/;
   const gutteredOutput = [];
   let bucket = [];
   let lineNumber = 1;
 
+  const incrementLine = newLine => {
+    // If new line, we'll manually add it to a bucket
+    if (newLine) bucket.push('\n');
+    // Regardless, we'll add the bucket to our larger output and start a new numbered div
+    gutteredOutput.push(bucket);
+    lineNumber += 1;
+    bucket = [defaultLineJsx(lineNumber)];
+  };
+
+  const enumerateMatches = (o, final) => {
+    // Case where a single line break
+    if (o.length === 1) {
+      incrementLine(true);
+      // Case with multiple consecutive line breaks
+    } else {
+      const matches = o.split(lineBreakRegex);
+      matches.forEach(m => {
+        if (m.length) {
+          bucket.push(m);
+          // If we've found a match right before the end of our output, we pad it
+          if (final) incrementLine();
+        } else {
+          incrementLine(true);
+        }
+      });
+    }
+  };
+
   output.unshift(defaultLineJsx(1));
   output.forEach((o, idx) => {
-    const lineBreakRegex = /\n/g;
-
     if (idx === output.length - 1) {
-      bucket.push(o);
-      gutteredOutput.push(bucket);
+      if (typeof o === 'string') enumerateMatches(o, true);
+      else {
+        bucket.push(o);
+        gutteredOutput.push(bucket);
+      }
     } else if (!lineBreakRegex.test(o)) {
       bucket.push(o);
-    } else {
-      gutteredOutput.push(bucket);
-      lineNumber += 1;
-      bucket = [defaultLineJsx(lineNumber)];
+    } else if (typeof o === 'string') {
+      enumerateMatches(o);
     }
   });