From 26837d65b47f9a636bd8af2d38cc76cd8f677cc0 Mon Sep 17 00:00:00 2001 From: Antonio Scandurra Date: Tue, 13 Mar 2018 12:04:15 +0100 Subject: [PATCH] Clip cursor width when soft-wrap is on and cursor is at the end of line This prevents the parent tile from disabling sub-pixel anti-aliasing. For some reason, adding `overflow: hidden` to the cursor container element doesn't solve the issue, so we're adding this workaround instead. --- spec/text-editor-component-spec.js | 11 +++++++++++ src/text-editor-component.js | 2 +- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/spec/text-editor-component-spec.js b/spec/text-editor-component-spec.js index f2031258f75..5a509229a99 100644 --- a/spec/text-editor-component-spec.js +++ b/spec/text-editor-component-spec.js @@ -564,9 +564,20 @@ describe('TextEditorComponent', () => { it('gives cursors at the end of lines the width of an "x" character', async () => { const {component, element, editor} = buildComponent() + editor.setText('abcde') + await setEditorWidthInCharacters(component, 5.5) + editor.setCursorScreenPosition([0, Infinity]) await component.getNextUpdatePromise() expect(element.querySelector('.cursor').offsetWidth).toBe(Math.round(component.getBaseCharacterWidth())) + + // Clip cursor width when soft-wrap is on and the cursor is at the end of + // the line. This prevents the parent tile from disabling sub-pixel + // anti-aliasing. For some reason, adding overflow: hidden to the cursor + // container doesn't solve this issue so we're adding this workaround instead. + editor.setSoftWrapped(true) + await component.getNextUpdatePromise() + expect(element.querySelector('.cursor').offsetWidth).toBeLessThan(Math.round(component.getBaseCharacterWidth())) }) it('positions and sizes cursors correctly when they are located next to a fold marker', async () => { diff --git a/src/text-editor-component.js b/src/text-editor-component.js index 3e56dd821e8..fe6b9db446c 100644 --- a/src/text-editor-component.js +++ b/src/text-editor-component.js @@ -3522,7 +3522,7 @@ class CursorsAndInputComponent { const cursorStyle = { height: cursorHeight, - width: pixelWidth + 'px', + width: Math.min(pixelWidth, scrollWidth - pixelLeft) + 'px', transform: `translate(${pixelLeft}px, ${pixelTop}px)` } if (extraCursorStyle) Object.assign(cursorStyle, extraCursorStyle)