Extract calculate highlights into separate file

Author: AndreasArvidsson

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

@@ -24,12 +24,13 @@
 .code-container {
   position: relative;
   width: 100%;
+  min-height: 50px;
   counter-reset: line;
 }
 
 .code-container .line {
-  margin-left: 1.5rem;
   position: relative;
+  margin-left: 1.5rem;
 }
 
 .code-container .line::before {

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

@@ -1,16 +1,15 @@
 import {
-  Range,
   serializeScopeType,
-  sortRanges,
   type ScopeSupportFacetInfo,
   type ScopeTypeType,
 } from "@cursorless/common";
 import { usePluginData } from "@docusaurus/useGlobalData";
 import React, { useState } from "react";
-import { Code, type Highlight } from "./Code";
+import { calculateHighlights } from "./calculateHighlights";
+import { Code } from "./Code";
 import { H2, H3, H4 } from "./Header";
 import "./ScopeSupport.css";
-import type { FacetValue, Fixture, ScopeTests } from "./types";
+import type { FacetValue, Fixture, RangeType, ScopeTests } from "./types";
 import {
   getFacetInfo,
   isScopeInternal,
@@ -19,8 +18,6 @@ import {
   prettifyScopeType,
 } from "./util";
 
-type RangeType = "content" | "removal";
-
 interface Scopes {
   public: Scope[];
   internal: Scope[];
@@ -138,7 +135,7 @@ function renderFacet(
           key={fixture.name}
           languageId={languageId}
           renderWhitespace={renderWhitespace}
-          highlights={getHighlights(fixture, rangeType)}
+          highlights={calculateHighlights(fixture, rangeType)}
         >
           {fixture.code}
         </Code>
@@ -147,77 +144,6 @@ function renderFacet(
   );
 }
 
-function getHighlights(fixture: Fixture, rangeType: RangeType): Highlight[] {
-  const highlights: Highlight[] = [];
-  const domainRanges: Range[] = [];
-
-  for (const scope of fixture.scopes) {
-    const conciseRanges =
-      rangeType === "content"
-        ? scope.targets.map((t) => t.content)
-        : scope.targets.map((t) => t.removal ?? t.content);
-    const ranges = sortRanges(conciseRanges.map((r) => Range.fromConcise(r)));
-
-    if (scope.domain != null && !conciseRanges.includes(scope.domain)) {
-      domainRanges.push(Range.fromConcise(scope.domain));
-    }
-
-    for (const r of ranges) {
-      let range = r;
-
-      const overlap = highlights
-        .map((h) => getOverlap(h.range, range))
-        .find((o) => o != null);
-
-      if (overlap != null) {
-        highlights.push({
-          type: rangeType,
-          range: overlap,
-        });
-        range = new Range(overlap.end, range.end);
-      }
-
-      highlights.push({
-        type: rangeType,
-        range,
-      });
-    }
-  }
-
-  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);
-    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;
-}
-
 function getScopeFixtures(scopeTests: ScopeTests, languageId: string): Scopes {
   const languageIds = new Set<string>(
     scopeTests.imports[languageId] ?? [languageId],

packages/cursorless-org-docs/src/docs/user/languages/components/calculateHighlights.ts

@@ -0,0 +1,77 @@
+import { Range, sortRanges } from "@cursorless/common";
+import { type Highlight } from "./Code";
+import type { Fixture, RangeType } from "./types";
+
+export function calculateHighlights(
+  fixture: Fixture,
+  rangeType: RangeType,
+): Highlight[] {
+  const highlights: Highlight[] = [];
+  const domainRanges: Range[] = [];
+
+  for (const scope of fixture.scopes) {
+    const conciseRanges =
+      rangeType === "content"
+        ? scope.targets.map((t) => t.content)
+        : scope.targets.map((t) => t.removal ?? t.content);
+    const ranges = sortRanges(conciseRanges.map((r) => Range.fromConcise(r)));
+
+    if (scope.domain != null && !conciseRanges.includes(scope.domain)) {
+      domainRanges.push(Range.fromConcise(scope.domain));
+    }
+
+    for (const r of ranges) {
+      let range = r;
+
+      const overlap = highlights
+        .map((h) => getOverlap(h.range, range))
+        .find((o) => o != null);
+
+      if (overlap != null) {
+        highlights.push({
+          type: rangeType,
+          range: overlap,
+        });
+        range = new Range(overlap.end, range.end);
+      }
+
+      highlights.push({
+        type: rangeType,
+        range,
+      });
+    }
+  }
+
+  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);
+    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;
+}

packages/cursorless-org-docs/src/docs/user/languages/components/types.ts

@@ -3,6 +3,7 @@ import type {
   PlaintextScopeSupportFacet,
 } from "@cursorless/common";
 
+export type RangeType = "content" | "removal";
 export type FacetValue = ScopeSupportFacet | PlaintextScopeSupportFacet;
 
 export interface ScopeTests {