Extract selection update from updateStatusbar

public/js/index.js

@@ -320,33 +320,10 @@ window.editor = editor
 var inlineAttach = inlineAttachment.editors.codemirror4.attach(editor)
 defaultTextHeight = parseInt($('.CodeMirror').css('line-height'))
 
-var selection = null
-
 function updateStatusBar () {
   if (!editorInstance.statusBar) return
   var cursor = editor.getCursor()
   var cursorText = 'Line ' + (cursor.line + 1) + ', Columns ' + (cursor.ch + 1)
-  if (selection) {
-    var anchor = selection.anchor
-    var head = selection.head
-    var start = head.line <= anchor.line ? head : anchor
-    var end = head.line >= anchor.line ? head : anchor
-    var selectionText = ' — Selected '
-    var selectionCharCount = Math.abs(head.ch - anchor.ch)
-    // borrow from brackets EditorStatusBar.js
-    if (start.line !== end.line) {
-      var lines = end.line - start.line + 1
-      if (end.ch === 0) {
-        lines--
-      }
-      selectionText += lines + ' lines'
-    } else if (selectionCharCount > 0) {
-      selectionText += selectionCharCount + ' columns'
-    }
-    if (start.line !== end.line || selectionCharCount > 0) {
-      cursorText += selectionText
-    }
-  }
   editorInstance.statusCursor.text(cursorText)
   var fileText = ' — ' + editor.lineCount() + ' Lines'
   editorInstance.statusFile.text(fileText)
@@ -2726,9 +2703,38 @@ editorInstance.on('cursorActivity', function (cm) {
   updateStatusBar()
   cursorActivity()
 })
+
+editorInstance.on('beforeSelectionChange', updateStatusBar)
 editorInstance.on('beforeSelectionChange', function (doc, selections) {
-  if (selections) { selection = selections.ranges[0] } else { selection = null }
+  // check selection and whether the statusbar has added
-  updateStatusBar()
+  if (selections && editorInstance.statusSelection) {
+    const selection = selections.ranges[0]
+
+    const anchor = selection.anchor
+    const head = selection.head
+    const start = head.line <= anchor.line ? head : anchor
+    const end = head.line >= anchor.line ? head : anchor
+    const selectionCharCount = Math.abs(head.ch - anchor.ch)
+
+    let selectionText = ' — Selected '
+
+    // borrow from brackets EditorStatusBar.js
+    if (start.line !== end.line) {
+      var lines = end.line - start.line + 1
+      if (end.ch === 0) {
+        lines--
+      }
+      selectionText += lines + ' lines'
+    } else if (selectionCharCount > 0) {
+      selectionText += selectionCharCount + ' columns'
+    }
+
+    if (start.line !== end.line || selectionCharCount > 0) {
+      editorInstance.statusSelection.text(selectionText)
+    } else {
+      editorInstance.statusSelection.text('')
+    }
+  }
 })
 
 var cursorActivity = _.debounce(cursorActivityInner, cursorActivityDebounce)

public/js/lib/editor/index.js

@@ -144,7 +144,8 @@ export default class Editor {
       return
     }
     this.statusBar = $(this.statusBarTemplate)
-    this.statusCursor = this.statusBar.find('.status-cursor')
+    this.statusCursor = this.statusBar.find('.status-cursor > .status-line-column')
+    this.statusSelection = this.statusBar.find('.status-cursor > .status-selection')
     this.statusFile = this.statusBar.find('.status-file')
     this.statusIndicators = this.statusBar.find('.status-indicators')
     this.statusIndent = this.statusBar.find('.status-indent')

public/views/statusbar.html

@@ -1,6 +1,9 @@
 <div class="status-bar">
     <div class="status-info">
-        <div class="status-cursor"></div>
+        <div class="status-cursor">
+          <span class="status-line-column"></span>
+          <span class="status-selection"></span>
+        </div>
         <div class="status-file"></div>
     </div>
     <div class="status-indicators">
@@ -35,4 +38,4 @@
             <a class="ui-spellcheck-toggle" title="Toggle spellcheck"><i class="fa fa-check fa-fw"></i></a>
         </div>
     </div>
-</div>
+</div>