Whiteboard link

externs.js

@@ -130,6 +130,8 @@ dummy.restart = function() {};
 dummy.observe = function() {};
 dummy.contentRect = function() {};
 dummy.height = function() {};
+dummy.createShapes = function() {};
+dummy.updateShapes = function() {};
 
 /**
  * @typedef {{

src/main/frontend/components/search.cljs

@@ -115,9 +115,10 @@
 (defn- search-on-chosen
   [repo search-q {:keys [type data alias]}]
   (search-handler/add-search-to-recent! repo search-q)
-  (search-handler/clear-search!)
   (let [whiteboard? (whiteboard-handler/whiteboard-mode?)
-        search-mode (:search/mode @state/state)]
+        search-mode (:search/mode @state/state)
+        whiteboard-link? (= search-mode :whiteboard/link)]
+    (search-handler/clear-search!)
     (case type
       :graph-add-filter
       (state/add-graph-search-filter! search-q)
@@ -134,8 +135,13 @@
 
       :page
       (let [data (or alias data)]
-        (if whiteboard?
+        (cond
+          whiteboard-link?
+          (whiteboard-handler/set-linked-page-or-block! data)
+
+          whiteboard?
           (whiteboard-handler/create-page! data)
+          :else
           (route/redirect-to-page! data)))
 
       :file
@@ -147,8 +153,16 @@
             collapsed? (db/parents-collapsed? repo block-uuid)
             page (:block/page (db/entity [:block/uuid block-uuid]))
             long-page? (block-handler/long-page? repo (:db/id page))]
-        (if whiteboard?
+        (cond
+          whiteboard-link?
+          (do
+            (editor-handler/set-blocks-id! [block-uuid])
+            (whiteboard-handler/set-linked-page-or-block! (str block-uuid)))
+
+          whiteboard?
           (whiteboard-handler/create-page! (str block-uuid))
+
+          :else
           (if page
             (if (or collapsed? long-page?)
               (route/redirect-to-page! block-uuid)

src/main/frontend/handler/whiteboard.cljs

@@ -1,6 +1,7 @@
 (ns frontend.handler.whiteboard
   (:require [frontend.state :as state]
-            [clojure.string :as string]))
+            [clojure.string :as string]
+            [goog.object :as gobj]))
 
 ;; FIXME: embed /draw should be supported too
 (defn whiteboard-mode?
@@ -15,3 +16,13 @@
                           [{:id (str "logseq-portal-" page-title)
                             :type "logseq-portal"
                             :pageId page-title}])))))
+
+(defn set-linked-page-or-block!
+  [page-or-block-id]
+  (when-let [app ^js (state/get-current-whiteboard)]
+    (let [shapes (:whiteboard/linked-shapes @state/state)]
+      (when (and (seq shapes) page-or-block-id)
+        (let [fs (first shapes)]
+          (.updateShapes app (clj->js
+                              [{:id (.-id fs)
+                                :logseqLink page-or-block-id}])))))))

tldraw/apps/tldraw-logseq/src/lib/shapes/LogseqPortalShape.tsx

@@ -134,6 +134,7 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
       >
         {pageId && (
           <div
+            class='ls-whiteboard-card-header'
             style={{
               height: '32px',
               width: '100%',

tldraw/packages/core/src/lib/shapes/TLShape/TLShape.ts

@@ -40,6 +40,7 @@ export interface TLShapeProps {
   isGenerated?: boolean
   isSizeLocked?: boolean
   isAspectRatioLocked?: boolean
+  logseqLink?: string
 }
 
 export interface TLResizeStartInfo {

tldraw/packages/react/src/components/Shape/Shape.tsx

@@ -4,6 +4,7 @@ import { observer } from 'mobx-react-lite'
 import { Container } from '~components'
 import type { TLReactShape } from '~lib'
 import { useShapeEvents } from '~hooks/useShapeEvents'
+import { useApp } from '~hooks'
 import type { TLAsset } from '@tldraw/core'
 
 interface ShapeProps {
@@ -36,6 +37,11 @@ export const Shape = observer(function Shape({
     ReactComponent,
   } = shape
   const events = useShapeEvents(shape)
+  const app = useApp()
+  let linkButton = null
+  if (shape.serialized.logseqLink) {
+    linkButton = <a onClick={() => app.pubEvent(shape.serialized.logseqLink)}>Go to Link</a>
+  }
   return (
     <Container bounds={bounds} rotation={rotation} scale={scale}>
       <ReactComponent
@@ -49,6 +55,7 @@ export const Shape = observer(function Shape({
         asset={asset}
         onEditingEnd={onEditingEnd}
       />
+      {linkButton}
     </Container>
   )
 })