Merge pull request #35 from pioneers/editor-robot-api

Add PiE API autocomplete and tooltips

package.json

@@ -100,7 +100,6 @@
     }
   },
   "dependencies": {
-    "@reduxjs/toolkit": "^2.2.6",
     "ace-builds": "^1.35.1",
     "electron-debug": "^3.2.0",
     "electron-log": "^4.4.8",
@@ -109,7 +108,6 @@
     "react": "^18.2.0",
     "react-ace": "^12.0.0",
     "react-dom": "^18.2.0",
-    "react-redux": "^9.1.2",
     "react-router-dom": "^6.16.0"
   },
   "devDependencies": {

src/__tests__/App.test.tsx

@@ -1,8 +1,12 @@
 import '@testing-library/jest-dom';
 import { render } from '@testing-library/react';
+import { config as aceConfig } from 'ace-builds';
 import App from '../renderer/App';
 
 describe('App', () => {
+  beforeEach(() => {
+    aceConfig.set('basePath', 'node_modules/ace-builds/src-noconflict');
+  });
   it('should render', () => {
     expect(render(<App />)).toBeTruthy();
   });

src/renderer/App.tsx

@@ -8,7 +8,10 @@ import {
   useLayoutEffect,
 } from 'react';
 import Topbar from './Topbar';
-import Editor, { EditorContentStatus, KeyboardControlsStatus } from './Editor';
+import Editor, {
+  EditorContentStatus,
+  KeyboardControlsStatus,
+} from './editor/Editor';
 import DeviceInfo from './DeviceInfo';
 import AppConsole from './AppConsole';
 import type AppConsoleMessage from '../common/AppConsoleMessage'; // No crypto package on the renderer

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,36 @@
+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
+ * @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>
+  );
+}
+/**
+ * Default props for ApiLink.
+ */
+ApiLink.defaultProps = {
+  /**
+   * By default, link text is displayed in the inherited font.
+   */
+  code: false,
+};

src/renderer/Editor.tsx → src/renderer/editor/Editor.tsx

@@ -1,22 +1,12 @@
-import { useState } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import AceEditor from 'react-ace';
-import 'ace-builds/src-noconflict/mode-python';
-import uploadSvg from '../../assets/upload.svg';
-import downloadSvg from '../../assets/download.svg';
-import openSvg from '../../assets/open.svg';
-import saveSvg from '../../assets/save.svg';
-import saveAsSvg from '../../assets/save-as.svg';
-import newFileSvg from '../../assets/new-file.svg';
-import pieSvg from '../../assets/pie.svg';
-import consoleSvg from '../../assets/console.svg';
-import consoleClearSvg from '../../assets/console-clear.svg';
-import zoomInSvg from '../../assets/zoom-in.svg';
-import zoomOutSvg from '../../assets/zoom-out.svg';
-import startRobot from '../../assets/start-robot.svg';
-import stopRobot from '../../assets/stop-robot.svg';
-import keyboardKeySvg from '../../assets/keyboard-key.svg';
-import themeSvg from '../../assets/theme.svg';
+import addEditorAutocomplete from './addEditorAutocomplete';
+import addEditorTooltips from './addEditorTooltips';
 
+import 'ace-builds/src-noconflict/mode-python';
+import 'ace-builds/src-noconflict/snippets/python';
+import 'ace-builds/src-noconflict/ext-language_tools';
+import 'ace-builds/src-noconflict/ext-searchbox';
 import 'ace-builds/src-noconflict/theme-chrome';
 import 'ace-builds/src-noconflict/theme-clouds';
 import 'ace-builds/src-noconflict/theme-dawn';
@@ -26,6 +16,22 @@ import 'ace-builds/src-noconflict/theme-tomorrow_night';
 import 'ace-builds/src-noconflict/theme-clouds_midnight';
 import 'ace-builds/src-noconflict/theme-ambiance';
 
+import uploadSvg from '../../../assets/upload.svg';
+import downloadSvg from '../../../assets/download.svg';
+import openSvg from '../../../assets/open.svg';
+import saveSvg from '../../../assets/save.svg';
+import saveAsSvg from '../../../assets/save-as.svg';
+import newFileSvg from '../../../assets/new-file.svg';
+import pieSvg from '../../../assets/pie.svg';
+import consoleSvg from '../../../assets/console.svg';
+import consoleClearSvg from '../../../assets/console-clear.svg';
+import zoomInSvg from '../../../assets/zoom-in.svg';
+import zoomOutSvg from '../../../assets/zoom-out.svg';
+import startRobot from '../../../assets/start-robot.svg';
+import stopRobot from '../../../assets/stop-robot.svg';
+import keyboardKeySvg from '../../../assets/keyboard-key.svg';
+import themeSvg from '../../../assets/theme.svg';
+
 import './Editor.css';
 
 /**
@@ -162,10 +168,18 @@ export default function Editor({
 }) {
   const [opmode, setOpmode] = useState('auto');
   const [fontSize, setFontSize] = useState(12);
+  const editorRef = useRef(null as AceEditor | null);
 
   const zoomEditor = (increase: boolean) => {
     setFontSize((old) => old + (increase ? 1 : -1));
   };
+  useEffect(() => {
+    if (editorRef.current !== null) {
+      const { editor } = editorRef.current;
+      addEditorAutocomplete(editor);
+      addEditorTooltips(editor);
+    }
+  }, [editorRef]);
 
   const [theme, setTheme] = useState('dawn'); // Default theme
   const handleThemeChange = (newTheme: string) => {
@@ -278,7 +292,9 @@ export default function Editor({
             name="Editor-toolbar-opmode"
           >
             {Object.entries(ACE_THEMES).map(([themeKey, themeName]) => (
-              <option value={themeKey}>{themeName}</option>
+              <option key={themeKey} value={themeKey}>
+                {themeName}
+              </option>
             ))}
           </select>
         </div>
@@ -325,7 +341,7 @@ export default function Editor({
       </div>
       <div className="Editor-ace-wrapper">
         <div className="Editor-kbctrl-overlay">
-          <span>Keyboard input sent to robot &mdash; disable to edit code</span>
+          <span>Keyboard input sent to robot -- disable to edit code</span>
         </div>
         <AceEditor
           theme={theme}
@@ -335,6 +351,10 @@ export default function Editor({
           onChange={onChange}
           value={content}
           readOnly={keyboardControlsStatus === 'on'}
+          ref={editorRef}
+          enableBasicAutocompletion
+          enableLiveAutocompletion
+          enableSnippets
         />
       </div>
     </div>

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;
+}