BlockSuite

Appearance

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

@blocksuite/affine-block-note ​

Classes ​

Extension ​

EdgelessClipboardNoteConfig ​

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:note" = 'affine:note'

Overrides ​

EdgelessClipboardConfig.key

Accessors ​
Methods ​
createBlock() ​

createBlock(note): Promise<string | null>

Parameters ​
note ​

BlockSnapshot

Returns ​

Promise<string | null>

Overrides ​

EdgelessClipboardConfig.createBlock

NoteLayoutHandlerExtension ​

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:note" = 'affine:note'

Overrides ​

BlockLayoutHandlerExtension.blockType

Methods ​
calculateBound() ​

calculateBound(layout): object

Parameters ​
layout ​

NoteLayout

Returns ​

object

rect ​

rect: Rect

subRects ​

subRects: Rect[]

Overrides ​

BlockLayoutHandlerExtension.calculateBound

queryLayout() ​

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

Parameters ​
model ​

BlockModel

host ​

EditorHost

viewportRecord ​

ViewportRecord

Returns ​

NoteLayout | null

Overrides ​

BlockLayoutHandlerExtension.queryLayout

setup() ​

static setup(di): void

Parameters ​
di ​

Container

Returns ​

void

Overrides ​

BlockLayoutHandlerExtension.setup

Other ​

EdgelessNoteBackground ​

Extends ​
Constructors ​
Other ​
backgroundStyle$ ​

readonly backgroundStyle$: ReadonlySignal<{ backgroundColor: string; borderRadius: string; borderStyle: string; borderWidth: string; boxShadow: string; }>

doc ​
Get Signature ​

get doc(): Store

Returns ​

Store

editing ​
gfx ​
Get Signature ​

get gfx(): GfxController

Returns ​

GfxController

note ​
std ​
connectedCallback() ​

connectedCallback(): void

Returns ​

void

Overrides ​

SignalWatcher( WithDisposable(ShadowlessElement) ).connectedCallback

attributes ​
controllers ​
dev-mode ​
lifecycle ​
properties ​
rendering ​
render() ​

render(): TemplateResult | typeof nothing | undefined

Invoked on each update to perform rendering tasks. This method may return any value renderable by lit-html's ChildPart - typically a TemplateResult. Setting properties inside this method will not trigger the element to update.

Returns ​

TemplateResult | typeof nothing | undefined

Overrides ​

SignalWatcher( WithDisposable(ShadowlessElement) ).render

styles ​
updates ​

NoteBlockComponent ​

Extends ​
Constructors ​
Other ​
connectedCallback() ​

connectedCallback(): void

Returns ​

void

Overrides ​

BlockComponent.connectedCallback

renderBlock() ​

renderBlock(): TemplateResult<1>

Returns ​

TemplateResult<1>

Overrides ​

BlockComponent.renderBlock

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

static styles: CSSResult

Array of styles to apply to the element. The styles should be defined using the css tag function, via constructible stylesheets, or imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't support adopted StyleSheets. To use such <style> tags with the style-src CSP directive, the style-src value must either include 'unsafe-inline' or nonce-<base64-value> with <base64-value> replaced be a server-generated nonce.

To provide a nonce to use on generated <style> elements, set window.litNonce to a server-generated nonce in your page's HTML, before loading application code:

html
<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>
Nocollapse ​
Overrides ​

BlockComponent.styles

updates ​

EdgelessNoteBlockComponent ​

Extends ​
Constructors ​
Other ​
edgelessSlots ​
Get Signature ​

get edgelessSlots(): object

Returns ​

object

elementResizeEnd ​

elementResizeEnd: Subject<void>

elementResizeStart ​

elementResizeStart: Subject<void>

fullScreenToggled ​

fullScreenToggled: Subject<void>

navigatorFrameChanged: Subject<FrameBlockModel>

navigatorSettingUpdated: Subject<{ blackBackground?: boolean; fillScreen?: boolean; hideToolbar?: boolean; }>

readonlyUpdated ​

readonlyUpdated: Subject<boolean>

toggleNoteSlicer ​

toggleNoteSlicer: Subject<void>

toolbarLocked ​

toolbarLocked: Subject<boolean>

hideMask ​
connectedCallback() ​

connectedCallback(): void

Returns ​

void

Overrides ​

toGfxBlockComponent( NoteBlockComponent ).connectedCallback

disconnectedCallback() ​

disconnectedCallback(): void

Returns ​

void

Overrides ​

toGfxBlockComponent( NoteBlockComponent ).disconnectedCallback

getCSSScaleVal() ​

getCSSScaleVal(): number

Returns ​

number

Overrides ​

toGfxBlockComponent( NoteBlockComponent ).getCSSScaleVal

getRenderingRect() ​

getRenderingRect(): object

Returns ​

object

h ​

h: string | number

w ​

w: number = width

x ​

x: number = bound.x

y ​

y: number = bound.y

zIndex ​

zIndex: string

Overrides ​

toGfxBlockComponent( NoteBlockComponent ).getRenderingRect

onBoxSelected() ​

onBoxSelected(_): boolean

Parameters ​
_ ​

BoxSelectionContext

Returns ​

boolean

Overrides ​

toGfxBlockComponent( NoteBlockComponent ).onBoxSelected

renderGfxBlock() ​

renderGfxBlock(): typeof nothing | TemplateResult<1>

Returns ​

typeof nothing | TemplateResult<1>

Overrides ​

toGfxBlockComponent( NoteBlockComponent ).renderGfxBlock

attributes ​
controllers ​
dev-mode ​
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 ​

toGfxBlockComponent( NoteBlockComponent ).firstUpdated

updated() ​

updated(changedProperties): void

Invoked whenever the element is updated. Implement to perform post-updating tasks via DOM APIs, for example, focusing an element.

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

Parameters ​
changedProperties ​

PropertyValueMap<any> | Map<PropertyKey, unknown>

Returns ​

void

Overrides ​

toGfxBlockComponent( NoteBlockComponent ).updated

Interfaces ​

NoteLayout ​

Extends ​

Indexable ​

[key: string]: unknown

Properties ​

background? ​

optional background?: string

type ​

type: "affine:note"

Overrides ​

BlockLayout.type

Type Aliases ​

NoteConfig ​

NoteConfig = object

Properties ​

edgelessNoteHeader ​

edgelessNoteHeader: (context) => TemplateResult

Parameters ​
context ​

NoteBlockContext

Returns ​

TemplateResult

pageBlockTitle ​

pageBlockTitle: (context) => TemplateResult

Parameters ​
context ​

NoteBlockContext

Returns ​

TemplateResult

pageBlockViewportFitAnimation? ​

optional pageBlockViewportFitAnimation?: (context) => boolean

Parameters ​
context ​

NoteBlockContext

Returns ​

boolean

if the viewport fit animation executed

Variables ​

AFFINE_EDGELESS_NOTE ​

const AFFINE_EDGELESS_NOTE: "affine-edgeless-note" = 'affine-edgeless-note'

changeNoteDisplayMode ​

const changeNoteDisplayMode: Command<{ mode: NoteDisplayMode; noteId: string; stopCapture?: boolean; }>

dedentBlock ​

const dedentBlock: Command<{ blockId?: string; stopCapture?: boolean; }>

Example ​

ts
before unindent:
- aaa
  - bbb
  - ccc|
    - ddd
  - eee

after unindent:
- aaa
  - bbb
- ccc|
  - ddd
  - eee

dedentBlocks ​

const dedentBlocks: Command<{ blockIds?: string[]; stopCapture?: boolean; }>

dedentBlocksToRoot ​

const dedentBlocksToRoot: Command<{ blockIds?: string[]; stopCapture?: boolean; }>

dedentBlockToRoot ​

const dedentBlockToRoot: Command<{ blockId?: string; stopCapture?: boolean; }>

DocNoteBlockAdapterExtensions ​

const DocNoteBlockAdapterExtensions: ExtensionType[]

DocNoteBlockHtmlAdapterExtension ​

const DocNoteBlockHtmlAdapterExtension: ExtensionType & object

Type Declaration ​

identifier ​

identifier: ServiceIdentifier<BlockHtmlAdapterMatcher>

docNoteBlockHtmlAdapterMatcher ​

const docNoteBlockHtmlAdapterMatcher: BlockHtmlAdapterMatcher

DocNoteBlockMarkdownAdapterExtension ​

const DocNoteBlockMarkdownAdapterExtension: ExtensionType & object

Type Declaration ​

identifier ​

identifier: ServiceIdentifier<BlockMarkdownAdapterMatcher>

docNoteBlockMarkdownAdapterMatcher ​

const docNoteBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher

DocNoteBlockPlainTextAdapterExtension ​

const DocNoteBlockPlainTextAdapterExtension: ExtensionType & object

Type Declaration ​

identifier ​

identifier: ServiceIdentifier<BlockPlainTextAdapterMatcher>

docNoteBlockPlainTextAdapterMatcher ​

const docNoteBlockPlainTextAdapterMatcher: BlockPlainTextAdapterMatcher

EdgelessNoteBlockAdapterExtensions ​

const EdgelessNoteBlockAdapterExtensions: ExtensionType[]

EdgelessNoteBlockHtmlAdapterExtension ​

const EdgelessNoteBlockHtmlAdapterExtension: ExtensionType & object

Type Declaration ​

identifier ​

identifier: ServiceIdentifier<BlockHtmlAdapterMatcher>

edgelessNoteBlockHtmlAdapterMatcher ​

const edgelessNoteBlockHtmlAdapterMatcher: BlockHtmlAdapterMatcher

EdgelessNoteBlockMarkdownAdapterExtension ​

const EdgelessNoteBlockMarkdownAdapterExtension: ExtensionType & object

Type Declaration ​

identifier ​

identifier: ServiceIdentifier<BlockMarkdownAdapterMatcher>

edgelessNoteBlockMarkdownAdapterMatcher ​

const edgelessNoteBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher

EdgelessNoteBlockPlainTextAdapterExtension ​

const EdgelessNoteBlockPlainTextAdapterExtension: ExtensionType & object

Type Declaration ​

identifier ​

identifier: ServiceIdentifier<BlockPlainTextAdapterMatcher>

edgelessNoteBlockPlainTextAdapterMatcher ​

const edgelessNoteBlockPlainTextAdapterMatcher: BlockPlainTextAdapterMatcher

EdgelessNoteInteraction ​

const EdgelessNoteInteraction: ExtensionType

indentBlock ​

const indentBlock: Command<{ blockId?: string; stopCapture?: boolean; }>

Example ​

ts
before indent:
- aaa
  - bbb
- ccc|
  - ddd
  - eee

after indent:
- aaa
  - bbb
  - ccc|
    - ddd
    - eee

indentBlocks ​

const indentBlocks: Command<{ blockIds?: string[]; stopCapture?: boolean; }>

NoteConfigExtension ​

const NoteConfigExtension: ConfigFactory<NoteConfig>

NoteLayoutPainterExtension ​

const NoteLayoutPainterExtension: ExtensionType

selectBlock ​

const selectBlock: Command<{ focusBlock?: BlockComponent; }>

selectBlocksBetween ​

const selectBlocksBetween: Command<{ anchorBlock?: BlockComponent; focusBlock?: BlockComponent; tail: boolean; }>

updateBlockAlign ​

const updateBlockAlign: Command<UpdateBlockAlignConfig>

updateBlockType ​

const updateBlockType: Command<UpdateBlockConfig & object, { updatedBlocks: BlockModel[]; }>

Copyright © 2022-present Toeverything