Add tooltip doc for Robot.get_value as POC

Add Robot.get_value doc as proof of concept. Text was pulled from api.md
in the runtime repo. Styling still needed.
Add HighlightedCode which wraps an AceEditor with appropriate
configuration to be a highlighted read-only code block.

The doc stuff will eventually have to live in its own directory
somewhere if it's going to be reused. The API help window could probably
just sort apiHelpComponents by key and concat them.

src/renderer/editor/HighlightedCode.css

@@ -0,0 +1,12 @@
+.HighlightedCode-editor .ace_scroller {
+  width: 100%;
+}
+.HighlightedCode-editor .ace_cursor {
+  opacity: 0;
+}
+.HighlightedCode-editor .ace_marker-layer {
+  display: none;
+}
+.HighlightedCode-editor .ace_print-margin {
+  display: none;
+}

src/renderer/editor/HighlightedCode.tsx

@@ -0,0 +1,36 @@
+import AceEditor from 'react-ace';
+import 'ace-builds/src-noconflict/mode-python';
+import './HighlightedCode.css';
+
+export default function HighlightedCode({
+  children,
+  indent = 0,
+}: {
+  children: string;
+  indent: number?;
+}) {
+  const lines = children.split('\n');
+  if (lines.length && !lines[0].trim()) {
+    lines.shift();
+  }
+  if (lines.length && !lines[lines.length - 1].trim()) {
+    lines.pop();
+  }
+  // Remove common indent
+  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');
+  return (
+    <AceEditor
+      value={formatted}
+      className="HighlightedCode-editor"
+      readOnly={true}
+      showGutter={false}
+      style={{ width: '100%' }}
+      mode="python"
+      maxLines={Infinity}
+    />
+  );
+}

src/renderer/editor/addEditorTooltips.tsx

@@ -1,14 +1,49 @@
 import { Ace, require as acequire } from 'ace-builds';
 import { ReactNode } from 'react';
 import { createRoot } from 'react-dom/client';
+import HighlightedCode from './HighlightedCode';
 import readApiCall from './readApiCall';
 
 const { HoverTooltip } = acequire('ace/tooltip');
 
 const apiHelpComponents: {
   [matchText: string]: () => ReactNode;
 } = {
-  'Robot.get_value': () => <div>Documentation for Robot.get_value method.</div>,
+  '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//"
+
+      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
+
+        Robot.get_value(limit_switch, switch0)
+    `}</HighlightedCode>
+  </div>,
   Robot: () => <div>Documentation for Robot object.</div>,
 };