UI: Search and read NS API docs in editor tab and documentation tab (#2163)

src/ui/React/Documentation.tsx

@@ -1,5 +1,6 @@
 import React, { useContext, useState } from "react";
-import { FilePath, asFilePath } from "../../Paths/FilePath";
+import { type FilePath, asFilePath } from "../../Paths/FilePath";
+import { CONSTANTS } from "../../Constants";
 
 interface Navigator {
   navigate: (s: string, external: boolean) => void;
@@ -20,6 +21,13 @@ interface History {
 }
 
 const defaultPage = asFilePath("index.md");
+export const defaultNsApiPage = asFilePath("nsDoc/bitburner.ns.md");
+/**
+ * If we move or rename "bitburner.ns.md", we must update this constant, "defaultNsApiPage", "openDocExternally", and
+ * the URL in src\Documentation\doc\index.md.
+ */
+export const externalUrlOfNsApiPage =
+  "https://github.com/bitburner-official/bitburner-src/blob/stable/markdown/bitburner.ns.md";
 
 const HistoryContext = React.createContext<History>({
   page: defaultPage,
@@ -81,3 +89,11 @@ export const HistoryProvider = (props: React.PropsWithChildren<object>): React.R
   });
   return <Provider value={history}>{props.children}</Provider>;
 };
+
+export function openDocExternally(path: string) {
+  const ver = CONSTANTS.isDevBranch ? "dev" : "stable";
+  const url = path.startsWith("nsDoc/")
+    ? `https://github.com/bitburner-official/bitburner-src/blob/${ver}/markdown/${path.replace("nsDoc/", "")}`
+    : `https://github.com/bitburner-official/bitburner-src/blob/${ver}/src/Documentation/doc/${path}`;
+  window.open(url, "_newtab");
+}

src/ui/React/Modal.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { type CSSProperties, useEffect, useState } from "react";
 import { Theme } from "@mui/material";
 import Box from "@mui/material/Box";
 import IconButton from "@mui/material/IconButton";
@@ -43,6 +43,7 @@ interface ModalProps {
   onClose: () => void;
   children: React.ReactNode;
   sx?: SxProps<Theme>;
+  wrapperStyles?: CSSProperties;
   removeFocus?: boolean;
   // If it's true, the player can dismiss the modal by pressing the Esc button or clicking on the backdrop.
   canBeDismissedEasily?: boolean;
@@ -53,6 +54,7 @@ export const Modal = ({
   onClose,
   children,
   sx,
+  wrapperStyles,
   removeFocus = true,
   canBeDismissedEasily = true,
 }: ModalProps): React.ReactElement => {
@@ -83,6 +85,7 @@ export const Modal = ({
       <Fade in={open}>
         <div
           className={classes.paper}
+          style={wrapperStyles}
           //@ts-expect-error inert is not supported by react types yet, this is a workaround until then. https://github.com/facebook/react/pull/24730
           inert={open ? null : ""}
         >

src/ui/React/NsApiDocumentationLink.tsx

@@ -1,13 +1,21 @@
 import React from "react";
 import { Link } from "@mui/material";
-import { getNsApiDocumentationUrl } from "../../utils/StringHelperFunctions";
 import { Settings } from "../../Settings/Settings";
+import { Router } from "../GameRoot";
+import { Page } from "../Router";
+import { defaultNsApiPage, openDocExternally } from "./Documentation";
 
 export function NsApiDocumentationLink(): React.ReactElement {
   return (
     <Link
       target="_blank"
-      href={getNsApiDocumentationUrl()}
+      onClick={(event) => {
+        if (event.ctrlKey) {
+          openDocExternally(defaultNsApiPage);
+          return;
+        }
+        Router.toPage(Page.Documentation, { docPage: defaultNsApiPage });
+      }}
       fontSize="1.2rem"
       color={Settings.theme.info}
       sx={{