diff --git a/spec/text-editor-component-spec.js b/spec/text-editor-component-spec.js index 95c2eb4fe..1d717f753 100644 --- a/spec/text-editor-component-spec.js +++ b/spec/text-editor-component-spec.js @@ -254,6 +254,37 @@ describe('TextEditorComponent', () => { expect(cursorNodes.length).toBe(0) }) + it('blinks cursors when the editor is focused and the cursors are not moving', async () => { + assertDocumentFocused() + + const {component, element, editor} = buildComponent() + editor.addCursorAtScreenPosition([1, 0]) + element.focus() + await component.getNextUpdatePromise() + const [cursor1, cursor2] = element.querySelectorAll('.cursor') + + expect(getComputedStyle(cursor1).opacity).toBe('1') + expect(getComputedStyle(cursor2).opacity).toBe('1') + + await conditionPromise(() => + getComputedStyle(cursor1).opacity === '0' && getComputedStyle(cursor2).opacity === '0' + ) + + await conditionPromise(() => + getComputedStyle(cursor1).opacity === '1' && getComputedStyle(cursor2).opacity === '1' + ) + + await conditionPromise(() => + getComputedStyle(cursor1).opacity === '0' && getComputedStyle(cursor2).opacity === '0' + ) + + editor.moveRight() + await component.getNextUpdatePromise() + + expect(getComputedStyle(cursor1).opacity).toBe('1') + expect(getComputedStyle(cursor2).opacity).toBe('1') + }) + it('places the hidden input element at the location of the last cursor if it is visible', async () => { const {component, element, editor} = buildComponent({height: 60, width: 120, rowsPerTile: 2}) const {hiddenInput} = component.refs diff --git a/src/text-editor-component.js b/src/text-editor-component.js index 27e14191f..17562e47f 100644 --- a/src/text-editor-component.js +++ b/src/text-editor-component.js @@ -61,6 +61,7 @@ class TextEditorComponent { this.measurements = null this.visible = false this.cursorsBlinking = false + this.cursorsBlinkedOff = false this.nextUpdateOnlyBlinksCursors = null this.horizontalPositionsToMeasure = new Map() // Keys are rows with positions we want to measure, values are arrays of columns to measure this.horizontalPixelPositionsByScreenLineId = new Map() // Values are maps from column to horiontal pixel positions @@ -512,7 +513,7 @@ class TextEditorComponent { } getCursorsClassName () { - return this.cursorsVisible ? 'cursors' : 'cursors blink-off' + return this.cursorsBlinkedOff ? 'cursors blink-off' : 'cursors' } renderPlaceholderText () { @@ -1426,7 +1427,7 @@ class TextEditorComponent { window.clearTimeout(this.resumeCursorBlinkingTimeoutHandle) } this.resumeCursorBlinkingTimeoutHandle = window.setTimeout(() => { - this.cursorsVisible = false + this.cursorsBlinkedOff = true this.startCursorBlinking() this.resumeCursorBlinkingTimeoutHandle = null }, CURSOR_BLINK_RESUME_DELAY) @@ -1434,7 +1435,7 @@ class TextEditorComponent { stopCursorBlinking () { if (this.cursorsBlinking) { - this.cursorsVisible = true + this.cursorsBlinkedOff = false this.cursorsBlinking = false window.clearInterval(this.cursorBlinkIntervalHandle) this.cursorBlinkIntervalHandle = null @@ -1445,7 +1446,7 @@ class TextEditorComponent { startCursorBlinking () { if (!this.cursorsBlinking) { this.cursorBlinkIntervalHandle = window.setInterval(() => { - this.cursorsVisible = !this.cursorsVisible + this.cursorsBlinkedOff = !this.cursorsBlinkedOff this.scheduleUpdate(true) }, CURSOR_BLINK_PERIOD / 2) this.cursorsBlinking = true