BlockSuite

Appearance

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

@blocksuite/affine-block-paragraph ​

Classes ​

Extension ​

ParagraphLayoutHandlerExtension ​

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 ​
blockType ​

readonly blockType: "affine:paragraph" = 'affine:paragraph'

Overrides ​

BlockLayoutHandlerExtension.blockType

Methods ​
calculateBound() ​

calculateBound(layout): object

Parameters ​
layout ​

ParagraphLayout

Returns ​

object

rect ​

rect: Rect

subRects ​

subRects: Rect[]

Overrides ​

BlockLayoutHandlerExtension.calculateBound

queryLayout() ​

queryLayout(model, host, viewportRecord): ParagraphLayout | null

Parameters ​
model ​

BlockModel

host ​

EditorHost

viewportRecord ​

ViewportRecord

Returns ​

ParagraphLayout | null

Overrides ​

BlockLayoutHandlerExtension.queryLayout

setup() ​

static setup(di): void

Parameters ​
di ​

Container

Returns ​

void

Overrides ​

BlockLayoutHandlerExtension.setup

Other ​

ParagraphBlockComponent ​

Extends ​
Constructors ​
Other ​
focused$ ​

focused$: ReadonlySignal<boolean>

styles ​

static styles: CSSResult = paragraphBlockStyles

Overrides ​

CaptionedBlockComponent.styles

attributeRenderer ​
Get Signature ​

get attributeRenderer(): AttributeRenderer<AffineTextAttributes>

Returns ​

AttributeRenderer<AffineTextAttributes>

attributesSchema ​
Get Signature ​

get attributesSchema(): ZodType<any, ZodTypeDef, any>

Returns ​

ZodType<any, ZodTypeDef, any>

blockContainerStyles ​
Overrides ​

CaptionedBlockComponent.blockContainerStyles

citationService ​
Get Signature ​

get citationService(): CitationViewService

Returns ​

CitationViewService

collapsedSiblings ​
Get Signature ​

get collapsedSiblings(): BlockModel<object>[]

Returns ​

BlockModel<object>[]

embedChecker ​
Get Signature ​

get embedChecker(): (delta) => boolean

Returns ​

(delta) => boolean

hasCitationSiblings ​
Get Signature ​

get hasCitationSiblings(): boolean

Returns ​

boolean

inEdgelessText ​
Get Signature ​

get inEdgelessText(): boolean

Returns ​

boolean

inlineEditor ​
Get Signature ​

get inlineEditor(): AffineInlineEditor | null | undefined

Returns ​

AffineInlineEditor | null | undefined

inlineManager ​
Get Signature ​

get inlineManager(): InlineManager<AffineTextAttributes>

Returns ​

InlineManager<AffineTextAttributes>

isCommentHighlighted ​
Get Signature ​

get isCommentHighlighted(): boolean

Returns ​

boolean

topContenteditableElement ​
Get Signature ​

get topContenteditableElement(): BlockComponent<BlockModel<object>, BlockService, string> | null

Returns ​

BlockComponent<BlockModel<object>, BlockService, string> | null

Overrides ​

CaptionedBlockComponent.topContenteditableElement

connectedCallback() ​

connectedCallback(): void

Returns ​

void

Overrides ​

CaptionedBlockComponent.connectedCallback

getUpdateComplete() ​

getUpdateComplete(): Promise<boolean>

Returns ​

Promise<boolean>

Overrides ​

CaptionedBlockComponent.getUpdateComplete

renderBlock() ​

renderBlock(): TemplateResult<1>

Returns ​

TemplateResult<1>

Overrides ​

CaptionedBlockComponent.renderBlock

attributes ​
controllers ​
dev-mode ​
lifecycle ​
properties ​
rendering ​
styles ​
updates ​

Interfaces ​

ParagraphBlockConfig ​

Properties ​

getPlaceholder ​

getPlaceholder: (model) => string

Parameters ​
model ​

ParagraphBlockModel

Returns ​

string

ParagraphLayout ​

Extends ​

Indexable ​

[key: string]: unknown

Properties ​

sentences ​

sentences: SentenceLayout[]

type ​

type: "affine:paragraph"

Overrides ​

BlockLayout.type

Variables ​

addParagraphCommand ​

const addParagraphCommand: Command<{ blockId?: string; }, { paragraphConvertedId: string; }>

Add a paragraph next to the current block.

appendParagraphCommand ​

const appendParagraphCommand: Command<{ text?: string; }>

Append a paragraph block at the end of the whole page.

canDedentParagraphCommand ​

const canDedentParagraphCommand: Command<Partial<Omit<IndentContext, "flavour" | "type">>, { indentContext: IndentContext; }>

canIndentParagraphCommand ​

const canIndentParagraphCommand: Command<Partial<Omit<IndentContext, "flavour" | "type">>, { indentContext: IndentContext; }>

dedentParagraphCommand ​

const dedentParagraphCommand: Command<{ indentContext: IndentContext; }>

indentParagraphCommand ​

const indentParagraphCommand: Command<{ indentContext: IndentContext; }>

ParagraphBlockConfigExtension ​

const ParagraphBlockConfigExtension: ConfigFactory<ParagraphBlockConfig>

ParagraphBlockHtmlAdapterExtension ​

const ParagraphBlockHtmlAdapterExtension: ExtensionType & object

Type Declaration ​

identifier ​

identifier: ServiceIdentifier<BlockHtmlAdapterMatcher>

paragraphBlockHtmlAdapterMatcher ​

const paragraphBlockHtmlAdapterMatcher: BlockHtmlAdapterMatcher

ParagraphBlockMarkdownAdapterExtension ​

const ParagraphBlockMarkdownAdapterExtension: ExtensionType & object

Type Declaration ​

identifier ​

identifier: ServiceIdentifier<BlockMarkdownAdapterMatcher>

paragraphBlockMarkdownAdapterMatcher ​

const paragraphBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher

ParagraphBlockNotionHtmlAdapterExtension ​

const ParagraphBlockNotionHtmlAdapterExtension: ExtensionType & object

Type Declaration ​

identifier ​

identifier: ServiceIdentifier<BlockNotionHtmlAdapterMatcher>

paragraphBlockNotionHtmlAdapterMatcher ​

const paragraphBlockNotionHtmlAdapterMatcher: BlockNotionHtmlAdapterMatcher

ParagraphBlockPlainTextAdapterExtension ​

const ParagraphBlockPlainTextAdapterExtension: ExtensionType & object

Type Declaration ​

identifier ​

identifier: ServiceIdentifier<BlockPlainTextAdapterMatcher>

paragraphBlockPlainTextAdapterMatcher ​

const paragraphBlockPlainTextAdapterMatcher: BlockPlainTextAdapterMatcher

ParagraphLayoutPainterExtension ​

const ParagraphLayoutPainterExtension: ExtensionType

splitParagraphCommand ​

const splitParagraphCommand: Command<{ blockId?: string; }, { paragraphConvertedId: string; }>

Copyright © 2022-present Toeverything