BlockSuite

Appearance

BlockSuite API Documentation / @blocksuite/affine-block-attachment

@blocksuite/affine-block-attachment ​

Classes ​

Extension ​

EdgelessClipboardAttachmentConfig ​

Understanding Extensions ​

Extensions provide a way to extend the functionality of a system using dependency injection. They allow you to register services, implementations, and factories in the DI container, which can then be retrieved and used by different parts of the application.

Extensions are particularly useful for:

  • Registering different implementations for different types
  • Creating pluggable architecture where components can be added or removed
  • Managing dependencies between different parts of the application

Usage Example: Fruit Processing System ​

Let's consider a fruit processing system where different types of fruits need different processing methods. We'll show how to implement this using extensions.

Step 1: Define the interfaces ​

ts
interface FruitProcessor {
  process(fruit: Fruit): void;
}

interface Fruit {
  type: string;
  // other properties
}

Step 2: Create a service identifier ​

ts
import { createIdentifier } from '@blocksuite/global/di';

const FruitProcessorProvider = createIdentifier<FruitProcessor>('fruit-processor-provider');

Step 3: Create implementations ​

ts
class AppleProcessor implements FruitProcessor {
  process(fruit: Fruit): void {
    console.log('Slicing apple');
    // Apple-specific processing
  }
}

class BananaProcessor implements FruitProcessor {
  process(fruit: Fruit): void {
    console.log('Peeling banana');
    // Banana-specific processing
  }
}

Step 4: Create an extension factory ​

ts
const FruitProcessorExtension = (
  fruitType: string,
  implementation: new () => FruitProcessor
): ExtensionType => {
  return {
    setup: di => {
      di.addImpl(FruitProcessorProvider(fruitType), implementation);
    }
  };
};

Step 5: Create concrete extensions ​

ts
export const AppleProcessorExtension = FruitProcessorExtension('apple', AppleProcessor);
export const BananaProcessorExtension = FruitProcessorExtension('banana', BananaProcessor);

Step 6: Use the extensions ​

ts
import { Container } from '@blocksuite/global/di';

class FruitProcessingSystem {
  provider: ServiceProvider;

  constructor(extensions: ExtensionType[]) {
    const container = new Container();

    // Set up all extensions
    extensions.forEach(ext => ext.setup(container));

    // Create a provider from the container
    this.provider = container.provider();
  }

  processFruit(fruit: Fruit) {
    // Get the appropriate processor based on fruit type
    const processor = this.provider.get(FruitProcessorProvider(fruit.type));

    // Process the fruit
    processor.process(fruit);
  }
}

// Initialize the system with extensions
const system = new FruitProcessingSystem([
  AppleProcessorExtension,
  BananaProcessorExtension
]);

// Use the system
system.processFruit({ type: 'apple' });  // Output: Slicing apple
system.processFruit({ type: 'banana' }); // Output: Peeling banana

Note: We deliberately used a non-block specific example here. In BlockSuite, the extension pattern can be applied to any entity that can be configured by third parties, not just blocks. This includes different tools in the whiteboard, different column types in database blocks, and many other extensible components. The pattern remains the same regardless of what you're extending.

Extends ​
Constructors ​
Properties ​
key ​

readonly static key: "affine:attachment" = 'affine:attachment'

Overrides ​

EdgelessClipboardConfig.key

Accessors ​
Methods ​
createBlock() ​

createBlock(attachment): Promise<string | null>

Parameters ​
attachment ​

BlockSnapshot

Returns ​

Promise<string | null>

Overrides ​

EdgelessClipboardConfig.createBlock

Other ​

AttachmentBlockComponent ​

Extends ​
Constructors ​
Other ​
blockDraggable ​

blockDraggable: boolean = true

containerStyleMap ​

protected containerStyleMap: DirectiveResult<typeof StyleMapDirective>

resolvedState$ ​

protected resolvedState$: ReadonlySignal<AttachmentResolvedStateInfo>

resourceController ​

resourceController: ResourceController

styles ​

static styles: CSSResult

Overrides ​

CaptionedBlockComponent.styles

blobUrl ​
Get Signature ​

get blobUrl(): string | null

Returns ​

string | null

citationService ​
Get Signature ​

get citationService(): CitationViewService

Returns ​

CitationViewService

filetype ​
Get Signature ​

get filetype(): string

Returns ​

string

isCitation ​
Get Signature ​

get isCitation(): boolean

Returns ​

boolean

isCommentHighlighted ​
Get Signature ​

get isCommentHighlighted(): boolean

Returns ​

boolean

selectedStyle ​
Overrides ​

CaptionedBlockComponent.selectedStyle

useCaptionEditor ​
Overrides ​

CaptionedBlockComponent.useCaptionEditor

connectedCallback() ​

connectedCallback(): void

Returns ​

void

Overrides ​

CaptionedBlockComponent.connectedCallback

convertTo() ​

convertTo(): void

Returns ​

void

copy() ​

copy(): void

Returns ​

void

download() ​

download(): void

Returns ​

void

embedded() ​

embedded(): boolean

Returns ​

boolean

onClick() ​

protected onClick(event): void

Parameters ​
event ​

MouseEvent

Returns ​

void

open() ​

open(): void

Returns ​

void

refreshData() ​

refreshData(): void

Returns ​

void

reload() ​

reload(): void

Returns ​

void

renderBlock() ​

renderBlock(): TemplateResult<1>

Returns ​

TemplateResult<1>

Overrides ​

CaptionedBlockComponent.renderBlock

renderCardView() ​

protected renderCardView(): TemplateResult<1>

Returns ​

TemplateResult<1>

renderEmbedView() ​

protected renderEmbedView(): TemplateResult<1> | null

Returns ​

TemplateResult<1> | null

renderNormalButton() ​

protected renderNormalButton(needUpload): TemplateResult<1>

Parameters ​
needUpload ​

boolean

Returns ​

TemplateResult<1>

renderUpgradeButton() ​

protected renderUpgradeButton(): TemplateResult<1> | null | undefined

Returns ​

TemplateResult<1> | null | undefined

renderWithHorizontal() ​

protected renderWithHorizontal(classInfo, __namedParameters): TemplateResult<1>

Parameters ​
classInfo ​

ClassInfo

__namedParameters ​

AttachmentResolvedStateInfo

Returns ​

TemplateResult<1>

renderWithVertical() ​

protected renderWithVertical(classInfo, __namedParameters): TemplateResult<1>

Parameters ​
classInfo ​

ClassInfo

__namedParameters ​

AttachmentResolvedStateInfo

Returns ​

TemplateResult<1>

replace() ​

replace(): Promise<void>

Returns ​

Promise<void>

attributes ​
controllers ​
dev-mode ​
lifecycle ​
properties ​
rendering ​
styles ​
updates ​
firstUpdated() ​

firstUpdated(): void

Invoked when the element is first updated. Implement to perform one time work on the element after update.

ts
firstUpdated() {
  this.renderRoot.getElementById('my-text-area').focus();
}

Setting properties inside this method will trigger the element to update again after this update cycle completes.

Returns ​

void

Overrides ​

CaptionedBlockComponent.firstUpdated

Type Aliases ​

AttachmentEmbedConfig ​

AttachmentEmbedConfig = object

Properties ​

action? ​

optional action?: (model, std) => Promise<void> | void

The action will be executed when the 「Turn into embed view」 button is clicked.

Parameters ​
model ​

AttachmentBlockModel

std ​

BlockStdScope

Returns ​

Promise<void> | void

check ​

check: (model, maxFileSize) => boolean

Check if the attachment can be turned into embed view.

Parameters ​
model ​

AttachmentBlockModel

maxFileSize ​

number

Returns ​

boolean

name ​

name: string

render? ​

optional render?: (model, blobUrl) => TemplateResult | null

Renders the embed view.

Parameters ​
model ​

AttachmentBlockModel

blobUrl ​

string

Returns ​

TemplateResult | null

shouldBeConverted? ​

optional shouldBeConverted?: boolean

Should block type conversion be required.

shouldShowStatus? ​

optional shouldShowStatus?: boolean

Should show status when turned on.

Variables ​

AttachmentBlockMarkdownAdapterExtension ​

const AttachmentBlockMarkdownAdapterExtension: ExtensionType & object

Type Declaration ​

identifier ​

identifier: ServiceIdentifier<BlockMarkdownAdapterMatcher>

attachmentBlockMarkdownAdapterMatcher ​

const attachmentBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher

AttachmentBlockNotionHtmlAdapterExtension ​

const AttachmentBlockNotionHtmlAdapterExtension: ExtensionType & object

Type Declaration ​

identifier ​

identifier: ServiceIdentifier<BlockNotionHtmlAdapterMatcher>

attachmentBlockNotionHtmlAdapterMatcher ​

const attachmentBlockNotionHtmlAdapterMatcher: BlockNotionHtmlAdapterMatcher

AttachmentDropOption ​

const AttachmentDropOption: ExtensionType

AttachmentEmbedConfigIdentifier ​

const AttachmentEmbedConfigIdentifier: ServiceIdentifier<AttachmentEmbedConfig> & <U>(variant) => ServiceIdentifier<U>

AttachmentEmbedProvider ​

const AttachmentEmbedProvider: ServiceIdentifier<AttachmentEmbedService> & <U>(variant) => ServiceIdentifier<U>

attachmentViewDropdownMenu ​

const attachmentViewDropdownMenu: object

Type Declaration ​

actions ​

readonly actions: [{ id: "card"; label: "Card view"; run: void; }, { disabled: (ctx) => boolean; id: "embed"; label: "Embed view"; run: void; }]

id ​

readonly id: "b.conversions" = 'b.conversions'

content() ​

readonly content(ctx): TemplateResult<1> | null

Parameters ​
ctx ​

ToolbarContext

Returns ​

TemplateResult<1> | null

Functions ​

addAttachments() ​

addAttachments(std, files, point?, shouldTransformPoint?): Promise<string[]>

Parameters ​

std ​

BlockStdScope

files ​

File[]

point? ​

IVec

shouldTransformPoint? ​

boolean

Returns ​

Promise<string[]>

addSiblingAttachmentBlocks() ​

addSiblingAttachmentBlocks(std, files, targetModel, placement?, embed?): Promise<string[]>

Add a new attachment block before / after the specified block.

Parameters ​

std ​

BlockStdScope

files ​

File[]

targetModel ​

BlockModel

placement? ​

"before" | "after"

embed? ​

boolean

Returns ​

Promise<string[]>

Copyright © 2022-present Toeverything