feat: first working poc for whiteboard as page

deps/graph-parser/src/logseq/graph_parser/util.cljs

@@ -124,7 +124,7 @@
 (defn page-name-sanity-lc
   "Sanitize the query string for a page name (mandate for :block/name)"
   [s]
-  (when s (page-name-sanity (string/lower-case s))))
+  (page-name-sanity (string/lower-case s)))
 
 (defn capitalize-all
   [s]

src/main/frontend/components/page.cljs

@@ -243,13 +243,15 @@
                       (state/set-modal! (confirm-fn)))
                     (util/stop e))]
       (if @*edit?
-        [:h1.title.ls-page-title
-         {:class (util/classnames [{:editing @*edit?}])}
+        [:span
+         {:class (util/classnames [{:editing @*edit?}])
+          :style {:width "400px"}}
          [:input.edit-input
           {:type          "text"
            :ref           input-ref
            :auto-focus    true
            :style         {:outline "none"
+                           :width "100%"
                            :font-weight 600}
            :auto-complete (if (util/chrome?) "chrome-off" "off") ; off not working here
            :default-value old-name
@@ -278,7 +280,7 @@
                                          :page))
                                       (when (and (not hls-file?) (not fmt-journal?))
                                         (reset! *edit? true))))}
-         [:h1.title.ls-page-title {:data-ref page-name}
+         [:span {:data-ref page-name}
           (when (not= icon "") [:span.page-icon icon])
           title]]))))
 
@@ -372,7 +374,7 @@
                                  (page-mouse-leave e *control-show?))}
               (page-blocks-collapse-control title *control-show? *all-collapsed?)])
            [:div.flex-1.flex-row
-            (page-title page-name icon title format fmt-journal?)]
+            [:h1.title.ls-page-title (page-title page-name icon title format fmt-journal?)]]
            (when (not config/publishing?)
              [:div.flex.flex-row
               (when plugin-handler/lsp-enabled?

src/main/frontend/components/page.css

@@ -275,6 +275,7 @@ a.page-title {
   margin-left: -8px;
   transition: none;
   display: block;
+  color: inherit;
 }
 
 html.is-native-android,

src/main/frontend/components/sidebar.cljs

@@ -17,6 +17,7 @@
             [frontend.db :as db]
             [frontend.db-mixins :as db-mixins]
             [frontend.db.model :as db-model]
+            [frontend.db.model :as model]
             [frontend.extensions.pdf.assets :as pdf-assets]
             [frontend.extensions.srs :as srs]
             [frontend.handler.common :as common-handler]
@@ -71,17 +72,22 @@
 
 (rum/defc page-name
   [name icon]
-  (let [original-name (db-model/get-page-original-name name)]
+  (let [original-name (db-model/get-page-original-name name)
+        whiteboard-page? (model/whiteboard-page? name)]
     [:a {:on-click (fn [e]
                      (let [name (util/safe-page-name-sanity-lc name)]
-                       (if (gobj/get e "shiftKey")
+                       (if (and (gobj/get e "shiftKey") (not whiteboard-page?))
                          (when-let [page-entity (db/entity [:block/name name])]
                            (state/sidebar-add-block!
                             (state/get-current-repo)
                             (:db/id page-entity)
                             :page))
-                         (route-handler/redirect-to-page! name))))}
-     [:span.page-icon icon]
+                         (if whiteboard-page?
+                           (route-handler/redirect-to-whiteboard! name)
+                           (route-handler/redirect-to-page! name)))))}
+     [:span.page-icon (if whiteboard-page?
+                        [:span.ti.ti-artboard]
+                        icon)]
      (pdf-assets/fix-local-asset-filename original-name)]))
 
 (defn get-page-icon [page-entity]

src/main/frontend/components/whiteboard.cljs

@@ -1,7 +1,9 @@
 (ns frontend.components.whiteboard
-  (:require [frontend.components.page :as page]
+  (:require [datascript.core :as d]
+            [frontend.components.page :as page]
             [frontend.db.model :as model]
             [frontend.handler.route :as route-handler]
+            [frontend.handler.whiteboard :refer [create-new-whiteboard-page!]]
             [frontend.state :as state]
             [frontend.ui :as ui]
             [frontend.util :as util]
@@ -22,16 +24,10 @@
     (when draw-component
       (draw-component name))))
 
-(defn- get-whiteboard-name-from-route
-  [state]
-  (let [route-match (first (:rum/args state))]
-    (get-in route-match [:parameters :path :name])))
-
 (rum/defc dashboard-card
   [page-name]
   [:a.border.p-4.rounded.text-xl
-   {:key page-name
-    :on-mouse-down
+   {:on-mouse-down
     (fn [e]
       (util/stop e)
       (route-handler/redirect-to-whiteboard! page-name))} page-name])
@@ -44,27 +40,34 @@
                 :small? true
                 :on-click (fn [e]
                             (util/stop e)
-                            (route-handler/redirect-to-whiteboard! "new whiteboard")))
+                            (route-handler/redirect-to-whiteboard! (d/squuid) true)))
      [:div.flex.flex-col.gap-4.py-2
       (for [whiteboard-name whiteboard-names]
-        (dashboard-card whiteboard-name))]]))
+        [:<> {:key whiteboard-name} (dashboard-card whiteboard-name)])]]))
+
+(rum/defc whiteboard
+  [route-match]
+  (let [name (get-in route-match [:parameters :path :name])
+        new? (get-in route-match [:parameters :query :new?])]
+
+    (rum/use-effect! (fn [_]
+                       (when new? (create-new-whiteboard-page! name))
+                       nil)
+                     [name])
 
-(rum/defcs whiteboard < rum/reactive
-  [state]
-  (let [name (get-whiteboard-name-from-route state)]
     [:div.absolute.w-full.h-full
 
      ;; makes sure the whiteboard will not cover the borders
      {:key name
       :style {:padding "0.5px" :z-index 0}}
 
-     [:span.inline-flex.absolute.color-level.m-2.px-2
+     [:span.inline-flex.absolute.color-level.text-xl.m-2.px-2
       {:key name
-       :style {:z-index 2000}}
-      
-      (page/page-title name
-                       [:span.text-gray-500.ti.ti-artboard
-                        {:style {:vertical-align "middle" :font-size "0.9em"}}]
+       :style {:z-index 2000 :color "var(--ls-title-text-color, #222)"}}
+
+      (page/page-title name [:<>
+                             [:span.text-gray-500.ti.ti-artboard.mr-1
+                              {:style {:font-size "0.9em"}}]]
                        name nil false)]
 
      (tldraw-app name)]))

src/main/frontend/db/model.cljs

@@ -2,23 +2,24 @@
   "Core db functions."
   ;; TODO: Remove this config once how repos are passed to this ns are standardized
   {:clj-kondo/config {:linters {:unused-binding {:level :off}}}}
-  (:require [clojure.set :as set]
+  (:require [cljs.pprint :as pprint]
+            [clojure.set :as set]
             [clojure.string :as string]
             [clojure.walk :as walk]
             [datascript.core :as d]
             [frontend.config :as config]
             [frontend.date :as date]
-            [logseq.db.schema :as db-schema]
             [frontend.db.conn :as conn]
             [frontend.db.react :as react]
             [frontend.db.utils :as db-utils]
             [frontend.state :as state]
             [frontend.util :as util :refer [react]]
-            [logseq.graph-parser.util :as gp-util]
-            [logseq.graph-parser.config :as gp-config]
-            [logseq.db.rules :refer [rules]]
+            [frontend.util.drawer :as drawer]
             [logseq.db.default :as default-db]
-            [frontend.util.drawer :as drawer]))
+            [logseq.db.rules :refer [rules]]
+            [logseq.db.schema :as db-schema]
+            [logseq.graph-parser.config :as gp-config]
+            [logseq.graph-parser.util :as gp-util]))
 
 ;; lazy loading
 

src/main/frontend/handler/route.cljs

@@ -54,9 +54,12 @@
                :push push})))
 
 (defn redirect-to-whiteboard!
-  [name]
-  (redirect! {:to :whiteboard
-              :path-params {:name (str name)}}))
+  ([name]
+   (redirect-to-whiteboard! name false))
+  ([name new?]
+   (redirect! {:to :whiteboard
+               :path-params {:name (str name)}
+               :query-params (when new? {:new? 1})})))
 
 (defn get-title
   [name path-params]

src/main/frontend/handler/whiteboard.cljs

@@ -1,7 +1,10 @@
 (ns frontend.handler.whiteboard
-  (:require [frontend.state :as state]
-            [frontend.db :as db]
-            [clojure.string :as string]))
+  (:require [clojure.string :as string]
+            [frontend.db.model :as model]
+            [frontend.db.utils :as db-utils]
+            [frontend.modules.outliner.file :as outliner-file]
+            [frontend.state :as state]
+            [datascript.core :as d]))
 
 ;; FIXME: embed /draw should be supported too
 (defn whiteboard-mode?
@@ -27,4 +30,13 @@
                               [{:id (.-id fs)
                                 :logseqLink page-or-block-id}])))))))
 
-;; (set! (. js/window -foo) (page-name->tldr "edn-test"))
+(def default-tldr
+  (js/JSON.parse "{\"currentPageId\":\"page1\",\"selectedIds\":[],\"pages\":[{\"id\":\"page\",\"name\":\"Page\",\"shapes\":[],\"bindings\":{},\"nonce\":1}],\"assets\":[]}"))
+
+(defn create-new-whiteboard-page!
+  ([name]
+   (model/transact-tldr! name default-tldr)
+   (let [uuid (or (parse-uuid name) (d/squuid))
+         entity (db-utils/entity [:block/name name])]
+     (outliner-file/sync-to-file entity)
+     (db-utils/transact! [{:db/id (:db/id entity) :block/uuid uuid}]))))