Added context menu to scope visualizer sidebar to open in browser

Author: AndreasArvidsson

packages/common/src/cursorlessCommandIds.ts

@@ -54,6 +54,7 @@ export const cursorlessCommandIds = [
   "cursorless.toggleDecorations",
   "cursorless.showScopeVisualizer",
   "cursorless.hideScopeVisualizer",
+  "cursorless.scopeVisualizer.openUrl",
   "cursorless.tutorial.start",
   "cursorless.tutorial.next",
   "cursorless.tutorial.previous",
@@ -100,6 +101,7 @@ export const cursorlessCommandDescriptions: Record<
   ["cursorless.hideScopeVisualizer"]: new VisibleCommand(
     "Hide the scope visualizer",
   ),
+  ["cursorless.scopeVisualizer.openUrl"]: new VisibleCommand("Open in browser"),
   ["cursorless.analyzeCommandHistory"]: new VisibleCommand(
     "Analyze collected command history",
   ),

packages/common/src/index.ts

@@ -92,8 +92,6 @@ export * from "./types/Token";
 export * from "./types/TreeSitter";
 export * from "./types/tutorial.types";
 export * from "./util";
-export * from "./util/camelCaseToAllDown";
-export * from "./util/capitalize";
 export * from "./util/clientSupportsFallback";
 export * from "./util/CompositeKeyDefaultMap";
 export * from "./util/CompositeKeyMap";
@@ -110,8 +108,8 @@ export * from "./util/regex";
 export * from "./util/selectionsEqual";
 export * from "./util/serializedMarksToTokenHats";
 export * from "./util/serializeScopeType";
-export * from "./util/sortRanges";
 export * from "./util/splitKey";
+export * from "./util/stringUtils";
 export * from "./util/toPlainObject";
 export * from "./util/type";
 export * from "./util/typeUtils";

packages/common/src/util/camelCaseToAllDown.ts

@@ -0,0 +1,44 @@
+/**
+ * Converts a camelCase string to a string with spaces between each word, and
+ * all words in lowercase.
+ *
+ * Example: `camelCaseToAllDown("fooBarBaz")` returns `"foo bar baz"`.
+ *
+ * @param input A camelCase string
+ * @returns The same string, but with spaces between each word, and all words
+ * in lowercase
+ */
+export function camelCaseToAllDown(input: string): string {
+  return input
+    .replace(/([A-Z])/g, " $1")
+    .split(" ")
+    .map((word) => word.toLowerCase())
+    .join(" ");
+}
+
+/**
+ * Capitalizes string
+ *
+ * @param input A string
+ * @returns The same string, but with the first character capitalized
+ */
+export function capitalize(str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+/**
+ * Converts a string to a URL-friendly hash ID.
+ *
+ * This function takes an input string, converts it to lowercase, replaces spaces
+ * with hyphens, and removes any characters that are not lowercase letters,
+ * digits, or hyphens. The result is a string that can be used as a
+ * URL-friendly hash ID.
+ *
+ * @param text The input string to be converted
+ * @returns A URL-friendly hash ID
+ */
+export function uriEncodeHashId(text: string): string {
+  return camelCaseToAllDown(text)
+    .replaceAll(" ", "-")
+    .replace(/[^a-z0-9-]/g, "");
+}

packages/common/src/util/capitalize.ts

@@ -98,6 +98,7 @@ export async function registerCommands(
     // Scope visualizer
     ["cursorless.showScopeVisualizer"]: dummyCommandHandler,
     ["cursorless.hideScopeVisualizer"]: dummyCommandHandler,
+    ["cursorless.scopeVisualizer.openUrl"]: dummyCommandHandler,
 
     // Command history
     ["cursorless.analyzeCommandHistory"]: dummyCommandHandler,

packages/common/src/util/sortRanges.ts

@@ -1,3 +1,4 @@
+import { uriEncodeHashId } from "@cursorless/common";
 import React from "react";
 
 interface Props {
@@ -23,7 +24,7 @@ function renderHeader(
   { className, title, children }: Props,
 ): React.JSX.Element {
   const Tag = `h${level}` as keyof React.JSX.IntrinsicElements;
-  const href = encodeHash(children);
+  const href = uriEncodeHashId(children);
   return (
     <Tag
       id={href}
@@ -38,10 +39,3 @@ function renderHeader(
     </Tag>
   );
 }
-
-export function encodeHash(text: string): string {
-  return text
-    .toLowerCase()
-    .replaceAll(" ", "-")
-    .replace(/[^a-z0-9-]/g, "");
-}

packages/common/src/util/stringUtils.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { DynamicTOC } from "./DynamicTOC";
 import { ScopeSupport } from "./ScopeSupport";
+import { ScrollToHash } from "./ScrollToHash";
 
 interface Props {
   languageId: string;
@@ -10,6 +11,7 @@ export function Language({ languageId }: Props) {
   return (
     <>
       <DynamicTOC />
+      <ScrollToHash />
 
       <ScopeSupport languageId={languageId} />
     </>

packages/cursorless-neovim/src/registerCommands.ts

@@ -0,0 +1,24 @@
+import { useEffect } from "react";
+import { useLocation } from "@docusaurus/router";
+
+/**
+ * Scrolls to the element with the ID matching the current hash in the URL.
+ * This is needed when a hash ID is provided in the initial load to scroll to a heading rendered by a react component.
+ */
+export function ScrollToHash() {
+  const location = useLocation();
+
+  useEffect(() => {
+    if (location.hash) {
+      setTimeout(() => {
+        const id = location.hash.replace("#", "");
+        const element = document.getElementById(id);
+        if (element != null) {
+          element.scrollIntoView();
+        }
+      }, 100);
+    }
+  }, []);
+
+  return null;
+}