ui: improve shortcut display for document mode

src/main/frontend/components/settings.cljs

@@ -13,6 +13,7 @@
             [frontend.handler.ui :as ui-handler]
             [frontend.handler.user :as user-handler]
             [frontend.modules.instrumentation.core :as instrument]
+            [frontend.modules.shortcut.data-helper :as shortcut-helper]
             [frontend.state :as state]
             [frontend.ui :as ui]
             [frontend.util :refer [classnames] :as util]
@@ -170,8 +171,7 @@
                 config-handler/toggle-ui-show-brackets!
                 true)]]
    [:div {:style {:text-align "right"}}
-    ;; TODO: Fetch this shortcut from config.cljs so there's one source of truth
-    (ui/keyboard-shortcut [:meta :c :meta :b])]])
+    (ui/keyboard-shortcut (shortcut-helper/gen-shortcut-seq :ui/toggle-brackets))]])
 
 (defn language-row [t preferred-language]
   [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
@@ -208,7 +208,7 @@
             :class    (classnames [{:active system-theme?}])} [:i.mode-system] [:strong "system"]]]]]
 
    [:div {:style {:text-align "right"}}
-    (ui/keyboard-shortcut [:t :t])]])
+    (ui/keyboard-shortcut (shortcut-helper/gen-shortcut-seq :ui/toggle-theme))]])
 
 (defn file-format-row [t preferred-format]
   [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start

src/main/frontend/components/sidebar.cljs

@@ -32,6 +32,7 @@
             [reitit.frontend.easy :as rfe]
             [goog.dom :as gdom]
             [frontend.handler.web.nfs :as nfs-handler]
+            [frontend.modules.shortcut.data-helper :as shortcut-dh]
             [cljs-drag-n-drop.core :as dnd]))
 
 (defn nav-item
@@ -268,8 +269,13 @@
     (ui/tippy {:html [:div.p-2
                       [:p.mb-2 [:b "Document mode"]]
                       [:ul
-                       [:li "Shift + Enter to create new block"]
-                       [:li "Click `D` or type `t d` to toggle document mode"]]]}
+                       [:li
+                        [:div.inline-block.mr-1 (ui/keyboard-shortcut (shortcut-dh/gen-shortcut-seq :editor/new-line))]
+                        [:p.inline-block  "to create new block"]]
+                       [:li
+                        [:p.inline-block.mr-1 "Click `D` or type"]
+                        [:div.inline-block.mr-1 (ui/keyboard-shortcut (shortcut-dh/gen-shortcut-seq :ui/toggle-document-mode))]
+                        [:p.inline-block "to toggle document mode"]]]]}
               [:a.block.px-1.text-sm.font-medium.bg-base-2.rounded-md.mx-2
                {:on-click state/toggle-document-mode!}
                "D"])))

src/main/frontend/modules/shortcut/core.cljs

@@ -47,7 +47,6 @@
             (log/debug :shortcut/register-shortcut {:id id :binding k})
             (.registerShortcut handler (util/keyname id) k)
             (catch js/Object e
-              (def e e)
               (log/error :shortcut/register-shortcut {:id id
                                                       :binding k
                                                       :error e})

src/main/frontend/modules/shortcut/data_helper.cljs

@@ -92,8 +92,19 @@
       (str/replace "mod" (if util/mac? "cmd" "ctrl"))
       (str/replace "alt" (if util/mac? "opt" "alt"))
       (str/replace "shift+/" "?")
+      (str/replace "open-square-bracket" "[")
+      (str/replace "close-square-bracket" "]")
       (str/lower-case)))
 
+;; if multiple bindings, gen seq for first binding only for now
+(defn gen-shortcut-seq [id]
+  (let [bindings (shortcut-binding id)]
+    (if (false? bindings)
+      []
+      (-> bindings
+          first
+          (str/split  #" |\+")))))
+
 (defn binding-for-display [k binding]
   (let [tmp (cond
               (false? binding)

src/main/frontend/ui.cljs

@@ -416,8 +416,7 @@
            (if (or (= :meta key) (= "meta" key))
              (util/meta-key-name)
              (name key))])
-        sequence)]
-  )
+        sequence)])
 
 (defonce modal-show? (atom false))
 (rum/defc modal-overlay