refactor: using renderSpecPortal instead of renderModel (#7046)

packages/blocks/src/_common/utils/render-linked-doc.ts

@@ -1,11 +1,12 @@
 import { PathFinder } from '@blocksuite/block-std';
 import { assertExists } from '@blocksuite/global/utils';
-import type { BlockModel, Doc } from '@blocksuite/store';
+import type { BlockModel, BlockSelector, Doc } from '@blocksuite/store';
 import { css, render, type TemplateResult } from 'lit';
 
 import type { EmbedLinkedDocBlockComponent } from '../../embed-linked-doc-block/embed-linked-doc-block.js';
 import type { EmbedSyncedDocCard } from '../../embed-synced-doc-block/components/embed-synced-doc-card.js';
 import type { ImageBlockModel } from '../../image-block/index.js';
+import { SpecProvider } from '../../specs/utils/spec-provider.js';
 import { Bound, getCommonBound } from '../../surface-block/utils/bound.js';
 import { EMBED_CARD_HEIGHT } from '../consts.js';
 import { NoteDisplayMode } from '../types.js';
@@ -99,12 +100,12 @@ export function renderLinkedDocInCard(
     `Trying to load page ${card.model.pageId} in linked page block, but the page is not found.`
   );
 
+  renderSurfaceRef(card);
+
   renderNoteContent(card).catch(e => {
     console.error(e);
     card.isError = true;
   });
-
-  renderSurfaceRef(card);
 }
 
 function getNotesFromDoc(linkedDoc: Doc) {
@@ -122,6 +123,16 @@ function getNotesFromDoc(linkedDoc: Doc) {
   return note;
 }
 
+function filterTextModel(model: BlockModel) {
+  if (matchFlavours(model, ['affine:divider'])) {
+    return true;
+  }
+  if (!matchFlavours(model, ['affine:paragraph', 'affine:list'])) {
+    return false;
+  }
+  return !!model.text?.toString().length;
+}
+
 async function renderNoteContent(
   card: EmbedLinkedDocBlockComponent | EmbedSyncedDocCard
 ) {
@@ -140,15 +151,7 @@ async function renderNoteContent(
   card.isNoteContentEmpty = false;
 
   const noteChildren = notes.flatMap(note =>
-    note.children.filter(child => {
-      if (matchFlavours(child, ['affine:divider'])) {
-        return true;
-      }
-      if (!matchFlavours(child, ['affine:paragraph', 'affine:list'])) {
-        return false;
-      }
-      return !!child.text?.toString().length;
-    })
+    note.children.filter(filterTextModel)
   );
 
   if (!noteChildren.length) {
@@ -167,23 +170,38 @@ async function renderNoteContent(
   noteBlocksContainer.contentEditable = 'false';
   noteContainer.append(noteBlocksContainer);
 
-  const cardHeight = EMBED_CARD_HEIGHT[cardStyle];
-
   if (cardStyle === 'horizontal') {
+    // When the card is horizontal, we only render the first block
     noteChildren.splice(1);
-  }
-
-  for (const block of noteChildren) {
-    const fragment = document.createDocumentFragment();
-    render(card.host.renderModel(block), fragment);
-    noteBlocksContainer.append(fragment);
-
-    await card.updateComplete;
-    const renderHeight = noteBlocksContainer.getBoundingClientRect().height;
-    if (renderHeight >= cardHeight) {
-      break;
+  } else {
+    // Before rendering, we can not know the height of each block
+    // But we can limit the number of blocks to render simply by the height of the card
+    const cardHeight = EMBED_CARD_HEIGHT[cardStyle];
+    const minSingleBlockHeight = 20;
+    const maxBlockCount = Math.floor(cardHeight / minSingleBlockHeight);
+    if (noteChildren.length > maxBlockCount) {
+      noteChildren.splice(maxBlockCount);
     }
   }
+  const childIds = noteChildren.map(child => child.id);
+  const ids: string[] = [];
+  childIds.map(block => {
+    let parent: string | null = block;
+    while (parent && !ids.includes(parent)) {
+      ids.push(parent);
+      parent = doc.blockCollection.crud.getParent(parent);
+    }
+  });
+  const selector: BlockSelector = block => ids.includes(block.id);
+  const previewDoc = doc.blockCollection.getDoc(selector);
+  const previewSpec = SpecProvider.getInstance().getSpec('preview');
+  const previewTemplate = card.host.renderSpecPortal(
+    previewDoc,
+    previewSpec.value
+  );
+  const fragment = document.createDocumentFragment();
+  render(previewTemplate, fragment);
+  noteBlocksContainer.append(fragment);
   const contentEditableElements = noteBlocksContainer.querySelectorAll(
     '[contenteditable="true"]'
   );

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

@@ -291,7 +291,6 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockElement<
 
   override connectedCallback() {
     super.connectedCallback();
-
     this._load().catch(e => {
       console.error(e);
       this.isError = true;
@@ -315,6 +314,11 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockElement<
           ) {
             return;
           }
+
+          if (payload.type === 'add' && payload.init) {
+            return;
+          }
+
           this._load().catch(e => {
             console.error(e);
             this.isError = true;

packages/framework/store/src/store/doc/block-collection.ts

@@ -70,6 +70,7 @@ export class BlockCollection extends Space<FlatBlockMap> {
       | {
           type: 'add';
           id: string;
+          init: boolean;
           flavour: string;
           model: BlockModel;
         }

packages/framework/store/src/store/doc/doc.ts

@@ -32,7 +32,7 @@ export class Doc {
 
     this._yBlocks.forEach((_, id) => {
       if (!this._blocks.has(id)) {
-        this._onBlockAdded(id);
+        this._onBlockAdded(id, true);
       }
     });
 
@@ -288,7 +288,7 @@ export class Doc {
     return fn(parent, index);
   }
 
-  private _onBlockAdded(id: string) {
+  private _onBlockAdded(id: string, init = false) {
     try {
       if (this._blocks.has(id)) {
         return;
@@ -329,6 +329,7 @@ export class Doc {
       this.slots.blockUpdated.emit({
         type: 'add',
         id,
+        init,
         flavour: block.model.flavour,
         model: block.model,
       });