diff --git a/packages/cursorless-org-docs/src/docs/contributing/MissingLanguageScopes.tsx b/packages/cursorless-org-docs/src/docs/contributing/MissingLanguageScopes.tsx index 1afbd9467f..b09f4d168b 100644 --- a/packages/cursorless-org-docs/src/docs/contributing/MissingLanguageScopes.tsx +++ b/packages/cursorless-org-docs/src/docs/contributing/MissingLanguageScopes.tsx @@ -7,7 +7,7 @@ import { type ScopeType, type SimpleScopeTypeType, } from "@cursorless/common"; -import React from "react"; +import React, { useEffect, useState } from "react"; export function MissingLanguageScopes(): React.JSX.Element[] { return Object.keys(languageScopeSupport) @@ -35,7 +35,13 @@ function Language({ return ( <> -

{languageId}

+

+ {languageId} + + + link + +

{renderFacets("Unsupported", unsupportedFacets)} {renderFacets("Unspecified", unspecifiedFacets)} @@ -46,27 +52,49 @@ function renderFacets( title: string, facets: ScopeSupportFacet[], ): React.JSX.Element | null { - const scopes = Array.from( - new Set( - facets.map((f) => - serializeScopeType(scopeSupportFacetInfos[f].scopeType), + const [open, setOpen] = useState(false); + const [scopes, setScopes] = useState([]); + + useEffect(() => { + const scopes = Array.from( + new Set( + facets.map((f) => + serializeScopeType(scopeSupportFacetInfos[f].scopeType), + ), ), - ), - ).sort(); + ).sort(); + setScopes(scopes); + setOpen(scopes.length < 4); + }, []); if (scopes.length === 0) { return null; } + const renderBody = () => { + if (!open) { + return null; + } + + return ( +
+ +
+ ); + }; + return ( - <> - {title} ({scopes.length}) - - +
+
setOpen(!open)}> + {title} ({scopes.length}) +
+ + {renderBody()} +
); }