Size TextEditorElement according to the autoWidth property

spec/text-editor-component-spec.js

@@ -4368,6 +4368,34 @@ describe('TextEditorComponent', function () {
     })
   })
 
+  describe('width', function () {
+    it('sizes the editor element according to the content width when auto width is true, or according to the container width otherwise', function () {
+      contentNode.style.width = '600px'
+      component.measureDimensions()
+      editor.setText("abcdefghi")
+      runAnimationFrames()
+      expect(wrapperNode.offsetWidth).toBe(contentNode.offsetWidth)
+
+      global.debug = true
+      editor.update({autoWidth: true})
+      runAnimationFrames()
+      const editorWidth1 = wrapperNode.offsetWidth
+      expect(editorWidth1).toBeGreaterThan(0)
+      expect(editorWidth1).toBeLessThan(contentNode.offsetWidth)
+
+      editor.setText("abcdefghijkl")
+      editor.update({autoWidth: true})
+      runAnimationFrames()
+      const editorWidth2 = wrapperNode.offsetWidth
+      expect(editorWidth2).toBeGreaterThan(editorWidth1)
+      expect(editorWidth2).toBeLessThan(contentNode.offsetWidth)
+
+      editor.update({autoWidth: false})
+      runAnimationFrames()
+      expect(wrapperNode.offsetWidth).toBe(contentNode.offsetWidth)
+    })
+  })
+
   describe('when the "mini" property is true', function () {
     beforeEach(function () {
       editor.setMini(true)

spec/text-editor-presenter-spec.coffee

@@ -2676,7 +2676,7 @@ describe "TextEditorPresenter", ->
             expect(getState(presenter).content.width).toBe(3 * 10 + 27 + 1)
 
         describe "when `editor.autoWidth` is true", ->
-          it "equals to the width of the content + the vertical scrollbar width", ->
+          it "equals to the content width + the vertical scrollbar width", ->
             editor.setText('abc\ndef\nghi\njkl')
             presenter = buildPresenter(explicitHeight: 10, contentFrameWidth: 300, verticalScrollbarWidth: 7, baseCharacterWidth: 10)
             expectStateUpdate presenter, -> editor.update({autoWidth: true})

src/text-editor-component.coffee

@@ -129,7 +129,7 @@ class TextEditorComponent
   updateSync: ->
     @updateSyncPreMeasurement()
 
-    @oldState ?= {}
+    @oldState ?= {content: {}}
     @newState = @presenter.getPostMeasurementState()
 
     if @editor.getLastSelection()? and not @editor.getLastSelection().isEmpty()
@@ -149,6 +149,15 @@ class TextEditorComponent
         else
           @domNode.style.height = ''
 
+      if (@newState.content.autoWidth isnt @oldState.content.autoWidth) or (@newState.content.width isnt @oldState.content.width)
+        if @newState.content.autoWidth
+          @hostElement.style.width = @newState.content.width + 'px'
+        else
+          @hostElement.style.width = ''
+
+        @oldState.content.width = @newState.content.width
+        @oldState.content.autoWidth = @newState.content.autoWidth
+
     if @newState.gutters.length
       @mountGutterContainerComponent() unless @gutterContainerComponent?
       @gutterContainerComponent.updateSync(@newState)