fix: ghost text rendering of empty lines (#5615)

* fix: ghost text rendering of empty lines

Author: akoreman

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, `<div> </div><div> </div><div>gap</div>`);
+        done();
+    },
     tearDown: function() {
         inline.destroy();
         editor.destroy();

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

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, `<div class="ghost_text_line_wrapped">30 characters</div><div></div><div>Ghost3</div>`);
+        assert.equal(editor.session.lineWidgets[0].el.innerHTML, `<div class="ghost_text_line_wrapped">30 characters</div><div> </div><div>Ghost3</div>`);
 
         editor.removeGhostText();