From 9daec097a62d5edbbb8fc901d888c413cab5f611 Mon Sep 17 00:00:00 2001
From: Peng Xiao <pengxiao@freewheel.tv>
Date: Sun, 27 Nov 2022 19:42:37 +0800
Subject: [PATCH] fix: optimize block link reference display in whiteboard

---
 .../src/components/BlockLink/BlockLink.tsx    | 20 +++++++++++++++----
 .../src/components/QuickLinks/QuickLinks.tsx  | 14 ++++++++-----
 .../src/components/inputs/ShapeLinksInput.tsx |  5 ++++-
 tldraw/packages/core/src/lib/TLSettings.ts    |  1 -
 4 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/tldraw/apps/tldraw-logseq/src/components/BlockLink/BlockLink.tsx b/tldraw/apps/tldraw-logseq/src/components/BlockLink/BlockLink.tsx
index a7b1607162..1e5701a867 100644
--- a/tldraw/apps/tldraw-logseq/src/components/BlockLink/BlockLink.tsx
+++ b/tldraw/apps/tldraw-logseq/src/components/BlockLink/BlockLink.tsx
@@ -3,7 +3,13 @@ import React from 'react'
 import { LogseqContext } from '../../lib/logseq-context'
 import { TablerIcon } from '../icons'
 
-export const BlockLink = ({ id }: { id: string }) => {
+export const BlockLink = ({
+  id,
+  showReferenceContent = false,
+}: {
+  id: string
+  showReferenceContent?: boolean
+}) => {
   const {
     handlers: { isWhiteboardPage, redirectToPage, sidebarAddBlock, queryBlockByUUID },
     renderers: { Breadcrumb, PageName, BlockReference },
@@ -11,13 +17,16 @@ export const BlockLink = ({ id }: { id: string }) => {
 
   let iconName = ''
   let linkType = validUUID(id) ? 'B' : 'P'
+  let blockContent = ''
 
   if (validUUID(id)) {
     const block = queryBlockByUUID(id)
     if (!block) {
-      return <span className='p-2'>Invalid reference. Did you remove it?</span>
+      return <span className="p-2">Invalid reference. Did you remove it?</span>
     }
 
+    blockContent = block.content
+
     if (block.properties?.['ls-type'] === 'whiteboard-shape') {
       iconName = 'link-to-whiteboard'
     } else {
@@ -31,6 +40,9 @@ export const BlockLink = ({ id }: { id: string }) => {
     }
   }
 
+  const slicedContent =
+    blockContent && blockContent.length > 23 ? blockContent.slice(0, 20) + '...' : blockContent
+
   return (
     <button
       className="inline-flex gap-1 items-center w-full"
@@ -49,8 +61,8 @@ export const BlockLink = ({ id }: { id: string }) => {
           <PageName pageName={id} />
         ) : (
           <>
-            <Breadcrumb levelLimit={1} blockId={id} endSeparator />
-            <BlockReference blockId={id} />
+            <Breadcrumb levelLimit={1} blockId={id} endSeparator={showReferenceContent} />
+            {showReferenceContent && slicedContent}
           </>
         )}
       </span>
diff --git a/tldraw/apps/tldraw-logseq/src/components/QuickLinks/QuickLinks.tsx b/tldraw/apps/tldraw-logseq/src/components/QuickLinks/QuickLinks.tsx
index c56b0af94b..84d8426135 100644
--- a/tldraw/apps/tldraw-logseq/src/components/QuickLinks/QuickLinks.tsx
+++ b/tldraw/apps/tldraw-logseq/src/components/QuickLinks/QuickLinks.tsx
@@ -4,12 +4,16 @@ import React from 'react'
 import type { Shape } from '../../lib'
 import { BlockLink } from '../BlockLink'
 
-export const QuickLinks: TLQuickLinksComponent<Shape> = observer(({ id, shape }) => {
+export const QuickLinks: TLQuickLinksComponent<Shape> = observer(({ shape }) => {
   const links = React.useMemo(() => {
-    const links = [...(shape.props.refs ?? [])]
+    const links = [...(shape.props.refs ?? [])].map<[ref: string, showReferenceContent: boolean]>(
+      // user added links should show the referenced block content
+      l => [l, true]
+    )
 
     if (shape.props.type === 'logseq-portal' && shape.props.pageId) {
-      links.unshift(shape.props.pageId)
+      // portal reference should not show the block content
+      links.unshift([shape.props.pageId, false])
     }
 
     return links
@@ -19,10 +23,10 @@ export const QuickLinks: TLQuickLinksComponent<Shape> = observer(({ id, shape })
 
   return (
     <div className="tl-quick-links" title="Shape Quick Links">
-      {links.map(ref => {
+      {links.map(([ref, showReferenceContent]) => {
         return (
           <div key={ref} className="tl-quick-links-row">
-            <BlockLink id={ref} />
+            <BlockLink id={ref} showReferenceContent={showReferenceContent} />
           </div>
         )
       })}
diff --git a/tldraw/apps/tldraw-logseq/src/components/inputs/ShapeLinksInput.tsx b/tldraw/apps/tldraw-logseq/src/components/inputs/ShapeLinksInput.tsx
index a649ab5291..f4760c5c5e 100644
--- a/tldraw/apps/tldraw-logseq/src/components/inputs/ShapeLinksInput.tsx
+++ b/tldraw/apps/tldraw-logseq/src/components/inputs/ShapeLinksInput.tsx
@@ -23,17 +23,19 @@ function ShapeLinkItem({
   id,
   type,
   onRemove,
+  showContent,
 }: {
   id: string
   type: 'B' | 'P'
   onRemove?: () => void
+  showContent?: boolean
 }) {
   const { handlers } = React.useContext(LogseqContext)
 
   return (
     <div className="tl-shape-links-panel-item color-level relative">
       <div className="whitespace-pre break-all overflow-hidden text-ellipsis inline-flex">
-        <BlockLink id={id} />
+        <BlockLink id={id} showReferenceContent={showContent} />
       </div>
       <div className="flex-1" />
       <Button title="Open Page" type="button" onClick={() => handlers?.redirectToPage(id)}>
@@ -131,6 +133,7 @@ export const ShapeLinksInput = observer(function ShapeLinksInput({
                     onRemove={() => {
                       onRefsChange(refs.filter((_, j) => i !== j))
                     }}
+                    showContent
                   />
                 )
               })}
diff --git a/tldraw/packages/core/src/lib/TLSettings.ts b/tldraw/packages/core/src/lib/TLSettings.ts
index 9164d2d4cd..467014faa1 100644
--- a/tldraw/packages/core/src/lib/TLSettings.ts
+++ b/tldraw/packages/core/src/lib/TLSettings.ts
@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { observable, makeObservable, action } from 'mobx'
-import { isSafari } from '../utils'
 
 export interface TLSettingsProps {
   mode: 'light' | 'dark'