feat: support Math in Markdown

e2e-tests/code-editing-and-ast-interaction.test.ts

@@ -1,7 +1,7 @@
 /**
  * Tests for code editing functionality and AST tool interaction.
  */
-import { expect, test } from "@playwright/test";
+import { expect, test, type Locator, type Page } from "@playwright/test";
 
 type HighlightSamplesState = {
 	intervalId: number;
@@ -14,6 +14,54 @@ declare global {
 	}
 }
 
+async function initCodeEditor(page: Page): Promise<Locator> {
+	// focus code editor textbox
+	const codeEditor = page
+		.getByRole("region", { name: "Code Editor Panel" })
+		.getByRole("textbox")
+		.nth(1);
+
+	// delete the default code
+	await codeEditor.click();
+	await codeEditor.press("ControlOrMeta+KeyA");
+	await codeEditor.press("Backspace");
+
+	return codeEditor;
+}
+
+async function replaceESQuerySelector(
+	page: Page,
+	selector: string,
+): Promise<void> {
+	page.getByRole("textbox", { name: "ESQuery Selector" }).fill(selector);
+}
+
+/*
+
+async function switchToMarkdown(page: Page) {
+	await page.getByRole("button", { name: "Language Options" }).click();
+	await page.getByRole("combobox", { exact: true, name: "Language" }).click();
+	await page.getByRole("option", { exact: true, name: "Markdown" }).click();
+	await expect(
+		page.getByRole("combobox", { exact: true, name: "Language" }),
+	).toHaveText("Markdown");
+	await page.keyboard.press("Escape");
+}
+
+async function enableMarkdownMath(page: Page) {
+	await page.getByRole("button", { name: "Language Options" }).click();
+	const mathSwitch = page.getByRole("switch", {
+		exact: true,
+		name: "Math",
+	});
+	await expect(mathSwitch).toHaveAttribute("aria-checked", "false");
+	await mathSwitch.click();
+	await expect(mathSwitch).toHaveAttribute("aria-checked", "true");
+	await page.keyboard.press("Escape");
+}
+
+*/
+
 /**
  * This test verifies that:
  * - Users can edit code in the editor
@@ -26,23 +74,13 @@ test(`should change code, then highlight code and AST nodes matching ESQuery sel
 }) => {
 	await page.goto("/");
 
-	// focus code editor textbox
-	await page
-		.getByRole("region", { name: "Code Editor Panel" })
-		.getByRole("textbox")
-		.nth(1)
-		.click();
-
-	// delete the default code
-	await page.keyboard.press("ControlOrMeta+KeyA");
-	await page.keyboard.press("Backspace");
+	const codeEditor = await initCodeEditor(page);
 
 	// add new code
-	await page.keyboard.type("console.log('Hello, World!');");
+	await codeEditor.pressSequentially("console.log('Hello, World!');");
 
 	// add an ESQuery selector
-	await page.getByRole("textbox", { name: "ESQuery Selector" }).click();
-	await page.keyboard.type("CallExpression");
+	await replaceESQuerySelector(page, "CallExpression");
 
 	// wait for the debounced update of the AST to happen
 	await expect(
@@ -73,20 +111,15 @@ test(`should keep ESQuery highlights aligned while typing before a matching lite
 }) => {
 	await page.goto("/");
 
-	const codeEditor = page
-		.getByRole("region", { name: "Code Editor Panel" })
-		.getByRole("textbox")
-		.nth(1);
-	const highlight = page.locator(".bg-editorHighlightedRangeColor");
+	const codeEditor = await initCodeEditor(page);
 
-	await codeEditor.click();
-	await codeEditor.press("ControlOrMeta+KeyA");
-	await codeEditor.press("Backspace");
+	// add new code
 	await codeEditor.pressSequentially("42;");
 
-	await page
-		.getByRole("textbox", { name: "ESQuery Selector" })
-		.fill("Literal");
+	// add an ESQuery selector
+	await replaceESQuerySelector(page, "Literal");
+
+	const highlight = page.locator(".bg-editorHighlightedRangeColor");
 
 	await expect(highlight).toHaveText("42");
 
@@ -127,3 +160,52 @@ test(`should keep ESQuery highlights aligned while typing before a matching lite
 	).toBe(true);
 	await expect(highlight).toHaveText("42");
 });
+
+/*
+
+test(`should parse inline Markdown math when Math is enabled`, async ({
+	page,
+}) => {
+	await page.goto("/");
+	await switchToMarkdown(page);
+	await replaceCodeEditorValue(page, "Inline $x^2$ math");
+
+	const analysisPanel = page.getByRole("region", {
+		name: "Code Analysis Tools Panel",
+	});
+	await analysisPanel.getByRole("radio", { name: "JSON" }).click();
+	const astJson = analysisPanel.locator(".cm-content");
+
+	await expect(astJson).toContainText("Inline $x^2$ math");
+	await expect(astJson).not.toContainText(`"type": "inlineMath"`);
+
+	await enableMarkdownMath(page);
+
+	await expect(astJson).toContainText(`"type": "inlineMath"`);
+	await expect(astJson).toContainText(`"value": "x^2"`);
+});
+
+test(`should parse block Markdown math when Math is enabled`, async ({
+	page,
+}) => {
+	await page.goto("/");
+	await switchToMarkdown(page);
+	await replaceCodeEditorValue(page, "$$\nx^2\n$$");
+
+	const analysisPanel = page.getByRole("region", {
+		name: "Code Analysis Tools Panel",
+	});
+	await analysisPanel.getByRole("radio", { name: "JSON" }).click();
+	const astJson = analysisPanel.locator(".cm-content");
+
+	await expect(astJson).toContainText("$$");
+	await expect(astJson).toContainText("x^2");
+	await expect(astJson).not.toContainText(`"type": "math"`);
+
+	await enableMarkdownMath(page);
+
+	await expect(astJson).toContainText(`"type": "math"`);
+	await expect(astJson).toContainText(`"value": "x^2"`);
+});
+
+*/

e2e-tests/options.test.ts

@@ -100,6 +100,14 @@ test("should switch language and show options for each", async ({ page }) => {
 		await expect(
 			page.getByRole("combobox", { exact: true, name: "Front Matter" }),
 		).toBeVisible();
+
+		// `Math` Switch
+		await expect(
+			page.getByRole("switch", {
+				exact: true,
+				name: "Math",
+			}),
+		).toBeVisible();
 	});
 
 	// CSS