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?])
+    (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
-     {:title "Click to switch to \"Enter\" for creating new block"
-      :on-click state/toggle-new-block-shortcut!}
-     "A"]))
+      {:on-click state/toggle-new-block-shortcut!}
+      "A"])))
 
 (rum/defc help-button < rum/reactive
   []

src/main/frontend/state.cljs

@@ -16,6 +16,7 @@
 
 (defonce ^:private state
   (atom
+   (let [document-mode? (or (storage/get :document/mode?) false)]
      {:route-match nil
       :today nil
       :system/events (async/chan 100)
@@ -69,7 +70,7 @@
       ;; 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 {}
@@ -90,7 +91,7 @@
       :editor/block-dom-id nil
       :editor/set-timestamp-block nil
       :editor/last-input-time nil
-    :editor/new-block-toggle? false
+      :editor/new-block-toggle? document-mode?
       :editor/args nil
       :db/last-transact-time {}
       :db/last-persist-transact-ids {}
@@ -137,7 +138,7 @@
 
       :date-picker/date nil
 
-    :view/components {}}))
+      :view/components {}})))
 
 (defn get-route-match
   []
@@ -898,12 +899,6 @@
   [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
@@ -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))