feat: Mcq UI

package.json

@@ -131,6 +131,7 @@
     "@types/lodash": "^4.17.9",
     "@types/node": "^22.5.4",
     "@types/react": "^19.0.12",
+    "@types/showdown": "^2.0.6",
     "@types/vscode": "^1.93.0",
     "@vscode/vsce": "^3.2.2",
     "esbuild": "^0.25.0",
@@ -148,6 +149,7 @@
     "lodash": "^4.17.21",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "showdown": "^2.1.0",
     "vscode-languageclient": "^9.0.1"
   },
   "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"

src/commands/evalEditor.tsx

@@ -1,14 +1,19 @@
 import * as vscode from "vscode";
 import Messages from "../utils/messages";
-import { activeEditor, sendToFrontendWrapped } from "./showPanel";
+import { sendToFrontendWrapped } from "./showPanel";
+import { MessageHandler } from "../utils/messageHandler";
+
+let messageHandler = MessageHandler.getInstance();
 
 export async function evalEditor(context: vscode.ExtensionContext) {
-  if (!activeEditor) {
+  if (!messageHandler.activeEditor) {
     vscode.window.showErrorMessage(
       "Cannot evaluate code when there is no active editor!",
     );
     return;
   }
-  const message = Messages.EvalEditor(activeEditor.workspaceLocation);
+  const message = Messages.EvalEditor(
+    messageHandler.activeEditor.workspaceLocation,
+  );
   sendToFrontendWrapped(message);
 }

src/commands/showPanel.tsx

@@ -2,110 +2,15 @@ import * as vscode from "vscode";
 // Allow using JSX within this file by overriding our own createElement function
 import React from "../utils/FakeReact";
 
-import Messages, {
-  MessageType,
-  MessageTypeNames,
-  sendToFrontend,
-} from "../utils/messages";
+import { MessageType, sendToFrontend } from "../utils/messages";
 import { LANGUAGES } from "../utils/languages";
 import { setWebviewContent } from "../utils/webview";
 import config from "../utils/config";
-import { Editor } from "../utils/editor";
 import { FRONTEND_ELEMENT_ID } from "../constants";
-import { client, SOURCE_ACADEMY_ICON_URI } from "../extension";
-import _ from "lodash";
-import { treeDataProvider } from "../treeview";
+import { MessageHandler } from "../utils/messageHandler";
 
-let panel: vscode.WebviewPanel | null = null;
-// This needs to be a reference to active
-// TODO: Fix this ugly code!
-export let activeEditor: Editor | null = null;
-
-const messageQueue: MessageType[] = [];
-let handling = false;
-
-// TODO: Remove panel and handling message logic out of the commands/ directory
-
-async function handleMessage(
-  context: vscode.ExtensionContext,
-  message: MessageType,
-) {
-  messageQueue.push(message);
-  if (handling) {
-    return;
-  }
-  handling = true;
-
-  while (messageQueue.length > 0) {
-    const message = messageQueue.shift()!;
-    console.log(`${Date.now()} Beginning handleMessage: ${message.type}`);
-    switch (message.type) {
-      case MessageTypeNames.ExtensionPing:
-        sendToFrontend(panel, Messages.ExtensionPong(null));
-        break;
-      case MessageTypeNames.NewEditor:
-        activeEditor = await Editor.create(
-          message.workspaceLocation,
-          message.assessmentName,
-          message.questionId,
-          message.prepend,
-          message.initialCode,
-        );
-        activeEditor.uri;
-        const info = context.globalState.get("info") ?? {};
-        if (activeEditor.uri) {
-          // TODO: Write our own wrapper to set nested keys easily, removing lodash
-          // @ts-ignore
-          _.set(info, `["${activeEditor.uri}"].chapter`, message.chapter ?? 1);
-          // TODO: message.prepend can be undefined in runtime, investigate
-          const nPrependLines =
-            message.prepend && message.prepend !== ""
-              ? message.prepend.split("\n").length + 2 // account for start/end markers
-              : 0;
-          _.set(info, `["${activeEditor.uri}"].prepend`, nPrependLines);
-          context.globalState.update("info", info);
-          client.sendRequest("source/publishInfo", info);
-        }
-
-        panel?.reveal(vscode.ViewColumn.Two);
-        console.log(
-          `EXTENSION: NewEditor: activeEditor set to ${activeEditor.assessmentName}_${activeEditor.questionId}`,
-        );
-        activeEditor.onChange((editor) => {
-          const workspaceLocation = editor.workspaceLocation;
-          const code = editor.getText();
-          if (!code) {
-            return;
-          }
-          if (editor !== activeEditor) {
-            console.log(
-              `EXTENSION: Editor ${editor.assessmentName}_${editor.questionId} is no longer active, skipping onChange`,
-            );
-          }
-          const message = Messages.Text(workspaceLocation, code);
-          console.log(`Sending message: ${JSON.stringify(message)}`);
-          sendToFrontend(panel, message);
-        });
-        break;
-      // case MessageTypeNames.Text:
-      //   if (!activeEditor) {
-      //     console.log("ERROR: activeEditor is not set");
-      //     break;
-      //   }
-      //   activeEditor.replace(message.code, "Text");
-      //   break;
-      case MessageTypeNames.NotifyAssessmentsOverview:
-        const { assessmentOverviews, courseId } = message;
-        context.globalState.update("assessmentOverviews", assessmentOverviews);
-        context.globalState.update("courseId", courseId);
-        treeDataProvider.refresh();
-        break;
-    }
-    console.log(`${Date.now()} Finish handleMessage: ${message.type}`);
-  }
-
-  handling = false;
-}
+let messageHandler = MessageHandler.getInstance();
+import { SOURCE_ACADEMY_ICON_URI } from "../extension";
 
 export async function showPanel(
   context: vscode.ExtensionContext,
@@ -119,7 +24,7 @@ export async function showPanel(
   // Get a reference to the active editor (before the focus is switched to our newly created webview)
   // firstEditor = vscode.window.activeTextEditor!;
 
-  panel = vscode.window.createWebviewPanel(
+  messageHandler.panel = vscode.window.createWebviewPanel(
     "source-academy-panel",
     "Source Academy",
     vscode.ViewColumn.Beside,
@@ -129,18 +34,17 @@ export async function showPanel(
     },
   );
 
-  panel.webview.onDidReceiveMessage(
-    (message: MessageType) => handleMessage(context, message),
+  messageHandler.panel.webview.onDidReceiveMessage(
+    (message: MessageType) => messageHandler.handleMessage(context, message),
     undefined,
     context.subscriptions,
   );
 
   const iframeUrl = new URL(route ?? "/playground", config.frontendBaseUrl)
     .href;
 
-  // equivalent to panel.webview.html = ...
   setWebviewContent(
-    panel,
+    messageHandler.panel,
     context,
     // NOTE: This is not React code, but our FakeReact!
     <div
@@ -160,16 +64,16 @@ export async function showPanel(
     </div>,
   );
 
-  panel.iconPath = SOURCE_ACADEMY_ICON_URI;
+  messageHandler.panel.iconPath = SOURCE_ACADEMY_ICON_URI;
 }
 
-// TODO: Move this to a util file
 export async function sendToFrontendWrapped(message: MessageType) {
+  sendToFrontend(messageHandler.panel, message);
   // TODO: This returning of status code shouldn't be necessary after refactor
-  if (!panel) {
+  if (!messageHandler.panel) {
     console.error("ERROR: panel is not set");
     return false;
   }
-  sendToFrontend(panel, message);
+  sendToFrontend(messageHandler.panel, message);
   return true;
 }

src/utils/editor.ts

@@ -11,6 +11,7 @@ export class Editor {
   workspaceLocation: VscWorkspaceLocation;
   assessmentName: string;
   questionId: number;
+  assessmentType: string | null = null;
   onChangeCallback?: (editor: Editor) => void;
   code: string | null = null;
   uri: string | null = null;
@@ -26,6 +27,7 @@ export class Editor {
   ) {
     this.workspaceLocation = workspaceLocation;
     this.assessmentName = assessmentName;
+    this.assessmentType = this.assessmentType;
     this.questionId = questionId;
   }
 

src/utils/markdown.ts

@@ -0,0 +1,31 @@
+// Lightweight Markdown → HTML helper for the VS Code Webview.
+// Uses `showdown` (≈12 kB gzipped, no React peer-deps) for robust CommonMark
+// conversion
+// Keeps dependency surface minimal (one package)
+
+import { Converter } from "showdown";
+
+// A singleton converter instance (Showdown initialisation is expensive)
+const converter = new Converter({
+  tables: true,
+  simplifiedAutoLink: true,
+  strikethrough: true,
+  tasklists: true,
+  openLinksInNewWindow: true,
+});
+
+// Very small sanitiser: strips <script> tags and dangerous inline event attrs.
+const sanitize = (html: string): string => {
+  // Remove script/style tags completely
+  let safe = html.replace(/<(script|style)[^>]*>[\s\S]*?<\/\1>/gi, "");
+  // Remove on*="..." inline event handlers
+  safe = safe.replace(/ on\w+="[^"]*"/g, "");
+  return safe;
+};
+
+export function markdownToHtml(markdown: string): string {
+  const rawHtml = converter.makeHtml(markdown);
+  return sanitize(rawHtml);
+}
+
+export default markdownToHtml;