feat(editor): add experimental feature citation (#11984)

Closes: [BS-3122](https://linear.app/affine-design/issue/BS-3122/footnote-definition-adapter-适配)
Closes: [BS-3123](https://linear.app/affine-design/issue/BS-3123/几个-block-card-view-适配-footnote-态)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Introduced a new citation card component and web element for displaying citations.
  - Added support for citation-style rendering in attachment, bookmark, and linked document blocks.
  - Enabled citation parsing from footnote definitions in markdown for attachments, bookmarks, and linked docs.
  - Added a feature flag to enable or disable citation features.
  - Provided new toolbar logic to disable downloads for citation-style attachments.

- **Improvements**
  - Updated block models and properties to support citation identifiers.
  - Added localization and settings for the citation experimental feature.
  - Enhanced markdown adapters to recognize and process citation footnotes.
  - Included new constants and styles for citation card display.

- **Bug Fixes**
  - Ensured readonly state is respected in block interactions and rendering for citation blocks.

- **Documentation**
  - Added exports and effects for new citation components and features.

- **Tests**
  - Updated snapshots to include citation-related properties in block data.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/blocks/bookmark/src/bookmark-block.ts

@@ -4,6 +4,7 @@ import {
 } from '@blocksuite/affine-components/caption';
 import type { BookmarkBlockModel } from '@blocksuite/affine-model';
 import { DocModeProvider } from '@blocksuite/affine-shared/services';
+import { BlockSelection } from '@blocksuite/std';
 import { computed, type ReadonlySignal } from '@preact/signals-core';
 import { html } from 'lit';
 import { property, query } from 'lit/decorators.js';
@@ -27,6 +28,14 @@ export class BookmarkBlockComponent extends CaptionedBlockComponent<BookmarkBloc
 
   protected containerStyleMap!: ReturnType<typeof styleMap>;
 
+  selectBlock = () => {
+    const selectionManager = this.std.selection;
+    const blockSelection = selectionManager.create(BlockSelection, {
+      blockId: this.blockId,
+    });
+    selectionManager.setGroup('note', [blockSelection]);
+  };
+
   open = () => {
     let link = this.model.props.url;
     if (!link.match(/^[a-zA-Z]+:\/\//)) {
@@ -41,6 +50,37 @@ export class BookmarkBlockComponent extends CaptionedBlockComponent<BookmarkBloc
     );
   };
 
+  get isCitation() {
+    return (
+      !!this.model.props.footnoteIdentifier &&
+      this.model.props.style === 'citation'
+    );
+  }
+
+  private readonly _renderCitationView = () => {
+    const { title, description, url, icon, footnoteIdentifier } =
+      this.model.props;
+    return html`
+      <affine-citation-card
+        .icon=${icon}
+        .citationTitle=${title || url}
+        .citationContent=${description}
+        .citationIdentifier=${footnoteIdentifier}
+        .onClickCallback=${this.selectBlock}
+        .onDoubleClickCallback=${this.open}
+        .active=${this.selected$.value}
+      ></affine-citation-card>
+    `;
+  };
+
+  private readonly _renderCardView = () => {
+    return html`<bookmark-card
+      .bookmark=${this}
+      .loading=${this.loading}
+      .error=${this.error}
+    ></bookmark-card>`;
+  };
+
   override connectedCallback() {
     super.connectedCallback();
 
@@ -58,6 +98,9 @@ export class BookmarkBlockComponent extends CaptionedBlockComponent<BookmarkBloc
     this.contentEditable = 'false';
 
     if (!this.model.props.description && !this.model.props.title) {
+      if (this.doc.readonly) {
+        return;
+      }
       this.refreshData();
     }
 
@@ -85,11 +128,7 @@ export class BookmarkBlockComponent extends CaptionedBlockComponent<BookmarkBloc
         })}
         style=${this.containerStyleMap}
       >
-        <bookmark-card
-          .bookmark=${this}
-          .loading=${this.loading}
-          .error=${this.error}
-        ></bookmark-card>
+        ${this.isCitation ? this._renderCitationView() : this._renderCardView()}
       </div>
     `;
   }