enhance: document mode

src/main/frontend/components/block.cljs

@@ -2348,10 +2348,12 @@
         blocks->vec-tree #(if (or custom-query? ref?) % (tree/blocks->vec-tree % (:id config)))
         blocks' (blocks->vec-tree blocks)
         blocks (if (seq blocks') blocks' blocks)
-        config (assoc config :blocks-container-id blocks-container-id)]
+        config (assoc config :blocks-container-id blocks-container-id)
+        doc-mode? (:document/mode? config)]
     (when (seq blocks)
       [:div.blocks-container.flex-1
-       {:style {:margin-left (cond
+       {:class (when doc-mode? "document-mode")
+        :style {:margin-left (cond
                                sidebar?
                                0
                                :else

src/main/frontend/components/block.css

@@ -266,6 +266,29 @@
     margin: 0.4em 0 0;
 }
 
+.document-mode .ls-block h1, .document-mode .editor-inner .h1 {
+    margin: 0.67em 0;
+}
+.document-mode .ls-block h2, .document-mode .editor-inner .h2 {
+    margin: 0.75em 0;
+}
+.document-mode .ls-block h3, .document-mode .editor-inner .h3 {
+    margin: 0.83em 0;
+}
+.document-mode .ls-block h4, .document-mode .editor-inner .h4 {
+    margin: 1.12em 0;
+}
+.document-mode .ls-block h5, .document-mode .editor-inner .h5 {
+    margin: 1.5em 0;
+}
+.document-mode .ls-block h6, .document-mode .editor-inner .h6 {
+    margin: 1.67em 0;
+}
+
+.document-mode .ls-block {
+    margin-bottom: 2rem;
+}
+
 .color-level {
   background-color: var(--color-level-1);
 }

src/main/frontend/components/sidebar.cljs

@@ -265,10 +265,13 @@
 (rum/defc new-block-mode < rum/reactive
   []
   (when (state/sub [:editor/new-block-toggle?])
-    [:a.px-1.text-sm.font-medium.bg-base-2.mr-4.rounded-md
-     {:title "Click to switch to \"Enter\" for creating new block"
-      :on-click state/toggle-new-block-shortcut!}
-     "A"]))
+    (ui/tippy {:html [:ul
+                      [:li "Shift + Enter to create new block"]
+                      [:li "Click to switch back to the default behaviour"]
+                      [:li "Type `t d` to toggle document mode"]]}
+     [:a.px-1.text-sm.font-medium.bg-base-2.mr-4.rounded-md
+      {:on-click state/toggle-new-block-shortcut!}
+      "A"])))
 
 (rum/defc help-button < rum/reactive
   []

src/main/frontend/state.cljs

@@ -16,128 +16,129 @@
 
 (defonce ^:private state
   (atom
-   {:route-match nil
-    :today nil
-    :system/events (async/chan 100)
-    :db/batch-txs (async/chan 100)
-    :file/writes (async/chan 100)
-    :notification/show? false
-    :notification/content nil
-    :repo/cloning? false
-    :repo/loading-files? nil
-    :repo/importing-to-db? nil
-    :repo/sync-status {}
-    :repo/changed-files nil
-    :nfs/user-granted? {}
-    :nfs/refreshing? nil
-    :instrument/disabled? (storage/get "instrument-disabled")
-    ;; TODO: how to detect the network reliably?
-    :network/online? true
-    :indexeddb/support? true
-    :me nil
-    :git/current-repo (storage/get :git/current-repo)
-    :git/status {}
-    :format/loading {}
-    :draw? false
-    :db/restoring? nil
+   (let [document-mode? (or (storage/get :document/mode?) false)]
+     {:route-match nil
+      :today nil
+      :system/events (async/chan 100)
+      :db/batch-txs (async/chan 100)
+      :file/writes (async/chan 100)
+      :notification/show? false
+      :notification/content nil
+      :repo/cloning? false
+      :repo/loading-files? nil
+      :repo/importing-to-db? nil
+      :repo/sync-status {}
+      :repo/changed-files nil
+      :nfs/user-granted? {}
+      :nfs/refreshing? nil
+      :instrument/disabled? (storage/get "instrument-disabled")
+      ;; TODO: how to detect the network reliably?
+      :network/online? true
+      :indexeddb/support? true
+      :me nil
+      :git/current-repo (storage/get :git/current-repo)
+      :git/status {}
+      :format/loading {}
+      :draw? false
+      :db/restoring? nil
 
-    :journals-length 2
+      :journals-length 2
 
-    :search/q ""
-    :search/mode :global
-    :search/result nil
+      :search/q ""
+      :search/mode :global
+      :search/result nil
 
-    ;; modals
-    :modal/show? false
+      ;; modals
+      :modal/show? false
 
-    ;; right sidebar
-    :ui/settings-open? false
-    :ui/sidebar-open? false
-    :ui/left-sidebar-open? false
-    :ui/theme (or (storage/get :ui/theme) "dark")
-    :ui/system-theme? ((fnil identity (or util/mac? util/win32? false)) (storage/get :ui/system-theme?))
-    :ui/wide-mode? false
-    ;; :show-all, :hide-block-body, :hide-block-children
-    :ui/cycle-collapse :show-all
-    :ui/sidebar-collapsed-blocks {}
-    :ui/root-component nil
-    :ui/file-component nil
-    :ui/custom-query-components {}
-    :ui/show-recent? false
-    :ui/developer-mode? (or (= (storage/get "developer-mode") "true")
-                            false)
-    ;; remember scroll positions of visited paths
-    :ui/paths-scroll-positions {}
+      ;; right sidebar
+      :ui/settings-open? false
+      :ui/sidebar-open? false
+      :ui/left-sidebar-open? false
+      :ui/theme (or (storage/get :ui/theme) "dark")
+      :ui/system-theme? ((fnil identity (or util/mac? util/win32? false)) (storage/get :ui/system-theme?))
+      :ui/wide-mode? false
+      ;; :show-all, :hide-block-body, :hide-block-children
+      :ui/cycle-collapse :show-all
+      :ui/sidebar-collapsed-blocks {}
+      :ui/root-component nil
+      :ui/file-component nil
+      :ui/custom-query-components {}
+      :ui/show-recent? false
+      :ui/developer-mode? (or (= (storage/get "developer-mode") "true")
+                              false)
+      ;; remember scroll positions of visited paths
+      :ui/paths-scroll-positions {}
 
-    :document/mode? (or (storage/get :document/mode?) false)
+      :document/mode? document-mode?
 
-    :github/contents {}
-    :config {}
-    :block/component-editing-mode? false
-    :editor/draw-mode? false
-    :editor/show-page-search? false
-    :editor/show-page-search-hashtag? false
-    :editor/show-date-picker? false
-    ;; With label or other data
-    :editor/show-input nil
-    :editor/last-saved-cursor nil
-    :editor/editing? nil
-    :editor/last-edit-block-input-id nil
-    :editor/last-edit-block-id nil
-    :editor/in-composition? false
-    :editor/content {}
-    :editor/block nil
-    :editor/block-dom-id nil
-    :editor/set-timestamp-block nil
-    :editor/last-input-time nil
-    :editor/new-block-toggle? false
-    :editor/args nil
-    :db/last-transact-time {}
-    :db/last-persist-transact-ids {}
-    ;; whether database is persisted
-    :db/persisted? {}
-    :db/latest-txs (or (storage/get-transit :db/latest-txs) {})
-    :cursor-range nil
+      :github/contents {}
+      :config {}
+      :block/component-editing-mode? false
+      :editor/draw-mode? false
+      :editor/show-page-search? false
+      :editor/show-page-search-hashtag? false
+      :editor/show-date-picker? false
+      ;; With label or other data
+      :editor/show-input nil
+      :editor/last-saved-cursor nil
+      :editor/editing? nil
+      :editor/last-edit-block-input-id nil
+      :editor/last-edit-block-id nil
+      :editor/in-composition? false
+      :editor/content {}
+      :editor/block nil
+      :editor/block-dom-id nil
+      :editor/set-timestamp-block nil
+      :editor/last-input-time nil
+      :editor/new-block-toggle? document-mode?
+      :editor/args nil
+      :db/last-transact-time {}
+      :db/last-persist-transact-ids {}
+      ;; whether database is persisted
+      :db/persisted? {}
+      :db/latest-txs (or (storage/get-transit :db/latest-txs) {})
+      :cursor-range nil
 
-    :selection/mode false
-    :selection/blocks []
-    :selection/start-block nil
-    ;; either :up or :down, defaults to down
-    ;; used to determine selection direction when two or more blocks are selected
-    :selection/direction :down
-    :custom-context-menu/show? false
-    :custom-context-menu/links nil
+      :selection/mode false
+      :selection/blocks []
+      :selection/start-block nil
+      ;; either :up or :down, defaults to down
+      ;; used to determine selection direction when two or more blocks are selected
+      :selection/direction :down
+      :custom-context-menu/show? false
+      :custom-context-menu/links nil
 
-    ;; pages or blocks in the right sidebar
-    ;; It is a list of `[repo db-id block-type block-data]` 4-tuple
-    :sidebar/blocks '()
+      ;; pages or blocks in the right sidebar
+      ;; It is a list of `[repo db-id block-type block-data]` 4-tuple
+      :sidebar/blocks '()
 
-    :preferred-language (storage/get :preferred-language)
+      :preferred-language (storage/get :preferred-language)
 
-    ;; electron
-    :electron/updater-pending? false
-    :electron/updater {}
+      ;; electron
+      :electron/updater-pending? false
+      :electron/updater {}
 
-    ;; plugin
-    :plugin/indicator-text        nil
-    :plugin/installed-plugins     {}
-    :plugin/installed-themes      []
-    :plugin/installed-commands    {}
-    :plugin/simple-commands       {}
-    :plugin/selected-theme        nil
-    :plugin/selected-unpacked-pkg nil
-    :plugin/active-readme         nil
+      ;; plugin
+      :plugin/indicator-text        nil
+      :plugin/installed-plugins     {}
+      :plugin/installed-themes      []
+      :plugin/installed-commands    {}
+      :plugin/simple-commands       {}
+      :plugin/selected-theme        nil
+      :plugin/selected-unpacked-pkg nil
+      :plugin/active-readme         nil
 
-    ;; all notification contents as k-v pairs
-    :notification/contents {}
-    :graph/syncing? false
+      ;; all notification contents as k-v pairs
+      :notification/contents {}
+      :graph/syncing? false
 
-    ;; copied blocks
-    :copy/blocks {:copy/content nil :copy/block-tree nil}
+      ;; copied blocks
+      :copy/blocks {:copy/content nil :copy/block-tree nil}
 
-    :date-picker/date nil
+      :date-picker/date nil
 
-    :view/components {}}))
+      :view/components {}})))
 
 (defn get-route-match
   []
@@ -154,8 +155,8 @@
 (defn get-current-page
   []
   (when (= :page (get-current-route))
-   (get-in (get-route-match)
-           [:path-params :name])))
+    (get-in (get-route-match)
+            [:path-params :name])))
 
 (defn route-has-p?
   []
@@ -898,18 +899,12 @@
   [value]
   (set-state! :today value))
 
-(defn toggle-document-mode!
-  []
-  (let [mode (get @state :document/mode?)]
-    (set-state! :document/mode? (not mode))
-    (storage/set :document/mode? (not mode))))
-
 (defn get-date-formatter
   []
   (or
    (when-let [repo (get-current-repo)]
      (get-in @state [:config repo :date-formatter]))
-    ;; TODO:
+   ;; TODO:
    (get-in @state [:me :settings :date-formatter])
    "MMM do, yyyy"))
 
@@ -1054,6 +1049,13 @@
   []
   (update-state! :editor/new-block-toggle? not))
 
+(defn toggle-document-mode!
+  []
+  (let [mode (get @state :document/mode?)]
+    (set-state! :document/mode? (not mode))
+    (storage/set :document/mode? (not mode)))
+  (toggle-new-block-shortcut!))
+
 (defn enable-tooltip?
   []
   (get (get (sub-config) (get-current-repo))
@@ -1176,7 +1178,7 @@
      (when-let [last-time (get-in @state [:editor/last-input-time repo])]
        (let [now (util/time-ms)]
          (>= (- now last-time) 500)))
-      ;; not in editing mode
+     ;; not in editing mode
      (not (get-edit-input-id)))))
 
 (defn set-last-persist-transact-id!