fix: use dom builder for gutter tooltip and inline widget (#5601)

* fix: use dom builder for gutter tooltip and inline widget
ajaxorg · Jun 27, 2024 · e81a299 · e81a299
1 parent e78b1ac
commit e81a299
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 15 deletions.
diff --git a/src/autocomplete/inline_test.js b/src/autocomplete/inline_test.js
@@ -101,8 +101,7 @@ module.exports = {
         inline.show(editor, completions[3], "f");
         editor.renderer.$loop._flush();
         assert.strictEqual(getAllLines(), textBase + "function foo() {");
-        assert.strictEqual(editor.renderer.$ghostTextWidget.html, "<div>        console.log('test');</div><div>    }</div>");
-        assert.strictEqual(editor.renderer.$ghostTextWidget.el.innerHTML, "<div>        console.log('test');</div><div>    }</div>");
+        assert.strictEqual(editor.renderer.$ghostTextWidget.el.innerHTML, `<div>        console.log('test');</div><div>    }</div>`);
         done();
     },
     "test: boundary tests": function(done) {

diff --git a/src/ext/inline_autocomplete_test.js b/src/ext/inline_autocomplete_test.js
@@ -30,7 +30,7 @@ var getAllLines = function() {
         return node.textContent;
     }).join("\n");
     if (editor.renderer.$ghostTextWidget) {
-        return text + "\n" + editor.renderer.$ghostTextWidget.html;
+        return text + "\n" + editor.renderer.$ghostTextWidget.el.innerHTML;
     }
     return text;
 };
@@ -358,7 +358,7 @@ module.exports = {
         typeAndChange("u", "n");
         editor.renderer.$loop._flush();
         assert.strictEqual(autocomplete.isOpen(), true);
-        assert.equal(getAllLines(), "function foo() {\n<div>    console.log('test');</div><div>}</div>");
+        assert.equal(getAllLines(), `function foo() {\n<div>    console.log('test');</div><div>}</div>`);
 
         typeAndChange("d");
         editor.renderer.$loop._flush();

diff --git a/src/mouse/default_gutter_handler.js b/src/mouse/default_gutter_handler.js
@@ -219,13 +219,32 @@ class GutterTooltip extends Tooltip {
 
         // Construct the contents of the tooltip.
         for (let i = 0; i < annotation.text.length; i++) {
-            var line = `<span class='ace_${annotation.type[i]} ${iconClassName}' aria-label='${GutterTooltip.annotationLabels[annotation.type[i].replace("_fold","")].singular}' role=img> </span> ${annotation.text[i]}`;
-            annotationMessages[annotation.type[i].replace("_fold","")].push(line);
+            var lineElement = dom.createElement("span");
+
+            var iconElement = dom.createElement("span");
+            iconElement.classList.add(...[`ace_${annotation.type[i]}`, iconClassName]);
+            iconElement.setAttribute("aria-label", `${GutterTooltip.annotationLabels[annotation.type[i].replace("_fold","")].singular}`);
+            iconElement.setAttribute("role", "img");
+            // Set empty content to the img span to get it to show up
+            iconElement.appendChild(dom.createTextNode(" "));
+
+            lineElement.appendChild(iconElement);
+            lineElement.appendChild(dom.createTextNode(`${annotation.text[i]}`));
+            lineElement.appendChild(dom.createElement("br"));
+
+            annotationMessages[annotation.type[i].replace("_fold","")].push(lineElement);
         }
-        var tooltipContent = [].concat(annotationMessages.error, annotationMessages.warning, annotationMessages.info).join("<br>");
-
-        this.setHtml(tooltipContent);
-        this.$element.setAttribute("aria-live", "polite");
+
+        // Clear the current tooltip content
+        var tooltipElement = this.getElement();
+        dom.removeChildren(tooltipElement);
+
+        // Update the tooltip content
+        annotationMessages.error.forEach(el => tooltipElement.appendChild(el));
+        annotationMessages.warning.forEach(el => tooltipElement.appendChild(el));
+        annotationMessages.info.forEach(el => tooltipElement.appendChild(el));
+
+        tooltipElement.setAttribute("aria-live", "polite");
 
         if (!this.isOpen) {
             this.setTheme(this.editor.renderer.theme);

diff --git a/src/virtual_renderer.js b/src/virtual_renderer.js
@@ -1776,13 +1776,21 @@ class VirtualRenderer {
                 column: insertPosition. column
             }
         };
+
+        var widgetDiv = dom.createElement("div");
         if (textChunks.length > 1) {
-            var divs = textChunks.slice(1).map(el => {
-                return `<div${el.wrapped ? ' class="ghost_text_line_wrapped"': ""}>${el.text}</div>`;
+            textChunks.slice(1).forEach(el => {
+                var chunkDiv = dom.createElement("div");
+
+                // If the line is wider than the viewport, wrap the line
+                if (el.wrapped) chunkDiv.className = "ghost_text_line_wrapped";
+
+                chunkDiv.appendChild(dom.createTextNode(el.text));
+                widgetDiv.appendChild(chunkDiv);
             });
 
             this.$ghostTextWidget = {
-                html: divs.join(""),
+                el: widgetDiv,
                 row: insertPosition.row,
                 column: insertPosition.column,
                 className: "ace_ghost_text"

diff --git a/src/virtual_renderer_test.js b/src/virtual_renderer_test.js
@@ -376,7 +376,7 @@ module.exports = {
         editor.renderer.$loop._flush();
         assert.equal(editor.renderer.content.textContent, "abcdefGhost1");
 
-        assert.equal(editor.session.lineWidgets[0].el.innerHTML, "<div>Ghost2</div><div>Ghost3</div>");
+        assert.equal(editor.session.lineWidgets[0].el.innerHTML, `<div>Ghost2</div><div>Ghost3</div>`);
 
         editor.removeGhostText();
 
@@ -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();