Remeasure the longest line's width when the font size changes

spec/text-editor-component-spec.js

@@ -108,8 +108,8 @@ describe('TextEditorComponent', () => {
         await conditionPromise(() => editor.getApproximateLongestScreenRow() === 6)
         await nextUpdatePromise
 
-        // Capture the width first, then update the DOM so we can measure the
-        // longest line.
+        // Capture the width of the lines before requesting the width of
+        // longest line, because making that request forces a DOM update
         const actualWidth = element.querySelector('.lines').style.width
         const expectedWidth = Math.round(
           component.pixelPositionForScreenPosition(Point(6, Infinity)).left +
@@ -3663,6 +3663,31 @@ describe('TextEditorComponent', () => {
       TextEditor.didUpdateStyles()
       await component.getNextUpdatePromise()
     })
+
+    it('updates the width of the lines div based on the longest screen line', async () => {
+      const {component, element, editor} = buildComponent({rowsPerTile: 1, autoHeight: false})
+      editor.setText(
+        'Lorem ipsum dolor sit\n' +
+        'amet, consectetur adipisicing\n' +
+        'elit, sed do\n' +
+        'eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation'
+      )
+      await setEditorHeightInLines(component, 2)
+
+      console.log('update font size >>>>>>>>>>>>>>>');
+      element.style.fontSize = '20px'
+      TextEditor.didUpdateStyles()
+      await component.getNextUpdatePromise()
+
+      // Capture the width of the lines before requesting the width of
+      // longest line, because making that request forces a DOM update
+      const actualWidth = element.querySelector('.lines').style.width
+      const expectedWidth = Math.round(
+        component.pixelPositionForScreenPosition(Point(3, Infinity)).left +
+        component.getBaseCharacterWidth()
+      )
+      expect(actualWidth).toBe(expectedWidth + 'px')
+    })
   })
 
   describe('synchronous updates', () => {

src/text-editor-component.js

@@ -244,6 +244,7 @@ class TextEditorComponent {
 
       this.measureCharacterDimensions()
       this.measureGutterDimensions()
+      this.queryLongestLine()
 
       if (this.getLineHeight() !== originalLineHeight) {
         this.setScrollTopRow(scrollTopRow)
@@ -357,6 +358,7 @@ class TextEditorComponent {
     this.populateVisibleRowRange()
     this.populateVisibleTiles()
     this.queryScreenLinesToRender()
+    this.queryLongestLine()
     this.queryLineNumbersToRender()
     this.queryGuttersToRender()
     this.queryDecorationsToRender()
@@ -832,10 +834,14 @@ class TextEditorComponent {
       this.getRenderedStartRow(),
       this.getRenderedEndRow()
     )
+  }
+
+  queryLongestLine () {
+    const {model} = this.props
 
     const longestLineRow = model.getApproximateLongestScreenRow()
     const longestLine = model.screenLineForScreenRow(longestLineRow)
-    if (longestLine !== this.previousLongestLine) {
+    if (longestLine !== this.previousLongestLine || this.remeasureCharacterDimensions) {
       this.requestLineToMeasure(longestLineRow, longestLine)
       this.longestLineToMeasure = longestLine
       this.previousLongestLine = longestLine