fix: use page ref link in shape title

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")]

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>

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[]
   }>

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

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);
 }