feat(blocks): extend linked doc model (#7945)

Like the affine-reference model.

* add `ReferenceInfo` to `EmbedLinkedDocModel`

packages/affine/model/src/blocks/embed/linked-doc/linked-doc-model.ts

@@ -1,5 +1,6 @@
 import { BlockModel } from '@blocksuite/store';
 
+import type { ReferenceInfo } from '../../../consts/doc.js';
 import type { EmbedCardStyle } from '../../../utils/index.js';
 
 import { defineEmbedModel } from '../../../utils/index.js';
@@ -13,10 +14,9 @@ export const EmbedLinkedDocStyles: EmbedCardStyle[] = [
 ];
 
 export type EmbedLinkedDocBlockProps = {
-  pageId: string;
   style: EmbedCardStyle;
   caption: string | null;
-};
+} & ReferenceInfo;
 
 export class EmbedLinkedDocModel extends defineEmbedModel<EmbedLinkedDocBlockProps>(
   BlockModel

packages/blocks/src/_common/components/doc-mode-service.ts

@@ -28,8 +28,11 @@ export function createDocModeService(curDocId: string) {
     },
     toggleMode: (id: string = curDocId) => {
       const mode =
-        docModeService.getMode(id) === 'page' ? DocMode.Edgeless : DocMode.Page;
+        docModeService.getMode(id) === DocMode.Page
+          ? DocMode.Edgeless
+          : DocMode.Page;
       docModeService.setMode(mode);
+
       return mode;
     },
     onModeChange: (handler: (mode: DocMode) => void, id: string = curDocId) => {

packages/blocks/src/_common/components/embed-card/type.ts

@@ -2,11 +2,11 @@ import type {
   BookmarkBlockModel,
   EmbedFigmaModel,
   EmbedGithubModel,
+  EmbedLinkedDocModel,
   EmbedLoomModel,
   EmbedSyncedDocModel,
   EmbedYoutubeModel,
 } from '@blocksuite/affine-model';
-import type { EmbedLinkedDocModel } from '@blocksuite/affine-model';
 import type { BlockComponent } from '@blocksuite/block-std';
 
 import { BookmarkBlockComponent } from '../../../bookmark-block/bookmark-block.js';

packages/blocks/src/embed-linked-doc-block/embed-linked-doc-block.ts

@@ -1,8 +1,10 @@
 import type {
   EmbedLinkedDocModel,
   EmbedLinkedDocStyles,
+  ReferenceInfo,
 } from '@blocksuite/affine-model';
 
+import { BlockLinkIcon } from '@blocksuite/affine-components/icons';
 import { Peekable, isPeekable } from '@blocksuite/affine-components/peek';
 import { REFERENCE_NODE } from '@blocksuite/affine-components/rich-text';
 import { DocMode } from '@blocksuite/affine-model';
@@ -24,7 +26,7 @@ import { EmbedBlockComponent } from '../_common/embed-block-helper/index.js';
 import { renderLinkedDocInCard } from '../_common/utils/render-linked-doc.js';
 import { SyncedDocErrorIcon } from '../embed-synced-doc-block/styles.js';
 import { styles } from './styles.js';
-import { getEmbedLinkedDocIcons } from './utils.js';
+import { getEmbedLinkedDocIcons, isLinkToNode } from './utils.js';
 
 @customElement('affine-embed-linked-doc-block')
 @Peekable({
@@ -69,8 +71,12 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<
 
     this._loading = false;
 
+    // If it is a link to a block or element, the content will not be rendered.
+    if (this._isLinkToNode) {
+      return;
+    }
+
     if (!this.isError) {
-      // renderLinkedDocInCard(this);
       const cardStyle = this.model.style;
       if (cardStyle === 'horizontal' || cardStyle === 'vertical') {
         renderLinkedDocInCard(this);
@@ -126,15 +132,15 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<
   };
 
   covertToInline = () => {
-    const { doc, pageId } = this.model;
+    const { doc } = this.model;
     const parent = doc.getParent(this.model);
     assertExists(parent);
     const index = parent.children.indexOf(this.model);
 
     const yText = new DocCollection.Y.Text();
     yText.insert(0, REFERENCE_NODE);
     yText.format(0, REFERENCE_NODE.length, {
-      reference: { type: 'LinkedPage', pageId },
+      reference: { type: 'LinkedPage', ...this.referenceInfo },
     });
     const text = new doc.Text(yText);
 
@@ -159,7 +165,7 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<
     ]) as RootBlockComponent | null;
     assertExists(rootComponent);
 
-    rootComponent.slots.docLinkClicked.emit({ pageId });
+    rootComponent.slots.docLinkClicked.emit(this.referenceInfo);
   };
 
   refreshData = () => {
@@ -205,6 +211,9 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<
 
   override connectedCallback() {
     super.connectedCallback();
+
+    this._isLinkToNode = isLinkToNode(this.model);
+
     this._load().catch(e => {
       console.error(e);
       this.isError = true;
@@ -247,14 +256,18 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<
         })
       );
 
-      this._linkedDocMode = this._rootService.docModeService.getMode(
-        this.model.pageId
-      );
-      this.disposables.add(
-        this._rootService.docModeService.onModeChange(mode => {
-          this._linkedDocMode = mode;
-        }, this.model.pageId)
-      );
+      if (this._isLinkToNode) {
+        this._linkedDocMode = this.model.params?.mode ?? DocMode.Page;
+      } else {
+        this._linkedDocMode = this._rootService.docModeService.getMode(
+          this.model.pageId
+        );
+        this.disposables.add(
+          this._rootService.docModeService.onModeChange(mode => {
+            this._linkedDocMode = mode;
+          }, this.model.pageId)
+        );
+      }
     }
 
     this.model.propsUpdated.on(({ key }) => {
@@ -309,7 +322,9 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<
         ? LoadingIcon
         : isDeleted
           ? LinkedDocDeletedIcon
-          : LinkedDocIcon;
+          : this._isLinkToNode
+            ? BlockLinkIcon
+            : LinkedDocIcon;
 
     const titleText = isError
       ? linkedDoc?.meta?.title || 'Untitled'
@@ -449,13 +464,29 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<
   }
 
   get linkedDoc() {
-    const doc = this.std.collection.getDoc(this.model.pageId);
-    return doc;
+    return this.std.collection.getDoc(this.model.pageId);
+  }
+
+  get referenceInfo(): ReferenceInfo {
+    const { pageId, params } = this.model;
+    const info: ReferenceInfo = { pageId };
+    if (!params) return info;
+
+    const { mode, blockIds, elementIds } = params;
+    info.params = {};
+    if (mode) info.params.mode = mode;
+    if (blockIds?.length) info.params.blockIds = [...blockIds];
+    if (elementIds?.length) info.params.elementIds = [...elementIds];
+    return info;
   }
 
   @state()
   private accessor _docUpdatedAt: Date = new Date();
 
+  // linking block/element
+  @state()
+  private accessor _isLinkToNode = false;
+
   @state()
   private accessor _linkedDocMode: DocMode = DocMode.Page;
 

packages/blocks/src/embed-linked-doc-block/utils.ts

@@ -1,4 +1,7 @@
-import type { EmbedLinkedDocStyles } from '@blocksuite/affine-model';
+import type {
+  EmbedLinkedDocModel,
+  EmbedLinkedDocStyles,
+} from '@blocksuite/affine-model';
 import type { TemplateResult } from 'lit';
 
 import {
@@ -112,3 +115,15 @@ export function getEmbedLinkedDocIcons(
     }
   }
 }
+
+/*
+ * Returns true if it is a link to block or element.
+ */
+export function isLinkToNode({ params }: EmbedLinkedDocModel) {
+  if (!params) return false;
+  const { mode, blockIds, elementIds } = params;
+  if (!mode) return false;
+  if (blockIds && blockIds.length > 0) return true;
+  if (elementIds && elementIds.length > 0) return true;
+  return false;
+}

packages/blocks/src/root-block/widgets/element-toolbar/change-embed-card-button.ts

@@ -51,6 +51,7 @@ import {
   EMBED_CARD_WIDTH,
 } from '../../../_common/consts.js';
 import { getEmbedCardIcons } from '../../../_common/utils/url.js';
+import { isLinkToNode } from '../../../embed-linked-doc-block/utils.js';
 import '../../edgeless/components/panel/card-style-panel.js';
 import {
   isBookmarkBlock,
@@ -301,7 +302,8 @@ export class EdgelessChangeEmbedCardButton extends WithDisposable(LitElement) {
     }
     return (
       isEmbedLinkedDocBlock(this.model) &&
-      (!!this._blockComponent?.closest('affine-embed-synced-doc-block') ||
+      (isLinkToNode(this.model) ||
+        !!this._blockComponent?.closest('affine-embed-synced-doc-block') ||
         this.model.pageId === this._doc.id)
     );
   }
@@ -480,7 +482,7 @@ export class EdgelessChangeEmbedCardButton extends WithDisposable(LitElement) {
           type: 'embed',
           label: 'Embed view',
           handler: () => this._convertToEmbedView(),
-          disabled: this.model.doc.readonly && this._embedViewButtonDisabled,
+          disabled: this.model.doc.readonly || this._embedViewButtonDisabled,
         },
       ];