Lint again

src/renderer/editor/ApiLink.css

@@ -0,0 +1,8 @@
+.ApiLink {
+  color: blue;
+  text-decoration: underline;
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}

src/renderer/editor/ApiLink.tsx

@@ -0,0 +1,26 @@
+import './ApiLink.css';
+
+/**
+ * Links to a section of the student API documentation, opening the help window or just jumping to
+ * the appropriate section if the window is already open. The single text node child of this
+ * component is used as the link text.
+ * @param props.dest - the section of the docs to jump to. TODO: figure out format
+ * @param props.code - whether to display the link text in a monospaced font.
+ */
+export default function ApiLink({
+  dest,
+  code = false,
+  children,
+}: {
+  dest: string;
+  code: boolean;
+  children: string;
+}) {
+  const text = `(${children})[${dest}]`;
+  // Placeholder
+  return (
+    <button type="button" className="ApiLink">
+      {code ? <code>{text}</code> : text}
+    </button>
+  );
+}

src/renderer/editor/HighlightedCode.tsx

@@ -2,6 +2,14 @@ import AceEditor from 'react-ace';
 import 'ace-builds/src-noconflict/mode-python';
 import './HighlightedCode.css';
 
+/**
+ * Uses a read-only AceEditor to display a code block with Python syntax highlighting. The only
+ * valid children of this component is text containing the code to be displayed. Common indentation
+ * is removed from each line of code before display. Only spaces are considered indentation; tabs,
+ * half-width spaces, and nonbreaking spaces are treated as content.
+ * @param props.indent - number of spaces of indentation to prepend to each line, after common
+ * indentation is removed.
+ */
 export default function HighlightedCode({
   children,
   indent = 0,
@@ -17,16 +25,19 @@ export default function HighlightedCode({
     lines.pop();
   }
   // Remove common indent
-  const minIndent = Math.min(...lines
-    .filter(line => line.trim().length)
-    .map(line => line.match(/^ */)[0].length)
+  const minIndent = Math.min(
+    ...lines
+      .filter((line) => line.trim().length)
+      .map((line) => line.match(/^ */)[0].length),
   );
-  const formatted = lines.map(line => ' '.repeat(indent) + line.slice(minIndent)).join('\n');
+  const formatted = lines
+    .map((line) => ' '.repeat(indent) + line.slice(minIndent))
+    .join('\n');
   return (
     <AceEditor
       value={formatted}
       className="HighlightedCode-editor"
-      readOnly={true}
+      readOnly
       showGutter={false}
       style={{ width: '100%' }}
       mode="python"

src/renderer/editor/addEditorTooltips.tsx

@@ -1,6 +1,7 @@
 import { Ace, require as acequire } from 'ace-builds';
 import { ReactNode } from 'react';
 import { createRoot } from 'react-dom/client';
+import ApiLink from './ApiLink';
 import HighlightedCode from './HighlightedCode';
 import readApiCall from './readApiCall';
 
@@ -9,41 +10,47 @@ const { HoverTooltip } = acequire('ace/tooltip');
 const apiHelpComponents: {
   [matchText: string]: () => ReactNode;
 } = {
-  'Robot.get_value': () => <div>
-    The <code>get_value</code> function returns the current value of a
-    specified <code>param</code> on a device with the specified <code>device_id</code>.
-    <br />
-    Parameters:
-    <ul className="parameter-list">
-      <li>
-        <code className="parameter-name">device_id</code>: the ID that specifies which PiE device
-        will be read
-      </li>
-      <li>
-        <code className="parameter-name">param</code>: identifies which parameter on the specified
-        PiE device will be read. Possible param values depend on the specified device. Find a list of
-        params for each type of device on the <a href="javascript:;">lowcar devices</a> page.
-      </li>
-    </ul>
-    The function is useful for checking the current state of devices. For example, getting the
-    current state of a limit switch using its <code>device_id</code> and
-    the <code>param</code> "switch0" will return True when pressed down and False if not.
-    <HighlightedCode>{`
-      # First segment of code ran in the teleop process
-      limit_switch = "//INSERT SWITCH ID HERE//"
+  'Robot.get_value': () => (
+    <div>
+      The <code>get_value</code> function returns the current value of a
+      specified <code>param</code> on a device with the specified{' '}
+      <code>device_id</code>.
+      <br />
+      Parameters:
+      <ul className="parameter-list">
+        <li>
+          <code className="parameter-name">device_id</code>: the ID that
+          specifies which PiE device will be read
+        </li>
+        <li>
+          <code className="parameter-name">param</code>: identifies which
+          parameter on the specified PiE device will be read. Possible param
+          values depend on the specified device. Find a list of params for each
+          type of device on the{' '}
+          <ApiLink dest="lowcar-devices">lowcar devices</ApiLink> page.
+        </li>
+      </ul>
+      The function is useful for checking the current state of devices. For
+      example, getting the current state of a limit switch using its{' '}
+      <code>device_id</code> and the <code>param</code> &quot;switch0&quot; will
+      return True when pressed down and False if not.
+      <HighlightedCode>{`
+        # First segment of code ran in the teleop process
+        limit_switch = "//INSERT SWITCH ID HERE//"
 
-      def teleop_setup():
-        print("Tele-operated mode has started!")
+        def teleop_setup():
+          print("Tele-operated mode has started!")
 
-      def teleop_main():
-        # Example code for getting the value of a limit switch
-        #   First parameter is the limit switch's id
-        #   Second parameter tells which switch to get the value from
-        # In this case the method will return True or False depending on if the switch is pressed down or not
+        def teleop_main():
+          # Example code for getting the value of a limit switch
+          #   First parameter is the limit switch's id
+          #   Second parameter tells which switch to get the value from
+          # In this case the method will return True or False depending on if the switch is pressed down or not
 
-        Robot.get_value(limit_switch, switch0)
-    `}</HighlightedCode>
-  </div>,
+          Robot.get_value(limit_switch, switch0)
+      `}</HighlightedCode>
+    </div>
+  ),
   Robot: () => <div>Documentation for Robot object.</div>,
 };