From 0a46c9ad7bf68d6a0e8df8b992c3bd726470602b Mon Sep 17 00:00:00 2001 From: Antonio Scandurra Date: Tue, 13 Jun 2017 12:30:11 +0200 Subject: [PATCH] Prevent block decorations from mistakenly wrapping during measurements Before rendering block decorations, we read their heights by putting them into a special div called `blockDecorationMeasurementsArea`. Previously, this div was not explicitly sized, which was causing decorations to wrap while being measured but not when actually rendering them. This commit fixes this inconsistency by explicitly styling the measurement area so that it has the same width as the component scroll width. --- spec/text-editor-component-spec.js | 9 +++++++++ src/text-editor-component.js | 3 ++- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/spec/text-editor-component-spec.js b/spec/text-editor-component-spec.js index 23e5eb8f9..7c211ef29 100644 --- a/spec/text-editor-component-spec.js +++ b/spec/text-editor-component-spec.js @@ -2035,6 +2035,15 @@ describe('TextEditorComponent', () => { expect(item6.previousSibling).toBe(lineNodeForScreenRow(component, 12)) }) + 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()) + + element.style.width = '800px' + await component.getNextUpdatePromise() + expect(component.refs.blockDecorationMeasurementArea.offsetWidth).toBe(component.getScrollWidth()) + }) + function createBlockDecorationAtScreenRow(editor, screenRow, {height, margin, position}) { const marker = editor.markScreenPosition([screenRow, 0], {invalidate: 'never'}) const item = document.createElement('div') diff --git a/src/text-editor-component.js b/src/text-editor-component.js index bdef7130e..4e52c5d08 100644 --- a/src/text-editor-component.js +++ b/src/text-editor-component.js @@ -678,7 +678,8 @@ class TextEditorComponent { style: { contain: 'strict', position: 'absolute', - visibility: 'hidden' + visibility: 'hidden', + width: this.getScrollWidth() + 'px' } }) }