Add line highlighting to CodeMirror

Author: Ives van Hoorne

src/app/components/sandbox/CodeEditor/CodeMirror.js

@@ -32,6 +32,7 @@ type Props = {
   modules: Array,
   directories: Array,
   hideNavigation: boolean,
+  highlightedLines: ?Array<string>,
 };
 
 const Container = styled.div`
@@ -141,7 +142,7 @@ const CodeContainer = styled.div`
   }
 
   .CodeMirror-activeline-background {
-    background: #374140;
+    background: rgba(0, 0, 0, 0.2);
   }
   .CodeMirror-matchingbracket {
     text-decoration: underline;
@@ -161,6 +162,10 @@ const CodeContainer = styled.div`
     animation: ${fadeInAnimation} 0.3s;
     background-color: #561011;
   }
+
+  div.cm-line-highlight.CodeMirror-linebackground {
+    background-color: rgba(0, 0, 0, 0.3);
+  }
 `;
 
 const handleError = (
@@ -195,6 +200,16 @@ const handleError = (
   }
 };
 
+const highlightLines = (
+  cm: typeof CodeMirror,
+  highlightedLines: Array<string>
+) => {
+  console.log(highlightedLines); // eslint-disable-line
+  highlightedLines.forEach(line => {
+    cm.addLineClass(+line, 'background', 'cm-line-highlight');
+  });
+};
+
 type State = {
   fuzzySearchEnabled: boolean,
 };
@@ -300,7 +315,7 @@ export default class CodeEditor extends React.Component<Props, State> {
   };
 
   getCodeMirror = async (el: Element) => {
-    const { code, id, title } = this.props;
+    const { code, id, title, highlightedLines } = this.props;
     if (!this.props.onlyViewMode) {
       CodeMirror.commands.save = this.handleSaveCode;
     }
@@ -315,6 +330,11 @@ export default class CodeEditor extends React.Component<Props, State> {
     } else {
       this.codemirror.setOption('readOnly', true);
     }
+
+    console.log(this.props); // eslint-disable-line
+    if (highlightedLines) {
+      highlightLines(this.codemirror, highlightedLines);
+    }
   };
 
   setCodeMirrorPreferences = async () => {

src/common/__snapshots__/url.test.js.snap

@@ -9,6 +9,7 @@ Object {
   "isEditorScreen": false,
   "isInProjectView": true,
   "isPreviewScreen": false,
+  "isSplitScreen": false,
   "useCodeMirror": false,
 }
 `;
@@ -23,6 +24,7 @@ Object {
   "isEditorScreen": true,
   "isInProjectView": true,
   "isPreviewScreen": false,
+  "isSplitScreen": false,
   "useCodeMirror": false,
 }
 `;
@@ -36,6 +38,7 @@ Object {
   "isEditorScreen": false,
   "isInProjectView": true,
   "isPreviewScreen": false,
+  "isSplitScreen": false,
   "useCodeMirror": false,
 }
 `;
@@ -49,6 +52,7 @@ Object {
   "isEditorScreen": false,
   "isInProjectView": true,
   "isPreviewScreen": false,
+  "isSplitScreen": false,
   "useCodeMirror": false,
 }
 `;
@@ -62,6 +66,7 @@ Object {
   "isEditorScreen": false,
   "isInProjectView": true,
   "isPreviewScreen": false,
+  "isSplitScreen": false,
   "useCodeMirror": false,
 }
 `;
@@ -76,6 +81,7 @@ Object {
   "isEditorScreen": false,
   "isInProjectView": true,
   "isPreviewScreen": false,
+  "isSplitScreen": false,
   "useCodeMirror": false,
 }
 `;
@@ -89,6 +95,7 @@ Object {
   "isEditorScreen": true,
   "isInProjectView": true,
   "isPreviewScreen": false,
+  "isSplitScreen": false,
   "useCodeMirror": false,
 }
 `;
@@ -102,6 +109,7 @@ Object {
   "isEditorScreen": false,
   "isInProjectView": true,
   "isPreviewScreen": true,
+  "isSplitScreen": false,
   "useCodeMirror": false,
 }
 `;

src/common/url.js

@@ -19,6 +19,15 @@ export const getSandboxOptions = (url: string) => {
     result.fontSize = +fontSizeMatch[3];
   }
 
+  const highlightMatch = url.match(/(\?|&)(highlights)=([^&]+)/);
+  if (highlightMatch) {
+    const lineHighlightsMatch = highlightMatch[3].match(/{(.*)}/);
+
+    if (lineHighlightsMatch) {
+      result.highlightedLines = lineHighlightsMatch[1].split(',');
+    }
+  }
+
   const editorSizeMatch = url.match(/(\?|&)(editorsize)=([^&]+)/);
   if (editorSizeMatch) {
     result.editorSize = +editorSizeMatch[3];

src/embed/App.js

@@ -61,6 +61,7 @@ type State = {
   enableEslint: boolean,
   useCodeMirror: boolean,
   editorSize: number,
+  highlightedLines: Array<string>,
 };
 
 export default class App extends React.PureComponent<{}, State> {
@@ -79,6 +80,7 @@ export default class App extends React.PureComponent<{}, State> {
       enableEslint,
       useCodeMirror,
       editorSize,
+      highlightedLines,
     } = getSandboxOptions(document.location.href);
 
     this.state = {
@@ -96,6 +98,7 @@ export default class App extends React.PureComponent<{}, State> {
       enableEslint,
       useCodeMirror,
       editorSize,
+      highlightedLines: highlightedLines || [],
     };
   }
 
@@ -216,6 +219,7 @@ export default class App extends React.PureComponent<{}, State> {
             useCodeMirror={this.state.useCodeMirror}
             enableEslint={this.state.enableEslint}
             editorSize={this.state.editorSize}
+            highlightedLines={this.state.highlightedLines}
           />
         </Container>
       </ThemeProvider>

src/embed/components/Content.js

@@ -43,6 +43,7 @@ type Props = {
   enableEslint: boolean,
   isInProjectView: boolean,
   editorSize: number,
+  highlightedLines: Array<string>,
 };
 
 type State = {
@@ -181,6 +182,7 @@ export default class Content extends React.PureComponent<Props, State> {
       currentModule,
       hideNavigation,
       editorSize,
+      highlightedLines,
     } = this.props;
 
     const { errors } = this.state;
@@ -231,6 +233,7 @@ export default class Content extends React.PureComponent<Props, State> {
               hideNavigation={hideNavigation}
               canSave={false}
               corrections={[]}
+              highlightedLines={highlightedLines}
             />
           </Split>
         )}