Better handling of conflict ranges

Author: AndreasArvidsson

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

@@ -29,7 +29,7 @@ export function Code({
       children = children.replaceAll(" ", "␣").replaceAll("\t", "⭾");
     }
     codeToHtml(children, {
-      lang: languageId,
+      lang: getFallbackLanguage(languageId),
       theme: "nord",
       decorations: getDecorations(highlights),
     })
@@ -83,3 +83,13 @@ function getDecorations(
     };
   });
 }
+
+// Use a fallback language for languages that are not supported by Shiki
+function getFallbackLanguage(languageId: string): string {
+  switch (languageId) {
+    case "scm":
+      return "scheme";
+    default:
+      return languageId;
+  }
+}

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

@@ -66,7 +66,24 @@ function renderFixture(
   rangeType: RangeType,
   renderWhitespace: boolean,
 ) {
+  const highlights = getHighlights(fixture, rangeType);
+  return (
+    <div key={fixture.name}>
+      {fixture.facet}
+      <Code
+        languageId={fixture.languageId}
+        renderWhitespace={renderWhitespace}
+        highlights={highlights}
+      >
+        {fixture.code}
+      </Code>
+    </div>
+  );
+}
+
+function getHighlights(fixture: Fixture, rangeType: RangeType): Highlight[] {
   const highlights: Highlight[] = [];
+  const domainRanges: Range[] = [];
   let previousRange: Range | undefined;
 
   for (const scope of fixture.scopes) {
@@ -76,27 +93,23 @@ function renderFixture(
         : scope.targets.map((t) => t.removal ?? t.content);
     const ranges = conciseRanges.map((r) => Range.fromConcise(r));
 
-    if (scope.domain != null && conciseRanges.some((r) => r !== scope.domain)) {
-      highlights.push({
-        type: "domain",
-        range: Range.fromConcise(scope.domain),
-      });
+    if (scope.domain != null && !conciseRanges.includes(scope.domain)) {
+      domainRanges.push(Range.fromConcise(scope.domain));
     }
 
     for (const r of ranges) {
       let range = r;
 
-      if (previousRange != null) {
-        const intersection = previousRange.intersection(range);
+      const overlap = highlights
+        .map((h) => getOverlap(h.range, range))
+        .find((o) => o != null);
 
-        if (intersection != null && !intersection.isEmpty) {
-          highlights.push({
-            type: rangeType,
-            range: intersection,
-          });
-
-          range = new Range(intersection.end, range.end);
-        }
+      if (overlap != null) {
+        highlights.push({
+          type: rangeType,
+          range: overlap,
+        });
+        range = new Range(overlap.end, range.end);
       }
 
       highlights.push({
@@ -108,16 +121,35 @@ function renderFixture(
     }
   }
 
-  return (
-    <div key={fixture.name}>
-      {fixture.facet}
-      <Code
-        languageId={fixture.languageId}
-        renderWhitespace={renderWhitespace}
-        highlights={highlights}
-      >
-        {fixture.code}
-      </Code>
-    </div>
-  );
+  for (const range of domainRanges) {
+    if (highlights.every((h) => !hasOverlap(h.range, range))) {
+      highlights.push({
+        type: "domain",
+        range,
+      });
+    }
+  }
+
+  if (
+    highlights.some((h) => highlights.some((o) => hasOverlap(h.range, o.range)))
+  ) {
+    console.error("Overlapping highlights detected:");
+    console.error(fixture.name);
+    console.error(highlights);
+  }
+
+  return highlights;
+}
+
+function hasOverlap(a: Range, b: Range): boolean {
+  return getOverlap(a, b) != null;
+}
+
+function getOverlap(a: Range, b: Range): Range | null {
+  const intersection = a.intersection(b);
+  return intersection != null && !intersection.isEmpty && !a.contains(b)
+    ? !b.contains(a)
+      ? intersection
+      : null
+    : null;
 }