Use history API to navigate from autocomplete

Author: microbit-robert

src/editor/codemirror/CodeMirror.tsx

@@ -21,7 +21,6 @@ import { createUri } from "../../language-server/client";
 import { useLanguageServerClient } from "../../language-server/language-server-hooks";
 import { Logging } from "../../logging/logging";
 import { useLogging } from "../../logging/logging-hooks";
-import { useRouterState } from "../../router-hooks";
 import { useSessionSettings } from "../../settings/session-settings";
 import {
   CodeStructureOption,
@@ -238,27 +237,6 @@ const CodeMirror = ({
     }
   }, [location]);
 
-  const [routerState, setRouterState] = useRouterState();
-  useEffect(() => {
-    const listener = (event: Event) => {
-      const { id, tab } = (event as CustomEvent).detail;
-      setRouterState(
-        {
-          tab,
-          slug: { id },
-        },
-        "documentation-from-code"
-      );
-      const view = viewRef.current!;
-      // Put the focus back in the text editor so the docs are immediately useful.
-      view.focus();
-    };
-    document.addEventListener("cm/openDocs", listener);
-    return () => {
-      document.removeEventListener("cm/openDocs", listener);
-    };
-  }, [routerState, setRouterState]);
-
   return (
     <section
       data-testid="editor"

src/editor/codemirror/language-server/documentation.ts

@@ -9,6 +9,7 @@ import { IntlShape } from "react-intl";
 import { MarkupContent } from "vscode-languageserver-types";
 import { moduleAndApiFromId } from "../../../documentation/api/apidocs-util";
 import { ApiReferenceMap } from "../../../documentation/mapping/content";
+import { pushUrlState, RouterState, TabName } from "../../../router-hooks";
 import { splitDocString } from "./docstrings";
 import "./documentation.css";
 
@@ -140,14 +141,7 @@ export const wrapWithDocumentationButton = (
     refAnchor.textContent = intl.formatMessage({ id: "help" });
     refAnchor.onclick = (e) => {
       e.preventDefault();
-      document.dispatchEvent(
-        new CustomEvent("cm/openDocs", {
-          detail: {
-            tab: "reference",
-            id: referenceLink,
-          },
-        })
-      );
+      setRouterState("reference", id);
     };
     actionsContainer.appendChild(refAnchor);
   }
@@ -159,15 +153,7 @@ export const wrapWithDocumentationButton = (
     apiAnchor.textContent = intl.formatMessage({ id: "api-tab" });
     apiAnchor.onclick = (e) => {
       e.preventDefault();
-      // Could we instead interact with the history API here?
-      document.dispatchEvent(
-        new CustomEvent("cm/openDocs", {
-          detail: {
-            tab: "api",
-            id,
-          },
-        })
-      );
+      setRouterState("api", id);
     };
     if (referenceLink) {
       const verticalDivider = document.createElement("hr");
@@ -198,3 +184,11 @@ export const getLinkToReference = (
   }
   return referenceLink;
 };
+
+const setRouterState = (tab: TabName, id: string): void => {
+  const newRouterState: RouterState = {
+    tab,
+    slug: { id },
+  };
+  pushUrlState(newRouterState);
+};

src/router-hooks.tsx

@@ -117,9 +117,7 @@ export const RouterProvider = ({ children }: { children: ReactNode }) => {
           message: toUrl(newState),
         });
       }
-      const url = toUrl(newState);
-      window.history.pushState(newState, "", url);
-
+      pushUrlState(newState);
       setState(newState);
     },
     [logging, setState]
@@ -132,6 +130,11 @@ export const RouterProvider = ({ children }: { children: ReactNode }) => {
   );
 };
 
+export const pushUrlState = (newState: RouterState) => {
+  const url = toUrl(newState);
+  window.history.pushState(newState, "", url);
+};
+
 /**
  * Access the slug for a particular tab.
  *