Handle overlapping ranges

Author: AndreasArvidsson

packages/cursorless-org-docs/src/docs/user/languages/components/ScopeVisualizer.tsx

@@ -71,14 +71,7 @@ function renderFixture(
       rangeType === "content"
         ? scope.content
         : (scope.removal ?? scope.content);
-    const range = Range.fromConcise(conciseRange);
-
-    // TODO: fix overlapping ranges
-    if (previousRange != null && previousRange.intersection(range) != null) {
-      // If the previous range intersects with the current range, we skip
-      // highlighting the current range to avoid overlapping highlights
-      break;
-    }
+    let range = Range.fromConcise(conciseRange);
 
     if (scope.domain != null && scope.domain !== conciseRange) {
       highlights.push({
@@ -87,6 +80,19 @@ function renderFixture(
       });
     }
 
+    if (previousRange != null) {
+      const intersection = previousRange.intersection(range);
+
+      if (intersection != null && !intersection.isEmpty) {
+        highlights.push({
+          type: rangeType,
+          range: intersection,
+        });
+
+        range = new Range(intersection.end, range.end);
+      }
+    }
+
     highlights.push({
       type: rangeType,
       range,