Use ⌘ to trigger search bar for Mac users

The standard way to trigger a search bar on websites for Mac users has become the command key (see for example tailwind.com or github.com).

This PR allows focusing the search bar with either the `ctrlKey` or the `metakey`, so both platforms are supported. It also updates the placeholder text for MacOS users to show ⌘+K instead of Ctrl+K.

src/theme/SearchBar/DocSearch.js

@@ -86,10 +86,9 @@ class DocSearch {
             DocSearch.bindSearchBoxEvent();
         }
 
-
-        // Ctrl + K should focus the search bar, emulating the Algolia search UI
+        // Ctrl/Cmd + K should focus the search bar, emulating the Algolia search UI
         document.addEventListener('keydown',  (e) => {
-            if (e.ctrlKey && e.key == 'k') {
+            if ((e.ctrlKey || e.metaKey) && e.key == 'k') {
                 this.input.focus();
 
                 // By default, using Ctrl + K in Chrome will open the location bar, so disable this

src/theme/SearchBar/index.jsx

@@ -96,8 +96,11 @@ const Search = props => {
     [props.isSearchBarExpanded]
   );
 
+  let placeholder
   if (isBrowser) {
     loadAlgolia();
+    placeholder = window.navigator.platform.startsWith("Mac") ?
+      'Search ⌘+K' : 'Search Ctrl+K'
   }
 
   return (
@@ -115,7 +118,7 @@ const Search = props => {
       <input
         id="search_input_react"
         type="search"
-        placeholder={indexReady ? 'Search Ctrl+K' : 'Loading...'}
+        placeholder={indexReady ? placeholder : 'Loading...'}
         aria-label="Search"
         className={clsx(
           "navbar__search-input",