chore: merge blocksuite source code (#9213)

blocksuite/affine/block-embed/src/embed-linked-doc-block/adapters/html.ts

@@ -0,0 +1,64 @@
+import { EmbedLinkedDocBlockSchema } from '@blocksuite/affine-model';
+import {
+  BlockHtmlAdapterExtension,
+  type BlockHtmlAdapterMatcher,
+} from '@blocksuite/affine-shared/adapters';
+
+import { generateDocUrl } from '../../common/adapters/utils.js';
+
+export const embedLinkedDocBlockHtmlAdapterMatcher: BlockHtmlAdapterMatcher = {
+  flavour: EmbedLinkedDocBlockSchema.model.flavour,
+  toMatch: () => false,
+  fromMatch: o => o.node.flavour === EmbedLinkedDocBlockSchema.model.flavour,
+  toBlockSnapshot: {},
+  fromBlockSnapshot: {
+    enter: (o, context) => {
+      const { configs, walkerContext } = context;
+      // Parse as link
+      if (!o.node.props.pageId) {
+        return;
+      }
+      const title = configs.get('title:' + o.node.props.pageId) ?? 'untitled';
+      const url = generateDocUrl(
+        configs.get('docLinkBaseUrl') ?? '',
+        String(o.node.props.pageId),
+        o.node.props.params ?? Object.create(null)
+      );
+
+      walkerContext
+        .openNode(
+          {
+            type: 'element',
+            tagName: 'div',
+            properties: {
+              className: ['affine-paragraph-block-container'],
+            },
+            children: [],
+          },
+          'children'
+        )
+        .openNode(
+          {
+            type: 'element',
+            tagName: 'a',
+            properties: {
+              href: url,
+            },
+            children: [
+              {
+                type: 'text',
+                value: title,
+              },
+            ],
+          },
+          'children'
+        )
+        .closeNode()
+        .closeNode();
+    },
+  },
+};
+
+export const EmbedLinkedDocHtmlAdapterExtension = BlockHtmlAdapterExtension(
+  embedLinkedDocBlockHtmlAdapterMatcher
+);

blocksuite/affine/block-embed/src/embed-linked-doc-block/adapters/index.ts

@@ -0,0 +1,3 @@
+export * from './html.js';
+export * from './markdown.js';
+export * from './plain-text.js';

blocksuite/affine/block-embed/src/embed-linked-doc-block/adapters/markdown.ts

@@ -0,0 +1,57 @@
+import { EmbedLinkedDocBlockSchema } from '@blocksuite/affine-model';
+import {
+  BlockMarkdownAdapterExtension,
+  type BlockMarkdownAdapterMatcher,
+} from '@blocksuite/affine-shared/adapters';
+
+import { generateDocUrl } from '../../common/adapters/utils.js';
+
+export const embedLinkedDocBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher =
+  {
+    flavour: EmbedLinkedDocBlockSchema.model.flavour,
+    toMatch: () => false,
+    fromMatch: o => o.node.flavour === EmbedLinkedDocBlockSchema.model.flavour,
+    toBlockSnapshot: {},
+    fromBlockSnapshot: {
+      enter: (o, context) => {
+        const { configs, walkerContext } = context;
+        // Parse as link
+        if (!o.node.props.pageId) {
+          return;
+        }
+        const title = configs.get('title:' + o.node.props.pageId) ?? 'untitled';
+        const url = generateDocUrl(
+          configs.get('docLinkBaseUrl') ?? '',
+          String(o.node.props.pageId),
+          o.node.props.params ?? Object.create(null)
+        );
+        walkerContext
+          .openNode(
+            {
+              type: 'paragraph',
+              children: [],
+            },
+            'children'
+          )
+          .openNode(
+            {
+              type: 'link',
+              url,
+              title: o.node.props.caption as string | null,
+              children: [
+                {
+                  type: 'text',
+                  value: title,
+                },
+              ],
+            },
+            'children'
+          )
+          .closeNode()
+          .closeNode();
+      },
+    },
+  };
+
+export const EmbedLinkedDocMarkdownAdapterExtension =
+  BlockMarkdownAdapterExtension(embedLinkedDocBlockMarkdownAdapterMatcher);

blocksuite/affine/block-embed/src/embed-linked-doc-block/adapters/plain-text.ts

@@ -0,0 +1,34 @@
+import { EmbedLinkedDocBlockSchema } from '@blocksuite/affine-model';
+import {
+  BlockPlainTextAdapterExtension,
+  type BlockPlainTextAdapterMatcher,
+} from '@blocksuite/affine-shared/adapters';
+
+import { generateDocUrl } from '../../common/adapters/utils.js';
+
+export const embedLinkedDocBlockPlainTextAdapterMatcher: BlockPlainTextAdapterMatcher =
+  {
+    flavour: EmbedLinkedDocBlockSchema.model.flavour,
+    toMatch: () => false,
+    fromMatch: o => o.node.flavour === EmbedLinkedDocBlockSchema.model.flavour,
+    toBlockSnapshot: {},
+    fromBlockSnapshot: {
+      enter: (o, context) => {
+        const { configs, textBuffer } = context;
+        // Parse as link
+        if (!o.node.props.pageId) {
+          return;
+        }
+        const title = configs.get('title:' + o.node.props.pageId) ?? 'untitled';
+        const url = generateDocUrl(
+          configs.get('docLinkBaseUrl') ?? '',
+          String(o.node.props.pageId),
+          o.node.props.params ?? Object.create(null)
+        );
+        textBuffer.content += `${title}: ${url}\n`;
+      },
+    },
+  };
+
+export const EmbedLinkedDocBlockPlainTextAdapterExtension =
+  BlockPlainTextAdapterExtension(embedLinkedDocBlockPlainTextAdapterMatcher);

blocksuite/affine/block-embed/src/embed-linked-doc-block/commands/index.ts

@@ -0,0 +1,9 @@
+import type { BlockCommands } from '@blocksuite/block-std';
+
+import { insertEmbedLinkedDocCommand } from './insert-embed-linked-doc.js';
+import { insertLinkByQuickSearchCommand } from './insert-link-by-quick-search.js';
+
+export const commands: BlockCommands = {
+  insertEmbedLinkedDoc: insertEmbedLinkedDocCommand,
+  insertLinkByQuickSearch: insertLinkByQuickSearchCommand,
+};

blocksuite/affine/block-embed/src/embed-linked-doc-block/commands/insert-embed-linked-doc.ts

@@ -0,0 +1,21 @@
+import type { EmbedCardStyle, ReferenceParams } from '@blocksuite/affine-model';
+import type { Command } from '@blocksuite/block-std';
+
+import { insertEmbedCard } from '../../common/insert-embed-card.js';
+
+export const insertEmbedLinkedDocCommand: Command<
+  never,
+  'insertedLinkType',
+  {
+    docId: string;
+    params?: ReferenceParams;
+  }
+> = (ctx, next) => {
+  const { docId, params, std } = ctx;
+  const flavour = 'affine:embed-linked-doc';
+  const targetStyle: EmbedCardStyle = 'vertical';
+  const props: Record<string, unknown> = { pageId: docId };
+  if (params) props.params = params;
+  insertEmbedCard(std, { flavour, targetStyle, props });
+  next();
+};

blocksuite/affine/block-embed/src/embed-linked-doc-block/commands/insert-link-by-quick-search.ts

@@ -0,0 +1,48 @@
+import { QuickSearchProvider } from '@blocksuite/affine-shared/services';
+import type { Command } from '@blocksuite/block-std';
+
+export type InsertedLinkType = {
+  flavour?: 'affine:bookmark' | 'affine:embed-linked-doc';
+} | null;
+
+export const insertLinkByQuickSearchCommand: Command<
+  never,
+  'insertedLinkType'
+> = (ctx, next) => {
+  const { std } = ctx;
+  const quickSearchService = std.getOptional(QuickSearchProvider);
+  if (!quickSearchService) {
+    next();
+    return;
+  }
+
+  const insertedLinkType: Promise<InsertedLinkType> = quickSearchService
+    .openQuickSearch()
+    .then(result => {
+      if (!result) return null;
+
+      // add linked doc
+      if ('docId' in result) {
+        std.command.exec('insertEmbedLinkedDoc', {
+          docId: result.docId,
+          params: result.params,
+        });
+        return {
+          flavour: 'affine:embed-linked-doc',
+        };
+      }
+
+      // add normal link;
+      if ('externalUrl' in result) {
+        // @ts-expect-error TODO: fix after bookmark refactor
+        std.command.exec('insertBookmark', { url: result.externalUrl });
+        return {
+          flavour: 'affine:bookmark',
+        };
+      }
+
+      return null;
+    });
+
+  next({ insertedLinkType });
+};

blocksuite/affine/block-embed/src/embed-linked-doc-block/embed-edgeless-linked-doc-block.ts

@@ -0,0 +1,72 @@
+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';
+import { EmbedLinkedDocBlockComponent } from './embed-linked-doc-block.js';
+
+export class EmbedEdgelessLinkedDocBlockComponent extends toEdgelessEmbedBlock(
+  EmbedLinkedDocBlockComponent
+) {
+  override convertToEmbed = () => {
+    const { id, doc, caption, xywh } = this.model;
+
+    // synced doc entry controlled by awareness flag
+    const isSyncedDocEnabled = doc.awarenessStore.getFlag(
+      'enable_synced_doc_block'
+    );
+    if (!isSyncedDocEnabled) {
+      return;
+    }
+
+    const style = 'syncedDoc';
+    const bound = Bound.deserialize(xywh);
+    bound.w = EMBED_CARD_WIDTH[style];
+    bound.h = EMBED_CARD_HEIGHT[style];
+
+    const edgelessService = this.rootService;
+
+    if (!edgelessService) {
+      return;
+    }
+
+    // @ts-expect-error TODO: fix after edgeless refactor
+    const newId = edgelessService.addBlock(
+      'affine:embed-synced-doc',
+      {
+        xywh: bound.serialize(),
+        caption,
+        ...cloneReferenceInfoWithoutAliases(this.referenceInfo$.peek()),
+      },
+      // @ts-expect-error TODO: fix after edgeless refactor
+      edgelessService.surface
+    );
+
+    this.std.command.exec('reassociateConnectors', {
+      oldId: id,
+      newId,
+    });
+
+    // @ts-expect-error TODO: fix after edgeless refactor
+    edgelessService.selection.set({
+      editing: false,
+      elements: [newId],
+    });
+
+    doc.deleteBlock(this.model);
+  };
+
+  get rootService() {
+    return this.std.getService('affine:page');
+  }
+
+  protected override _handleClick(evt: MouseEvent): void {
+    if (this.config.handleClick) {
+      this.config.handleClick(evt, this.host, this.referenceInfo$.peek());
+      return;
+    }
+  }
+}

blocksuite/affine/block-embed/src/embed-linked-doc-block/embed-linked-doc-block.ts

@@ -0,0 +1,557 @@
+import { isPeekable, Peekable } from '@blocksuite/affine-components/peek';
+import {
+  REFERENCE_NODE,
+  RefNodeSlotsProvider,
+} from '@blocksuite/affine-components/rich-text';
+import type {
+  DocMode,
+  EmbedLinkedDocModel,
+  EmbedLinkedDocStyles,
+} from '@blocksuite/affine-model';
+import {
+  EMBED_CARD_HEIGHT,
+  EMBED_CARD_WIDTH,
+} from '@blocksuite/affine-shared/consts';
+import {
+  DocDisplayMetaProvider,
+  DocModeProvider,
+  ThemeProvider,
+} from '@blocksuite/affine-shared/services';
+import {
+  cloneReferenceInfo,
+  cloneReferenceInfoWithoutAliases,
+  matchFlavours,
+  referenceToNode,
+} from '@blocksuite/affine-shared/utils';
+import { Bound } from '@blocksuite/global/utils';
+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';
+import { styleMap } from 'lit/directives/style-map.js';
+import { when } from 'lit/directives/when.js';
+
+import { EmbedBlockComponent } from '../common/embed-block-element.js';
+import { renderLinkedDocInCard } from '../common/render-linked-doc.js';
+import { SyncedDocErrorIcon } from '../embed-synced-doc-block/styles.js';
+import {
+  type EmbedLinkedDocBlockConfig,
+  EmbedLinkedDocBlockConfigIdentifier,
+} from './embed-linked-doc-config.js';
+import { styles } from './styles.js';
+import { getEmbedLinkedDocIcons } from './utils.js';
+
+@Peekable({
+  enableOn: ({ doc }: EmbedLinkedDocBlockComponent) => !doc.readonly,
+})
+export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinkedDocModel> {
+  static override styles = styles;
+
+  private _load = async () => {
+    const {
+      loading = true,
+      isError = false,
+      isBannerEmpty = true,
+      isNoteContentEmpty = true,
+    } = this.getInitialState();
+
+    this._loading = loading;
+    this.isError = isError;
+    this.isBannerEmpty = isBannerEmpty;
+    this.isNoteContentEmpty = isNoteContentEmpty;
+
+    if (!this._loading) {
+      return;
+    }
+
+    const linkedDoc = this.linkedDoc;
+    if (!linkedDoc) {
+      this._loading = false;
+      return;
+    }
+
+    if (!linkedDoc.loaded) {
+      try {
+        linkedDoc.load();
+      } catch (e) {
+        console.error(e);
+        this.isError = true;
+      }
+    }
+
+    if (!this.isError && !linkedDoc.root) {
+      await new Promise<void>(resolve => {
+        linkedDoc.slots.rootAdded.once(() => {
+          resolve();
+        });
+      });
+    }
+
+    this._loading = false;
+
+    // If it is a link to a block or element, the content will not be rendered.
+    if (this._referenceToNode) {
+      return;
+    }
+
+    if (!this.isError) {
+      const cardStyle = this.model.style;
+      if (cardStyle === 'horizontal' || cardStyle === 'vertical') {
+        renderLinkedDocInCard(this);
+      }
+    }
+  };
+
+  private _selectBlock = () => {
+    const selectionManager = this.host.selection;
+    const blockSelection = selectionManager.create('block', {
+      blockId: this.blockId,
+    });
+    selectionManager.setGroup('note', [blockSelection]);
+  };
+
+  private _setDocUpdatedAt = () => {
+    const meta = this.doc.collection.meta.getDocMeta(this.model.pageId);
+    if (meta) {
+      const date = meta.updatedDate || meta.createDate;
+      this._docUpdatedAt = new Date(date);
+    }
+  };
+
+  override _cardStyle: (typeof EmbedLinkedDocStyles)[number] = 'horizontal';
+
+  convertToEmbed = () => {
+    if (this._referenceToNode) return;
+
+    const { doc, caption } = this.model;
+
+    // synced doc entry controlled by awareness flag
+    const isSyncedDocEnabled = doc.awarenessStore.getFlag(
+      'enable_synced_doc_block'
+    );
+    if (!isSyncedDocEnabled) {
+      return;
+    }
+
+    const parent = doc.getParent(this.model);
+    if (!parent) {
+      return;
+    }
+    const index = parent.children.indexOf(this.model);
+
+    doc.addBlock(
+      'affine:embed-synced-doc',
+      {
+        caption,
+        ...cloneReferenceInfoWithoutAliases(this.referenceInfo$.peek()),
+      },
+      parent,
+      index
+    );
+
+    this.std.selection.setGroup('note', []);
+    doc.deleteBlock(this.model);
+  };
+
+  covertToInline = () => {
+    const { doc } = this.model;
+    const parent = doc.getParent(this.model);
+    if (!parent) {
+      return;
+    }
+    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',
+        ...this.referenceInfo$.peek(),
+      },
+    });
+    const text = new doc.Text(yText);
+
+    doc.addBlock(
+      'affine:paragraph',
+      {
+        text,
+      },
+      parent,
+      index
+    );
+
+    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$.peek());
+  };
+
+  refreshData = () => {
+    this._load().catch(e => {
+      console.error(e);
+      this.isError = true;
+    });
+  };
+
+  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) || {}
+    );
+  }
+
+  get docTitle() {
+    return this.model.title || this.linkedDoc?.meta?.title || 'Untitled';
+  }
+
+  get editorMode() {
+    return this._linkedDocMode;
+  }
+
+  get linkedDoc() {
+    return this.std.collection.getDoc(this.model.pageId);
+  }
+
+  private _handleDoubleClick(event: MouseEvent) {
+    if (this.config.handleDoubleClick) {
+      this.config.handleDoubleClick(
+        event,
+        this.host,
+        this.referenceInfo$.peek()
+      );
+      if (event.defaultPrevented) {
+        return;
+      }
+    }
+
+    if (isPeekable(this)) {
+      return;
+    }
+    event.stopPropagation();
+    this.open();
+  }
+
+  private _isDocEmpty() {
+    const linkedDoc = this.linkedDoc;
+    if (!linkedDoc) {
+      return false;
+    }
+    return !!linkedDoc && this.isNoteContentEmpty && this.isBannerEmpty;
+  }
+
+  protected _handleClick(event: MouseEvent) {
+    if (this.config.handleClick) {
+      this.config.handleClick(event, this.host, this.referenceInfo$.peek());
+      if (event.defaultPrevented) {
+        return;
+      }
+    }
+
+    this._selectBlock();
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+
+    this._cardStyle = this.model.style;
+    this._referenceToNode = referenceToNode(this.model);
+
+    this._load().catch(e => {
+      console.error(e);
+      this.isError = true;
+    });
+
+    const linkedDoc = this.linkedDoc;
+    if (linkedDoc) {
+      this.disposables.add(
+        linkedDoc.collection.meta.docMetaUpdated.on(() => {
+          this._load().catch(e => {
+            console.error(e);
+            this.isError = true;
+          });
+        })
+      );
+      this.disposables.add(
+        linkedDoc.slots.blockUpdated.on(payload => {
+          if (
+            payload.type === 'update' &&
+            ['', 'caption', 'xywh'].includes(payload.props.key)
+          ) {
+            return;
+          }
+
+          if (payload.type === 'add' && payload.init) {
+            return;
+          }
+
+          this._load().catch(e => {
+            console.error(e);
+            this.isError = true;
+          });
+        })
+      );
+
+      this._setDocUpdatedAt();
+      this.disposables.add(
+        this.doc.collection.meta.docMetaUpdated.on(() => {
+          this._setDocUpdatedAt();
+        })
+      );
+
+      if (this._referenceToNode) {
+        this._linkedDocMode = this.model.params?.mode ?? 'page';
+      } else {
+        const docMode = this.std.get(DocModeProvider);
+        this._linkedDocMode = docMode.getPrimaryMode(this.model.pageId);
+        this.disposables.add(
+          docMode.onPrimaryModeChange(mode => {
+            this._linkedDocMode = mode;
+          }, this.model.pageId)
+        );
+      }
+    }
+
+    this.disposables.add(
+      this.model.propsUpdated.on(({ key }) => {
+        if (key === 'style') {
+          this._cardStyle = this.model.style;
+        }
+        if (key === 'pageId' || key === 'style') {
+          this._load().catch(e => {
+            console.error(e);
+            this.isError = true;
+          });
+        }
+      })
+    );
+  }
+
+  getInitialState(): {
+    loading?: boolean;
+    isError?: boolean;
+    isNoteContentEmpty?: boolean;
+    isBannerEmpty?: boolean;
+  } {
+    return {};
+  }
+
+  override renderBlock() {
+    const linkedDoc = this.linkedDoc;
+    const isDeleted = !linkedDoc;
+    const isLoading = this._loading;
+    const isError = this.isError;
+    const isEmpty = this._isDocEmpty() && this.isBannerEmpty;
+    const inCanvas = matchFlavours(this.model.parent, ['affine:surface']);
+
+    const cardClassMap = classMap({
+      loading: isLoading,
+      error: isError,
+      deleted: isDeleted,
+      empty: isEmpty,
+      'banner-empty': this.isBannerEmpty,
+      'note-empty': this.isNoteContentEmpty,
+      'in-canvas': inCanvas,
+      [this._cardStyle]: true,
+    });
+
+    const theme = this.std.get(ThemeProvider).theme;
+    const {
+      LoadingIcon,
+      ReloadIcon,
+      LinkedDocDeletedBanner,
+      LinkedDocEmptyBanner,
+      SyncedDocErrorBanner,
+    } = getEmbedLinkedDocIcons(theme, this._linkedDocMode, this._cardStyle);
+
+    const icon = isError
+      ? SyncedDocErrorIcon
+      : isLoading
+        ? LoadingIcon
+        : this.icon$.value;
+    const title = isLoading ? 'Loading...' : this.title$;
+    const description = this.model.description$;
+
+    const showDefaultNoteContent = isError || isLoading || isDeleted || isEmpty;
+    const defaultNoteContent = isError
+      ? 'This linked doc failed to load.'
+      : isLoading
+        ? ''
+        : isDeleted
+          ? 'This linked doc is deleted.'
+          : isEmpty
+            ? 'Preview of the doc will be displayed here.'
+            : '';
+
+    const dateText =
+      this._cardStyle === 'cube'
+        ? this._docUpdatedAt.toLocaleTimeString()
+        : this._docUpdatedAt.toLocaleString();
+
+    const showDefaultBanner = isError || isLoading || isDeleted || isEmpty;
+
+    const defaultBanner = isError
+      ? SyncedDocErrorBanner
+      : isLoading
+        ? LinkedDocEmptyBanner
+        : isDeleted
+          ? LinkedDocDeletedBanner
+          : LinkedDocEmptyBanner;
+
+    const hasDescriptionAlias = Boolean(description.value);
+
+    return this.renderEmbed(
+      () => html`
+        <div
+          class="affine-embed-linked-doc-block ${cardClassMap}"
+          style=${styleMap({
+            transform: `scale(${this._scale})`,
+            transformOrigin: '0 0',
+          })}
+          @click=${this._handleClick}
+          @dblclick=${this._handleDoubleClick}
+        >
+          <div class="affine-embed-linked-doc-content">
+            <div class="affine-embed-linked-doc-content-title">
+              <div class="affine-embed-linked-doc-content-title-icon">
+                ${icon}
+              </div>
+
+              <div class="affine-embed-linked-doc-content-title-text">
+                ${title}
+              </div>
+            </div>
+
+            ${when(
+              hasDescriptionAlias,
+              () =>
+                html`<div class="affine-embed-linked-doc-content-note alias">
+                  ${description}
+                </div>`,
+              () =>
+                when(
+                  showDefaultNoteContent,
+                  () => html`
+                    <div class="affine-embed-linked-doc-content-note default">
+                      ${defaultNoteContent}
+                    </div>
+                  `,
+                  () => html`
+                    <div
+                      class="affine-embed-linked-doc-content-note render"
+                    ></div>
+                  `
+                )
+            )}
+            ${isError
+              ? html`
+                  <div class="affine-embed-linked-doc-card-content-reload">
+                    <div
+                      class="affine-embed-linked-doc-card-content-reload-button"
+                      @click=${this.refreshData}
+                    >
+                      ${ReloadIcon} <span>Reload</span>
+                    </div>
+                  </div>
+                `
+              : html`
+                  <div class="affine-embed-linked-doc-content-date">
+                    <span>Updated</span>
+
+                    <span>${dateText}</span>
+                  </div>
+                `}
+          </div>
+
+          ${showDefaultBanner
+            ? html`
+                <div class="affine-embed-linked-doc-banner default">
+                  ${defaultBanner}
+                </div>
+              `
+            : nothing}
+        </div>
+      `
+    );
+  }
+
+  override updated() {
+    // update card style when linked doc deleted
+    const linkedDoc = this.linkedDoc;
+    const { xywh, style } = this.model;
+    const bound = Bound.deserialize(xywh);
+    if (linkedDoc && style === 'horizontalThin') {
+      bound.w = EMBED_CARD_WIDTH.horizontal;
+      bound.h = EMBED_CARD_HEIGHT.horizontal;
+      this.doc.withoutTransact(() => {
+        this.doc.updateBlock(this.model, {
+          xywh: bound.serialize(),
+          style: 'horizontal',
+        });
+      });
+    } else if (!linkedDoc && style === 'horizontal') {
+      bound.w = EMBED_CARD_WIDTH.horizontalThin;
+      bound.h = EMBED_CARD_HEIGHT.horizontalThin;
+      this.doc.withoutTransact(() => {
+        this.doc.updateBlock(this.model, {
+          xywh: bound.serialize(),
+          style: 'horizontalThin',
+        });
+      });
+    }
+  }
+
+  @state()
+  private accessor _docUpdatedAt: Date = new Date();
+
+  @state()
+  private accessor _linkedDocMode: DocMode = 'page';
+
+  @state()
+  private accessor _loading = false;
+
+  // reference to block/element
+  @state()
+  private accessor _referenceToNode = false;
+
+  @property({ attribute: false })
+  accessor isBannerEmpty = false;
+
+  @property({ attribute: false })
+  accessor isError = false;
+
+  @property({ attribute: false })
+  accessor isNoteContentEmpty = false;
+
+  @queryAsync('.affine-embed-linked-doc-content-note.render')
+  accessor noteContainer!: Promise<HTMLDivElement | null>;
+}

blocksuite/affine/block-embed/src/embed-linked-doc-block/embed-linked-doc-config.ts

@@ -0,0 +1,29 @@
+import type { ReferenceInfo } from '@blocksuite/affine-model';
+import type { EditorHost, ExtensionType } from '@blocksuite/block-std';
+import { createIdentifier } from '@blocksuite/global/di';
+
+export interface EmbedLinkedDocBlockConfig {
+  handleClick?: (
+    e: MouseEvent,
+    host: EditorHost,
+    referenceInfo: ReferenceInfo
+  ) => void;
+  handleDoubleClick?: (
+    e: MouseEvent,
+    host: EditorHost,
+    referenceInfo: ReferenceInfo
+  ) => void;
+}
+
+export const EmbedLinkedDocBlockConfigIdentifier =
+  createIdentifier<EmbedLinkedDocBlockConfig>('EmbedLinkedDocBlockConfig');
+
+export function EmbedLinkedDocBlockConfigExtension(
+  config: EmbedLinkedDocBlockConfig
+): ExtensionType {
+  return {
+    setup: di => {
+      di.addImpl(EmbedLinkedDocBlockConfigIdentifier, () => config);
+    },
+  };
+}

blocksuite/affine/block-embed/src/embed-linked-doc-block/embed-linked-doc-spec.ts

@@ -0,0 +1,17 @@
+import {
+  BlockViewExtension,
+  CommandExtension,
+  type ExtensionType,
+} from '@blocksuite/block-std';
+import { literal } from 'lit/static-html.js';
+
+import { commands } from './commands/index.js';
+
+export const EmbedLinkedDocBlockSpec: ExtensionType[] = [
+  CommandExtension(commands),
+  BlockViewExtension('affine:embed-linked-doc', model => {
+    return model.parent?.flavour === 'affine:surface'
+      ? literal`affine-embed-edgeless-linked-doc-block`
+      : literal`affine-embed-linked-doc-block`;
+  }),
+];

blocksuite/affine/block-embed/src/embed-linked-doc-block/index.ts

@@ -0,0 +1,4 @@
+export * from './adapters/index.js';
+export * from './embed-linked-doc-block.js';
+export * from './embed-linked-doc-config.js';
+export * from './embed-linked-doc-spec.js';

blocksuite/affine/block-embed/src/embed-linked-doc-block/utils.ts

@@ -0,0 +1,115 @@
+import {
+  DarkLoadingIcon,
+  EmbedEdgelessIcon,
+  EmbedPageIcon,
+  LightLoadingIcon,
+  ReloadIcon,
+} from '@blocksuite/affine-components/icons';
+import {
+  ColorScheme,
+  type EmbedLinkedDocStyles,
+} from '@blocksuite/affine-model';
+import type { TemplateResult } from 'lit';
+
+import {
+  DarkSyncedDocErrorBanner,
+  LightSyncedDocErrorBanner,
+} from '../embed-synced-doc-block/styles.js';
+import {
+  DarkLinkedEdgelessDeletedLargeBanner,
+  DarkLinkedEdgelessDeletedSmallBanner,
+  DarkLinkedEdgelessEmptyLargeBanner,
+  DarkLinkedEdgelessEmptySmallBanner,
+  DarkLinkedPageDeletedLargeBanner,
+  DarkLinkedPageDeletedSmallBanner,
+  DarkLinkedPageEmptyLargeBanner,
+  DarkLinkedPageEmptySmallBanner,
+  LightLinkedEdgelessDeletedLargeBanner,
+  LightLinkedEdgelessDeletedSmallBanner,
+  LightLinkedEdgelessEmptyLargeBanner,
+  LightLinkedEdgelessEmptySmallBanner,
+  LightLinkedPageDeletedLargeBanner,
+  LightLinkedPageDeletedSmallBanner,
+  LightLinkedPageEmptyLargeBanner,
+  LightLinkedPageEmptySmallBanner,
+  LinkedDocDeletedIcon,
+} from './styles.js';
+
+type EmbedCardImages = {
+  LoadingIcon: TemplateResult<1>;
+  ReloadIcon: TemplateResult<1>;
+  LinkedDocIcon: TemplateResult<1>;
+  LinkedDocDeletedIcon: TemplateResult<1>;
+  LinkedDocEmptyBanner: TemplateResult<1>;
+  LinkedDocDeletedBanner: TemplateResult<1>;
+  SyncedDocErrorBanner: TemplateResult<1>;
+};
+
+export function getEmbedLinkedDocIcons(
+  theme: ColorScheme,
+  editorMode: 'page' | 'edgeless',
+  style: (typeof EmbedLinkedDocStyles)[number]
+): EmbedCardImages {
+  const small = style !== 'vertical';
+  if (editorMode === 'page') {
+    if (theme === ColorScheme.Light) {
+      return {
+        LoadingIcon: LightLoadingIcon,
+        ReloadIcon,
+        LinkedDocIcon: EmbedPageIcon,
+        LinkedDocDeletedIcon,
+        LinkedDocEmptyBanner: small
+          ? LightLinkedPageEmptySmallBanner
+          : LightLinkedPageEmptyLargeBanner,
+        LinkedDocDeletedBanner: small
+          ? LightLinkedPageDeletedSmallBanner
+          : LightLinkedPageDeletedLargeBanner,
+        SyncedDocErrorBanner: LightSyncedDocErrorBanner,
+      };
+    } else {
+      return {
+        ReloadIcon,
+        LoadingIcon: DarkLoadingIcon,
+        LinkedDocIcon: EmbedPageIcon,
+        LinkedDocDeletedIcon,
+        LinkedDocEmptyBanner: small
+          ? DarkLinkedPageEmptySmallBanner
+          : DarkLinkedPageEmptyLargeBanner,
+        LinkedDocDeletedBanner: small
+          ? DarkLinkedPageDeletedSmallBanner
+          : DarkLinkedPageDeletedLargeBanner,
+        SyncedDocErrorBanner: DarkSyncedDocErrorBanner,
+      };
+    }
+  } else {
+    if (theme === ColorScheme.Light) {
+      return {
+        ReloadIcon,
+        LoadingIcon: LightLoadingIcon,
+        LinkedDocIcon: EmbedEdgelessIcon,
+        LinkedDocDeletedIcon,
+        LinkedDocEmptyBanner: small
+          ? LightLinkedEdgelessEmptySmallBanner
+          : LightLinkedEdgelessEmptyLargeBanner,
+        LinkedDocDeletedBanner: small
+          ? LightLinkedEdgelessDeletedSmallBanner
+          : LightLinkedEdgelessDeletedLargeBanner,
+        SyncedDocErrorBanner: LightSyncedDocErrorBanner,
+      };
+    } else {
+      return {
+        ReloadIcon,
+        LoadingIcon: DarkLoadingIcon,
+        LinkedDocIcon: EmbedEdgelessIcon,
+        LinkedDocDeletedIcon,
+        LinkedDocEmptyBanner: small
+          ? DarkLinkedEdgelessEmptySmallBanner
+          : DarkLinkedEdgelessEmptyLargeBanner,
+        LinkedDocDeletedBanner: small
+          ? DarkLinkedEdgelessDeletedSmallBanner
+          : DarkLinkedEdgelessDeletedLargeBanner,
+        SyncedDocErrorBanner: DarkSyncedDocErrorBanner,
+      };
+    }
+  }
+}