Fix: highlight indent guides with wrapped lines (#5621)

* fix: highlight indent guides with wrapped lines

* fix: rare cases when indent guide final line was not included to bracketed block

* imrove test for highlight indent guide

Author: mkslanc

src/layer/text.js

@@ -481,7 +481,7 @@ class Text {
             var ranges = this.session.$bracketHighlight.ranges;
             for (var i = 0; i < ranges.length; i++) {
                 if (cursor.row !== ranges[i].start.row) {
-                    this.$highlightIndentGuideMarker.end = ranges[i].start.row;
+                    this.$highlightIndentGuideMarker.end = ranges[i].start.row + 1;
                     if (cursor.row > ranges[i].start.row) {
                         this.$highlightIndentGuideMarker.dir = -1;
                     }
@@ -511,25 +511,25 @@ class Text {
     }
 
     $clearActiveIndentGuide() {
-        var cells = this.$lines.cells;
-        for (var i = 0; i < cells.length; i++) {
-            var cell = cells[i];
-            var childNodes = cell.element.childNodes;
-            if (childNodes.length > 0) {
-                for (var j = 0; j < childNodes.length; j++) {
-                    if (childNodes[j].classList && childNodes[j].classList.contains("ace_indent-guide-active")) {
-                        childNodes[j].classList.remove("ace_indent-guide-active");
-                        break;
-                    }
-                }
-            }
-        }
+        var activeIndentGuides = this.element.querySelectorAll(".ace_indent-guide-active");
+        activeIndentGuides.forEach(el => {
+            el.classList.remove("ace_indent-guide-active");
+        });
     }
 
     $setIndentGuideActive(cell, indentLevel) {
         var line = this.session.doc.getLine(cell.row);
         if (line !== "") {
-            var childNodes = cell.element.childNodes;
+            let element = cell.element;
+            if (cell.element.classList && cell.element.classList.contains("ace_line_group")) {
+                if (cell.element.childNodes.length > 0) {
+                    element = cell.element.childNodes[0];
+                }
+                else {
+                    return;
+                }
+            }
+            var childNodes = element.childNodes;
             if (childNodes) {
                 let node = childNodes[indentLevel - 1];
                 if (node && node.classList && node.classList.contains("ace_indent-guide")) node.classList.add(
@@ -558,7 +558,7 @@ class Text {
                 for (var i = cells.length - 1; i >= 0; i--) {
                     var cell = cells[i];
                     if (this.$highlightIndentGuideMarker.end && cell.row < this.$highlightIndentGuideMarker.start) {
-                        if (cell.row <= this.$highlightIndentGuideMarker.end) break;
+                        if (cell.row < this.$highlightIndentGuideMarker.end) break;
                         this.$setIndentGuideActive(cell, indentLevel);
                     }
                 }

src/virtual_renderer_test.js

@@ -289,10 +289,11 @@ module.exports = {
         editor._signal("input", {});
         assert.equal(editor.renderer.content.textContent, "only visible for empty value");
     },
-    "test: highlight indent guide": function () {
+    "test: highlight indent guide": function (done) {
         editor.session.setValue(
             "function Test() {\n" + "    function Inner() {\n" + "        \n" + "        \n" + "    }\n" + "}");
         editor.setOption("highlightIndentGuides", false);
+        editor.setOption("wrap", 10); // to make sure higlight works with wrapped lines
         editor.session.selection.$setSelection(1, 22, 1, 22);
         editor.resize(true);
 
@@ -310,6 +311,14 @@ module.exports = {
         editor.session.selection.$setSelection(1, 15, 1, 15);
         editor.resize(true);
         assertIndentGuides( 0);
+
+        editor.session.selection.clearSelection();
+        editor.session.selection.$setSelection(4, 5, 4, 5);
+
+        setTimeout(() => {
+            assertIndentGuides( 2);
+            done();
+        }, 100);
     },
     "test annotation marks": function() {
         function findPointFillStyle(imageData, x, y) {