diff --git a/src/autocomplete/inline_test.js b/src/autocomplete/inline_test.js index edffcf76e74..9297a8badb3 100644 --- a/src/autocomplete/inline_test.js +++ b/src/autocomplete/inline_test.js @@ -50,6 +50,10 @@ var completions = [ { value: "long\nlong\nlong\nlong\nlong\nlong".repeat(100), score: 0 + }, + { + value: "foo suggestion with a\n\n\ngap", + score: 0 } ]; @@ -305,6 +309,14 @@ module.exports = { }, 50); }, 50); }, + "test: renders multi-line ghost text with empty lines": function(done) { + assert.equal(editor.renderer.$ghostTextWidget, null); + inline.show(editor, completions[8], "f"); + editor.renderer.$loop._flush(); + assert.strictEqual(getAllLines(), textBase + "foo suggestion with a"); + assert.strictEqual(editor.renderer.$ghostTextWidget.el.innerHTML, `
gap
`); + done(); + }, tearDown: function() { inline.destroy(); editor.destroy(); diff --git a/src/virtual_renderer.js b/src/virtual_renderer.js index 61796f29401..74108dadec2 100644 --- a/src/virtual_renderer.js +++ b/src/virtual_renderer.js @@ -1785,6 +1785,10 @@ class VirtualRenderer { // If the line is wider than the viewport, wrap the line if (el.wrapped) chunkDiv.className = "ghost_text_line_wrapped"; + // If a given line doesn't have text (e.g. it's a line of whitespace), set a space as the + // textcontent so that browsers render the empty line div. + if (el.text.length === 0) el.text = " "; + chunkDiv.appendChild(dom.createTextNode(el.text)); widgetDiv.appendChild(chunkDiv); }); diff --git a/src/virtual_renderer_test.js b/src/virtual_renderer_test.js index 03fda2cfb69..912a91e4b48 100644 --- a/src/virtual_renderer_test.js +++ b/src/virtual_renderer_test.js @@ -395,7 +395,7 @@ module.exports = { editor.renderer.$loop._flush(); assert.equal(editor.renderer.content.textContent, "abcdefThis is a long test text that is longer than "); - assert.equal(editor.session.lineWidgets[0].el.innerHTML, `
30 characters
Ghost3
`); + assert.equal(editor.session.lineWidgets[0].el.innerHTML, `
30 characters
Ghost3
`); editor.removeGhostText();