From 52ba6c7342f82578ff17fbd1d77124801dd3525b Mon Sep 17 00:00:00 2001
From: Antonio Scandurra <as-cii@github.com>
Date: Mon, 26 Jun 2017 12:18:45 +0200
Subject: [PATCH] Fix measuring block dec. if adding them before updating
 element's width

---
 spec/text-editor-component-spec.js | 25 +++++++++++++++++++++++++
 src/text-editor-component.js       |  6 ++++++
 2 files changed, 31 insertions(+)

diff --git a/spec/text-editor-component-spec.js b/spec/text-editor-component-spec.js
index 7c211ef29..b44838538 100644
--- a/spec/text-editor-component-spec.js
+++ b/spec/text-editor-component-spec.js
@@ -2035,6 +2035,31 @@ describe('TextEditorComponent', () => {
       expect(item6.previousSibling).toBe(lineNodeForScreenRow(component, 12))
     })
 
+    it('measures block decorations correctly when they are added before the component width has been updated', async () => {
+      {
+        const {editor, component, element} = buildComponent({autoHeight: false, width: 500, attach: false})
+        const marker = editor.markScreenPosition([0, 0])
+        const item = document.createElement('div')
+        item.textContent = 'block decoration'
+        const decoration = editor.decorateMarker(marker, {type: 'block', item})
+
+        jasmine.attachToDOM(element)
+        assertLinesAreAlignedWithLineNumbers(component)
+      }
+
+      {
+        const {editor, component, element} = buildComponent({autoHeight: false, width: 800})
+        const marker = editor.markScreenPosition([0, 0])
+        const item = document.createElement('div')
+        item.textContent = 'block decoration that could wrap many times'
+        const decoration = editor.decorateMarker(marker, {type: 'block', item})
+
+        element.style.width = '50px'
+        await component.getNextUpdatePromise()
+        assertLinesAreAlignedWithLineNumbers(component)
+      }
+    })
+
     it('bases the width of the block decoration measurement area on the editor scroll width', async () => {
       const {component, element} = buildComponent({autoHeight: false, width: 150})
       expect(component.refs.blockDecorationMeasurementArea.offsetWidth).toBe(component.getScrollWidth())
diff --git a/src/text-editor-component.js b/src/text-editor-component.js
index 4e52c5d08..d2809f0cd 100644
--- a/src/text-editor-component.js
+++ b/src/text-editor-component.js
@@ -312,6 +312,11 @@ class TextEditorComponent {
         }
       })
 
+      if (this.resizeBlockDecorationMeasurementsArea) {
+        this.resizeBlockDecorationMeasurementsArea = false
+        this.refs.blockDecorationMeasurementArea.style.width = this.getScrollWidth() + 'px'
+      }
+
       this.blockDecorationsToMeasure.forEach((decoration) => {
         const {item} = decoration.getProperties()
         const decorationElement = TextEditor.viewForItem(item)
@@ -1391,6 +1396,7 @@ class TextEditorComponent {
       if (!this.hasInitialMeasurements) this.measureDimensions()
       this.visible = true
       this.props.model.setVisible(true)
+      this.resizeBlockDecorationMeasurementsArea = true
       this.updateSync()
       this.flushPendingLogicalScrollPosition()
     }