be more strict and use system font for better kbd shortcut rendering on macos (#5879)

Author: cscheid

src/resources/extensions/quarto/kbd/resources/kbd.css

@@ -1,2 +1,5 @@
-kbd.kbd {
+kbd.kbd.mac {
+  /* When rendering keyboard icons on macOS, we revert the font family to the 
+     system font to ensure the icons render with the same X-height as upper case letters. */
+  font-family: inherit;
 }

src/resources/extensions/quarto/kbd/resources/kbd.js

@@ -17,21 +17,43 @@
   }
   const os = guessOS();
 
+  const macosModifiers = {
+    "command": "⌘",
+    "cmd": "⌘",
+    "shift": "⇧",
+    "ctrl": "⌃",
+    "control": "⌃",
+    "option": "⌥",
+  };
+  const keyRegex = /^[a-z0-9_]+$/;
+    // use a non-capturing group to avoid capturing the key names
+
+  const macosModifiersRegex = new RegExp(
+    // use a non-capturing group to avoid capturing the key names
+    `^(?:${Object.keys(macosModifiers).join("|")})-`,
+    "gi"
+  );
+  const shortcutParses = (text) => {
+    text = text.toLocaleLowerCase();
+    while (text.match(macosModifiersRegex)) {
+      text = text.replace(macosModifiersRegex, "");
+    }
+    return text.match(keyRegex) !== null;
+  }
+
   // deno-lint-ignore no-window-prefix
   window.addEventListener("DOMContentLoaded", (_) => {
     for (const el of Array.from(document.querySelectorAll("kbd"))) {
       el.classList.add("kbd");
       if (el.dataset[os.name] !== undefined) {
         el.innerText = el.dataset[os.name];
       }
-      if (os.name === "mac") {
-        el.innerText = el.innerText
-          .replaceAll(/command-?/gi, "⌘")
-          .replaceAll(/cmd-?/gi, "⌘")
-          .replaceAll(/shift-?/gi, "⇧")
-          .replaceAll(/ctrl-?/gi, "⌃")
-          .replaceAll(/control-?/gi, "⌃")
-          .replaceAll(/option-?/gi, "⌥");
+      if (os.name === "mac" && shortcutParses(el.innerText)) {
+        el.classList.add("mac");
+        for (const [key, value] of Object.entries(macosModifiers)) {
+          el.innerText = el.innerText.replaceAll(new RegExp(`${key}-`, "gi"), value);
+        }
+        el.innerText = el.innerText.toLocaleUpperCase();
       }
     }
   });