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

gratcliff · julshotal · web-flow · commit 82b99ab69251 · 2020-10-09T11:33:41.000-04:00
* 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 &lt;jgh6364@g.rit.edu&gt;
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);
     }
   });
 

Original file line number	Diff line number	Diff line change
`@@ -22,8 +22,8 @@ ReactDOM.render(`
`22`	`22`	`{ ch: 0, line: 1 },`
`23`	`23`	`],`
`24`	`24`	`[`
`25`		`- { ch: 0, line: 2 },`
`26`		`- { ch: 0, line: 3 },`
	`25`	`+ { ch: 0, line: 4 },`
	`26`	`+ { ch: 0, line: 5 },`
`27`	`27`	`],`
`28`	`28`	`],`
`29`	`29`	`}`