toeverything · graphite-app · Dec 17, 2024 · Dec 17, 2024
@@ -1,8 +1,8 @@
-import { cloneReferenceInfoWithoutAliases } from '@blocksuite/affine-components/rich-text';
 import {
   EMBED_CARD_HEIGHT,
   EMBED_CARD_WIDTH,
 } from '@blocksuite/affine-shared/consts';
+import { cloneReferenceInfoWithoutAliases } from '@blocksuite/affine-shared/utils';
 import { Bound } from '@blocksuite/global/utils';
 
 import { toEdgelessEmbedBlock } from '../common/to-edgeless-embed-block.js';
@@ -39,7 +39,7 @@ export class EmbedEdgelessLinkedDocBlockComponent extends toEdgelessEmbedBlock(
       {
         xywh: bound.serialize(),
         caption,
-        ...cloneReferenceInfoWithoutAliases(this.referenceInfo),
+        ...cloneReferenceInfoWithoutAliases(this.referenceInfo$.peek()),
       },
       // @ts-expect-error TODO: fix after edgeless refactor
       edgelessService.surface
@@ -65,7 +65,7 @@ export class EmbedEdgelessLinkedDocBlockComponent extends toEdgelessEmbedBlock(
 
   protected override _handleClick(evt: MouseEvent): void {
     if (this.config.handleClick) {
-      this.config.handleClick(evt, this.host, this.referenceInfo);
+      this.config.handleClick(evt, this.host, this.referenceInfo$.peek());
       return;
     }
   }

@@ -2,30 +2,31 @@ import type {
   DocMode,
   EmbedLinkedDocModel,
   EmbedLinkedDocStyles,
-  ReferenceInfo,
 } from '@blocksuite/affine-model';
 
-import { BlockLinkIcon } from '@blocksuite/affine-components/icons';
 import { isPeekable, Peekable } from '@blocksuite/affine-components/peek';
 import {
-  cloneReferenceInfo,
-  cloneReferenceInfoWithoutAliases,
   REFERENCE_NODE,
-  referenceToNode,
   RefNodeSlotsProvider,
 } from '@blocksuite/affine-components/rich-text';
 import {
   EMBED_CARD_HEIGHT,
   EMBED_CARD_WIDTH,
 } from '@blocksuite/affine-shared/consts';
 import {
+  DocDisplayMetaProvider,
   DocModeProvider,
   ThemeProvider,
 } from '@blocksuite/affine-shared/services';
-import { matchFlavours } from '@blocksuite/affine-shared/utils';
+import {
+  cloneReferenceInfo,
+  cloneReferenceInfoWithoutAliases,
+  matchFlavours,
+  referenceToNode,
+} from '@blocksuite/affine-shared/utils';
 import { Bound } from '@blocksuite/global/utils';
-import { AliasIcon } from '@blocksuite/icons/lit';
 import { DocCollection } from '@blocksuite/store';
+import { computed } from '@preact/signals-core';
 import { html, nothing } from 'lit';
 import { property, queryAsync, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -142,7 +143,10 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
 
     doc.addBlock(
       'affine:embed-synced-doc',
-      { caption, ...cloneReferenceInfoWithoutAliases(this.referenceInfo) },
+      {
+        caption,
+        ...cloneReferenceInfoWithoutAliases(this.referenceInfo$.peek()),
+      },
       parent,
       index
     );
@@ -164,7 +168,7 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
     yText.format(0, REFERENCE_NODE.length, {
       reference: {
         type: 'LinkedPage',
-        ...this.referenceInfo,
+        ...this.referenceInfo$.peek(),
       },
     });
     const text = new doc.Text(yText);
@@ -181,10 +185,27 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
     doc.deleteBlock(this.model);
   };
 
+  referenceInfo$ = computed(() => {
+    const { pageId, params, title$, description$ } = this.model;
+    return cloneReferenceInfo({
+      pageId,
+      params,
+      title: title$.value,
+      description: description$.value,
+    });
+  });
+
+  icon$ = computed(() => {
+    const { pageId, params, title } = this.referenceInfo$.value;
+    return this.std
+      .get(DocDisplayMetaProvider)
+      .icon(pageId, { params, title, referenced: true }).value;
+  });
+
   open = () => {
     this.std
       .getOptional(RefNodeSlotsProvider)
-      ?.docLinkClicked.emit(this.referenceInfo);
+      ?.docLinkClicked.emit(this.referenceInfo$.peek());
   };
 
   refreshData = () => {
@@ -194,6 +215,16 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
     });
   };
 
+  title$ = computed(() => {
+    const { pageId, params, title } = this.referenceInfo$.value;
+    return (
+      title ||
+      this.std
+        .get(DocDisplayMetaProvider)
+        .title(pageId, { params, title, referenced: true })
+    );
+  });
+
   get config(): EmbedLinkedDocBlockConfig {
     return (
       this.std.provider.getOptional(EmbedLinkedDocBlockConfigIdentifier) || {}
@@ -212,13 +243,13 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
     return this.std.collection.getDoc(this.model.pageId);
   }
 
-  get referenceInfo(): ReferenceInfo {
-    return cloneReferenceInfo(this.model);
-  }
-
   private _handleDoubleClick(event: MouseEvent) {
     if (this.config.handleDoubleClick) {
-      this.config.handleDoubleClick(event, this.host, this.referenceInfo);
+      this.config.handleDoubleClick(
+        event,
+        this.host,
+        this.referenceInfo$.peek()
+      );
       if (event.defaultPrevented) {
         return;
       }
@@ -241,7 +272,7 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
 
   protected _handleClick(event: MouseEvent) {
     if (this.config.handleClick) {
-      this.config.handleClick(event, this.host, this.referenceInfo);
+      this.config.handleClick(event, this.host, this.referenceInfo$.peek());
       if (event.defaultPrevented) {
         return;
       }
@@ -358,35 +389,18 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
     const {
       LoadingIcon,
       ReloadIcon,
-      LinkedDocIcon,
-      LinkedDocDeletedIcon,
       LinkedDocDeletedBanner,
       LinkedDocEmptyBanner,
       SyncedDocErrorBanner,
     } = getEmbedLinkedDocIcons(theme, this._linkedDocMode, this._cardStyle);
 
-    const titleIcon = isError
+    const icon = isError
       ? SyncedDocErrorIcon
       : isLoading
         ? LoadingIcon
-        : isDeleted
-          ? LinkedDocDeletedIcon
-          : this.model.title
-            ? AliasIcon({ width: '16px', height: '16pc' })
-            : this._referenceToNode
-              ? BlockLinkIcon
-              : LinkedDocIcon;
-
-    const title = this.docTitle;
-    const description = this.model.description;
-
-    const titleText = isError
-      ? title
-      : isLoading
-        ? 'Loading...'
-        : isDeleted
-          ? `Deleted doc`
-          : title;
+        : this.icon$.value;
+    const title = isLoading ? 'Loading...' : this.title$;
+    const description = this.model.description$;
 
     const showDefaultNoteContent = isError || isLoading || isDeleted || isEmpty;
     const defaultNoteContent = isError
@@ -414,7 +428,7 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
           ? LinkedDocDeletedBanner
           : LinkedDocEmptyBanner;
 
-    const hasDescriptionAlias = Boolean(description && description.length > 0);
+    const hasDescriptionAlias = Boolean(description.value);
 
     return this.renderEmbed(
       () => html`
@@ -430,11 +444,11 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
           <div class="affine-embed-linked-doc-content">
             <div class="affine-embed-linked-doc-content-title">
               <div class="affine-embed-linked-doc-content-title-icon">
-                ${titleIcon}
+                ${icon}
               </div>
 
               <div class="affine-embed-linked-doc-content-title-text">
-                ${titleText}
+                ${title}
               </div>
             </div>
 

@@ -139,30 +139,19 @@ export class EmbedSyncedDocCard extends WithDisposable(ShadowlessElement) {
     const theme = this.std.get(ThemeProvider).theme;
     const {
       LoadingIcon,
-      SyncedDocIcon,
       SyncedDocErrorIcon,
-      SyncedDocDeletedIcon,
       ReloadIcon,
       SyncedDocEmptyBanner,
       SyncedDocErrorBanner,
       SyncedDocDeletedBanner,
     } = getSyncedDocIcons(theme, this.editorMode);
 
-    const titleIcon = error
+    const icon = error
       ? SyncedDocErrorIcon
       : isLoading
         ? LoadingIcon
-        : isDeleted
-          ? SyncedDocDeletedIcon
-          : SyncedDocIcon;
-
-    const titleText = error
-      ? this.block.docTitle
-      : isLoading
-        ? 'Loading...'
-        : isDeleted
-          ? `Deleted doc`
-          : this.block.docTitle;
+        : this.block.icon$.value;
+    const title = isLoading ? 'Loading...' : this.block.title$;
 
     const showDefaultNoteContent = isLoading || error || isDeleted || isEmpty;
     const defaultNoteContent = error
@@ -195,11 +184,11 @@ export class EmbedSyncedDocCard extends WithDisposable(ShadowlessElement) {
         <div class="affine-embed-synced-doc-card-content">
           <div class="affine-embed-synced-doc-card-content-title">
             <div class="affine-embed-synced-doc-card-content-title-icon">
-              ${titleIcon}
+              ${icon}
             </div>
 
             <div class="affine-embed-synced-doc-card-content-title-text">
-              ${titleText}
+              ${title}
             </div>
           </div>
 

@@ -4,7 +4,6 @@ import {
 } from '@blocksuite/affine-components/icons';
 import { Peekable } from '@blocksuite/affine-components/peek';
 import {
-  cloneReferenceInfo,
   REFERENCE_NODE,
   RefNodeSlotsProvider,
 } from '@blocksuite/affine-components/rich-text';
@@ -16,11 +15,15 @@ import {
   type ReferenceInfo,
 } from '@blocksuite/affine-model';
 import {
+  DocDisplayMetaProvider,
   DocModeProvider,
   ThemeExtensionIdentifier,
   ThemeProvider,
 } from '@blocksuite/affine-shared/services';
-import { SpecProvider } from '@blocksuite/affine-shared/utils';
+import {
+  cloneReferenceInfo,
+  SpecProvider,
+} from '@blocksuite/affine-shared/utils';
 import {
   BlockServiceWatcher,
   BlockStdScope,
@@ -34,6 +37,7 @@ import {
   type GetDocOptions,
   type Query,
 } from '@blocksuite/store';
+import { computed } from '@preact/signals-core';
 import { html, type PropertyValues } from 'lit';
 import { query, state } from 'lit/decorators.js';
 import { choose } from 'lit/directives/choose.js';
@@ -303,6 +307,13 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
     height: 'unset',
   };
 
+  icon$ = computed(() => {
+    const { pageId, params } = this.model;
+    return this.std
+      .get(DocDisplayMetaProvider)
+      .icon(pageId, { params, referenced: true }).value;
+  });
+
   open = () => {
     const pageId = this.model.pageId;
     if (pageId === this.doc.id) return;
@@ -317,6 +328,13 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
     });
   };
 
+  title$ = computed(() => {
+    const { pageId, params } = this.model;
+    return this.std
+      .get(DocDisplayMetaProvider)
+      .title(pageId, { params, referenced: true });
+  });
+
   private get _rootService() {
     return this.std.getService('affine:page');
   }

@@ -124,12 +124,6 @@ export const ReferenceInlineSpecExtension = InlineSpecExtension(
     if (config.customContent) {
       configProvider.setCustomContent(config.customContent);
     }
-    if (config.customIcon) {
-      configProvider.setCustomIcon(config.customIcon);
-    }
-    if (config.customTitle) {
-      configProvider.setCustomTitle(config.customTitle);
-    }
     if (config.interactable !== undefined) {
       configProvider.setInteractable(config.interactable);
     }

@@ -4,8 +4,3 @@ export * from './reference-node/reference-config.js';
 
 export { AffineReference } from './reference-node/reference-node.js';
 export type { RefNodeSlots } from './reference-node/types.js';
-export {
-  cloneReferenceInfo,
-  cloneReferenceInfoWithoutAliases,
-  referenceToNode,
-} from './reference-node/utils.js';