Account for vertical scrollbar width when soft-wrapping lines

spec/text-editor-component-spec.js

@@ -418,6 +418,14 @@ describe('TextEditorComponent', () => {
       expect(scrollContainer.clientWidth).toBe(scrollContainer.scrollWidth)
     })
 
+    it('accounts for the width of the vertical scrollbar when soft-wrapping lines', async () => {
+      const {component, element, editor} = buildComponent({height: 200, width: 200, attach: false, text: 'a'.repeat(300)})
+      editor.setSoftWrapped(true)
+      jasmine.attachToDOM(element)
+      expect(Math.floor(component.getScrollContainerClientWidth() / component.getBaseCharacterWidth())).toBe(20)
+      expect(editor.lineLengthForScreenRow(0)).toBe(20)
+    })
+
     it('decorates the line numbers of folded lines', async () => {
       const {component, element, editor} = buildComponent()
       editor.foldBufferRow(1)

src/text-editor-component.js

@@ -81,6 +81,7 @@ class TextEditorComponent {
     this.didMouseDownOnContent = this.didMouseDownOnContent.bind(this)
     this.lineTopIndex = new LineTopIndex()
     this.updateScheduled = false
+    this.suppressUpdates = false
     this.hasInitialMeasurements = false
     this.measurements = {
       lineHeight: 0,
@@ -175,6 +176,7 @@ class TextEditorComponent {
 
   scheduleUpdate (nextUpdateOnlyBlinksCursors = false) {
     if (!this.visible) return
+    if (this.suppressUpdates) return
 
     this.nextUpdateOnlyBlinksCursors =
       this.nextUpdateOnlyBlinksCursors !== false && nextUpdateOnlyBlinksCursors === true
@@ -219,6 +221,7 @@ class TextEditorComponent {
     this.measureBlockDecorations()
 
     this.measuredContent = false
+    this.updateModelSoftWrapColumn()
     this.updateSyncBeforeMeasuringContent()
     if (useScheduler === true) {
       const scheduler = etch.getScheduler()
@@ -1945,6 +1948,13 @@ class TextEditorComponent {
     return marginInBaseCharacters * this.getBaseCharacterWidth()
   }
 
+  updateModelSoftWrapColumn () {
+    this.suppressUpdates = true
+    this.props.model.setEditorWidthInChars(this.getScrollContainerClientWidthInBaseCharacters())
+    this.props.model.setEditorWidthInChars(this.getScrollContainerClientWidthInBaseCharacters())
+    this.suppressUpdates = false
+  }
+
   // This method exists because it existed in the previous implementation and some
   // package tests relied on it
   measureDimensions () {
@@ -2013,7 +2023,6 @@ class TextEditorComponent {
     const clientContainerWidth = this.refs.clientContainer.offsetWidth
     if (clientContainerWidth !== this.measurements.clientContainerWidth) {
       this.measurements.clientContainerWidth = clientContainerWidth
-      this.props.model.setEditorWidthInChars(this.getScrollContainerWidth() / this.getBaseCharacterWidth())
       return true
     } else {
       return false
@@ -2436,6 +2445,10 @@ class TextEditorComponent {
     return Math.round(this.getLongestLineWidth() + this.getBaseCharacterWidth())
   }
 
+  getScrollContainerClientWidthInBaseCharacters () {
+    return Math.floor(this.getScrollContainerClientWidth() / this.getBaseCharacterWidth())
+  }
+
   getGutterContainerWidth () {
     return this.measurements.gutterContainerWidth
   }