feat: dnd sidebar to whiteboard (#7617)

feat: dnd sidebar to whiteboard

src/main/frontend/components/block.cljs

@@ -1647,9 +1647,7 @@
 (defn- bullet-drag-start
   [event block uuid block-id]
   (editor-handler/highlight-block! uuid)
-  (.setData (gobj/get event "dataTransfer")
-            "block-uuid"
-            uuid)
+  (editor-handler/block->data-transfer! uuid event)
   (.setData (gobj/get event "dataTransfer")
             "block-dom-id"
             block-id)

src/main/frontend/components/right_sidebar.cljs

@@ -4,17 +4,18 @@
             [frontend.components.block :as block]
             [frontend.components.onboarding :as onboarding]
             [frontend.components.page :as page]
-            [frontend.components.svg :as svg]
             [frontend.components.shortcut :as shortcut]
+            [frontend.components.svg :as svg]
             [frontend.context.i18n :refer [t]]
             [frontend.date :as date]
             [frontend.db :as db]
             [frontend.db-mixins :as db-mixins]
             [frontend.db.model :as db-model]
             [frontend.extensions.slide :as slide]
+            [frontend.handler.editor :as editor-handler]
+            [frontend.handler.ui :as ui-handler]
             [frontend.state :as state]
             [frontend.ui :as ui]
-            [frontend.handler.ui :as ui-handler]
             [frontend.util :as util]
             [goog.object :as gobj]
             [medley.core :as medley]
@@ -57,7 +58,7 @@
 
 (defn- block-with-breadcrumb
   [repo block idx sidebar-key ref?]
-  (let [block-id (:block/uuid block)]
+  (when-let [block-id (:block/uuid block)]
     [[:div.mt-1 {:class (if ref? "ml-8" "ml-1")}
       (block/breadcrumb {:id     "block-parent"
                          :block? true
@@ -99,6 +100,8 @@
       [[:a.page-title {:href     (if (db-model/whiteboard-page? page-name)
                                    (rfe/href :whiteboard {:name page-name})
                                    (rfe/href :page {:name page-name}))
+                       :draggable true
+                       :on-drag-start (fn [event] (editor-handler/block->data-transfer! page-name event))
                        :on-click (fn [e]
                                    (when (gobj/get e "shiftKey")
                                      (.preventDefault e)))}

src/main/frontend/components/sidebar.cljs

@@ -115,7 +115,8 @@
                "dragging-target"
                "")
       :draggable true
-      :on-drag-start (fn [_event]
+      :on-drag-start (fn [event]
+                       (editor-handler/block->data-transfer! name event)
                        (state/set-state! :favorites/dragging name))
       :on-drag-over (fn [e]
                       (util/stop e)
@@ -178,6 +179,8 @@
           [:li.recent-item.select-none
            {:key name
             :title name
+            :draggable true
+            :on-drag-start (fn [event] (editor-handler/block->data-transfer! name event))
             :data-ref name}
            (page-name name (get-page-icon entity) true)]))])))
 

src/main/frontend/db/model.cljs

@@ -1680,6 +1680,15 @@
 
     :else false))
 
+(defn- block-or-page
+  [page-name-or-uuid]
+  (let [entity (get-page (str page-name-or-uuid))]
+    (if-not (some? (:block/name entity)) :block :page)))
+
+(defn page?
+  [page-name-or-uuid]
+  (= :page (block-or-page page-name-or-uuid)))
+
 (defn untitled-page?
   [page-name]
   (when-let [entity (db-utils/entity [:block/name (util/page-name-sanity-lc page-name)])]

src/main/frontend/extensions/tldraw.cljs

@@ -77,7 +77,9 @@
 
 (defn get-tldraw-handlers [current-whiteboard-name]
   {:search search-handler
-   :queryBlockByUUID #(clj->js (model/query-block-by-uuid (parse-uuid %)))
+   :queryBlockByUUID (fn [block-uuid]
+                       (clj->js
+                        (model/query-block-by-uuid (parse-uuid block-uuid))))
    :getBlockPageName #(:block/name (model/get-block-page (state/get-current-repo) (parse-uuid %)))
    :isWhiteboardPage model/whiteboard-page?
    :saveAsset save-asset-handler

src/main/frontend/handler/editor.cljs

@@ -3503,3 +3503,10 @@
           block (db/entity [:block/uuid block-id])
           content' (commands/clear-markdown-heading (:block/content block))]
       (save-block! repo block-id content'))))
+
+(defn block->data-transfer!
+  "Set block or page name to the given event's dataTransfer. Used in dnd."
+  [block-or-page-name event]
+  (.setData (gobj/get event "dataTransfer")
+            (if (db-model/page? block-or-page-name) "page-name" "block-uuid")
+            (str block-or-page-name)))

src/main/frontend/handler/whiteboard.cljs

@@ -173,11 +173,12 @@
 
 (defn page-name->tldr!
   ([page-name]
-   (if page-name
-     (if-let [[page-block blocks] (get-whiteboard-clj page-name)]
-       (whiteboard-clj->tldr page-block blocks)
-       (create-new-whiteboard-page! page-name))
-     (create-new-whiteboard-page! nil))))
+   (clj->js
+    (if page-name
+      (if-let [[page-block blocks] (get-whiteboard-clj page-name)]
+        (whiteboard-clj->tldr page-block blocks)
+        (create-new-whiteboard-page! page-name))
+      (create-new-whiteboard-page! nil)))))
 
 (defn- get-whiteboard-blocks
   "Given a page, return all the logseq blocks (exclude all shapes)"

tldraw/apps/tldraw-logseq/src/hooks/usePaste.ts

@@ -142,9 +142,10 @@ const handleCreatingShapes = async (
   async function tryCreateShapesFromDataTransfer(dataTransfer: DataTransfer) {
     return tryCreateShapeHelper(
       tryCreateShapeFromFiles,
+      tryCreateShapeFromPageName,
+      tryCreateShapeFromBlockUUID,
       tryCreateShapeFromTextHTML,
-      tryCreateShapeFromTextPlain,
-      tryCreateShapeFromBlockUUID
+      tryCreateShapeFromTextPlain
     )(dataTransfer)
   }
 
@@ -230,6 +231,17 @@ const handleCreatingShapes = async (
     return null
   }
 
+  async function tryCreateShapeFromPageName(dataTransfer: DataTransfer) {
+    // This is a Logseq custom data type defined in frontend.components.block
+    const rawText = dataTransfer.getData('page-name')
+    if (rawText) {
+      const text = rawText.trim()
+
+      return tryCreateLogseqPortalShapesFromString(`[[${text}]]`)
+    }
+    return null
+  }
+
   async function tryCreateShapeFromTextPlain(item: DataTransfer | ClipboardItem) {
     const rawText = await getDataFromType(item, 'text/plain')
     if (rawText) {