enhance(ux): supprt reading mode with `t e` shortcut

src/main/frontend/components/block.cljs

@@ -1963,8 +1963,9 @@
   [config {:block/keys [uuid format] :as block} edit-input-id block-id heading-level edit?]
   (let [editor-box (get config :editor-box)
         editor-id (str "editor-" edit-input-id)
-        slide? (:slide? config)]
-    (if (and edit? editor-box)
+        slide? (:slide? config)
+        reading-mode? (state/sub :document/reading-mode?)]
+    (if (and edit? (not reading-mode?) editor-box)
       [:div.editor-wrapper {:id editor-id}
        (ui/catch-error
         [:p.warning "Something wrong in the editor"]
@@ -1988,9 +1989,10 @@
                    (:embed-parent config))
           [:a.opacity-30.hover:opacity-100.svg-small.inline
            {:on-mouse-down (fn [e]
-                             (util/stop e)
-                             (when-let [block (:embed-parent config)]
-                               (editor-handler/edit-block! block :max (:block/uuid block))))}
+                             (when-not reading-mode?
+                               (util/stop e)
+                               (when-let [block (:embed-parent config)]
+                                 (editor-handler/edit-block! block :max (:block/uuid block)))))}
            svg/edit])
 
         (block-refs-count block)]])))

src/main/frontend/components/header.css

@@ -109,6 +109,25 @@
       opacity: .9;
     }
   }
+
+  .doc-modes {
+    .non-editing {
+      position: relative;
+
+      &:after {
+        content: " ";
+        width: 90%;
+        height: 2px;
+        background-color: red;
+        position: absolute;
+        left: 0;
+        top: 9px;
+        transform: rotate(45deg);
+        opacity: .7;
+        border-radius: 4px;
+      }
+    }
+  }
 }
 
 .is-electron.is-mac .cp__header {

src/main/frontend/components/page.cljs

@@ -117,12 +117,14 @@
       (if (empty? page-blocks)
         (dummy-block page-name)
         (let [document-mode? (state/sub :document/mode?)
+              reading-mode?  (state/sub :document/reading-mode?)
               hiccup-config (merge
                              {:id (if block? (str block-id) page-name)
                               :block? block?
                               :editor-box editor/box
                               :page page
-                              :document/mode? document-mode?}
+                              :document/mode? document-mode?
+                              :document/reading-mode? reading-mode?}
                              config)
               hiccup-config (common-handler/config-with-document-mode hiccup-config)
               hiccup (block/->hiccup page-blocks hiccup-config {})]

src/main/frontend/components/sidebar.cljs

@@ -407,20 +407,33 @@
 
 (rum/defc new-block-mode < rum/reactive
   []
-  (when (state/sub [:document/mode?])
-    (ui/tippy {:html [:div.p-2
-                      [:p.mb-2 [:b "Document mode"]]
-                      [:ul
-                       [:li
-                        [:div.inline-block.mr-1 (ui/render-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/render-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"])))
+  [:div.doc-modes.flex
+   (when (state/sub [:document/mode?])
+     (ui/tippy {:html [:div.p-2
+                       [:p.mb-2 [:b "Document mode"]]
+                       [:ul
+                        [:li
+                         [:div.inline-block.mr-1 (ui/render-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/render-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"]))
+
+   (when (state/sub [:document/reading-mode?])
+     (ui/tippy {:html [:div.p-2
+                       [:p.mb-2 [:b "Reading mode"]]
+                       [:ul
+                        [:li
+                         [:p.inline-block.mr-1 "Click `E` or type"]
+                         [:div.inline-block.mr-1 (ui/render-keyboard-shortcut (shortcut-dh/gen-shortcut-seq :ui/toggle-reading-mode))]
+                         [:p.inline-block "to toggle reading mode"]]]]}
+               [:a.block.px-1.text-sm.font-medium.bg-base-2.rounded-md.mx-2.non-editing
+                {:on-click state/toggle-reading-mode!}
+                "E"]))])
 
 (rum/defc help-button < rum/reactive
   []

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

@@ -390,6 +390,10 @@
                                     :binding "t d"
                                     :fn      state/toggle-document-mode!}
 
+   :ui/toggle-reading-mode         {:desc    "Toggle reading mode"
+                                    :binding "t e"
+                                    :fn      state/toggle-reading-mode!}
+   
    :ui/toggle-settings              {:desc    "Toggle settings"
                                      :binding (if mac? "t s" ["t s" "mod+,"])
                                      :fn      ui-handler/toggle-settings-modal!}
@@ -598,6 +602,7 @@
                           :editor/open-file-in-directory
                           :editor/copy-current-file
                           :ui/toggle-wide-mode
+                          :ui/toggle-reading-mode
                           :ui/select-theme-color
                           :ui/goto-plugins
                           :editor/toggle-open-blocks
@@ -701,6 +706,7 @@
     :ui/toggle-document-mode
     :ui/toggle-brackets
     :ui/toggle-theme
+    :ui/toggle-reading-mode
     :ui/toggle-left-sidebar
     :ui/toggle-right-sidebar
     :ui/toggle-settings

src/main/frontend/state.cljs

@@ -18,7 +18,7 @@
             [frontend.mobile.util :as mobile-util]))
 
 (defonce ^:large-vars/data-var state
-  (let [document-mode? (or (storage/get :document/mode?) false)
+  (let [document-mode? (or (storage/get :document/doc-mode?) false)
        current-graph (let [graph (storage/get :git/current-repo)]
                        (when graph (ipc/ipc "setCurrentGraph" graph))
                        graph)]
@@ -98,6 +98,7 @@
      :ui/visual-viewport-state              nil
 
      :document/mode?                        document-mode?
+     :document/reading-mode?                (storage/get :document/reading-mode?)
 
      :github/contents                       {}
      :config                                {}
@@ -1195,7 +1196,17 @@
   []
   (let [mode (document-mode?)]
     (set-state! :document/mode? (not mode))
-    (storage/set :document/mode? (not mode))))
+    (storage/set :document/doc-mode? (not mode))))
+
+(defn reading-mode?
+  []
+  (get @state :document/reading-mode?))
+
+(defn toggle-reading-mode!
+  []
+  (let [m (reading-mode?)]
+    (set-state! :document/reading-mode? (not m))
+    (storage/set :document/reading-mode? (not m))))
 
 (defn shortcut-tooltip-enabled?
   []