enhance: Consolidate keyboard shortcuts docs

resources/css/common.css

@@ -1119,6 +1119,10 @@ a.tooltip-priority {
   border-color: var(--ls-primary-text-color);
 }
 
+#help-latex .katex-html {
+  text-align: right;
+}
+
 a.page-op {
     svg {
         transform: scale(0.9);

src/main/frontend/components/onboarding.cljs

@@ -2,8 +2,6 @@
   (:require [frontend.components.shortcut :as shortcut]
             [frontend.components.svg :as svg]
             [frontend.context.i18n :as i18n]
-            [frontend.extensions.highlight :as highlight]
-            [frontend.extensions.latex :as latex]
             [frontend.handler.route :as route-handler]
             [frontend.ui :as ui]
             [frontend.util :as util]
@@ -212,78 +210,6 @@
         :class "text-sm p-1 ml-3"
         :on-click
         (fn []
-          (route-handler/redirect! {:to :shortcut-setting})))
-       (shortcut/trigger-table)
-       (shortcut/shortcut-table :shortcut.category/basics)
-       (shortcut/shortcut-table :shortcut.category/block-editing)
-       (shortcut/shortcut-table :shortcut.category/formatting)]
+          (route-handler/redirect! {:to :shortcut-setting})))]
 
-      [:li
-       (t :help/markdown-syntax)
-       [:table
-        [:tbody
-         (let [list [[(str "**" (t :bold) "**")
-                      [:b (t :bold)]]
-
-                     [(str "_" (t :italics) "_")
-                      [:i (t :italics)]]
-
-                     [(str "~~" (t :strikethrough) "~~")
-                      [:del (t :strikethrough)]]
-
-                     [(str "^^" (t :highlight) "^^")
-                      [:mark (t :highlight)]]
-
-                     ["$$E = mc^2$$"
-                      (latex/latex "help-latex" "E = mc^2" true false)]
-
-                     [(str "`" (t :code) "`")
-                      [:code (t :code)]]
-
-                     ["```clojure\n  (println \"Hello world!\")\n```"
-                      (highlight/highlight "help-highlight" {:data-lang "clojure"} "(println \"Hello world!\")")]
-
-                     ["[label](https://www.example.com)"
-                      [:a {:href "https://www.example.com" :target "_blank"} "label"]]
-
-                     ["![image](https://asset.logseq.com/static/img/logo.png)"
-                      [:img {:style {:float "right" :width 32 :height 32}
-                             :src "https://asset.logseq.com/static/img/logo.png"
-                             :alt "image"}]]]]
-
-           (map (fn [[trigger shortcut]] [:tr [:td [:pre trigger]] [:td.text-right shortcut]]) list))]]]
-
-      [:li
-       (t :help/org-mode-syntax)
-       [:table
-        [:tbody
-         (let [list [[(str "*" (t :bold) "*")
-                      [:b (t :bold)]]
-
-                     [(str "/" (t :italics) "/")
-                      [:i (t :italics)]]
-
-                     [(str "+" (t :strikethrough) "+") [:del (t :strikethrough)]]
-
-
-                     [(str "^^" (t :highlight) "^^")
-                      [:mark (t :highlight)]]
-
-                     ["$$E = mc^2$$"
-                      (latex/latex "help-latex" "E = mc^2" true false)]
-
-                     ["~Code~"
-                      [:code (t :code)]]
-
-                     [[:pre "#+BEGIN_SRC clojure\n  (println \"Hello world!\")\n#+END_SRC"]
-                      (highlight/highlight "help-highlight-org" {:data-lang "clojure"} "(println \"hello world\")")]
-
-                     ["[[https://www.example.com][label]]"
-                      [:a {:href "https://www.example.com"} "label"]]
-
-                     ["[[https://asset.logseq.com/static/img/logo.png][image]]"
-                      [:img {:style {:float "right" :width 32 :height 32}
-                             :src "https://asset.logseq.com/static/img/logo.png"
-                             :alt "image"}]]]]
-
-           (map (fn [[trigger shortcut]] [:tr [:td [:pre trigger]] [:td.text-right shortcut]]) list))]]]]]))
+      ]]))

src/main/frontend/components/shortcut.cljs

@@ -5,12 +5,14 @@
             [frontend.modules.shortcut.data-helper :as dh]
             [frontend.state :as state]
             [frontend.ui :as ui]
+            [frontend.extensions.latex :as latex]
+            [frontend.extensions.highlight :as highlight]
             [rum.core :as rum]))
 
 (rum/defcs customize-shortcut-dialog-inner <
   (rum/local "")
   (shortcut/record!)
-  [state _ action-name current-binding]
+  [state k action-name current-binding]
   (let [keypress (:rum/local state)
         keyboard-shortcut (if (= "" @keypress) current-binding @keypress)]
     [:div
@@ -19,12 +21,22 @@
       [:p.mb-4.mt-4
        (ui/keyboard-shortcut (-> keyboard-shortcut
                                  (str/trim)
-                                 (str/split  #" |\+")))]]
+                                 (str/lower-case)
+                                 (str/split  #" |\+")))
+       " "
+       [:a.text-sm
+        {:style {:margin-left "12px"}
+         :on-click (fn []
+                     (dh/remove-shortcut k)
+                     (shortcut/refresh!)
+                     (swap! keypress (fn [] "")) ;; Clear local state
+                     )}
+        "Reset"]]]
      [:div.cancel-save-buttons.text-right.mt-4
       (ui/button "Save" :on-click state/close-modal!)
       [:a.ml-4
        {:on-click (fn []
-                    (reset! keypress current-binding)
+                    (reset! keypress (dh/binding-for-storage current-binding))
                     (state/close-modal!))} "Cancel"]]]))
 
 (defn customize-shortcut-dialog [k action-name displayed-binding]
@@ -33,22 +45,21 @@
 
 (rum/defc shortcut-col [k binding configurable? action-name]
   (let [conflict?         (dh/potential-confilct? k)
-        displayed-binding (dh/binding-for-display k binding)]
+        displayed-binding (dh/binding-for-display k binding)
+        disabled?         (clojure.string/includes? displayed-binding "system default")]
     (if (not configurable?)
       [:td.text-right displayed-binding]
       [:td.text-right
        (ui/button
         displayed-binding
         :class "text-sm p-1"
+        :style {:cursor (if disabled? "not-allowed" "pointer")}
         :title (if conflict?
                  "Shortcut conflict!"
-                 "Click to modify")
-        :background (when conflict? "pink")
-        :on-click #(state/set-modal! (customize-shortcut-dialog k action-name displayed-binding)))
-       [:a.text-sm
-        {:style {:margin-left "12px"}
-         :on-click (fn [] (dh/remove-shortcut k) (shortcut/refresh!))}
-        "Reset"]])))
+                 (if disabled? "Cannot override system default" "Click to modify"))
+        :background (if conflict? "pink" (when disabled? "gray"))
+        :on-click (if-not disabled?
+                    #(state/set-modal! (customize-shortcut-dialog k action-name displayed-binding))))])))
 
 (rum/defc shortcut-table < rum/reactive
   ([name]
@@ -94,16 +105,76 @@
        [:td.text-right [:code "(())"]]]
       [:tr
        [:td.text-left (t :command.editor/open-link-in-sidebar)]
-       [:td.text-right "shift-click"]]
+       [:td.text-right (ui/keyboard-shortcut ["shift" "click"])]]
       [:tr
        [:td.text-left (t :help/context-menu)]
-       [:td.text-right "right click"]]]]))
+       [:td.text-right (ui/keyboard-shortcut ["right click"])]]]]))
+
+(defn markdown-and-orgmode-syntax []
+  (rum/with-context [[t] i18n/*tongue-context*]
+    (let [list [:bold :italics :del :mark :latex :code :link :pre :img]
+
+          preferred-format (state/get-preferred-format) ; markdown/org
+
+          title (case preferred-format
+                  :markdown (t :help/markdown-syntax)
+                  :org (t :help/org-mode-syntax))
+
+          learn-more (case preferred-format
+                       :markdown "https://www.markdownguide.org/basic-syntax"
+                       :org "https://orgmode.org/worg/dev/org-syntax.html")
+
+          raw (case preferred-format
+                :markdown {:bold (str "**" (t :bold) "**")
+                           :italics (str "_" (t :italics) "_")
+                           :link "[Link](https://www.example.com)"
+                           :del (str "~~" (t :strikethrough) "~~")
+                           :mark (str "^^" (t :highlight) "^^")
+                           :latex "$$E = mc^2$$"
+                           :code (str "`" (t :code) "`")
+                           :pre "```clojure\n  (println \"Hello world!\")\n```"
+                           :img "![image](https://asset.logseq.com/static/img/logo.png)"}
+                :org {:bold (str "*" (t :bold) "*")
+                      :italic (str "/" (t :italics) "/")
+                      :del (str "+" (t :strikethrough) "+")
+                      :pre [:pre "#+BEGIN_SRC clojure\n  (println \"Hello world!\")\n#+END_SRC"]
+                      :link "[[https://www.example.com][Link]]"
+                      :mark (str "^^" (t :highlight) "^^")
+                      :latex "$$E = mc^2$$"
+                      :code "~Code~"
+                      :img "[[https://asset.logseq.com/static/img/logo.png][image]]"})
+
+          rendered {:italics [:i (t :italics)]
+                    :bold [:b (t :bold)]
+                    :link [:a {:href "https://www.example.com"} "Link"]
+                    :del [:del (t :strikethrough)]
+                    :mark [:mark (t :highlight)]
+                    :latex (latex/latex "help-latex" "E = mc^2" true false)
+                    :code [:code (t :code)]
+                    :pre (highlight/highlight "help-highlight" {:data-lang "clojure"} "(println \"Hello world!\")")
+                    :img [:img {:style {:float "right" :width 32 :height 32}
+                                :src "https://asset.logseq.com/static/img/logo.png"
+                                :alt "image"}]}]
+
+      [:table
+       [:thead
+        [:tr
+         [:th.text-left [:b title]]
+         [:th.text-right [:a {:href learn-more} "Learn more →"]]]]
+       [:tbody
+        (map (fn [name]
+               [:tr
+                [:td.text-left [(if (= :pre name) :pre :code) (get raw name)]]
+                [:td.text-right (get rendered name)]])
+             list)]])))
 
 (rum/defc shortcut
   []
   (rum/with-context [[t] i18n/*tongue-context*]
     [:div
      [:h1.title (t :help/shortcut-page-title)]
+     (trigger-table)
+     (markdown-and-orgmode-syntax)
      (shortcut-table :shortcut.category/basics true)
      (shortcut-table :shortcut.category/navigating true)
      (shortcut-table :shortcut.category/block-editing true)

src/main/frontend/dicts.cljs

@@ -82,7 +82,7 @@
         :more "More"
         :search/result-for "Search result for "
         :search/items "items"
-        :help/context-menu "Context menu"
+        :help/context-menu "Block context menu"
         :help/fold-unfold "Fold/unfold blocks (when not in edit mode)"
         :help/markdown-syntax "Markdown syntax"
         :help/org-mode-syntax "Org mode syntax"

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

@@ -111,10 +111,10 @@
   (let [tmp (cond
               (false? binding)
               (cond
-                (and util/mac? (= k :editor/kill-line-after))    "disabled (system default: ctrl+k)"
-                (and util/mac? (= k :editor/beginning-of-block)) "disabled (system default: ctrl+a)"
-                (and util/mac? (= k :editor/end-of-block))       "disabled (system default: ctrl+e)"
-                (and util/mac? (= k :editor/backward-kill-word)) "disabled (system default: opt+delete)"
+                (and util/mac? (= k :editor/kill-line-after))    "system default: ctrl+k"
+                (and util/mac? (= k :editor/beginning-of-block)) "system default: ctrl+a"
+                (and util/mac? (= k :editor/end-of-block))       "system default: ctrl+e"
+                (and util/mac? (= k :editor/backward-kill-word)) "system default: opt+delete"
                 :else "disabled")
 
               (string? binding)
@@ -129,6 +129,9 @@
     ;; mod key, because that's what the Mac keyboards actually say.
     (str/replace tmp "meta" "cmd")))
 
+;; Given the displayed binding, prepare it to be put back into config.edn
+(defn binding-for-storage [binding]
+  (str/replace binding "cmd" "meta"))
 
 (defn remove-shortcut [k]
   (let [repo (state/get-current-repo)