tooltips: Add support for modifier key conversion for mac-syle keyboards.

We scan a tooltip for any required windows-to-mac hotkey conversions
from the list of attributes supplied to the hotkey_hints helper.

If we find any, we add/modify the hotkyes in the hotkey hints list to
match the mac-style key combinations and then return back the modified
list of hotkey hints to be displayed in the tooltip.

We also rename the "adjust_mac_shortcuts" function, used for the
keyboard shortcuts menu and help center documnets, to
"adjust_mac_kbd_tags" to avoid any ambiguity with the
adjust_mac_tooltip_keys funtion which is used for tooltip hotkeys.

static/js/common.ts

@@ -44,28 +44,30 @@ export function copy_data_attribute_value($elem: JQuery, key: string): void {
     $elem.fadeIn(1000);
 }
 
+const keys_map = new Map([
+    ["Backspace", "Delete"],
+    ["Enter", "Return"],
+    ["Home", "←"],
+    ["End", "→"],
+    ["PgUp", "↑"],
+    ["PgDn", "↓"],
+    ["Ctrl", "⌘"],
+    ["Alt", "⌘"],
+]);
+
+const fn_shortcuts = new Set(["Home", "End", "PgUp", "PgDn"]);
+
 export function has_mac_keyboard(): boolean {
     return /mac/i.test(navigator.platform);
 }
 
-export function adjust_mac_shortcuts(kbd_elem_class: string): void {
+// We convert the <kbd> tags used for keyboard shortcuts to mac equivalent
+// key combinations, when we detect that the user is using a mac-style keyboard.
+export function adjust_mac_kbd_tags(kbd_elem_class: string): void {
     if (!has_mac_keyboard()) {
         return;
     }
 
-    const keys_map = new Map([
-        ["Backspace", "Delete"],
-        ["Enter", "Return"],
-        ["Home", "←"],
-        ["End", "→"],
-        ["PgUp", "↑"],
-        ["PgDn", "↓"],
-        ["Ctrl", "⌘"],
-        ["Alt", "⌘"],
-    ]);
-
-    const fn_shortcuts = new Set(["Home", "End", "PgUp", "PgDn"]);
-
     $(kbd_elem_class).each(function () {
         let key_text = $(this).text();
 
@@ -83,6 +85,26 @@ export function adjust_mac_shortcuts(kbd_elem_class: string): void {
     });
 }
 
+// We convert the hotkey hints used in the tooltips to mac equivalent
+// key combinations, when we detect that the user is using a mac-style keyboard.
+export function adjust_mac_tooltip_keys(hotkeys: string[]): void {
+    if (!has_mac_keyboard()) {
+        return;
+    }
+
+    for (const [index, hotkey] of hotkeys.entries()) {
+        const replace_key = keys_map.get(hotkey);
+
+        if (replace_key !== undefined) {
+            hotkeys[index] = replace_key;
+        }
+
+        if (fn_shortcuts.has(hotkey)) {
+            hotkeys.unshift("Fn");
+        }
+    }
+}
+
 // See https://zulip.readthedocs.io/en/latest/development/authentication.html#password-form-implementation
 // for design details on this feature.
 function set_password_toggle_label(

static/js/info_overlay.js

@@ -250,8 +250,8 @@ export function set_up_toggler() {
         "notdisplayed",
         !user_settings.escape_navigates_to_default_view,
     );
-    common.adjust_mac_shortcuts(".hotkeys_table .hotkey kbd");
-    common.adjust_mac_shortcuts("#markdown-instructions kbd");
+    common.adjust_mac_kbd_tags(".hotkeys_table .hotkey kbd");
+    common.adjust_mac_kbd_tags("#markdown-instructions kbd");
 }
 
 export function show(target) {

static/js/popover_menus.js

@@ -236,7 +236,7 @@ export function initialize() {
             compose_enter_sends_popover_displayed = true;
         },
         onMount(instance) {
-            common.adjust_mac_shortcuts(".enter_sends_choices kbd");
+            common.adjust_mac_kbd_tags(".enter_sends_choices kbd");
 
             $(instance.popper).one("click", ".enter_sends_choice", (e) => {
                 let selected_behaviour = $(e.currentTarget)

static/js/portico/help.js

@@ -58,7 +58,7 @@ function render_code_sections() {
 
     highlight_current_article();
 
-    common.adjust_mac_shortcuts(".markdown kbd");
+    common.adjust_mac_kbd_tags(".markdown kbd");
 
     $("table").each(function () {
         $(this).addClass("table table-striped");

static/js/templates.js

@@ -1,5 +1,6 @@
 import Handlebars from "handlebars/runtime";
 
+import * as common from "./common";
 import {default_html_elements, intl} from "./i18n";
 import * as util from "./util";
 
@@ -108,6 +109,7 @@ Handlebars.registerHelper("numberFormat", (number) => number.toLocaleString());
 Handlebars.registerHelper("hotkey_hints", (...hotkeys) => {
     hotkeys.pop(); // Handlebars options
     let hotkey_hints = "";
+    common.adjust_mac_tooltip_keys(hotkeys);
     for (const hotkey of hotkeys) {
         hotkey_hints += `<span class="hotkey-hint">${hotkey}</span>`;
     }

static/js/ui_init.js

@@ -229,7 +229,7 @@ function initialize_compose_box() {
         }),
     );
     $(`.enter_sends_${user_settings.enter_sends}`).show();
-    common.adjust_mac_shortcuts(".enter_sends kbd");
+    common.adjust_mac_kbd_tags(".enter_sends kbd");
 }
 
 function initialize_message_feed_errors() {