fix(highlighting): fixing an issue where overlay was not applied correctly (#7)

gratcliff · web-flow · commit df2236e29aa9 · 2020-09-16T12:01:17.000-07:00
- Reducing reach of while statement to capture ranges correctly
- Applying   in cases where overall length was greater than applied range
diff --git a/__tests__/codeMirror.test.js b/__tests__/codeMirror.test.js
@@ -2,6 +2,7 @@ import { mount, shallow } from 'enzyme';
 import path from 'path';
 import glob from 'glob';
 import { promises as fs } from 'fs';
+import Variable from '@readme/variable';
 import syntaxHighlighter, { uppercase, canonical } from '../src';
 
 const fixtures = glob.sync(path.join(__dirname, '/__fixtures__/*'));
@@ -157,7 +158,15 @@ describe('highlight mode', () => {
     expect(node.find('p').first().hasClass('cm-lineNumber')).toBe(true);
   });
 
+  it('should convert variable regex matches to a component instance', () => {
+    expect(node.find(Variable)).toHaveLength(1);
+  });
+
   it('should highlight based on range input', () => {
-    expect(node.find('.cm-linerow.cm-highlight')).toHaveLength(4);
+    expect(node.find('.cm-linerow.cm-highlight')).toHaveLength(2);
+  });
+
+  it('should add an overlay to non-highlighted in lines when ranges are applied', () => {
+    expect(node.find('.cm-linerow.cm-overlay')).toHaveLength(6);
   });
 });
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: 5 },
             ],
           ],
         }
diff --git a/src/codeMirror/index.jsx b/src/codeMirror/index.jsx
@@ -47,20 +47,19 @@ StructuredOutput.propTypes = {
  * @arg {[][]{line: Int}} ranges
  * @return {[String]} Consumable classNames
  */
-const highlightedLines = ranges => {
+const highlightedLines = (ranges, totalLength) => {
   const highlights = [];
 
   ranges.forEach(([anchor, head]) => {
     const end = head.line;
     let position = anchor.line;
-
-    while (position <= end) {
+    while (position < end) {
       highlights[position] = 'cm-highlight';
       position += 1;
     }
   });
 
-  for (let i = 0; i < highlights.length; i += 1) {
+  for (let i = 0; i < totalLength; i += 1) {
     if (!highlights[i]) highlights[i] = 'cm-overlay';
   }
 
@@ -88,7 +87,7 @@ const StyledSyntaxHighlighter = ({ output, ranges }) => {
     }
   });
 
-  const highlights = ranges && ranges.length ? highlightedLines(ranges) : [];
+  const highlights = ranges && ranges.length ? highlightedLines(ranges, gutteredOutput.length) : [];
   return (
     <div className="CodeMirror cm-s-material-palenight">
       <StructuredOutput gutteredInput={gutteredOutput} highlights={highlights} />

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 },`
`25`	`26`	`{ ch: 0, line: 3 },`
`26`		`- { ch: 0, line: 5 },`
`27`	`27`	`],`
`28`	`28`	`],`
`29`	`29`	`}`