HTML cheatsheet VSCode extension-side

Initial VSCode extension cheatsheet processing

Initial dom manipulation

Author: pokey

cursorless-talon/src/cheatsheet/cheat_sheet.py

@@ -1,5 +1,7 @@
 import math
+import tempfile
 import webbrowser
+from pathlib import Path
 from typing import Optional
 
 from talon import Module, actions, cron, skia, ui
@@ -289,13 +291,20 @@ def draw_value(self, canvas, text):
         self.w = max(self.w, rect.width)
 
 
+cheatsheet_out_dir = Path(tempfile.mkdtemp())
+
+
 @mod.action_class
 class Actions:
     def cursorless_cheat_sheet_toggle():
         """Toggle cursorless cheat sheet"""
-        actions.user.vscode_with_plugin(
-            "cursorless.showCheatsheet", actions.user.cursorless_cheat_sheet_get_json()
+        cheatsheet_out_path = cheatsheet_out_dir / "cheatsheet.html"
+        actions.user.vscode_with_plugin_and_wait(
+            "cursorless.showCheatsheet",
+            actions.user.cursorless_cheat_sheet_get_json(),
+            str(cheatsheet_out_path),
         )
+        webbrowser.open(cheatsheet_out_path.as_uri())
 
     def cursorless_cheat_sheet_get_json():
         """Get cursorless cheat sheet json"""

package.json

@@ -550,6 +550,7 @@
 	"dependencies": {
 		"@types/lodash": "^4.14.168",
 		"immutability-helper": "^3.1.1",
-		"lodash": "^4.17.21"
+		"lodash": "^4.17.21",
+		"node-html-parser": "^5.3.3"
 	}
 }

src/core/Cheatsheet.ts

@@ -0,0 +1,45 @@
+import * as vscode from "vscode";
+import { Graph } from "../typings/Types";
+import { readFile, writeFile } from "fs/promises";
+import path = require("path");
+import parse from "node-html-parser";
+
+type SpokenFormInfo = unknown;
+
+export default class Cheatsheet {
+  private disposables: vscode.Disposable[] = [];
+
+  constructor(private graph: Graph) {
+    graph.extensionContext.subscriptions.push(this);
+  }
+
+  init() {
+    this.disposables.push(
+      vscode.commands.registerCommand(
+        "cursorless.showCheatsheet",
+        async (spokenFormInfo: SpokenFormInfo, outputPath: string) => {
+          const cheatsheetPath = path.join(
+            this.graph.extensionContext.extensionPath,
+            "dist",
+            "assets",
+            "cheatsheet-local",
+            "index.html"
+          );
+          const cheatsheetContent = (await readFile(cheatsheetPath)).toString();
+          const root = parse(cheatsheetContent);
+          root.getElementById(
+            "cheatsheet-data"
+          ).textContent = `document.cheatsheetData = ${JSON.stringify(
+            spokenFormInfo
+          )};`;
+
+          await writeFile(outputPath, root.toString());
+        }
+      )
+    );
+  }
+
+  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

@@ -14,6 +14,7 @@ import { ModifierStage } from "../processTargets/PipelineStages.types";
 import { TestCaseRecorder } from "../testUtil/TestCaseRecorder";
 import { CommandServerApi } from "../util/getExtensionApi";
 import { FullRangeInfo } from "./updateSelections";
+import Cheatsheet from "../core/Cheatsheet";
 
 /**
  * A token within a text editor, including the current display line of the token
@@ -144,6 +145,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

@@ -12,5 +12,11 @@
 		// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
 		// "noUnusedParameters": true,  /* Report errors on unused parameters. */
 	},
-	"exclude": ["node_modules", "src/vendor", ".vscode-test", "data"]
+	"exclude": [
+		"cursorless-nx",
+		"node_modules",
+		"src/vendor",
+		".vscode-test",
+		"data"
+	]
 }

yarn.lock

@@ -386,6 +386,11 @@ bluebird@~3.4.1:
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.4.7.tgz#f72d760be09b7f76d08ed8fae98b289a8d05fab3"
   integrity sha1-9y12C+Cbf3bQjtj66Ysomo0F+rM=
 
+boolbase@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
+  integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -528,6 +533,22 @@ cross-spawn@^7.0.2:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+css-select@^4.2.1:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.3.0.tgz#db7129b2846662fd8628cfc496abb2b59e41529b"
+  integrity sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==
+  dependencies:
+    boolbase "^1.0.0"
+    css-what "^6.0.1"
+    domhandler "^4.3.1"
+    domutils "^2.8.0"
+    nth-check "^2.0.1"
+
+css-what@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
+  integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
+
 debug@4, debug@^4.1.1, debug@^4.3.2:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
@@ -584,6 +605,36 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+dom-serializer@^1.0.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.4.1.tgz#de5d41b1aea290215dc45a6dae8adcf1d32e2d30"
+  integrity sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^4.2.0"
+    entities "^2.0.0"
+
+domelementtype@^2.0.1, domelementtype@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
+  integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
+
+domhandler@^4.2.0, domhandler@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.1.tgz#8d792033416f59d68bc03a5aa7b018c1ca89279c"
+  integrity sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==
+  dependencies:
+    domelementtype "^2.2.0"
+
+domutils@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
+  integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==
+  dependencies:
+    dom-serializer "^1.0.1"
+    domelementtype "^2.2.0"
+    domhandler "^4.2.0"
+
 duplexer2@~0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.1.4.tgz#8b12dab878c0d69e3e7891051662a32fc6bddcc1"
@@ -596,6 +647,11 @@ emoji-regex@^8.0.0:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
   integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
+entities@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
+  integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
+
 esbuild@^0.11.12:
   version "0.11.23"
   resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.11.23.tgz#c42534f632e165120671d64db67883634333b4b8"
@@ -1290,6 +1346,14 @@ nise@^5.1.0:
     just-extend "^4.0.2"
     path-to-regexp "^1.7.0"
 
+node-html-parser@^5.3.3:
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/node-html-parser/-/node-html-parser-5.3.3.tgz#2845704f3a7331a610e0e551bf5fa02b266341b6"
+  integrity sha512-ncg1033CaX9UexbyA7e1N0aAoAYRDiV8jkTvzEnfd1GDvzFdrsXLzR4p4ik8mwLgnaKP/jyUFWDy9q3jvRT2Jw==
+  dependencies:
+    css-select "^4.2.1"
+    he "1.2.0"
+
 nopt-defaults@^0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/nopt-defaults/-/nopt-defaults-0.0.1.tgz#f150fcc8882309cbfb76187e12e9bcb20694558b"
@@ -1343,6 +1407,13 @@ npm-license-crawler@^0.2.1:
     nopt-usage "^0.1.0"
     treeify "^1.1.0"
 
+nth-check@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.0.1.tgz#2efe162f5c3da06a28959fbd3db75dbeea9f0fc2"
+  integrity sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==
+  dependencies:
+    boolbase "^1.0.0"
+
 once@^1.3.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"