refactor(editor): extract bookmark block (#9304)

blocksuite/blocks/src/_common/adapters/html/block-matcher.ts

@@ -1,3 +1,4 @@
+import { BookmarkBlockHtmlAdapterExtension } from '@blocksuite/affine-block-bookmark';
 import {
   EmbedFigmaBlockHtmlAdapterExtension,
   EmbedGithubBlockHtmlAdapterExtension,
@@ -9,7 +10,6 @@ import {
 import { ListBlockHtmlAdapterExtension } from '@blocksuite/affine-block-list';
 import { ParagraphBlockHtmlAdapterExtension } from '@blocksuite/affine-block-paragraph';
 
-import { BookmarkBlockHtmlAdapterExtension } from '../../../bookmark-block/adapters/html.js';
 import { CodeBlockHtmlAdapterExtension } from '../../../code-block/adapters/html.js';
 import { DatabaseBlockHtmlAdapterExtension } from '../../../database-block/adapters/html.js';
 import { DividerBlockHtmlAdapterExtension } from '../../../divider-block/adapters/html.js';

blocksuite/blocks/src/_common/adapters/markdown/block-matcher.ts

@@ -1,3 +1,4 @@
+import { bookmarkBlockMarkdownAdapterMatcher } from '@blocksuite/affine-block-bookmark';
 import {
   embedFigmaBlockMarkdownAdapterMatcher,
   embedGithubBlockMarkdownAdapterMatcher,
@@ -9,7 +10,6 @@ import {
 import { listBlockMarkdownAdapterMatcher } from '@blocksuite/affine-block-list';
 import { paragraphBlockMarkdownAdapterMatcher } from '@blocksuite/affine-block-paragraph';
 
-import { bookmarkBlockMarkdownAdapterMatcher } from '../../../bookmark-block/adapters/markdown.js';
 import { codeBlockMarkdownAdapterMatcher } from '../../../code-block/adapters/markdown.js';
 import { databaseBlockMarkdownAdapterMatcher } from '../../../database-block/adapters/markdown.js';
 import { dividerBlockMarkdownAdapterMatcher } from '../../../divider-block/adapters/markdown.js';

blocksuite/blocks/src/_common/adapters/notion-html/block-matcher.ts

@@ -1,3 +1,4 @@
+import { bookmarkBlockNotionHtmlAdapterMatcher } from '@blocksuite/affine-block-bookmark';
 import {
   embedFigmaBlockNotionHtmlAdapterMatcher,
   embedGithubBlockNotionHtmlAdapterMatcher,
@@ -9,7 +10,6 @@ import { paragraphBlockNotionHtmlAdapterMatcher } from '@blocksuite/affine-block
 import type { BlockNotionHtmlAdapterMatcher } from '@blocksuite/affine-shared/adapters';
 
 import { attachmentBlockNotionHtmlAdapterMatcher } from '../../../attachment-block/adapters/notion-html.js';
-import { bookmarkBlockNotionHtmlAdapterMatcher } from '../../../bookmark-block/adapters/notion-html.js';
 import { codeBlockNotionHtmlAdapterMatcher } from '../../../code-block/adapters/notion-html.js';
 import { databaseBlockNotionHtmlAdapterMatcher } from '../../../database-block/adapters/notion-html.js';
 import { dividerBlockNotionHtmlAdapterMatcher } from '../../../divider-block/adapters/notion-html.js';

blocksuite/blocks/src/_common/adapters/plain-text/block-matcher.ts

@@ -1,3 +1,4 @@
+import { bookmarkBlockPlainTextAdapterMatcher } from '@blocksuite/affine-block-bookmark';
 import {
   embedFigmaBlockPlainTextAdapterMatcher,
   embedGithubBlockPlainTextAdapterMatcher,
@@ -10,7 +11,6 @@ import { listBlockPlainTextAdapterMatcher } from '@blocksuite/affine-block-list'
 import { paragraphBlockPlainTextAdapterMatcher } from '@blocksuite/affine-block-paragraph';
 import type { BlockPlainTextAdapterMatcher } from '@blocksuite/affine-shared/adapters';
 
-import { bookmarkBlockPlainTextAdapterMatcher } from '../../../bookmark-block/adapters/plain-text.js';
 import { codeBlockPlainTextAdapterMatcher } from '../../../code-block/adapters/plain-text.js';
 import { databaseBlockPlainTextAdapterMatcher } from '../../../database-block/adapters/plain-text.js';
 import { dividerBlockPlainTextAdapterMatcher } from '../../../divider-block/adapters/plain-text.js';

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

@@ -1,3 +1,4 @@
+import { BookmarkBlockComponent } from '@blocksuite/affine-block-bookmark';
 import {
   EmbedFigmaBlockComponent,
   EmbedGithubBlockComponent,
@@ -21,8 +22,6 @@ import {
 } from '@blocksuite/affine-model';
 import type { BlockComponent } from '@blocksuite/block-std';
 
-import { BookmarkBlockComponent } from '../../../bookmark-block/bookmark-block.js';
-
 export type ExternalEmbedBlockComponent =
   | BookmarkBlockComponent
   | EmbedFigmaBlockComponent

blocksuite/blocks/src/_specs/common.ts

@@ -1,3 +1,4 @@
+import { BookmarkBlockSpec } from '@blocksuite/affine-block-bookmark';
 import { EmbedExtensions } from '@blocksuite/affine-block-embed';
 import { ListBlockSpec } from '@blocksuite/affine-block-list';
 import { ParagraphBlockSpec } from '@blocksuite/affine-block-paragraph';
@@ -7,7 +8,6 @@ import type { ExtensionType } from '@blocksuite/block-std';
 
 import { AdapterFactoryExtensions } from '../_common/adapters/extension.js';
 import { AttachmentBlockSpec } from '../attachment-block/attachment-spec.js';
-import { BookmarkBlockSpec } from '../bookmark-block/bookmark-spec.js';
 import { CodeBlockSpec } from '../code-block/code-block-spec.js';
 import { DataViewBlockSpec } from '../data-view-block/data-view-spec.js';
 import { DatabaseBlockSpec } from '../database-block/database-spec.js';

blocksuite/blocks/src/_specs/group/common.ts

@@ -1,3 +1,4 @@
+import { BookmarkBlockSpec } from '@blocksuite/affine-block-bookmark';
 import {
   EmbedFigmaBlockSpec,
   EmbedGithubBlockSpec,
@@ -11,7 +12,6 @@ import { ListBlockSpec } from '@blocksuite/affine-block-list';
 import { ParagraphBlockSpec } from '@blocksuite/affine-block-paragraph';
 
 import { AttachmentBlockSpec } from '../../attachment-block/attachment-spec.js';
-import { BookmarkBlockSpec } from '../../bookmark-block/bookmark-spec.js';
 import { CodeBlockSpec } from '../../code-block/code-block-spec.js';
 import { DataViewBlockSpec } from '../../data-view-block/data-view-spec.js';
 import { DatabaseBlockSpec } from '../../database-block/database-spec.js';

blocksuite/blocks/src/bookmark-block/adapters/extension.ts

@@ -1,13 +0,0 @@
-import type { ExtensionType } from '@blocksuite/block-std';
-
-import { BookmarkBlockHtmlAdapterExtension } from './html.js';
-import { BookmarkBlockMarkdownAdapterExtension } from './markdown.js';
-import { BookmarkBlockNotionHtmlAdapterExtension } from './notion-html.js';
-import { BookmarkBlockPlainTextAdapterExtension } from './plain-text.js';
-
-export const BookmarkBlockAdapterExtensions: ExtensionType[] = [
-  BookmarkBlockHtmlAdapterExtension,
-  BookmarkBlockMarkdownAdapterExtension,
-  BookmarkBlockNotionHtmlAdapterExtension,
-  BookmarkBlockPlainTextAdapterExtension,
-];

blocksuite/blocks/src/bookmark-block/adapters/html.ts

@@ -1,10 +0,0 @@
-import { createEmbedBlockHtmlAdapterMatcher } from '@blocksuite/affine-block-embed';
-import { BookmarkBlockSchema } from '@blocksuite/affine-model';
-import { BlockHtmlAdapterExtension } from '@blocksuite/affine-shared/adapters';
-
-export const bookmarkBlockHtmlAdapterMatcher =
-  createEmbedBlockHtmlAdapterMatcher(BookmarkBlockSchema.model.flavour);
-
-export const BookmarkBlockHtmlAdapterExtension = BlockHtmlAdapterExtension(
-  bookmarkBlockHtmlAdapterMatcher
-);

blocksuite/blocks/src/bookmark-block/adapters/index.ts

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

blocksuite/blocks/src/bookmark-block/adapters/markdown.ts

@@ -1,9 +0,0 @@
-import { createEmbedBlockMarkdownAdapterMatcher } from '@blocksuite/affine-block-embed';
-import { BookmarkBlockSchema } from '@blocksuite/affine-model';
-import { BlockMarkdownAdapterExtension } from '@blocksuite/affine-shared/adapters';
-
-export const bookmarkBlockMarkdownAdapterMatcher =
-  createEmbedBlockMarkdownAdapterMatcher(BookmarkBlockSchema.model.flavour);
-
-export const BookmarkBlockMarkdownAdapterExtension =
-  BlockMarkdownAdapterExtension(bookmarkBlockMarkdownAdapterMatcher);

blocksuite/blocks/src/bookmark-block/adapters/notion-html.ts

@@ -1,71 +0,0 @@
-import { BookmarkBlockSchema } from '@blocksuite/affine-model';
-import {
-  BlockNotionHtmlAdapterExtension,
-  type BlockNotionHtmlAdapterMatcher,
-  HastUtils,
-} from '@blocksuite/affine-shared/adapters';
-import { nanoid } from '@blocksuite/store';
-
-export const bookmarkBlockNotionHtmlAdapterMatcher: BlockNotionHtmlAdapterMatcher =
-  {
-    flavour: BookmarkBlockSchema.model.flavour,
-    toMatch: o => {
-      return (
-        HastUtils.isElement(o.node) &&
-        o.node.tagName === 'figure' &&
-        !!HastUtils.querySelector(o.node, '.bookmark')
-      );
-    },
-    fromMatch: () => false,
-    toBlockSnapshot: {
-      enter: (o, context) => {
-        if (!HastUtils.isElement(o.node)) {
-          return;
-        }
-        const bookmark = HastUtils.querySelector(o.node, '.bookmark');
-        if (!bookmark) {
-          return;
-        }
-
-        const { walkerContext } = context;
-        const bookmarkURL = bookmark.properties?.href;
-        const bookmarkTitle = HastUtils.getTextContent(
-          HastUtils.querySelector(bookmark, '.bookmark-title')
-        );
-        const bookmarkDescription = HastUtils.getTextContent(
-          HastUtils.querySelector(bookmark, '.bookmark-description')
-        );
-        const bookmarkIcon = HastUtils.querySelector(
-          bookmark,
-          '.bookmark-icon'
-        );
-        const bookmarkIconURL =
-          typeof bookmarkIcon?.properties?.src === 'string'
-            ? bookmarkIcon.properties.src
-            : '';
-        walkerContext
-          .openNode(
-            {
-              type: 'block',
-              id: nanoid(),
-              flavour: BookmarkBlockSchema.model.flavour,
-              props: {
-                type: 'card',
-                url: bookmarkURL ?? '',
-                title: bookmarkTitle,
-                description: bookmarkDescription,
-                icon: bookmarkIconURL,
-              },
-              children: [],
-            },
-            'children'
-          )
-          .closeNode();
-        walkerContext.skipAllChildren();
-      },
-    },
-    fromBlockSnapshot: {},
-  };
-
-export const BookmarkBlockNotionHtmlAdapterExtension =
-  BlockNotionHtmlAdapterExtension(bookmarkBlockNotionHtmlAdapterMatcher);

blocksuite/blocks/src/bookmark-block/adapters/plain-text.ts

@@ -1,9 +0,0 @@
-import { createEmbedBlockPlainTextAdapterMatcher } from '@blocksuite/affine-block-embed';
-import { BookmarkBlockSchema } from '@blocksuite/affine-model';
-import { BlockPlainTextAdapterExtension } from '@blocksuite/affine-shared/adapters';
-
-export const bookmarkBlockPlainTextAdapterMatcher =
-  createEmbedBlockPlainTextAdapterMatcher(BookmarkBlockSchema.model.flavour);
-
-export const BookmarkBlockPlainTextAdapterExtension =
-  BlockPlainTextAdapterExtension(bookmarkBlockPlainTextAdapterMatcher);

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

@@ -1,118 +0,0 @@
-import {
-  CaptionedBlockComponent,
-  SelectedStyle,
-} from '@blocksuite/affine-components/caption';
-import type { BookmarkBlockModel } from '@blocksuite/affine-model';
-import { DocModeProvider } from '@blocksuite/affine-shared/services';
-import { html } from 'lit';
-import { property, query } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
-
-import { BOOKMARK_MIN_WIDTH } from '../root-block/edgeless/utils/consts.js';
-import type { BookmarkBlockService } from './bookmark-service.js';
-import { refreshBookmarkUrlData } from './utils.js';
-
-export class BookmarkBlockComponent extends CaptionedBlockComponent<
-  BookmarkBlockModel,
-  BookmarkBlockService
-> {
-  private _fetchAbortController?: AbortController;
-
-  blockDraggable = true;
-
-  protected containerStyleMap!: ReturnType<typeof styleMap>;
-
-  open = () => {
-    let link = this.model.url;
-    if (!link.match(/^[a-zA-Z]+:\/\//)) {
-      link = 'https://' + link;
-    }
-    window.open(link, '_blank');
-  };
-
-  refreshData = () => {
-    refreshBookmarkUrlData(this, this._fetchAbortController?.signal).catch(
-      console.error
-    );
-  };
-
-  override connectedCallback() {
-    super.connectedCallback();
-
-    const mode = this.std.get(DocModeProvider).getEditorMode();
-    const miniWidth = `${BOOKMARK_MIN_WIDTH}px`;
-
-    this.containerStyleMap = styleMap({
-      position: 'relative',
-      width: '100%',
-      ...(mode === 'edgeless' ? { miniWidth } : {}),
-    });
-
-    this._fetchAbortController = new AbortController();
-
-    this.contentEditable = 'false';
-
-    if (!this.model.description && !this.model.title) {
-      this.refreshData();
-    }
-
-    this.disposables.add(
-      this.model.propsUpdated.on(({ key }) => {
-        if (key === 'url') {
-          this.refreshData();
-        }
-      })
-    );
-  }
-
-  override disconnectedCallback(): void {
-    super.disconnectedCallback();
-    this._fetchAbortController?.abort();
-  }
-
-  override renderBlock() {
-    const selected = !!this.selected?.is('block');
-    return html`
-      <div
-        draggable="${this.blockDraggable ? 'true' : 'false'}"
-        class=${classMap({
-          'affine-bookmark-container': true,
-          'selected-style': selected,
-        })}
-        style=${this.containerStyleMap}
-      >
-        <bookmark-card
-          .bookmark=${this}
-          .loading=${this.loading}
-          .error=${this.error}
-        ></bookmark-card>
-      </div>
-    `;
-  }
-
-  protected override accessor blockContainerStyles: StyleInfo = {
-    margin: '18px 0',
-  };
-
-  @query('bookmark-card')
-  accessor bookmarkCard!: HTMLElement;
-
-  @property({ attribute: false })
-  accessor error = false;
-
-  @property({ attribute: false })
-  accessor loading = false;
-
-  override accessor selectedStyle = SelectedStyle.Border;
-
-  override accessor useCaptionEditor = true;
-
-  override accessor useZeroWidth = true;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'affine-bookmark': BookmarkBlockComponent;
-  }
-}

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

@@ -1,53 +0,0 @@
-import {
-  EMBED_CARD_HEIGHT,
-  EMBED_CARD_WIDTH,
-} from '@blocksuite/affine-shared/consts';
-import { toGfxBlockComponent } from '@blocksuite/block-std';
-import { styleMap } from 'lit/directives/style-map.js';
-
-import { BookmarkBlockComponent } from './bookmark-block.js';
-
-export class BookmarkEdgelessBlockComponent extends toGfxBlockComponent(
-  BookmarkBlockComponent
-) {
-  override blockDraggable = false;
-
-  override getRenderingRect() {
-    const elementBound = this.model.elementBound;
-    const style = this.model.style$.value;
-
-    return {
-      x: elementBound.x,
-      y: elementBound.y,
-      w: EMBED_CARD_WIDTH[style],
-      h: EMBED_CARD_HEIGHT[style],
-      zIndex: this.toZIndex(),
-    };
-  }
-
-  override renderGfxBlock() {
-    const style = this.model.style$.value;
-    const width = EMBED_CARD_WIDTH[style];
-    const height = EMBED_CARD_HEIGHT[style];
-    const bound = this.model.elementBound;
-    const scaleX = bound.w / width;
-    const scaleY = bound.h / height;
-
-    this.containerStyleMap = styleMap({
-      width: `100%`,
-      height: `100%`,
-      transform: `scale(${scaleX}, ${scaleY})`,
-      transformOrigin: '0 0',
-    });
-
-    return this.renderPageContent();
-  }
-
-  protected override accessor blockContainerStyles = {};
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'affine-edgeless-bookmark': BookmarkEdgelessBlockComponent;
-  }
-}

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

@@ -1,16 +0,0 @@
-import { LinkPreviewer } from '@blocksuite/affine-block-embed';
-import { BookmarkBlockSchema } from '@blocksuite/affine-model';
-import { BlockService } from '@blocksuite/block-std';
-
-export class BookmarkBlockService extends BlockService {
-  static override readonly flavour = BookmarkBlockSchema.model.flavour;
-
-  private static readonly linkPreviewer = new LinkPreviewer();
-
-  static setLinkPreviewEndpoint =
-    BookmarkBlockService.linkPreviewer.setEndpoint;
-
-  queryUrlData = (url: string, signal?: AbortSignal) => {
-    return BookmarkBlockService.linkPreviewer.query(url, signal);
-  };
-}

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

@@ -1,23 +0,0 @@
-import {
-  BlockViewExtension,
-  CommandExtension,
-  type ExtensionType,
-  FlavourExtension,
-} from '@blocksuite/block-std';
-import { literal } from 'lit/static-html.js';
-
-import { BookmarkBlockAdapterExtensions } from './adapters/extension.js';
-import { BookmarkBlockService } from './bookmark-service.js';
-import { commands } from './commands/index.js';
-
-export const BookmarkBlockSpec: ExtensionType[] = [
-  FlavourExtension('affine:bookmark'),
-  BookmarkBlockService,
-  CommandExtension(commands),
-  BlockViewExtension('affine:bookmark', model => {
-    return model.parent?.flavour === 'affine:surface'
-      ? literal`affine-edgeless-bookmark`
-      : literal`affine-bookmark`;
-  }),
-  BookmarkBlockAdapterExtensions,
-].flat();

blocksuite/blocks/src/bookmark-block/commands/index.ts

@@ -1,7 +0,0 @@
-import type { BlockCommands } from '@blocksuite/block-std';
-
-import { insertBookmarkCommand } from './insert-bookmark.js';
-
-export const commands: BlockCommands = {
-  insertBookmark: insertBookmarkCommand,
-};

blocksuite/blocks/src/bookmark-block/commands/insert-bookmark.ts

@@ -1,23 +0,0 @@
-import { insertEmbedCard } from '@blocksuite/affine-block-embed';
-import type { EmbedCardStyle } from '@blocksuite/affine-model';
-import { EmbedOptionProvider } from '@blocksuite/affine-shared/services';
-import type { Command } from '@blocksuite/block-std';
-
-export const insertBookmarkCommand: Command<
-  never,
-  'insertedLinkType',
-  { url: string }
-> = (ctx, next) => {
-  const { url, std } = ctx;
-  const embedOptions = std.get(EmbedOptionProvider).getEmbedBlockOptions(url);
-
-  let flavour = 'affine:bookmark';
-  let targetStyle: EmbedCardStyle = 'vertical';
-  const props: Record<string, unknown> = { url };
-  if (embedOptions) {
-    flavour = embedOptions.flavour;
-    targetStyle = embedOptions.styles[0];
-  }
-  insertEmbedCard(std, { flavour, targetStyle, props });
-  next();
-};

blocksuite/blocks/src/bookmark-block/components/bookmark-card.ts

@@ -1,164 +0,0 @@
-import { getEmbedCardIcons } from '@blocksuite/affine-block-embed';
-import { WebIcon16 } from '@blocksuite/affine-components/icons';
-import { ThemeProvider } from '@blocksuite/affine-shared/services';
-import { getHostName } from '@blocksuite/affine-shared/utils';
-import { ShadowlessElement } from '@blocksuite/block-std';
-import { WithDisposable } from '@blocksuite/global/utils';
-import { OpenInNewIcon } from '@blocksuite/icons/lit';
-import { html } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-
-import type { BookmarkBlockComponent } from '../bookmark-block.js';
-import { styles } from '../styles.js';
-
-export class BookmarkCard extends WithDisposable(ShadowlessElement) {
-  static override styles = styles;
-
-  private _handleClick(event: MouseEvent) {
-    event.stopPropagation();
-    const model = this.bookmark.model;
-
-    if (model.parent?.flavour !== 'affine:surface') {
-      this._selectBlock();
-    }
-  }
-
-  private _handleDoubleClick(event: MouseEvent) {
-    event.stopPropagation();
-    this.bookmark.open();
-  }
-
-  private _selectBlock() {
-    const selectionManager = this.bookmark.host.selection;
-    const blockSelection = selectionManager.create('block', {
-      blockId: this.bookmark.blockId,
-    });
-    selectionManager.setGroup('note', [blockSelection]);
-  }
-
-  override connectedCallback(): void {
-    super.connectedCallback();
-
-    this.disposables.add(
-      this.bookmark.model.propsUpdated.on(() => {
-        this.requestUpdate();
-      })
-    );
-
-    this.disposables.add(
-      this.bookmark.std
-        .get(ThemeProvider)
-        .theme$.subscribe(() => this.requestUpdate())
-    );
-
-    this.disposables.add(
-      this.bookmark.selection.slots.changed.on(() => {
-        this._isSelected =
-          !!this.bookmark.selected?.is('block') ||
-          !!this.bookmark.selected?.is('surface');
-      })
-    );
-  }
-
-  override render() {
-    const { icon, title, url, description, image, style } = this.bookmark.model;
-
-    const cardClassMap = classMap({
-      loading: this.loading,
-      error: this.error,
-      [style]: true,
-      selected: this._isSelected,
-    });
-
-    const domainName = url.match(
-      /^(?:https?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:/\n]+)/im
-    )?.[1];
-
-    const titleText = this.loading
-      ? 'Loading...'
-      : !title
-        ? this.error
-          ? (domainName ?? 'Link card')
-          : ''
-        : title;
-
-    const theme = this.bookmark.std.get(ThemeProvider).theme;
-    const { LoadingIcon, EmbedCardBannerIcon } = getEmbedCardIcons(theme);
-
-    const titleIconType =
-      !icon?.split('.').pop() || icon?.split('.').pop() === 'svg'
-        ? 'svg+xml'
-        : icon?.split('.').pop();
-
-    const titleIcon = this.loading
-      ? LoadingIcon
-      : icon
-        ? html`<object
-            type="image/${titleIconType}"
-            data=${icon}
-            draggable="false"
-          >
-            ${WebIcon16}
-          </object>`
-        : WebIcon16;
-
-    const descriptionText = this.loading
-      ? ''
-      : !description
-        ? this.error
-          ? 'Failed to retrieve link information.'
-          : url
-        : (description ?? '');
-
-    const bannerImage =
-      !this.loading && image
-        ? html`<object type="image/webp" data=${image} draggable="false">
-            ${EmbedCardBannerIcon}
-          </object>`
-        : EmbedCardBannerIcon;
-
-    return html`
-      <div
-        class="affine-bookmark-card ${cardClassMap}"
-        @click=${this._handleClick}
-        @dblclick=${this._handleDoubleClick}
-      >
-        <div class="affine-bookmark-content">
-          <div class="affine-bookmark-content-title">
-            <div class="affine-bookmark-content-title-icon">${titleIcon}</div>
-            <div class="affine-bookmark-content-title-text">${titleText}</div>
-          </div>
-          <div class="affine-bookmark-content-description">
-            ${descriptionText}
-          </div>
-          <div class="affine-bookmark-content-url" @click=${this.bookmark.open}>
-            <span>${getHostName(url)}</span>
-            <div class="affine-bookmark-content-url-icon">
-              ${OpenInNewIcon({ width: '12', height: '12' })}
-            </div>
-          </div>
-        </div>
-        <div class="affine-bookmark-banner">${bannerImage}</div>
-      </div>
-    `;
-  }
-
-  @state()
-  private accessor _isSelected = false;
-
-  @property({ attribute: false })
-  accessor bookmark!: BookmarkBlockComponent;
-
-  @property({ attribute: false })
-  accessor error!: boolean;
-
-  @property({ attribute: false })
-  accessor loading!: boolean;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'bookmark-card': BookmarkCard;
-  }
-}

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

@@ -1,3 +0,0 @@
-export * from './adapters/index.js';
-export * from './bookmark-block.js';
-export * from './bookmark-service.js';

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

@@ -1,288 +0,0 @@
-import {
-  EMBED_CARD_HEIGHT,
-  EMBED_CARD_WIDTH,
-} from '@blocksuite/affine-shared/consts';
-import { unsafeCSSVar } from '@blocksuite/affine-shared/theme';
-import { baseTheme } from '@toeverything/theme';
-import { css, unsafeCSS } from 'lit';
-
-export const styles = css`
-  .affine-bookmark-card {
-    container: affine-bookmark-card / inline-size;
-    margin: 0 auto;
-    box-sizing: border-box;
-    display: flex;
-    width: 100%;
-    height: ${EMBED_CARD_HEIGHT.horizontal}px;
-
-    border-radius: 8px;
-    border: 1px solid var(--affine-background-tertiary-color);
-
-    opacity: var(--add, 1);
-    background: var(--affine-background-primary-color);
-    user-select: none;
-  }
-
-  .affine-bookmark-content {
-    width: calc(100% - 204px);
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    align-self: stretch;
-    gap: 4px;
-    padding: 12px;
-    border-radius: var(--1, 0px);
-    opacity: var(--add, 1);
-  }
-
-  .affine-bookmark-content-title {
-    display: flex;
-    flex-direction: row;
-    gap: 8px;
-    align-items: center;
-
-    align-self: stretch;
-    padding: var(--1, 0px);
-    border-radius: var(--1, 0px);
-    opacity: var(--add, 1);
-  }
-
-  .affine-bookmark-content-title-icon {
-    display: flex;
-    width: 16px;
-    height: 16px;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .affine-bookmark-content-title-icon img,
-  .affine-bookmark-content-title-icon object,
-  .affine-bookmark-content-title-icon svg {
-    width: 16px;
-    height: 16px;
-    fill: var(--affine-background-primary-color);
-  }
-
-  .affine-bookmark-content-title-text {
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
-
-    word-break: break-word;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    color: var(--affine-text-primary-color);
-
-    font-family: var(--affine-font-family);
-    font-size: var(--affine-font-sm);
-    font-style: normal;
-    font-weight: 600;
-    line-height: 22px;
-  }
-
-  .affine-bookmark-content-description {
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-
-    flex-grow: 1;
-
-    white-space: normal;
-    word-break: break-word;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    color: var(--affine-text-primary-color);
-
-    font-family: var(--affine-font-family);
-    font-size: var(--affine-font-xs);
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px;
-  }
-
-  .affine-bookmark-content-url {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 4px;
-    width: max-content;
-    max-width: 100%;
-    cursor: pointer;
-  }
-
-  .affine-bookmark-content-url > span {
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
-
-    word-break: break-all;
-    white-space: normal;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    color: var(--affine-text-secondary-color);
-
-    font-family: ${unsafeCSS(baseTheme.fontSansFamily)};
-    font-size: var(--affine-font-xs);
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px;
-  }
-  .affine-bookmark-content-url:hover > span {
-    color: var(--affine-link-color);
-  }
-  .affine-bookmark-content-url:hover {
-    fill: var(--affine-link-color);
-  }
-
-  .affine-bookmark-content-url-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 12px;
-    height: 20px;
-  }
-  .affine-bookmark-content-url-icon {
-    height: 12px;
-    width: 12px;
-    color: ${unsafeCSSVar('iconSecondary')};
-  }
-
-  .affine-bookmark-banner {
-    margin: 12px 12px 0px 0px;
-    width: 204px;
-    max-width: 100%;
-    height: 102px;
-    opacity: var(--add, 1);
-  }
-
-  .affine-bookmark-banner img,
-  .affine-bookmark-banner object,
-  .affine-bookmark-banner svg {
-    width: 204px;
-    max-width: 100%;
-    height: 102px;
-    object-fit: cover;
-    border-radius: 4px 4px var(--1, 0px) var(--1, 0px);
-  }
-
-  .affine-bookmark-card.loading {
-    .affine-bookmark-content-title-text {
-      color: var(--affine-placeholder-color);
-    }
-  }
-
-  .affine-bookmark-card.error {
-    .affine-bookmark-content-description {
-      color: var(--affine-placeholder-color);
-    }
-  }
-
-  .affine-bookmark-card.selected {
-    .affine-bookmark-content-url > span {
-      color: var(--affine-link-color);
-    }
-    .affine-bookmark-content-url .affine-bookmark-content-url-icon {
-      color: var(--affine-link-color);
-    }
-  }
-
-  .affine-bookmark-card.list {
-    height: ${EMBED_CARD_HEIGHT.list}px;
-
-    .affine-bookmark-content {
-      width: 100%;
-      flex-direction: row;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    .affine-bookmark-content-title {
-      width: calc(100% - 204px);
-    }
-
-    .affine-bookmark-content-url {
-      width: 204px;
-      justify-content: flex-end;
-    }
-
-    .affine-bookmark-content-description {
-      display: none;
-    }
-
-    .affine-bookmark-banner {
-      display: none;
-    }
-  }
-
-  .affine-bookmark-card.vertical {
-    width: ${EMBED_CARD_WIDTH.vertical}px;
-    height: ${EMBED_CARD_HEIGHT.vertical}px;
-    flex-direction: column-reverse;
-
-    .affine-bookmark-content {
-      width: 100%;
-    }
-
-    .affine-bookmark-content-description {
-      -webkit-line-clamp: 6;
-      max-height: 120px;
-    }
-
-    .affine-bookmark-content-url {
-      flex-grow: 1;
-      align-items: flex-end;
-    }
-
-    .affine-bookmark-banner {
-      width: 340px;
-      height: 170px;
-      margin-left: 12px;
-    }
-
-    .affine-bookmark-banner img,
-    .affine-bookmark-banner object,
-    .affine-bookmark-banner svg {
-      width: 340px;
-      height: 170px;
-    }
-  }
-
-  .affine-bookmark-card.cube {
-    width: ${EMBED_CARD_WIDTH.cube}px;
-    height: ${EMBED_CARD_HEIGHT.cube}px;
-
-    .affine-bookmark-content {
-      width: 100%;
-      flex-direction: column;
-      align-items: flex-start;
-      justify-content: space-between;
-    }
-
-    .affine-bookmark-content-title {
-      flex-direction: column;
-      gap: 4px;
-      align-items: flex-start;
-    }
-
-    .affine-bookmark-content-title-text {
-      -webkit-line-clamp: 2;
-    }
-
-    .affine-bookmark-content-description {
-      display: none;
-    }
-
-    .affine-bookmark-banner {
-      display: none;
-    }
-  }
-
-  @container affine-bookmark-card (width < 375px) {
-    .affine-bookmark-content {
-      width: 100%;
-    }
-    .affine-bookmark-banner {
-      display: none;
-    }
-  }
-`;

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

@@ -1,49 +0,0 @@
-import { isAbortError } from '@blocksuite/affine-shared/utils';
-import { assertExists } from '@blocksuite/global/utils';
-
-import type { BookmarkBlockComponent } from './bookmark-block.js';
-
-export async function refreshBookmarkUrlData(
-  bookmarkElement: BookmarkBlockComponent,
-  signal?: AbortSignal
-) {
-  let title = null,
-    description = null,
-    icon = null,
-    image = null;
-
-  try {
-    bookmarkElement.loading = true;
-
-    const queryUrlData = bookmarkElement.service?.queryUrlData;
-    assertExists(queryUrlData);
-
-    const bookmarkUrlData = await queryUrlData(
-      bookmarkElement.model.url,
-      signal
-    );
-
-    title = bookmarkUrlData.title ?? null;
-    description = bookmarkUrlData.description ?? null;
-    icon = bookmarkUrlData.icon ?? null;
-    image = bookmarkUrlData.image ?? null;
-
-    if (!title && !description && !icon && !image) {
-      bookmarkElement.error = true;
-    }
-
-    if (signal?.aborted) return;
-
-    bookmarkElement.doc.updateBlock(bookmarkElement.model, {
-      title,
-      description,
-      icon,
-      image,
-    });
-  } catch (error) {
-    if (signal?.aborted || isAbortError(error)) return;
-    throw error;
-  } finally {
-    bookmarkElement.loading = false;
-  }
-}

blocksuite/blocks/src/effects.ts

@@ -1,3 +1,4 @@
+import { effects as blockBookmarkEffects } from '@blocksuite/affine-block-bookmark/effects';
 import { effects as blockEmbedEffects } from '@blocksuite/affine-block-embed/effects';
 import { effects as blockListEffects } from '@blocksuite/affine-block-list/effects';
 import { effects as blockParagraphEffects } from '@blocksuite/affine-block-paragraph/effects';
@@ -33,13 +34,6 @@ import {
   AttachmentBlockComponent,
   type AttachmentBlockService,
 } from './attachment-block/index.js';
-import { BookmarkEdgelessBlockComponent } from './bookmark-block/bookmark-edgeless-block.js';
-import type { insertBookmarkCommand } from './bookmark-block/commands/insert-bookmark.js';
-import { BookmarkCard } from './bookmark-block/components/bookmark-card.js';
-import {
-  BookmarkBlockComponent,
-  type BookmarkBlockService,
-} from './bookmark-block/index.js';
 import { AffineCodeUnit } from './code-block/highlight/affine-code-unit.js';
 import {
   CodeBlockComponent,
@@ -281,6 +275,7 @@ export function effects() {
   stdEffects();
   inlineEffects();
 
+  blockBookmarkEffects();
   blockListEffects();
   blockParagraphEffects();
   blockEmbedEffects();
@@ -309,15 +304,10 @@ export function effects() {
   widgetCodeToolbarEffects();
 
   customElements.define('affine-database-title', DatabaseTitle);
-  customElements.define(
-    'affine-edgeless-bookmark',
-    BookmarkEdgelessBlockComponent
-  );
   customElements.define('affine-image', ImageBlockComponent);
   customElements.define('data-view-header-area-icon', IconCell);
   customElements.define('affine-database-link-cell', LinkCell);
   customElements.define('affine-database-link-cell-editing', LinkCellEditing);
-  customElements.define('affine-bookmark', BookmarkBlockComponent);
   customElements.define('affine-edgeless-image', ImageEdgelessBlockComponent);
   customElements.define('data-view-header-area-text', HeaderAreaTextCell);
   customElements.define(
@@ -497,7 +487,6 @@ export function effects() {
   customElements.define('note-display-mode-panel', NoteDisplayModePanel);
   customElements.define('edgeless-toolbar-button', EdgelessToolbarButton);
   customElements.define('frame-preview', FramePreview);
-  customElements.define('bookmark-card', BookmarkCard);
   customElements.define('presentation-toolbar', PresentationToolbar);
   customElements.define('edgeless-shape-menu', EdgelessShapeMenu);
   customElements.define('stroke-style-panel', StrokeStylePanel);
@@ -588,7 +577,6 @@ declare global {
       dedentBlocksToRoot: typeof dedentBlocksToRoot;
       dedentBlocks: typeof dedentBlocks;
       indentBlock: typeof indentBlock;
-      insertBookmark: typeof insertBookmarkCommand;
       updateBlockType: typeof updateBlockType;
       insertEdgelessText: typeof insertEdgelessTextCommand;
       dedentBlockToRoot: typeof dedentBlockToRoot;
@@ -607,7 +595,6 @@ declare global {
       'affine:note': NoteBlockService;
       'affine:page': RootService;
       'affine:attachment': AttachmentBlockService;
-      'affine:bookmark': BookmarkBlockService;
       'affine:database': DatabaseBlockService;
       'affine:image': ImageBlockService;
     }

blocksuite/blocks/src/index.ts

@@ -17,7 +17,6 @@ export * from './_common/transformers/index.js';
 export { type AbstractEditor } from './_common/types.js';
 export * from './_specs/index.js';
 export * from './attachment-block/index.js';
-export * from './bookmark-block/index.js';
 export * from './code-block/index.js';
 export * from './data-view-block/index.js';
 export * from './database-block/index.js';
@@ -50,6 +49,7 @@ export {
   MiniMindmapPreview,
 } from './surface-block/mini-mindmap/index.js';
 export * from './surface-ref-block/index.js';
+export * from '@blocksuite/affine-block-bookmark';
 export * from '@blocksuite/affine-block-embed';
 export * from '@blocksuite/affine-block-list';
 export * from '@blocksuite/affine-block-paragraph';

blocksuite/blocks/src/root-block/edgeless/utils/consts.ts

@@ -6,8 +6,6 @@ import {
   StrokeStyle,
 } from '@blocksuite/affine-model';
 
-export const BOOKMARK_MIN_WIDTH = 450;
-
 export const DEFAULT_NOTE_OFFSET_X = 30;
 export const DEFAULT_NOTE_OFFSET_Y = 40;
 export const NOTE_OVERLAY_OFFSET_X = 6;

blocksuite/blocks/src/root-block/widgets/element-toolbar/more-menu/config.ts

@@ -1,3 +1,4 @@
+import type { BookmarkBlockComponent } from '@blocksuite/affine-block-bookmark';
 import type {
   EmbedFigmaBlockComponent,
   EmbedGithubBlockComponent,
@@ -31,7 +32,6 @@ import {
   promptDocTitle,
 } from '../../../../_common/utils/render-linked-doc.js';
 import type { AttachmentBlockComponent } from '../../../../attachment-block/attachment-block.js';
-import type { BookmarkBlockComponent } from '../../../../bookmark-block/bookmark-block.js';
 import type { ImageBlockComponent } from '../../../../image-block/image-block.js';
 import { duplicate } from '../../../edgeless/utils/clipboard-utils.js';
 import { getSortedCloneElements } from '../../../edgeless/utils/clone-utils.js';