@formicoidea/labre-core 0.23.0

package/src/_pkgs/affine-block-embed/embed-loom-block/utils.ts

@@ -0,0 +1,75 @@
+import type {
+  EmbedLoomBlockUrlData,
+  EmbedLoomModel,
+} from '../../affine-model/index.js';
+import { isAbortError } from '../../affine-shared/utils/index.js';
+
+import type { EmbedLoomBlockComponent } from './embed-loom-block.js';
+
+const LoomOEmbedEndpoint = 'https://www.loom.com/v1/oembed';
+
+export async function queryEmbedLoomData(
+  embedLoomModel: EmbedLoomModel,
+  signal?: AbortSignal
+): Promise<Partial<EmbedLoomBlockUrlData>> {
+  const url = embedLoomModel.props.url;
+
+  const loomEmbedData: Partial<EmbedLoomBlockUrlData> =
+    await queryLoomOEmbedData(url, signal);
+
+  return loomEmbedData;
+}
+
+export async function queryLoomOEmbedData(
+  url: string,
+  signal?: AbortSignal
+): Promise<Partial<EmbedLoomBlockUrlData>> {
+  let loomOEmbedData: Partial<EmbedLoomBlockUrlData> = {};
+
+  const oEmbedUrl = `${LoomOEmbedEndpoint}?url=${url}`;
+
+  const oEmbedResponse = await fetch(oEmbedUrl, { signal }).catch(() => null);
+  if (oEmbedResponse && oEmbedResponse.ok) {
+    const oEmbedJson = await oEmbedResponse.json();
+    const { title, description, thumbnail_url: image } = oEmbedJson;
+
+    loomOEmbedData = {
+      title,
+      description,
+      image,
+    };
+  }
+
+  return loomOEmbedData;
+}
+
+export async function refreshEmbedLoomUrlData(
+  embedLoomElement: EmbedLoomBlockComponent,
+  signal?: AbortSignal
+): Promise<void> {
+  let title = null,
+    description = null,
+    image = null;
+
+  try {
+    embedLoomElement.loading = true;
+
+    const queryUrlData = embedLoomElement.service?.queryUrlData;
+    if (!queryUrlData) return;
+
+    const loomUrlData = await queryUrlData(embedLoomElement.model);
+    ({ title = null, description = null, image = null } = loomUrlData);
+
+    if (signal?.aborted) return;
+
+    embedLoomElement.store.updateBlock(embedLoomElement.model, {
+      title,
+      description,
+      image,
+    });
+  } catch (error) {
+    if (signal?.aborted || isAbortError(error)) return;
+  } finally {
+    embedLoomElement.loading = false;
+  }
+}

package/src/_pkgs/affine-block-embed/embed-youtube-block/adapters/extension.ts

@@ -0,0 +1,13 @@
+import type { ExtensionType } from '../../../store/index.js';
+
+import { EmbedYoutubeBlockHtmlAdapterExtension } from './html.js';
+import { EmbedYoutubeMarkdownAdapterExtension } from './markdown.js';
+import { EmbedYoutubeBlockNotionHtmlAdapterExtension } from './notion-html.js';
+import { EmbedYoutubeBlockPlainTextAdapterExtension } from './plain-text.js';
+
+export const EmbedYoutubeBlockAdapterExtensions: ExtensionType[] = [
+  EmbedYoutubeBlockHtmlAdapterExtension,
+  EmbedYoutubeMarkdownAdapterExtension,
+  EmbedYoutubeBlockPlainTextAdapterExtension,
+  EmbedYoutubeBlockNotionHtmlAdapterExtension,
+];

package/src/_pkgs/affine-block-embed/embed-youtube-block/adapters/html.ts

@@ -0,0 +1,51 @@
+import { EmbedYoutubeBlockSchema } from '../../../affine-model/index.js';
+import {
+  BlockHtmlAdapterExtension,
+  HastUtils,
+} from '../../../affine-shared/adapters/index.js';
+import { nanoid } from '../../../store/index.js';
+
+import { createEmbedBlockHtmlAdapterMatcher } from '../../common/adapters/html.js';
+
+export const embedYoutubeBlockHtmlAdapterMatcher =
+  createEmbedBlockHtmlAdapterMatcher(EmbedYoutubeBlockSchema.model.flavour, {
+    toMatch: o => HastUtils.isElement(o.node) && o.node.tagName === 'iframe',
+    toBlockSnapshot: {
+      enter: (o, context) => {
+        if (!HastUtils.isElement(o.node)) {
+          return;
+        }
+
+        const src = o.node.properties?.src;
+        if (typeof src !== 'string') {
+          return;
+        }
+
+        const { walkerContext } = context;
+        if (src.startsWith('https://www.youtube.com/embed/')) {
+          const videoId = src.substring(
+            'https://www.youtube.com/embed/'.length,
+            src.indexOf('?') !== -1 ? src.indexOf('?') : undefined
+          );
+          walkerContext
+            .openNode(
+              {
+                type: 'block',
+                id: nanoid(),
+                flavour: 'affine:embed-youtube',
+                props: {
+                  url: `https://www.youtube.com/watch?v=${videoId}`,
+                },
+                children: [],
+              },
+              'children'
+            )
+            .closeNode();
+        }
+      },
+    },
+  });
+
+export const EmbedYoutubeBlockHtmlAdapterExtension = BlockHtmlAdapterExtension(
+  embedYoutubeBlockHtmlAdapterMatcher
+);

package/src/_pkgs/affine-block-embed/embed-youtube-block/adapters/index.ts

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

package/src/_pkgs/affine-block-embed/embed-youtube-block/adapters/markdown.ts

@@ -0,0 +1,10 @@
+import { EmbedYoutubeBlockSchema } from '../../../affine-model/index.js';
+import { BlockMarkdownAdapterExtension } from '../../../affine-shared/adapters/index.js';
+
+import { createEmbedBlockMarkdownAdapterMatcher } from '../../common/adapters/markdown.js';
+
+export const embedYoutubeBlockMarkdownAdapterMatcher =
+  createEmbedBlockMarkdownAdapterMatcher(EmbedYoutubeBlockSchema.model.flavour);
+
+export const EmbedYoutubeMarkdownAdapterExtension =
+  BlockMarkdownAdapterExtension(embedYoutubeBlockMarkdownAdapterMatcher);

package/src/_pkgs/affine-block-embed/embed-youtube-block/adapters/notion-html.ts

@@ -0,0 +1,14 @@
+import { EmbedYoutubeBlockSchema } from '../../../affine-model/index.js';
+import { BlockNotionHtmlAdapterExtension } from '../../../affine-shared/adapters/index.js';
+
+import { createEmbedBlockNotionHtmlAdapterMatcher } from '../../common/adapters/notion-html.js';
+import { youtubeUrlRegex } from '../embed-youtube-model.js';
+
+export const embedYoutubeBlockNotionHtmlAdapterMatcher =
+  createEmbedBlockNotionHtmlAdapterMatcher(
+    EmbedYoutubeBlockSchema.model.flavour,
+    youtubeUrlRegex
+  );
+
+export const EmbedYoutubeBlockNotionHtmlAdapterExtension =
+  BlockNotionHtmlAdapterExtension(embedYoutubeBlockNotionHtmlAdapterMatcher);

package/src/_pkgs/affine-block-embed/embed-youtube-block/adapters/plain-text.ts

@@ -0,0 +1,12 @@
+import { EmbedYoutubeBlockSchema } from '../../../affine-model/index.js';
+import { BlockPlainTextAdapterExtension } from '../../../affine-shared/adapters/index.js';
+
+import { createEmbedBlockPlainTextAdapterMatcher } from '../../common/adapters/plain-text.js';
+
+export const embedYoutubeBlockPlainTextAdapterMatcher =
+  createEmbedBlockPlainTextAdapterMatcher(
+    EmbedYoutubeBlockSchema.model.flavour
+  );
+
+export const EmbedYoutubeBlockPlainTextAdapterExtension =
+  BlockPlainTextAdapterExtension(embedYoutubeBlockPlainTextAdapterMatcher);

package/src/_pkgs/affine-block-embed/embed-youtube-block/configs/slash-menu.ts

@@ -0,0 +1,47 @@
+import { DefaultTool } from '../../../affine-block-surface/index.js';
+import { toggleEmbedCardCreateModal } from '../../../affine-components/embed-card-modal/index.js';
+import type { SlashMenuConfig } from '../../../affine-widget-slash-menu/index.js';
+import { YoutubeDuotoneIcon } from '@blocksuite/icons/lit';
+import { GfxControllerIdentifier } from '../../../std/gfx/index.js';
+
+import { YoutubeVideoTooltip } from './tooltips';
+
+export const embedYoutubeSlashMenuConfig: SlashMenuConfig = {
+  items: [
+    {
+      name: 'YouTube',
+      description: 'Embed a YouTube video.',
+      icon: YoutubeDuotoneIcon(),
+      tooltip: {
+        figure: YoutubeVideoTooltip,
+        caption: 'YouTube Video',
+      },
+      group: '4_Content & Media@6',
+      when: ({ model }) =>
+        model.store.schema.flavourSchemaMap.has('affine:embed-youtube'),
+      action: ({ std, model }) => {
+        (async () => {
+          const { host } = std;
+          const parentModel = host.store.getParent(model);
+          if (!parentModel) {
+            return;
+          }
+          const index = parentModel.children.indexOf(model) + 1;
+          await toggleEmbedCardCreateModal(
+            host,
+            'YouTube',
+            'The added YouTube video link will be displayed as an embed view.',
+            { mode: 'page', parentModel, index },
+            ({ mode }) => {
+              if (mode === 'edgeless') {
+                const gfx = std.get(GfxControllerIdentifier);
+                gfx.tool.setTool(DefaultTool);
+              }
+            }
+          );
+          if (model.text?.length === 0) std.store.deleteBlock(model);
+        })().catch(console.error);
+      },
+    },
+  ],
+};

package/src/_pkgs/affine-block-embed/embed-youtube-block/configs/tooltips.ts

@@ -0,0 +1,24 @@
+import { html } from 'lit';
+
+// prettier-ignore
+export const YoutubeVideoTooltip = html`<svg width="170" height="106" viewBox="0 0 170 106" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g clip-path="url(#clip0_1_2)">
+<path d="M168 0H2C0.89543 0 0 0.89543 0 2V104C0 105.105 0.89543 106 2 106H168C169.105 106 170 105.105 170 104V2C170 0.89543 169.105 0 168 0Z" fill="white"/>
+<path d="M168 0H2C0.89543 0 0 0.89543 0 2V104C0 105.105 0.89543 106 2 106H168C169.105 106 170 105.105 170 104V2C170 0.89543 169.105 0 168 0Z" fill="white"/>
+<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="10" y="18.2728">Embed a YouTube video.</tspan></text>
+<path d="M172.561 28H10C8.89543 28 8 28.8954 8 30V120C8 121.105 8.89543 122 10 122H172.561C173.666 122 174.561 121.105 174.561 120V30C174.561 28.8954 173.666 28 172.561 28Z" fill="url(#pattern0_1_2)"/>
+<path d="M172.561 28H10C8.89543 28 8 28.8954 8 30V120C8 121.105 8.89543 122 10 122H172.561C173.666 122 174.561 121.105 174.561 120V30C174.561 28.8954 173.666 28 172.561 28Z" fill="black" fill-opacity="0.2"/>
+<path d="M104.691 68.8597C104.538 68.2666 104.24 67.7259 103.828 67.2914C103.415 66.8569 102.901 66.5438 102.337 66.3833C100.273 65.7911 91.9673 65.7911 91.9673 65.7911C91.9673 65.7911 83.6609 65.8091 81.5972 66.4012C81.0334 66.5618 80.5195 66.8749 80.1066 67.3094C79.6936 67.7439 79.3961 68.2846 79.2436 68.8777C78.6193 72.7357 78.3772 78.6144 79.2607 82.3181C79.4133 82.9112 79.7108 83.4519 80.1237 83.8863C80.5367 84.3208 81.0506 84.6339 81.6143 84.7944C83.6781 85.3866 91.9842 85.3866 91.9842 85.3866C91.9842 85.3866 100.29 85.3866 102.354 84.7944C102.918 84.6339 103.432 84.3208 103.845 83.8864C104.257 83.4519 104.555 82.9112 104.708 82.3181C105.366 78.4546 105.569 72.5795 104.691 68.8597Z" fill="#FF0000"/>
+<path d="M89.1812 79.7879L96.1796 75.5889L89.1812 71.3899V79.7879Z" fill="white"/>
+</g>
+<defs>
+<pattern id="pattern0_1_2" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_1_2" transform="matrix(0.0061891 0 0 0.0128205 -0.00131663 0)"/>
+</pattern>
+<clipPath id="clip0_1_2">
+<rect width="170" height="106" fill="white"/>
+</clipPath>
+<image id="image0_1_2" width="162" height="78" xlink:href="data:image/png;base64,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"/>
+</defs>
+</svg>
+`;

package/src/_pkgs/affine-block-embed/embed-youtube-block/edgeless-clipboard-config.ts

@@ -0,0 +1,42 @@
+import { EdgelessClipboardConfig } from '../../affine-block-surface/index.js';
+import { type BlockSnapshot } from '../../store/index.js';
+
+export class EdgelessClipboardEmbedYoutubeConfig extends EdgelessClipboardConfig {
+  static override readonly key = 'affine:embed-youtube';
+
+  override createBlock(youtubeEmbed: BlockSnapshot): string | null {
+    if (!this.surface) return null;
+    const {
+      xywh,
+      style,
+      url,
+      caption,
+      videoId,
+      image,
+      title,
+      description,
+      creator,
+      creatorUrl,
+      creatorImage,
+    } = youtubeEmbed.props;
+
+    const embedYoutubeId = this.crud.addBlock(
+      'affine:embed-youtube',
+      {
+        xywh,
+        style,
+        url,
+        caption,
+        videoId,
+        image,
+        title,
+        description,
+        creator,
+        creatorUrl,
+        creatorImage,
+      },
+      this.surface.model.id
+    );
+    return embedYoutubeId;
+  }
+}

package/src/_pkgs/affine-block-embed/embed-youtube-block/embed-edgeless-youtube-block.ts

@@ -0,0 +1,13 @@
+import { EmbedYoutubeBlockSchema } from '../../affine-model/index.js';
+
+import { createEmbedEdgelessBlockInteraction } from '../common/embed-block-element.js';
+import { toEdgelessEmbedBlock } from '../common/to-edgeless-embed-block.js';
+import { EmbedYoutubeBlockComponent } from './embed-youtube-block.js';
+
+export class EmbedEdgelessYoutubeBlockComponent extends toEdgelessEmbedBlock(
+  EmbedYoutubeBlockComponent
+) {}
+
+export const EmbedYoutubeBlockInteraction = createEmbedEdgelessBlockInteraction(
+  EmbedYoutubeBlockSchema.model.flavour
+);

package/src/_pkgs/affine-block-embed/embed-youtube-block/embed-youtube-block.ts

@@ -0,0 +1,225 @@
+import { LoadingIcon, OpenIcon } from '../../affine-components/icons/index.js';
+import type {
+  EmbedYoutubeModel,
+  EmbedYoutubeStyles,
+} from '../../affine-model/index.js';
+import { ImageProxyService } from '../../affine-shared/adapters/index.js';
+import { ThemeProvider } from '../../affine-shared/services/index.js';
+import { BlockSelection } from '../../std/index.js';
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+import { EmbedBlockComponent } from '../common/embed-block-element.js';
+import { getEmbedCardIcons } from '../common/utils.js';
+import { youtubeUrlRegex } from './embed-youtube-model.js';
+import type { EmbedYoutubeBlockService } from './embed-youtube-service.js';
+import { styles, YoutubeIcon } from './styles.js';
+import { refreshEmbedYoutubeUrlData } from './utils.js';
+
+export class EmbedYoutubeBlockComponent extends EmbedBlockComponent<
+  EmbedYoutubeModel,
+  EmbedYoutubeBlockService
+> {
+  static override styles = styles;
+
+  override _cardStyle: (typeof EmbedYoutubeStyles)[number] = 'video';
+
+  open = () => {
+    let link = this.model.props.url;
+    if (!link.match(/^[a-zA-Z]+:\/\//)) {
+      link = 'https://' + link;
+    }
+    window.open(link, '_blank');
+  };
+
+  refreshData = () => {
+    refreshEmbedYoutubeUrlData(this, this.fetchAbortController.signal).catch(
+      console.error
+    );
+  };
+
+  private _handleDoubleClick(event: MouseEvent) {
+    event.stopPropagation();
+    this.open();
+  }
+
+  private _selectBlock() {
+    const selectionManager = this.host.selection;
+    const blockSelection = selectionManager.create(BlockSelection, {
+      blockId: this.blockId,
+    });
+    selectionManager.setGroup('note', [blockSelection]);
+  }
+
+  protected _handleClick(event: MouseEvent) {
+    event.stopPropagation();
+    this._selectBlock();
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this._cardStyle = this.model.props.style;
+
+    if (!this.model.props.videoId) {
+      this.store.withoutTransact(() => {
+        const url = this.model.props.url;
+        const urlMatch = url.match(youtubeUrlRegex);
+        if (urlMatch) {
+          const [, videoId] = urlMatch;
+          this.store.updateBlock(this.model, {
+            videoId,
+          });
+        }
+      });
+    }
+
+    if (!this.model.props.description && !this.model.props.title) {
+      this.store.withoutTransact(() => {
+        this.refreshData();
+      });
+    }
+
+    this.disposables.add(
+      this.model.propsUpdated.subscribe(({ key }) => {
+        this.requestUpdate();
+        if (key === 'url') {
+          this.refreshData();
+        }
+      })
+    );
+
+    matchMedia('print').addEventListener('change', () => {
+      this._showImage = matchMedia('print').matches;
+    });
+  }
+
+  override renderBlock() {
+    const {
+      image,
+      title = 'YouTube',
+      description,
+      creator,
+      creatorImage,
+      videoId,
+    } = this.model.props;
+
+    const loading = this.loading;
+    const theme = this.std.get(ThemeProvider).theme;
+    const imageProxyService = this.store.get(ImageProxyService);
+    const { EmbedCardBannerIcon } = getEmbedCardIcons(theme);
+    const titleIcon = loading ? LoadingIcon() : YoutubeIcon;
+    const titleText = loading ? 'Loading...' : title;
+    const descriptionText = loading ? null : description;
+    const bannerImage =
+      !loading && image
+        ? html`<img src=${imageProxyService.buildUrl(image)} alt="banner" />`
+        : EmbedCardBannerIcon;
+
+    const creatorImageEl =
+      !loading && creatorImage
+        ? html`<img
+            src=${imageProxyService.buildUrl(creatorImage)}
+            alt="creator"
+          />`
+        : nothing;
+
+    return this.renderEmbed(
+      () => html`
+        <div
+          class=${classMap({
+            'affine-embed-youtube-block': true,
+            loading,
+            selected: this.selected$.value,
+          })}
+          style=${styleMap({
+            transformOrigin: '0 0',
+          })}
+          @click=${this._handleClick}
+          @dblclick=${this._handleDoubleClick}
+        >
+          <div class="affine-embed-youtube-video">
+            ${videoId
+              ? html`
+                  <div class="affine-embed-youtube-video-iframe-container">
+                    <iframe
+                      id="ytplayer"
+                      type="text/html"
+                      src=${`https://www.youtube.com/embed/${videoId}`}
+                      frameborder="0"
+                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                      allowfullscreen
+                      loading="lazy"
+                      credentialless
+                    ></iframe>
+
+                    <!-- overlay to prevent the iframe from capturing pointer events -->
+                    <div
+                      class=${classMap({
+                        'affine-embed-youtube-video-iframe-overlay': true,
+                        hide: !this.showOverlay$.value,
+                      })}
+                    ></div>
+                    <img
+                      class=${classMap({
+                        'affine-embed-youtube-video-iframe-overlay': true,
+                        'media-print': true,
+                        hide: !this._showImage,
+                      })}
+                      src=${`https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`}
+                      alt="YouTube Video"
+                      loading="lazy"
+                    />
+                  </div>
+                `
+              : bannerImage}
+          </div>
+          <div class="affine-embed-youtube-content">
+            <div class="affine-embed-youtube-content-header">
+              <div class="affine-embed-youtube-content-title-icon">
+                ${titleIcon}
+              </div>
+
+              <div class="affine-embed-youtube-content-title-text">
+                ${titleText}
+              </div>
+
+              <div class="affine-embed-youtube-content-creator-image">
+                ${creatorImageEl}
+              </div>
+
+              <div class="affine-embed-youtube-content-creator-text">
+                ${creator}
+              </div>
+            </div>
+
+            ${loading
+              ? html`<div
+                  class="affine-embed-youtube-content-description"
+                ></div>`
+              : descriptionText
+                ? html`<div class="affine-embed-youtube-content-description">
+                    ${descriptionText}
+                  </div>`
+                : nothing}
+
+            <div class="affine-embed-youtube-content-url" @click=${this.open}>
+              <span>www.youtube.com</span>
+
+              <div class="affine-embed-youtube-content-url-icon">
+                ${OpenIcon}
+              </div>
+            </div>
+          </div>
+        </div>
+      `
+    );
+  }
+
+  @state()
+  private accessor _showImage = false;
+
+  @property({ attribute: false })
+  accessor loading = false;
+}

package/src/_pkgs/affine-block-embed/embed-youtube-block/embed-youtube-model.ts

@@ -0,0 +1,2 @@
+export const youtubeUrlRegex: RegExp =
+  /(?:https?:\/\/)?(?:(?:www|m)\.)?youtu\.?be(?:\.com)?\/?.*(?:watch|embed)?(?:.*v=|v\/|\/)([\w-_]+)/;

package/src/_pkgs/affine-block-embed/embed-youtube-block/embed-youtube-service.ts

@@ -0,0 +1,35 @@
+import {
+  EmbedYoutubeBlockSchema,
+  type EmbedYoutubeModel,
+  EmbedYoutubeStyles,
+} from '../../affine-model/index.js';
+import {
+  EmbedOptionConfig,
+  LinkPreviewServiceIdentifier,
+} from '../../affine-shared/services/index.js';
+import { BlockService } from '../../std/index.js';
+
+import { youtubeUrlRegex } from './embed-youtube-model.js';
+import { queryEmbedYoutubeData } from './utils.js';
+
+export class EmbedYoutubeBlockService extends BlockService {
+  static override readonly flavour = EmbedYoutubeBlockSchema.model.flavour;
+
+  queryUrlData = (
+    embedYoutubeModel: EmbedYoutubeModel,
+    signal?: AbortSignal
+  ) => {
+    return queryEmbedYoutubeData(
+      embedYoutubeModel,
+      this.std.get(LinkPreviewServiceIdentifier),
+      signal
+    );
+  };
+}
+
+export const EmbedYoutubeBlockOptionConfig = EmbedOptionConfig({
+  flavour: EmbedYoutubeBlockSchema.model.flavour,
+  urlRegex: youtubeUrlRegex,
+  styles: EmbedYoutubeStyles,
+  viewType: 'embed',
+});

package/src/_pkgs/affine-block-embed/embed-youtube-block/embed-youtube-spec.ts

@@ -0,0 +1,30 @@
+import { EmbedYoutubeBlockSchema } from '../../affine-model/index.js';
+import { SlashMenuConfigExtension } from '../../affine-widget-slash-menu/index.js';
+import { BlockViewExtension, FlavourExtension } from '../../std/index.js';
+import type { ExtensionType } from '../../store/index.js';
+import { literal } from 'lit/static-html.js';
+
+import { createBuiltinToolbarConfigExtension } from '../configs/toolbar';
+import { embedYoutubeSlashMenuConfig } from './configs/slash-menu';
+import { EmbedYoutubeBlockInteraction } from './embed-edgeless-youtube-block';
+import { EmbedYoutubeBlockComponent } from './embed-youtube-block';
+import {
+  EmbedYoutubeBlockOptionConfig,
+  EmbedYoutubeBlockService,
+} from './embed-youtube-service';
+
+const flavour = EmbedYoutubeBlockSchema.model.flavour;
+
+export const EmbedYoutubeViewExtensions: ExtensionType[] = [
+  FlavourExtension(flavour),
+  EmbedYoutubeBlockService,
+  BlockViewExtension(flavour, model => {
+    return model.parent?.flavour === 'affine:surface'
+      ? literal`affine-embed-edgeless-youtube-block`
+      : literal`affine-embed-youtube-block`;
+  }),
+  EmbedYoutubeBlockOptionConfig,
+  createBuiltinToolbarConfigExtension(flavour, EmbedYoutubeBlockComponent),
+  SlashMenuConfigExtension('affine:embed-youtube', embedYoutubeSlashMenuConfig),
+  EmbedYoutubeBlockInteraction,
+].flat();

package/src/_pkgs/affine-block-embed/embed-youtube-block/index.ts

@@ -0,0 +1,7 @@
+export * from './adapters/index.js';
+export * from './edgeless-clipboard-config';
+export * from './embed-youtube-block.js';
+export * from './embed-youtube-model.js';
+export * from './embed-youtube-service.js';
+export * from './embed-youtube-spec.js';
+export { YoutubeIcon } from './styles.js';