From d7fe6c47e1965c9617e8a271de35a6ead773bf02 Mon Sep 17 00:00:00 2001
From: Peng Xiao <pengxiao@outlook.com>
Date: Sun, 24 Jul 2022 12:45:51 +0800
Subject: [PATCH] fix: use page ref link in shape title

---
 src/main/frontend/extensions/tldraw.cljs               |  8 +++++++-
 tldraw/apps/tldraw-logseq/src/app.tsx                  |  1 +
 tldraw/apps/tldraw-logseq/src/lib/logseq-context.ts    |  3 +++
 .../tldraw-logseq/src/lib/shapes/LogseqPortalShape.tsx | 10 +++++++---
 tldraw/apps/tldraw-logseq/src/styles.css               |  4 ++++
 5 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/main/frontend/extensions/tldraw.cljs b/src/main/frontend/extensions/tldraw.cljs
index 04979915e..b6aac3011 100644
--- a/src/main/frontend/extensions/tldraw.cljs
+++ b/src/main/frontend/extensions/tldraw.cljs
@@ -24,6 +24,10 @@
   [props]
   (block/breadcrumb {} (state/get-current-repo) (uuid (gobj/get props "blockId")) nil))
 
+(rum/defc page-name-link
+  [props]
+  (block/page-cp {:preview? true} {:block/name (gobj/get props "pageName")}))
+
 (defn create-block-shape-by-id [e]
   (when-let [block (block/get-dragging-block)]
     (let [uuid (:block/uuid block)
@@ -43,7 +47,9 @@
         ;; wheel -> overscroll may cause browser navigation
         :on-wheel util/stop-propagation}
 
-       (tldraw {:renderers {:Page page :Breadcrumb breadcrumb}
+       (tldraw {:renderers {:Page page
+                            :Breadcrumb breadcrumb
+                            :PageNameLink page-name-link}
                 :searchHandler (comp clj->js vec search/page-search)
                 :onPersist (fn [app]
                              (let [document (gobj/get app "serialized")]
diff --git a/tldraw/apps/tldraw-logseq/src/app.tsx b/tldraw/apps/tldraw-logseq/src/app.tsx
index 2d8e4eb7f..6ebb85be3 100644
--- a/tldraw/apps/tldraw-logseq/src/app.tsx
+++ b/tldraw/apps/tldraw-logseq/src/app.tsx
@@ -47,6 +47,7 @@ interface LogseqTldrawProps {
   renderers: {
     Page: React.FC
     Breadcrumb: React.FC
+    PageNameLink: React.FC
   }
   searchHandler: (query: string) => string[]
   model?: TLDocumentModel<Shape>
diff --git a/tldraw/apps/tldraw-logseq/src/lib/logseq-context.ts b/tldraw/apps/tldraw-logseq/src/lib/logseq-context.ts
index 4816c3656..80fa2d61f 100644
--- a/tldraw/apps/tldraw-logseq/src/lib/logseq-context.ts
+++ b/tldraw/apps/tldraw-logseq/src/lib/logseq-context.ts
@@ -8,6 +8,9 @@ export const LogseqContext = React.createContext<
       Breadcrumb: React.FC<{
         blockId: string
       }>
+      PageNameLink: React.FC<{
+        pageName: string
+      }>
     }
     search: (query: string) => string[]
   }>
diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/LogseqPortalShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/LogseqPortalShape.tsx
index 934476b52..5ef2be690 100644
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/LogseqPortalShape.tsx
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/LogseqPortalShape.tsx
@@ -224,11 +224,11 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
       app.history.persist()
     }, [])
 
-    if (!renderers?.Page || !renderers?.Breadcrumb) {
+    if (!renderers?.Page) {
       return null // not being correctly configured
     }
 
-    const { Page, Breadcrumb } = renderers
+    const { Page, Breadcrumb, PageNameLink } = renderers
 
     return (
       <HTMLContainer
@@ -266,7 +266,11 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
               }}
             >
               <LogseqPortalShapeHeader type={this.props.blockType ?? 'P'}>
-                {this.props.blockType === 'P' ? pageId : <Breadcrumb blockId={pageId} />}
+                {this.props.blockType === 'P' ? (
+                  <PageNameLink pageName={pageId} />
+                ) : (
+                  <Breadcrumb blockId={pageId} />
+                )}
               </LogseqPortalShapeHeader>
               {(!this.props.collapsed || isEditing) && (
                 <div
diff --git a/tldraw/apps/tldraw-logseq/src/styles.css b/tldraw/apps/tldraw-logseq/src/styles.css
index d3145a713..be77e5e71 100644
--- a/tldraw/apps/tldraw-logseq/src/styles.css
+++ b/tldraw/apps/tldraw-logseq/src/styles.css
@@ -604,6 +604,10 @@
   flex-grow: 0;
 }
 
+.logseq-tldraw .tl-logseq-portal-header .page-ref {
+  color: var(--ls-title-text-color);
+}
+
 html[data-theme='light'] .logseq-tldraw .tl-logseq-portal-header {
   backdrop-filter: brightness(0.9);
 }