From 1ae0bdcfb9da4078713d116e93a9c9a935a1258d Mon Sep 17 00:00:00 2001
From: Alice Koreman <a.koreman@outlook.com>
Date: Thu, 18 Jul 2024 12:02:57 +0200
Subject: [PATCH] fix: ghost text rendering of empty lines (#5615)

* fix: ghost text rendering of empty lines
---
 src/autocomplete/inline_test.js | 12 ++++++++++++
 src/virtual_renderer.js         |  4 ++++
 src/virtual_renderer_test.js    |  2 +-
 3 files changed, 17 insertions(+), 1 deletion(-)

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, `<div> </div><div> </div><div>gap</div>`);
+        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, `<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();