BlockSuite

Appearance

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

@blocksuite/affine-block-code ​

Classes ​

Extension ​

CodeLayoutHandlerExtension ​

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

Overrides ​

BlockLayoutHandlerExtension.blockType

Methods ​
calculateBound() ​

calculateBound(layout): object

Parameters ​
layout ​

CodeLayout

Returns ​

object

rect ​

rect: Rect

subRects ​

subRects: Rect[]

Overrides ​

BlockLayoutHandlerExtension.calculateBound

queryLayout() ​

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

Parameters ​
model ​

BlockModel

host ​

EditorHost

viewportRecord ​

ViewportRecord

Returns ​

CodeLayout | null

Overrides ​

BlockLayoutHandlerExtension.queryLayout

setup() ​

static setup(di): void

Parameters ​
di ​

Container

Returns ​

void

Overrides ​

BlockLayoutHandlerExtension.setup

Other ​

CodeBlockClipboard ​

A life cycle watcher is an extension that watches the life cycle of the editor. It is used to perform actions when the editor is created, mounted, rendered, or unmounted.

When creating a life cycle watcher, you must define a key that is unique to the watcher. The key is used to identify the watcher in the dependency injection container.

ts
class MyLifeCycleWatcher extends LifeCycleWatcher {
 static override readonly key = 'my-life-cycle-watcher';

In the life cycle watcher, the methods will be called in the following order:

  1. created: Called when the std is created.
  2. rendered: Called when std.render is called.
  3. mounted: Called when the editor host is mounted.
  4. unmounted: Called when the editor host is unmounted.
Extends ​
Constructors ​
Properties ​
key ​

readonly static key: "code-block-clipboard" = 'code-block-clipboard'

Overrides ​

Clipboard.key

Accessors ​
_adapters ​
Get Signature ​

get _adapters(): ClipboardAdapterConfig[]

Returns ​

ClipboardAdapterConfig[]

Overrides ​

Clipboard._adapters

Methods ​

CodeBlockClipboardController ​

A life cycle watcher is an extension that watches the life cycle of the editor. It is used to perform actions when the editor is created, mounted, rendered, or unmounted.

When creating a life cycle watcher, you must define a key that is unique to the watcher. The key is used to identify the watcher in the dependency injection container.

ts
class MyLifeCycleWatcher extends LifeCycleWatcher {
 static override readonly key = 'my-life-cycle-watcher';

In the life cycle watcher, the methods will be called in the following order:

  1. created: Called when the std is created.
  2. rendered: Called when std.render is called.
  3. mounted: Called when the editor host is mounted.
  4. unmounted: Called when the editor host is unmounted.
Extends ​
Constructors ​
Constructor ​

new CodeBlockClipboardController(std, clipboard): CodeBlockClipboardController

Parameters ​
std ​

BlockStdScope

clipboard ​

CodeBlockClipboard

Returns ​

CodeBlockClipboardController

Overrides ​

LifeCycleWatcher.constructor

Properties ​
clipboard ​

readonly clipboard: CodeBlockClipboard

onPaste ​

onPaste: UIEventHandler

key ​

static key: string = 'code-block-clipboard-controller'

Overrides ​

LifeCycleWatcher.key

Methods ​
_init() ​

protected _init(): void

Returns ​

void

mounted() ​

mounted(): void

Called when editor host is mounted. Which means the editor host emit the connectedCallback lifecycle event.

Returns ​

void

Overrides ​

LifeCycleWatcher.mounted

unmounted() ​

unmounted(): void

Called when editor host is unmounted. Which means the editor host emit the disconnectedCallback lifecycle event.

Returns ​

void

Overrides ​

LifeCycleWatcher.unmounted

setup() ​

static setup(di): void

Parameters ​
di ​

Container

Returns ​

void

Overrides ​

LifeCycleWatcher.setup

CodeBlockHighlighter ​

A life cycle watcher is an extension that watches the life cycle of the editor. It is used to perform actions when the editor is created, mounted, rendered, or unmounted.

When creating a life cycle watcher, you must define a key that is unique to the watcher. The key is used to identify the watcher in the dependency injection container.

ts
class MyLifeCycleWatcher extends LifeCycleWatcher {
 static override readonly key = 'my-life-cycle-watcher';

In the life cycle watcher, the methods will be called in the following order:

  1. created: Called when the std is created.
  2. rendered: Called when std.render is called.
  3. mounted: Called when the editor host is mounted.
  4. unmounted: Called when the editor host is unmounted.
Extends ​
Constructors ​
Properties ​
highlighter$ ​

highlighter$: Signal<HighlighterCore | null>

key ​

static key: string = 'code-block-highlighter'

Overrides ​

LifeCycleWatcher.key

Accessors ​
themeKey ​
Get Signature ​

get themeKey(): string | undefined

Returns ​

string | undefined

Methods ​
mounted() ​

mounted(): void

Called when editor host is mounted. Which means the editor host emit the connectedCallback lifecycle event.

Returns ​

void

Overrides ​

LifeCycleWatcher.mounted

unmounted() ​

unmounted(): void

Called when editor host is unmounted. Which means the editor host emit the disconnectedCallback lifecycle event.

Returns ​

void

Overrides ​

LifeCycleWatcher.unmounted

CodeBlockComponent ​

Extends ​
Constructors ​
Other ​
collapsed$ ​

collapsed$: Signal<boolean>

highlightTokens$ ​

highlightTokens$: Signal<ThemedToken[][]>

languageName$ ​

languageName$: Signal<string>

preview$ ​

preview$: Signal<boolean>

styles ​

static styles: CSSResult = codeBlockStyles

Overrides ​

CaptionedBlockComponent.styles

blockContainerStyles ​
Overrides ​

CaptionedBlockComponent.blockContainerStyles

highlighter ​
Get Signature ​

get highlighter(): CodeBlockHighlighter

Returns ​

CodeBlockHighlighter

inlineEditor ​
Get Signature ​

get inlineEditor(): InlineEditor<{ bold?: true | null; code?: true | null; italic?: true | null; link?: string | null; strike?: true | null; underline?: true | null; }> | undefined

Returns ​

InlineEditor<{ bold?: true | null; code?: true | null; italic?: true | null; link?: string | null; strike?: true | null; underline?: true | null; }> | undefined

inlineManager ​
Get Signature ​

get inlineManager(): InlineManager<AffineTextAttributes>

Returns ​

InlineManager<AffineTextAttributes>

isCommentHighlighted ​
Get Signature ​

get isCommentHighlighted(): boolean

Returns ​

boolean

langs ​
Get Signature ​

get langs(): BundledLanguageInfo[]

Returns ​

BundledLanguageInfo[]

notificationService ​
Get Signature ​

get notificationService(): NotificationService | null

Returns ​

NotificationService | null

readonly ​
Get Signature ​

get readonly(): boolean

Returns ​

boolean

topContenteditableElement ​
Get Signature ​

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

Returns ​

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

Overrides ​

CaptionedBlockComponent.topContenteditableElement

useCaptionEditor ​
Overrides ​

CaptionedBlockComponent.useCaptionEditor

useZeroWidth ​
Overrides ​

CaptionedBlockComponent.useZeroWidth

connectedCallback() ​

connectedCallback(): void

Returns ​

void

Overrides ​

CaptionedBlockComponent.connectedCallback

copyCode() ​

copyCode(): void

Returns ​

void

getUpdateComplete() ​

getUpdateComplete(): Promise<boolean>

Returns ​

Promise<boolean>

Overrides ​

CaptionedBlockComponent.getUpdateComplete

renderBlock() ​

renderBlock(): TemplateResult<1>

Returns ​

TemplateResult<1>

Overrides ​

CaptionedBlockComponent.renderBlock

setCollapsed() ​

setCollapsed(collapsed): void

Parameters ​
collapsed ​

boolean

Returns ​

void

setPreviewState() ​

setPreviewState(preview): void

Parameters ​
preview ​

boolean

Returns ​

void

setWrap() ​

setWrap(wrap): void

Parameters ​
wrap ​

boolean

Returns ​

void

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

AffineCodeToolbarWidget ​

Extends ​
Constructors ​
Other ​
moreGroups ​

protected moreGroups: MenuItemGroup<CodeBlockToolbarContext>[]

primaryGroups ​

protected primaryGroups: MenuItemGroup<CodeBlockToolbarContext>[]

addMoretems() ​

addMoretems(items, index?, type?): AffineCodeToolbarWidget

Parameters ​
items ​

AdvancedMenuItem<CodeBlockToolbarContext>[]

index? ​

number

type? ​

string

Returns ​

AffineCodeToolbarWidget

addPrimaryItems() ​

addPrimaryItems(items, index?): AffineCodeToolbarWidget

Parameters ​
items ​

AdvancedMenuItem<CodeBlockToolbarContext>[]

index? ​

number

Returns ​

AffineCodeToolbarWidget

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 ​

WidgetComponent.firstUpdated

Interfaces ​

CodeBlockConfig ​

Properties ​

langs? ​

optional langs: BundledLanguageInfo[]

showLineNumbers? ​

optional showLineNumbers: boolean

Whether to show line numbers in the code block.

Default ​
ts
true
theme? ​

optional theme: object

dark? ​

optional dark: ThemeInput

light? ​

optional light: ThemeInput

CodeLayout ​

Extends ​

Indexable ​

[key: string]: unknown

Properties ​

type ​

type: "affine:code"

Overrides ​

BlockLayout.type

Type Aliases ​

CodeBlockPreviewContext ​

CodeBlockPreviewContext = object

Properties ​

lang ​

lang: string

renderer ​

renderer: CodeBlockPreviewRenderer

CodeBlockPreviewRenderer() ​

CodeBlockPreviewRenderer = (model) => HTMLTemplateResult | null

Parameters ​

model ​

CodeBlockModel

Returns ​

HTMLTemplateResult | null

Variables ​

AFFINE_CODE_TOOLBAR_WIDGET ​

const AFFINE_CODE_TOOLBAR_WIDGET: "affine-code-toolbar-widget" = 'affine-code-toolbar-widget'

CODE_BLOCK_DEFAULT_DARK_THEME ​

const CODE_BLOCK_DEFAULT_DARK_THEME: Promise<__module>

CODE_BLOCK_DEFAULT_LIGHT_THEME ​

const CODE_BLOCK_DEFAULT_LIGHT_THEME: Promise<__module>

CodeBlockConfigExtension ​

const CodeBlockConfigExtension: ConfigFactory<CodeBlockConfig>

CodeBlockHtmlAdapterExtension ​

const CodeBlockHtmlAdapterExtension: ExtensionType & object

Type Declaration ​

identifier ​

identifier: ServiceIdentifier<BlockHtmlAdapterMatcher>

codeBlockHtmlAdapterMatcher ​

const codeBlockHtmlAdapterMatcher: BlockHtmlAdapterMatcher

CodeBlockMarkdownAdapterExtension ​

const CodeBlockMarkdownAdapterExtension: ExtensionType & object

Type Declaration ​

identifier ​

identifier: ServiceIdentifier<BlockMarkdownAdapterMatcher>

CodeBlockMarkdownAdapterExtensions ​

const CodeBlockMarkdownAdapterExtensions: ExtensionType[]

codeBlockMarkdownAdapterMatcher ​

const codeBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher

CodeBlockNotionHtmlAdapterExtension ​

const CodeBlockNotionHtmlAdapterExtension: ExtensionType & object

Type Declaration ​

identifier ​

identifier: ServiceIdentifier<BlockNotionHtmlAdapterMatcher>

codeBlockNotionHtmlAdapterMatcher ​

const codeBlockNotionHtmlAdapterMatcher: BlockNotionHtmlAdapterMatcher

CodeBlockPlainTextAdapterExtension ​

const CodeBlockPlainTextAdapterExtension: ExtensionType & object

Type Declaration ​

identifier ​

identifier: ServiceIdentifier<BlockPlainTextAdapterMatcher>

codeBlockPlainTextAdapterMatcher ​

const codeBlockPlainTextAdapterMatcher: BlockPlainTextAdapterMatcher

CodeBlockPreviewIdentifier ​

const CodeBlockPreviewIdentifier: ServiceIdentifier<CodeBlockPreviewContext> & <U>(variant) => ServiceIdentifier<U>

CodeClipboardAdapterConfigIdentifier ​

const CodeClipboardAdapterConfigIdentifier: ServiceIdentifier<ClipboardAdapterConfig> & <U>(variant) => ServiceIdentifier<U>

CodeLayoutPainterExtension ​

const CodeLayoutPainterExtension: ExtensionType

CodeMarkdownPreprocessorExtension ​

const CodeMarkdownPreprocessorExtension: ExtensionType & object

Type Declaration ​

identifier ​

identifier: ServiceIdentifier<MarkdownAdapterPreprocessor>

Functions ​

CodeBlockPreviewExtension() ​

CodeBlockPreviewExtension(lang, renderer): ExtensionType

Parameters ​

lang ​

string

renderer ​

CodeBlockPreviewRenderer

Returns ​

ExtensionType

CodeClipboardAdapterConfigExtension() ​

CodeClipboardAdapterConfigExtension(config): ExtensionType

Parameters ​

config ​

ClipboardAdapterConfig

Returns ​

ExtensionType

getCodeClipboardExtensions() ​

getCodeClipboardExtensions(): ExtensionType[]

Returns ​

ExtensionType[]

normalizeGetter() ​

normalizeGetter<T>(p): Promise<T>

https://github.com/shikijs/shiki/blob/933415cdc154fe74ccfb6bbb3eb6a7b7bf183e60/packages/core/src/internal.ts#L31

Type Parameters ​

T ​

T

Parameters ​

p ​

MaybeGetter<T>

Returns ​

Promise<T>

Copyright © 2022-present Toeverything