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();