Reimplement cheatsheet using html

Fixes #618

Author: pokey

.vscode/settings.json

@@ -11,6 +11,7 @@
     },
     // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
     "typescript.tsc.autoDetect": "off",
+    "python.formatting.provider": "black",
     "cSpell.words": [
         "Autoformatting",
         "camelize",

cursorless-talon/src/cheatsheet/cheat_sheet.py

@@ -1,13 +1,15 @@
-from talon import Module, ui, skia, actions, cron
-from talon.canvas import Canvas
-import webbrowser
+import json
 import math
+import webbrowser
+from pathlib import Path
 
-from .sections.actions import get_actions
-from .sections.scopes import get_scopes
-from .sections.compound_targets import get_compound_targets
+from talon import Module, actions, cron, skia, ui
+from talon.canvas import Canvas
 
 from .get_list import get_list, get_lists
+from .sections.actions import get_actions
+from .sections.compound_targets import get_compound_targets
+from .sections.scopes import get_scopes
 
 mod = Module()
 mod.mode("cursorless_cheat_sheet", "Mode for showing cursorless cheat sheet gui")
@@ -294,14 +296,50 @@ def draw_value(self, canvas, text):
 class Actions:
     def cursorless_cheat_sheet_toggle():
         """Toggle cursorless cheat sheet"""
-        global cheat_sheet
-        if cheat_sheet:
-            actions.mode.disable("user.cursorless_cheat_sheet")
-            cheat_sheet.close()
-            cheat_sheet = None
-        else:
-            cheat_sheet = CheatSheet()
-            actions.mode.enable("user.cursorless_cheat_sheet")
+        actions.user.vscode_with_plugin(
+            "cursorless.showCheatsheet", actions.user.cursorless_cheat_sheet_get_json()
+        )
+
+    def cursorless_cheat_sheet_get_json():
+        """Get cursorless cheat sheet json"""
+        return {
+            "sections": [
+                {
+                    "name": "Actions",
+                    "items": get_actions(),
+                },
+                {
+                    "name": "Scopes",
+                    "items": get_scopes(),
+                },
+                {
+                    "name": "Paired delimiters",
+                    "items": get_lists(
+                        [
+                            "wrapper_only_paired_delimiter",
+                            "wrapper_selectable_paired_delimiter",
+                            "selectable_only_paired_delimiter",
+                        ]
+                    ),
+                },
+                {
+                    "name": "Special marks",
+                    "items": get_list("special_mark"),
+                },
+                {
+                    "name": "Positions",
+                    "items": get_list("position"),
+                },
+                {
+                    "name": "Colors",
+                    "items": get_list("hat_color"),
+                },
+                {
+                    "name": "Shapes",
+                    "items": get_list("hat_shape"),
+                },
+            ]
+        }
 
     def cursorless_open_instructions():
         """Open web page with cursorless instructions"""

package.json

@@ -63,6 +63,10 @@
 			{
 				"command": "cursorless.resumeRecording",
 				"title": "Cursorless: Resume test case recording"
+			},
+			{
+				"command": "cursorless.showCheatsheet",
+				"title": "Cursorless: Resume test case recording"
 			}
 		],
 		"colors": [
@@ -532,4 +536,4 @@
 		"immutability-helper": "^3.1.1",
 		"lodash": "^4.17.21"
 	}
-}
+}

src/core/Cheatsheet.ts

@@ -0,0 +1,29 @@
+import * as vscode from "vscode";
+import { Graph } from "../typings/Types";
+
+type SpokenFormInfo = any;
+
+export default class Cheatsheet {
+  private disposables: vscode.Disposable[] = [];
+
+  constructor(graph: Graph) {
+    graph.extensionContext.subscriptions.push(this);
+  }
+
+  init() {
+    this.disposables.push(
+      vscode.commands.registerCommand(
+        "cursorless.showCheatsheet",
+        (spokenFormInfo: SpokenFormInfo) => {
+          console.log(
+            `spokenFormInfo: ${JSON.stringify(spokenFormInfo, undefined, 2)}`
+          );
+        }
+      )
+    );
+  }
+
+  dispose() {
+    this.disposables.forEach(({ dispose }) => dispose());
+  }
+}

src/extension.ts

@@ -30,6 +30,7 @@ export async function activate(context: vscode.ExtensionContext) {
   await graph.decorations.init();
   graph.hatTokenMap.init();
   graph.testCaseRecorder.init();
+  graph.cheatsheet.init();
 
   const thatMark = new ThatMark();
   const sourceMark = new ThatMark();

src/typings/Types.ts

@@ -13,6 +13,7 @@ import { CommandServerApi } from "../util/getExtensionApi";
 import { ReadOnlyHatMap } from "../core/IndividualHatMap";
 import Debug from "../core/Debug";
 import { TestCaseRecorder } from "../testUtil/TestCaseRecorder";
+import Cheatsheet from "../core/Cheatsheet";
 
 /**
  * A token within a text editor, including the current display line of the token
@@ -487,6 +488,11 @@ export interface Graph {
    * Used for recording test cases
    */
   readonly testCaseRecorder: TestCaseRecorder;
+
+  /**
+   * Used to display cheatsheet
+   */
+  readonly cheatsheet: Cheatsheet;
 }
 
 export type NodeMatcherValue = {

src/util/graphFactories.ts

@@ -9,6 +9,7 @@ import Decorations from "../core/Decorations";
 import FontMeasurements from "../core/FontMeasurements";
 import Debug from "../core/Debug";
 import { TestCaseRecorder } from "../testUtil/TestCaseRecorder";
+import Cheatsheet from "../core/Cheatsheet";
 
 type ConstructorMap<T> = {
   [P in keyof T]: new (t: T) => T[P];
@@ -24,6 +25,7 @@ const graphConstructors: Partial<ConstructorMap<Graph>> = {
   rangeUpdater: RangeUpdater,
   debug: Debug,
   testCaseRecorder: TestCaseRecorder,
+  cheatsheet: Cheatsheet,
 };
 
 const graphFactories: Partial<FactoryMap<Graph>> = Object.fromEntries(

tsconfig.json

@@ -18,6 +18,7 @@
 		"node_modules",
 		"src/vendor",
 		".vscode-test",
-        "data"
+		"data",
+		"cheatsheet"
 	]
 }