Merge pull request #1 from finwo/feature/os-specific-keybindings

Implemented OS detection for registering different keybindings

Author: progrium

lib/ui/app/mod.tsx

@@ -5,6 +5,30 @@ import {Node} from "../../manifold/mod.tsx";
 import {Menu} from "../menu/mod.tsx";
 import { CommandPalette } from "../palette/mod.tsx";
 
+// Run this only once, it's unlikely the OS will change without a reload of the page
+const osType = (() => {
+  if (navigator.userAgent.toLowerCase().indexOf("win")   != -1) return "win";
+  if (navigator.userAgent.toLowerCase().indexOf("mac")   != -1) return "mac";
+  if (navigator.userAgent.toLowerCase().indexOf("linux") != -1) return "linux";
+  if (navigator.userAgent.toLowerCase().indexOf("x11")   != -1) return "unix";
+  return "unknown";
+})();
+
+// Returns an os-specific key from an object, the wildcard, or the first
+// Allows to define configurations that differ based on the OS the page is viewed from
+const osSpecific = function<T = unknown>(options: Record<string, T>): T {
+
+  // Sanity checking
+  const keys = Object.keys(options);
+  if (keys.length <= 0) {
+    throw new Error("Invalid options record object given, must contain at least one option");
+  }
+
+  // Return os-specific, fallback, or first, in that order of preference
+  if (keys.includes(osType)) return options[osType];
+  if (keys.includes("*")) return options["*"];
+  return options[keys[0]];
+};
 
 window.env = new Environment(new LocalStorageStore());
 env.commands.registerCommand({
@@ -16,7 +40,7 @@ env.commands.registerCommand({
     m.redraw();
   }
 });
-env.keybindings.registerBinding({command: "expand", key: "meta+arrowdown"});
+env.keybindings.registerBinding({command: "expand", key: osSpecific({ "mac": "meta+arrowdown", "*": "ctrl+arrowdown" }) });
 env.commands.registerCommand({
   id: "collapse",
   title: "Collapse",
@@ -26,7 +50,7 @@ env.commands.registerCommand({
     m.redraw();
   }
 });
-env.keybindings.registerBinding({command: "collapse", key: "meta+arrowup"});
+env.keybindings.registerBinding({command: "collapse", key: osSpecific({ "mac": "meta+arrowup", "*": "ctrl+arrowup" }) });
 env.commands.registerCommand({
   id: "indent",
   title: "Indent",
@@ -106,7 +130,7 @@ env.commands.registerCommand({
     }
   }
 });
-env.keybindings.registerBinding({command: "delete", key: "shift+meta+backspace"});
+env.keybindings.registerBinding({command: "delete", key: osSpecific({ "mac": "shift+meta+backspace", "*": "shift+ctrl+backspace" }) });
 env.commands.registerCommand({
   id: "prev",
   action: (ctx: Context) => {
@@ -180,4 +204,4 @@ export const App: m.Component = {
       {env.workspace.palette && <CommandPalette {...env.workspace.palette} />}
     </main>
   }
-};
+};