Commands: allow linking to commands using the HTML fragment

Author: philc

pages/command_listing.html

@@ -38,7 +38,7 @@ <h2 id="misc" data-group="misc">Miscellaneous</h2>
     </main>
 
     <template id="command">
-      <div class="command">
+      <div class="command" id="example-command-name">
         <h3>
           <code>an-example-command</code>
           <span class="key-bindings"></span>

pages/command_listing.js

@@ -42,7 +42,8 @@ async function populatePage() {
       const keys = Object.values(commandToOptionsToKeys[command.name] || {})
         .flat(1);
       const el = commandTemplate.cloneNode(true);
-      el.querySelector(".command").dataset.command = command.name; // used by tests
+      // Used for linking to commands using the URL fragment, and by the tests.
+      el.querySelector(".command").id = command.name;
       el.querySelector("h3 code").textContent = command.name;
 
       const keysEl = el.querySelector(".key-bindings");

tests/unit_tests/command_listing_test.js

@@ -41,7 +41,7 @@ context("command listing", () => {
 
   should("show key mappings for mapped commands", async () => {
     const getKeys = (commandName) => {
-      const el = globalThis.document.querySelector(`.command[data-command=${commandName}]`);
+      const el = globalThis.document.querySelector(`.command#${commandName}`);
       if (!el) throw new Error(`${commandName} el not found.`);
       const keys = Array.from(el.querySelectorAll(".key")).map((el) => el.textContent);
       return keys;