How can I define embed block and use it in v0.17.28?

[SniperXDev]

Hello,

I have been using BlockSuite v0.12 and defined several custom embed blocks, which worked fine. However, after upgrading to BlockSuite v0.17.28, I am encountering a TypeScript type error, even though I followed the same approach as outlined in the BlockSuite documentation: Defining New Blocks.

Here's an example of what I’m trying to do:

import { BlockModel } from '@blocksuite/store';
import { CitationData } from './citation-item';
import { TemplateResult, html, nothing } from 'lit';
import { literal } from 'lit/static-html.js';
import { BlockService } from '@blocksuite/block-std';
import { EmbedBlockComponent, EmbedBlockModel } from '@blocksuite/blocks';

type EmbedCitationModel = EmbedBlockModel<{
    citation: CitationData | null,
}>;

class EmbedCitationBlock extends EmbedBlockComponent<EmbedCitationModel> {
    override render() {
        return this.renderEmbed(() => {
            if (this.model.citation) {
                return html`
                <affine-paragraph>
                <citation-item 
                .citation="${this.model.citation}" />
                </affine-paragraph>
                `;
            } else {
                return html`${nothing}`;
            }
        });
    }
}

customElements.define('affine-embed-citation-block', EmbedCitationBlock);

declare global {
    interface HTMLElementTagNameMap {
        'affine-embed-citation-block': EmbedCitationBlock;
    }
}

export class EmbedCitationService extends BlockService<EmbedCitationModel> {
    private static readonly linkPreviewer = new LinkPreviewer();

    override mounted() {
        super.mounted();

        const rootService = this.std.spec.getService('affine:page');
        rootService.registerEmbedBlockOptions({
            flavour: this.flavour,
            urlRegex: /https?:\/\/(www\.)?[\w\-]+\.[a-z]{2,}(\.[a-z]{2,})?([\/\w\-\.\?\=\#&%]*)?/,
            styles: [],
            viewType: 'embed',
        });
    }

    static setLinkPreviewEndpoint = EmbedCitationService.linkPreviewer.setEndpoint;
}

export const EmbedCitationBlockSpec = createEmbedBlock({
    schema: {
        name: 'citation',
        version: 1,
        toModel: () => new EmbedCitationModel(),
        props: () => ({
            citation: null as CitationData | null,
        }),
    },
    view: {
        component: literal`affine-embed-citation-block`,
    },
});

Any help with resolving this issue would be greatly appreciated 🆘. I look forward to your assistance.

Thanks,
Alex

[raintoway]

Hello,

I have been using BlockSuite v0.12 and defined several custom embed blocks, which worked fine. However, after upgrading to BlockSuite v0.17.28, I am encountering a TypeScript type error, even though I followed the same approach as outlined in the BlockSuite documentation: Defining New Blocks.

Here's an example of what I’m trying to do:

import { BlockModel } from '@blocksuite/store';
import { CitationData } from './citation-item';
import { TemplateResult, html, nothing } from 'lit';
import { literal } from 'lit/static-html.js';
import { BlockService } from '@blocksuite/block-std';
import { EmbedBlockComponent, EmbedBlockModel } from '@blocksuite/blocks';

type EmbedCitationModel = EmbedBlockModel<{
    citation: CitationData | null,
}>;

class EmbedCitationBlock extends EmbedBlockComponent<EmbedCitationModel> {
    override render() {
        return this.renderEmbed(() => {
            if (this.model.citation) {
                return html`
                <affine-paragraph>
                <citation-item 
                .citation="${this.model.citation}" />
                </affine-paragraph>
                `;
            } else {
                return html`${nothing}`;
            }
        });
    }
}

customElements.define('affine-embed-citation-block', EmbedCitationBlock);

declare global {
    interface HTMLElementTagNameMap {
        'affine-embed-citation-block': EmbedCitationBlock;
    }
}

export class EmbedCitationService extends BlockService<EmbedCitationModel> {
    private static readonly linkPreviewer = new LinkPreviewer();

    override mounted() {
        super.mounted();

        const rootService = this.std.spec.getService('affine:page');
        rootService.registerEmbedBlockOptions({
            flavour: this.flavour,
            urlRegex: /https?:\/\/(www\.)?[\w\-]+\.[a-z]{2,}(\.[a-z]{2,})?([\/\w\-\.\?\=\#&%]*)?/,
            styles: [],
            viewType: 'embed',
        });
    }

    static setLinkPreviewEndpoint = EmbedCitationService.linkPreviewer.setEndpoint;
}

export const EmbedCitationBlockSpec = createEmbedBlock({
    schema: {
        name: 'citation',
        version: 1,
        toModel: () => new EmbedCitationModel(),
        props: () => ({
            citation: null as CitationData | null,
        }),
    },
    view: {
        component: literal`affine-embed-citation-block`,
    },
});

Any help with resolving this issue would be greatly appreciated 🆘. I look forward to your assistance.

Thanks, Alex

all file i mention should be update like embed-youtube-block