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

__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);
   });
 });

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 },
             ],
           ],
         }

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} />