Add file highlight

Author: Yang Zhen

app/commands/commandBindings/file.js

@@ -9,6 +9,7 @@ import { notify } from '../../components/Notification/actions'
 import i18n from 'utils/createI18n'
 import icons from 'file-icons-js'
 import { toJS, when } from 'mobx'
+import emitter, { FILE_HIGHLIGHT } from 'utils/emitter'
 
 const nodeToNearestDirPath = (node) => {
   if (!node) node = { isDir: true, path: '/' } // fake a root node if !node
@@ -151,6 +152,11 @@ const fileCommands = {
       openFile(c.data)
     }
   },
+  'file:highlight_line': (c) => {
+    console.log('file:highlight_line', c)
+    // const { path, lineNumber } = c.data
+    emitter.emit(FILE_HIGHLIGHT, c.data)
+  },
   'file:new_file': (c) => {
     const node = c.context
     const path = nodeToNearestDirPath(node)

app/components/Editor/components/CodeEditor/BaseCodeEditor.jsx

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { Editor } from 'components/Editor/state'
+import { emitter, E } from 'utils'
 
 class BaseCodeEditor extends Component {
   constructor (props) {
@@ -12,6 +13,7 @@ class BaseCodeEditor extends Component {
     this.editor = editor
     this.cm = this.editor.cm
     this.cmDOM = this.cm.getWrapperElement()
+    this.highlight = this.highlight.bind(this)
   }
 
   componentDidMount () {
@@ -21,11 +23,14 @@ class BaseCodeEditor extends Component {
     // `setSize()` and `refresh()` are required to correctly render cm
     cm.setSize('100%', '100%')
     cm.refresh()
-    const scrollLine = this.editor.scrollLine
-    setTimeout(() => {
-      cm.scrollIntoView({ line: scrollLine, ch: 0 })
-      cm.focus()
-    }, 0)
+    // const scrollLine = this.editor.scrollLine
+    // setTimeout(() => {
+    //   cm.scrollIntoView({ line: scrollLine, ch: 0 })
+    //   cm.setCursor({ line: scrollLine, ch: 0 })
+    //   cm.focus()
+    // }, 100)
+    
+    emitter.on(E.FILE_HIGHLIGHT, this.highlight)
   }
 
   render () {
@@ -37,6 +42,17 @@ class BaseCodeEditor extends Component {
   componentWillUnmount () {
     const async = true
     this.editor.destroy(async)
+    emitter.removeListener(E.FILE_HIGHLIGHT, this.highlight)
+  }
+
+  highlight (data) {
+    const { path, lineNumber } = data
+    if (this.editor.file && this.editor.file.path === path) {
+      if (this.breakpointHighlight) {
+        this.cm.removeLineClass(this.breakpointHighlight, 'background', 'breakpoint-highlight')
+      }
+      this.breakpointHighlight = this.cm.addLineClass(lineNumber - 1, 'background', 'breakpoint-highlight')
+    }
   }
 }
 

app/components/Editor/components/CodeEditor/mixins/basicMixin.jsx

@@ -62,7 +62,10 @@ export default {
       scroll: (cm) => {
         const { editor } = this.props
         const { top, clientHeight } = cm.getScrollInfo()
-        editor.scrollLine = Math.floor((top + clientHeight) / cm.defaultTextHeight()) - 1
+        editor.update({
+          scrollLine: Math.floor((top + clientHeight) / cm.defaultTextHeight()) - 1
+        })
+        // editor.scrollLine = Math.floor((top + clientHeight) / cm.defaultTextHeight()) - 1
       },
     }
   },

app/components/Editor/components/CodeEditor/mixins/eslintMixin/eslintMixin.js

@@ -34,7 +34,11 @@ export default {
   },
   componentDidMount () {
     const cm = this.cm
-    cm.setOption('gutters', ['CodeMirror-lint-markers'])
+    const gutters = cm.options.gutters
+    if (gutters.findIndex(item => item === 'CodeMirror-lint-markers') < 0) {
+      cm.setOption('gutters', ['CodeMirror-lint-markers', ...gutters])
+    }
+    // cm.setOption('gutters', ['CodeMirror-lint-markers'])
     cm.setOption('lint', lintOption)
   }
 }

app/components/Editor/state.js

@@ -80,7 +80,22 @@ class Editor {
     if (this.content) {
       cm.setValue(this.content)
       cm.clearHistory()
+      const scrollLine = this.scrollLine || 0
+      if (scrollLine > 0) {
+        cm.scrollIntoView({ line: scrollLine, ch: 0 })
+        // cm.setCursor({ line: scrollLine - 1, ch: 0 })
+      }
+      cm.focus()
     }
+
+    autorun(() => {
+      const cursorLine = this.cursorLine || 0
+      if (cursorLine > 0) {
+        cm.scrollIntoView({ line: cursorLine - 1, ch: 0 })
+        cm.setCursor({ line: cursorLine - 1, ch: 0 })
+      }
+    })
+
     if (!this.file) {
       cm.setCursor(cm.posFromIndex(this.content.length))
     }

app/styles/core-ui/Editor.styl

@@ -11,6 +11,10 @@
   line-height: 1.3;
 }
 
+.CodeMirror .breakpoint-highlight {
+  background: red;  
+}
+
 .status-bar-editor-widgets {
   display: flex;
   align-items: stretch;

app/utils/emitter/index.js

@@ -7,3 +7,4 @@ export const THEME_CHANGED = 'THEME_CHANGED'
 export const SOCKET_TRIED_FAILED = 'SOCKET_TRIED_FAILED'
 export const SOCKET_RETRY = 'SOCKET_RETRY'
 export const FILE_CHANGE = 'FILE_CHANGE'
+export const FILE_HIGHLIGHT = 'FILE_HIGHLIGHT'