Fix bug in local cheatsheet when injecting cheatsheet info (#3364)

Recent update to `node-html-parser` introduced html escaping in our
data.

Author: AndreasArvidsson

packages/lib-cheatsheet-local/src/app.tsx

@@ -16,5 +16,8 @@ declare global {
 }
 
 export function App() {
+  if (document.cheatsheetInfo == null) {
+    throw new Error("Cheatsheet info is not available on the document.");
+  }
   return <Cheatsheet cheatsheetInfo={document.cheatsheetInfo} />;
 }

packages/lib-node-common/package.json

@@ -21,6 +21,7 @@
   "devDependencies": {
     "@types/js-yaml": "^4.0.9",
     "@types/lodash-es": "^4.17.12",
+    "@types/node": "^24.13.4",
     "js-yaml": "^5.4.1"
   }
 }

packages/lib-node-common/src/Cheatsheet.ts

@@ -1,6 +1,5 @@
 import { readFile, writeFile } from "node:fs/promises";
 import path from "node:path";
-import { parse } from "node-html-parser";
 import type { CheatsheetInfo, IDE } from "@cursorless/lib-common";
 import {
   getCheatsheetInfo,
@@ -9,6 +8,7 @@ import {
   showWarning,
 } from "@cursorless/lib-common";
 import type { FileSystemTalonSpokenForms } from "./FileSystemTalonSpokenForms";
+import { injectCheatsheetInfo } from "./injectCheatsheetInfo";
 
 interface CheatSheetCommandArgV0 {
   version: 0;
@@ -47,12 +47,11 @@ export async function showCheatsheet(
   );
   const cheatsheetPath = path.join(ide.assetsRoot, "cheatsheet.html");
   const cheatsheetContent = await readFile(cheatsheetPath, "utf8");
-  const root = parse(cheatsheetContent);
 
-  root.getElementById("cheatsheet-data")!.textContent =
-    `document.cheatsheetInfo = ${JSON.stringify(cheatsheetInfo)};`;
-
-  await writeFile(arg.outputPath, root.toString());
+  await writeFile(
+    arg.outputPath,
+    injectCheatsheetInfo(cheatsheetContent, cheatsheetInfo),
+  );
 }
 
 async function getCheatsheetInfoForCommand(

packages/lib-node-common/src/injectCheatsheetInfo.ts

@@ -0,0 +1,21 @@
+import { parse, TextNode } from "node-html-parser";
+import type { CheatsheetInfo } from "@cursorless/lib-common";
+
+export function injectCheatsheetInfo(
+  cheatsheetContent: string,
+  cheatsheetInfo: CheatsheetInfo,
+): string {
+  const root = parse(cheatsheetContent);
+  const serializedCheatsheetInfo = JSON.stringify(cheatsheetInfo).replaceAll(
+    "<",
+    String.raw`\u003c`,
+  );
+
+  root
+    .getElementById("cheatsheet-data")!
+    .set_content(
+      new TextNode(`document.cheatsheetInfo = ${serializedCheatsheetInfo};`),
+    );
+
+  return root.toString();
+}

packages/lib-node-common/test/Cheatsheet.test.ts

@@ -0,0 +1,41 @@
+import assert from "node:assert/strict";
+import { parse } from "node-html-parser";
+import type { CheatsheetInfo } from "@cursorless/lib-common";
+import { injectCheatsheetInfo } from "../src/injectCheatsheetInfo";
+
+suite("Cheatsheet", () => {
+  test("injects cheatsheet info as executable script text", () => {
+    const cheatsheetInfo: CheatsheetInfo = {
+      sections: [
+        {
+          id: "actions",
+          name: "Actions",
+          items: [
+            {
+              id: "test-action",
+              type: "action",
+              variations: [
+                {
+                  spokenForm: "take <target>",
+                  description: "Select A & B </script>",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    };
+
+    const output = injectCheatsheetInfo(
+      '<html><script id="cheatsheet-data">old data</script></html>',
+      cheatsheetInfo,
+    );
+    const script = parse(output).getElementById("cheatsheet-data")!;
+
+    assert.equal(
+      script.rawText,
+      `document.cheatsheetInfo = ${JSON.stringify(cheatsheetInfo).replaceAll("<", String.raw`\u003c`)};`,
+    );
+    assert.doesNotMatch(script.rawText, /&(?:amp|lt|quot);/u);
+  });
+});