fix: quick link & block link issue

src/main/frontend/extensions/tldraw.cljs

@@ -84,7 +84,6 @@
                                                 (:db/id (model/get-page uuid))
                                                 (keyword type)))
    :redirectToPage (fn [page-name-or-uuid]
-                     (prn (:block/name (model/get-block-parent (parse-uuid page-name-or-uuid))))
                      (let [page-name (if (util/uuid-string? page-name-or-uuid)
                                        (:block/name (model/get-block-parent (parse-uuid page-name-or-uuid)))
                                        page-name-or-uuid)

tldraw/apps/tldraw-logseq/src/components/BlockLink/BlockLink.tsx

@@ -0,0 +1,47 @@
+import { validUUID } from '@tldraw/core'
+import React from 'react'
+import { LogseqContext } from '../../lib/logseq-context'
+import { TablerIcon } from '../icons'
+
+export const BlockLink = ({ type, id }: { type?: 'P' | 'B'; id: string }) => {
+  const {
+    handlers: { isWhiteboardPage, redirectToPage, sidebarAddBlock, queryBlockByUUID },
+    renderers: { Breadcrumb, PageNameLink },
+  } = React.useContext(LogseqContext)
+
+  let iconName = ''
+  type = type ?? (validUUID(id) ? 'B' : 'P')
+
+  if (validUUID(id)) {
+    if (queryBlockByUUID(id)?.properties?.['ls-type'] === 'whiteboard-shape') {
+      iconName = 'link-to-whiteboard'
+    } else {
+      iconName = 'link-to-block'
+    }
+  } else {
+    if (isWhiteboardPage(id)) {
+      iconName = 'link-to-whiteboard'
+    } else {
+      iconName = 'link-to-page'
+    }
+  }
+
+  return (
+    <button
+      className="inline-flex gap-1 items-center w-full"
+      onPointerDown={e => {
+        e.stopPropagation()
+        if (e.shiftKey) {
+          sidebarAddBlock(id, type === 'B' ? 'block' : 'page')
+        } else {
+          redirectToPage(id)
+        }
+      }}
+    >
+      <TablerIcon name={iconName} />
+      <span className="pointer-events-none">
+        {type === 'P' ? <PageNameLink pageName={id} /> : <Breadcrumb levelLimit={1} blockId={id} />}
+      </span>
+    </button>
+  )
+}

tldraw/apps/tldraw-logseq/src/components/BlockLink/index.ts

@@ -0,0 +1 @@
+export * from './BlockLink'

tldraw/apps/tldraw-logseq/src/components/QuickLinks/QuickLinks.tsx

@@ -1,47 +1,7 @@
-import { validUUID } from '@tldraw/core'
 import type { TLQuickLinksComponent } from '@tldraw/react'
 import { observer } from 'mobx-react-lite'
-import * as React from 'react'
 import type { Shape } from '../../lib'
-import { LogseqContext } from '../../lib/logseq-context'
-import { TablerIcon } from '../icons'
-
-// TODO: share to other components?
-const BlockLink = ({ type, id }: { type?: 'P' | 'B'; id: string }) => {
-  const {
-    handlers: { isWhiteboardPage, redirectToPage, sidebarAddBlock },
-    renderers: { Breadcrumb, PageNameLink },
-  } = React.useContext(LogseqContext)
-
-  type = type ?? (validUUID(id) ? 'B' : 'P')
-
-  return (
-    <button
-      className="inline-flex gap-1 items-center w-full"
-      onPointerDown={e => {
-        e.stopPropagation()
-        if (e.shiftKey) {
-          sidebarAddBlock(id, type === 'B' ? 'block' : 'page')
-        } else {
-          redirectToPage(id)
-        }
-      }}
-    >
-      <TablerIcon
-        name={
-          type === 'P'
-            ? isWhiteboardPage(id)
-              ? 'link-to-whiteboard'
-              : 'link-to-page'
-            : 'link-to-block'
-        }
-      />
-      <span className='pointer-events-none'>
-        {type === 'P' ? <PageNameLink pageName={id} /> : <Breadcrumb levelLimit={1} blockId={id} />}
-      </span>
-    </button>
-  )
-}
+import { BlockLink } from '../BlockLink'
 
 export const QuickLinks: TLQuickLinksComponent<Shape> = observer(({ id, shape }) => {
   const refs = shape.props.refs ?? []

tldraw/apps/tldraw-logseq/src/components/QuickSearch/QuickSearch.tsx

@@ -1,8 +1,8 @@
-import { useApp, useDebouncedValue } from '@tldraw/react'
+import { useDebouncedValue } from '@tldraw/react'
 import { observer } from 'mobx-react-lite'
 import React from 'react'
 import { Virtuoso } from 'react-virtuoso'
-import { LogseqPortalShape, type Shape } from '../../lib'
+import { LogseqPortalShape } from '../../lib'
 import { LogseqContext, SearchResult } from '../../lib/logseq-context'
 import { CircleButton } from '../Button'
 import { TablerIcon } from '../icons'
@@ -132,7 +132,7 @@ export const LogseqQuickSearch = observer(
     const [prefixIcon, setPrefixIcon] = React.useState<string>('circle-plus')
 
     React.useEffect(() => {
-      // autofocus seems not to be working
+      // autofocus attr seems not to be working
       setTimeout(() => {
         rInput.current?.focus()
       })

tldraw/apps/tldraw-logseq/src/components/inputs/ShapeLinksInput.tsx

@@ -1,10 +1,12 @@
 import type { Side } from '@radix-ui/react-popper'
-import Mousetrap from 'mousetrap'
 import { MOD_KEY, validUUID } from '@tldraw/core'
+import Mousetrap from 'mousetrap'
 import React from 'react'
 import { NIL as NIL_UUID } from 'uuid'
 
+import { observer } from 'mobx-react-lite'
 import { LogseqContext } from '../../lib/logseq-context'
+import { BlockLink } from '../BlockLink'
 import { Button } from '../Button'
 import { TablerIcon } from '../icons'
 import { PopoverButton } from '../PopoverButton'
@@ -28,16 +30,12 @@ function ShapeLinkItem({
   type: 'B' | 'P'
   onRemove?: () => void
 }) {
-  const {
-    handlers,
-    renderers: { Breadcrumb, PageNameLink },
-  } = React.useContext(LogseqContext)
+  const { handlers } = React.useContext(LogseqContext)
 
   return (
     <div className="tl-shape-links-panel-item color-level">
-      <TablerIcon name={type === 'P' ? 'page' : 'block'} />
       <div className="whitespace-pre break-all overflow-hidden text-ellipsis">
-        {type === 'P' ? <PageNameLink pageName={id} /> : <Breadcrumb levelLimit={1} blockId={id} />}
+        <BlockLink id={id} type={type} />
       </div>
       <div className="flex-1" />
       <Button title="Open Page" type="button" onClick={() => handlers?.redirectToPage(id)}>
@@ -59,7 +57,7 @@ function ShapeLinkItem({
   )
 }
 
-export function ShapeLinksInput({
+export const ShapeLinksInput = observer(function ShapeLinksInput({
   pageId,
   portalType,
   shapeType,
@@ -72,7 +70,7 @@ export function ShapeLinksInput({
   const canAddLink = refs.length === 0
 
   const addNewRef = (value?: string) => {
-    if (value && !refs.includes(value)) {
+    if (value && !refs.includes(value) && canAddLink) {
       onRefsChange([...refs, value])
     }
   }
@@ -188,4 +186,4 @@ export function ShapeLinksInput({
       </div>
     </PopoverButton>
   )
-}
+})