BlockSuite

Appearance

BlockSuite API Documentation / @blocksuite/std / index

index ​

Enumerations ​

EventScopeSourceType ​

Enumeration Members ​

Selection ​

Selection: "selection"

Target ​

Target: "target"

Classes ​

BlockComponent<Model, Service, WidgetName> ​

Extends ​

Extended by ​

Type Parameters ​

Model ​

Model extends BlockModel = BlockModel

Service ​

Service extends BlockService = BlockService

WidgetName ​

WidgetName extends string = string

Constructors ​

Other ​

[blockComponentSymbol] ​

[blockComponentSymbol]: boolean = true

selected$ ​

selected$: ReadonlySignal<boolean>

_renderers ​
blockId ​
Get Signature ​

get blockId(): string

Returns ​

string

childBlocks ​
Get Signature ​

get childBlocks(): BlockComponent<BlockModel<object>, BlockService, string>[]

Returns ​

BlockComponent<BlockModel<object>, BlockService, string>[]

flavour ​
Get Signature ​

get flavour(): string

Returns ​

string

host ​
Get Signature ​

get host(): EditorHost

Returns ​

EditorHost

isVersionMismatch ​
Get Signature ​

get isVersionMismatch(): boolean

Returns ​

boolean

model ​
Get Signature ​

get model(): Model

Returns ​

Model

parentComponent ​
Get Signature ​

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

Returns ​

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

renderChildren ​
Get Signature ​

get renderChildren(): (model, filter?) => TemplateResult

Returns ​

(model, filter?): TemplateResult

Parameters ​
model ​

BlockModel

filter? ​

(model) => boolean

Returns ​

TemplateResult

rootComponent ​
Get Signature ​

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

Returns ​

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

selection ​
Get Signature ​

get selection(): StoreSelectionExtension

Returns ​

StoreSelectionExtension

service ​
Get Signature ​

get service(): Service

Returns ​

Service

std ​
store ​
topContenteditableElement ​
Get Signature ​

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

Returns ​

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

viewType ​
widgetComponents ​
Get Signature ​

get widgetComponents(): Partial<Record<WidgetName, WidgetComponent>>

Returns ​

Partial<Record<WidgetName, WidgetComponent>>

widgets ​
addRenderer() ​

addRenderer(renderer): void

Parameters ​
renderer ​

(content) => unknown

Returns ​

void

bindHotKey() ​

bindHotKey(keymap, options?): () => void

Parameters ​
keymap ​

Record<string, UIEventHandler>

options? ​
flavour? ​

boolean

global? ​

boolean

Returns ​

(): void

Returns ​

void

connectedCallback() ​

connectedCallback(): void

Returns ​

void

Overrides ​

SignalWatcher(WithDisposable(ShadowlessElement)).connectedCallback

handleEvent() ​

handleEvent(name, handler, options?): void

Parameters ​
name ​

"copy" | "blur" | "click" | "cut" | "focus" | "paste" | "wheel" | "doubleClick" | "tripleClick" | "pointerDown" | "pointerMove" | "pointerUp" | "pointerOut" | "dragStart" | "dragMove" | "dragEnd" | "pinch" | "pan" | "keyDown" | "keyUp" | "keyPress" | "selectionChange" | "compositionStart" | "compositionUpdate" | "compositionEnd" | "nativeDragStart" | "nativeDragMove" | "nativeDragEnd" | "nativeDrop" | "nativeDragOver" | "nativeDragLeave" | "beforeInput" | "contextMenu"

handler ​

UIEventHandler

options? ​
flavour? ​

boolean

global? ​

boolean

Returns ​

void

renderBlock() ​

renderBlock(): unknown

Returns ​

unknown

renderVersionMismatch() ​

renderVersionMismatch(expectedVersion, actualVersion): TemplateResult

Render a warning message when the block version is mismatched.

Parameters ​
expectedVersion ​

number

If the schema is not found, the expected version is -1. Which means the block is not supported in the current editor.

actualVersion ​

number

The version of the block's crdt data.

Returns ​

TemplateResult

attributes ​

controllers ​

dev-mode ​

lifecycle ​

properties ​

rendering ​

render() ​

render(): unknown

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 ​

unknown

Overrides ​

SignalWatcher(WithDisposable(ShadowlessElement)).render

styles ​

updates ​

getUpdateComplete() ​

protected getUpdateComplete(): Promise<boolean>

Override point for the updateComplete promise.

It is not safe to override the updateComplete getter directly due to a limitation in TypeScript which means it is not possible to call a superclass getter (e.g. super.updateComplete.then(...)) when the target language is ES5 (https://github.com/microsoft/TypeScript/issues/338). This method should be overridden instead. For example:

ts
class MyElement extends LitElement {
  override async getUpdateComplete() {
    const result = await super.getUpdateComplete();
    await this._myChild.updateComplete;
    return result;
  }
}
Returns ​

Promise<boolean>

A promise of a boolean that resolves to true if the update completed without triggering another update.

Overrides ​

SignalWatcher(WithDisposable(ShadowlessElement)).getUpdateComplete

BlockSelection ​

Extends ​

Constructors ​

Properties ​

group ​

static group: string = 'note'

Overrides ​

BaseSelection.group

type ​

static type: string = 'block'

Overrides ​

BaseSelection.type

Accessors ​

Methods ​

equals() ​

equals(other): boolean

Parameters ​
other ​

BaseSelection

Returns ​

boolean

Overrides ​

BaseSelection.equals

toJSON() ​

toJSON(): Record<string, unknown>

Returns ​

Record<string, unknown>

Overrides ​

BaseSelection.toJSON

fromJSON() ​

static fromJSON(json): BlockSelection

Parameters ​
json ​

Record<string, unknown>

Returns ​

BlockSelection

Overrides ​

BaseSelection.fromJSON

abstract BlockService ​

Deprecated ​

BlockService is deprecated. You should reconsider where to put your feature.

BlockService is a legacy extension that is used to provide services to the block. In the previous version of BlockSuite, block service provides a way to extend the block. However, in the new version, we recommend using the new extension system.

Extends ​

Extended by ​

Constructors ​

Constructor ​

new BlockService(std, flavourProvider): BlockService

Parameters ​
std ​

BlockStdScope

flavourProvider ​
flavour ​

string

Returns ​

BlockService

Overrides ​

Extension.constructor

Properties ​

disposables ​

readonly disposables: DisposableGroup

flavour ​

readonly flavour: string

flavourProvider ​

readonly flavourProvider: object

flavour ​

flavour: string

std ​

readonly std: BlockStdScope

flavour ​

static flavour: string

Accessors ​

collection ​
Get Signature ​

get collection(): Workspace

Returns ​

Workspace

doc ​
Get Signature ​

get doc(): Store

Returns ​

Store

host ​
Get Signature ​

get host(): EditorHost

Returns ​

EditorHost

selectionManager ​
Get Signature ​

get selectionManager(): StoreSelectionExtension

Returns ​

StoreSelectionExtension

uiEventDispatcher ​
Get Signature ​

get uiEventDispatcher(): UIEventDispatcher

Returns ​

UIEventDispatcher

Methods ​

bindHotKey() ​

bindHotKey(keymap, options?): void

Parameters ​
keymap ​

Record<string, UIEventHandler>

options? ​
global ​

boolean

Returns ​

void

dispose() ​

dispose(): void

Returns ​

void

handleEvent() ​

handleEvent(name, fn, options?): void

Parameters ​
name ​

"copy" | "blur" | "click" | "cut" | "focus" | "paste" | "wheel" | "doubleClick" | "tripleClick" | "pointerDown" | "pointerMove" | "pointerUp" | "pointerOut" | "dragStart" | "dragMove" | "dragEnd" | "pinch" | "pan" | "keyDown" | "keyUp" | "keyPress" | "selectionChange" | "compositionStart" | "compositionUpdate" | "compositionEnd" | "nativeDragStart" | "nativeDragMove" | "nativeDragEnd" | "nativeDrop" | "nativeDragOver" | "nativeDragLeave" | "beforeInput" | "contextMenu"

fn ​

UIEventHandler

options? ​
global ​

boolean

Returns ​

void

mounted() ​

mounted(): void

Returns ​

void

unmounted() ​

unmounted(): void

Returns ​

void

setup() ​

static setup(di): void

Parameters ​
di ​

Container

Returns ​

void

Overrides ​

Extension.setup

BlockStdScope ​

Constructors ​

Constructor ​

new BlockStdScope(options): BlockStdScope

Parameters ​
options ​

BlockStdOptions

Returns ​

BlockStdScope

Properties ​

container ​

readonly container: Container

provider ​

readonly provider: ServiceProvider

store ​

readonly store: Store

userExtensions ​

readonly userExtensions: ExtensionType[]

internalExtensions ​

static internalExtensions: (typeof ServiceManager | typeof RangeManager | typeof ViewStore | typeof UIEventDispatcher | typeof CommandManager | typeof LayerManager | typeof GridManager | typeof GfxSelectionManager | typeof SurfaceMiddlewareExtension | typeof ViewManager)[]

Accessors ​

clipboard ​
Get Signature ​

get clipboard(): Clipboard

Returns ​

Clipboard

command ​
Get Signature ​

get command(): CommandManager

Returns ​

CommandManager

dnd ​
Get Signature ​

get dnd(): DndController

Returns ​

DndController

event ​
Get Signature ​

get event(): UIEventDispatcher

Returns ​

UIEventDispatcher

get ​
Get Signature ​

get get(): <T>(identifier, options?) => T

Returns ​

<T>(identifier, options?): T

Type Parameters ​
T ​

T

Parameters ​
identifier ​

GeneralServiceIdentifier<T>

options? ​

ResolveOptions

Returns ​

T

getOptional ​
Get Signature ​

get getOptional(): <T>(identifier, options?) => T | null

Returns ​

<T>(identifier, options?): T | null

Type Parameters ​
T ​

T

Parameters ​
identifier ​

GeneralServiceIdentifier<T>

options? ​

ResolveOptions

Returns ​

T | null

host ​
Get Signature ​

get host(): EditorHost

Returns ​

EditorHost

range ​
Get Signature ​

get range(): RangeManager

Returns ​

RangeManager

selection ​
Get Signature ​

get selection(): StoreSelectionExtension

Returns ​

StoreSelectionExtension

view ​
Get Signature ​

get view(): ViewStore

Returns ​

ViewStore

workspace ​
Get Signature ​

get workspace(): Workspace

Returns ​

Workspace

Methods ​

getView() ​

getView(flavour): BlockViewType | null

Parameters ​
flavour ​

string

Returns ​

BlockViewType | null

mount() ​

mount(): void

Returns ​

void

render() ​

render(): EditorHost

Returns ​

EditorHost

unmount() ​

unmount(): void

Returns ​

void

Clipboard ​

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 ​

Extended by ​

Constructors ​

Properties ​

key ​

static key: string = 'clipboard'

Overrides ​

LifeCycleWatcher.key

Accessors ​

_adapters ​
Get Signature ​

get protected _adapters(): ClipboardAdapterConfig[]

Returns ​

ClipboardAdapterConfig[]

configs ​
Get Signature ​

get configs(): Map<string, string>

Returns ​

Map<string, string>

Methods ​

copy() ​

copy(slice): Promise<void>

Parameters ​
slice ​

Slice

Returns ​

Promise<void>

copySlice() ​

copySlice(slice): Promise<void>

Parameters ​
slice ​

Slice

Returns ​

Promise<void>

duplicateSlice() ​

duplicateSlice(slice, doc, parent?, index?, type?): Promise<void>

Parameters ​
slice ​

Slice

doc ​

Store

parent? ​

string

index? ​

number

type? ​

string = 'BLOCKSUITE/SNAPSHOT'

Returns ​

Promise<void>

paste() ​

paste(event, doc, parent?, index?): Promise<Slice | null | undefined>

Parameters ​
event ​

ClipboardEvent

doc ​

Store

parent? ​

string

index? ​

number

Returns ​

Promise<Slice | null | undefined>

pasteBlockSnapshot() ​

pasteBlockSnapshot(snapshot, doc, parent?, index?): Promise<BlockModel<object> | undefined>

Parameters ​
snapshot ​

BlockSnapshot

doc ​

Store

parent? ​

string

index? ​

number

Returns ​

Promise<BlockModel<object> | undefined>

readFromClipboard() ​

readFromClipboard(clipboardData): any

Parameters ​
clipboardData ​

DataTransfer

Returns ​

any

sliceToSnapshot() ​

sliceToSnapshot(slice): SliceSnapshot | undefined

Parameters ​
slice ​

Slice

Returns ​

SliceSnapshot | undefined

unuse() ​

unuse(middleware): void

Parameters ​
middleware ​

TransformerMiddleware

Returns ​

void

use() ​

use(middleware): void

Parameters ​
middleware ​

TransformerMiddleware

Returns ​

void

writeToClipboard() ​

writeToClipboard(updateItems): Promise<void>

Parameters ​
updateItems ​

<T>(items) => T | Promise<T>

Returns ​

Promise<void>

ClipboardEventState ​

Extends ​

Constructors ​

Constructor ​

new ClipboardEventState(__namedParameters): ClipboardEventState

Parameters ​
__namedParameters ​

ClipboardEventStateOptions

Returns ​

ClipboardEventState

Overrides ​

UIEventState.constructor

Properties ​

raw ​

raw: ClipboardEvent

type ​

type: string = 'clipboardState'

when extends, override it with pattern xxxState

Overrides ​

UIEventState.type

CommandManager ​

Command manager to manage all commands

Commands are functions that take a context and a next function as arguments

ts
const myCommand: Command<input, output> = (ctx, next) => {
 const count = ctx.count || 0;

 const success = someOperation();
 if (success) {
   return next({ count: count + 1 });
 }
 // if the command is not successful, you can return without calling next
 return;

Command input and output data can be defined in the Command type

ts
// input: ctx.firstName, ctx.lastName
// output: ctx.fullName
const myCommand: Command<{ firstName: string; lastName: string }, { fullName: string }> = (ctx, next) => {
  const { firstName, lastName } = ctx;
  const fullName = `${firstName} ${lastName}`;
  return next({ fullName });
}

Commands can be run in two ways:

  1. Using exec method exec is used to run a single command
ts
const [result, data] = commandManager.exec(myCommand, payload);
  1. Using chain method chain is used to run a series of commands
ts
const chain = commandManager.chain();
const [result, data] = chain
  .pipe(myCommand1)
  .pipe(myCommand2, payload)
  .run();

Command chains will stop running if a command is not successful

ts
const chain = commandManager.chain();
const [result, data] = chain
  .chain(myCommand1) <-- if this fail
  .chain(myCommand2, payload) <- this won't run
  .run();

result <- result will be `false`

You can use try to run a series of commands and if one of them is successful, it will continue to the next command

ts
const chain = commandManager.chain();
const [result, data] = chain
  .try(chain => [
    chain.pipe(myCommand1), <- if this fail
    chain.pipe(myCommand2, payload), <- this will run, if this success
    chain.pipe(myCommand3), <- this won't run
  ])
  .run();

The tryAll method is similar to try, but it will run all commands even if one of them is successful

ts
const chain = commandManager.chain();
const [result, data] = chain
  .try(chain => [
    chain.pipe(myCommand1), <- if this success
    chain.pipe(myCommand2), <- this will also run
    chain.pipe(myCommand3), <- so will this
  ])
  .run();

Extends ​

Constructors ​

Properties ​

key ​

readonly static key: "commandManager" = 'commandManager'

Overrides ​

LifeCycleWatcher.key

Methods ​

chain() ​

chain(): Chain<InitCommandCtx>

Create a chain to run a series of commands

ts
const chain = commandManager.chain();
const [result, data] = chain
  .myCommand1()
  .myCommand2(payload)
  .run();
Returns ​

Chain<InitCommandCtx>

[success, data] - success is a boolean to indicate if the chain is successful, data is the final context after running the chain

exec() ​

exec<Output, Input>(command, input?): [false, Partial<InitCommandCtx & Input & Output> & InitCommandCtx] | [true, InitCommandCtx & Input & Output]

Type Parameters ​
Output ​

Output extends object

Input ​

Input extends object

Parameters ​
command ​

Command<Input, Output>

input? ​

Input

Returns ​

[false, Partial<InitCommandCtx & Input & Output> & InitCommandCtx] | [true, InitCommandCtx & Input & Output]

CursorSelection ​

Extends ​

Constructors ​

Constructor ​

new CursorSelection(x, y): CursorSelection

Parameters ​
x ​

number

y ​

number

Returns ​

CursorSelection

Overrides ​

BaseSelection.constructor

Properties ​

x ​

readonly x: number

y ​

readonly y: number

group ​

static group: string = 'gfx'

Overrides ​

BaseSelection.group

type ​

static type: string = 'cursor'

Overrides ​

BaseSelection.type

Accessors ​

Methods ​

equals() ​

equals(other): boolean

Parameters ​
other ​

BaseSelection

Returns ​

boolean

Overrides ​

BaseSelection.equals

toJSON() ​

toJSON(): Record<string, unknown>

Returns ​

Record<string, unknown>

Overrides ​

BaseSelection.toJSON

fromJSON() ​

static fromJSON(json): CursorSelection

Parameters ​
json ​

Record<string, unknown>

Returns ​

CursorSelection

Overrides ​

BaseSelection.fromJSON

DndController ​

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 ​

static key: string = 'DndController'

Overrides ​

LifeCycleWatcher.key

Methods ​

autoScroll() ​

autoScroll<PayloadEntity, PayloadFrom>(options): CleanupFn

Type Parameters ​
PayloadEntity ​

PayloadEntity extends DragEntity = DragEntity

PayloadFrom ​

PayloadFrom extends DragFrom = DragFromBlockSuite

Parameters ​
options ​

AutoScroll<PayloadEntity, PayloadFrom>

Returns ​

CleanupFn

draggable() ​

draggable<PayloadEntity, DropData>(args): CleanupFn

Make an element draggable.

Type Parameters ​
PayloadEntity ​

PayloadEntity extends DragEntity = DragEntity

DropData ​

DropData extends object = { }

Parameters ​
args ​

DraggableOption<PayloadEntity, DragFromBlockSuite, DropPayload<DropData>>

Returns ​

CleanupFn

dropTarget() ​

dropTarget<PayloadEntity, DropData, PayloadFrom>(args): CleanupFn

Make an element a drop target.

Type Parameters ​
PayloadEntity ​

PayloadEntity extends DragEntity = DragEntity

DropData ​

DropData extends object = { }

PayloadFrom ​

PayloadFrom extends DragFrom = DragFromBlockSuite

Parameters ​
args ​

DropTargetOption<PayloadEntity, PayloadFrom, DropPayload<DropData>>

Returns ​

CleanupFn

monitor() ​

monitor<PayloadEntity, DropData, PayloadFrom>(args): CleanupFn

Type Parameters ​
PayloadEntity ​

PayloadEntity extends DragEntity = DragEntity

DropData ​

DropData extends object = { }

PayloadFrom ​

PayloadFrom extends DragFrom = DragFromBlockSuite

Parameters ​
args ​

MonitorOption<PayloadEntity, PayloadFrom, DropPayload<DropData>>

Returns ​

CleanupFn

DndEventState ​

Extends ​

Constructors ​

Constructor ​

new DndEventState(__namedParameters): DndEventState

Parameters ​
__namedParameters ​

DndEventStateOptions

Returns ​

DndEventState

Overrides ​

UIEventState.constructor

Properties ​

raw ​

raw: DragEvent

type ​

type: string = 'dndState'

when extends, override it with pattern xxxState

Overrides ​

UIEventState.type

EditorHost ​

Extends ​

Constructors ​

Other ​

styles ​

static styles: CSSResult

Overrides ​

SignalWatcher( WithDisposable(ShadowlessElement) ).styles

command ​
Get Signature ​

get command(): CommandManager

Returns ​

CommandManager

event ​
Get Signature ​

get event(): UIEventDispatcher

Returns ​

UIEventDispatcher

range ​
Get Signature ​

get range(): RangeManager

Returns ​

RangeManager

selection ​
Get Signature ​

get selection(): StoreSelectionExtension

Returns ​

StoreSelectionExtension

std ​
store ​
view ​
Get Signature ​

get view(): ViewStore

Returns ​

ViewStore

connectedCallback() ​

connectedCallback(): void

Returns ​

void

Overrides ​

SignalWatcher( WithDisposable(ShadowlessElement) ).connectedCallback

disconnectedCallback() ​

disconnectedCallback(): void

Returns ​

void

Overrides ​

SignalWatcher( WithDisposable(ShadowlessElement) ).disconnectedCallback

renderChildren() ​

renderChildren(model, filter?): TemplateResult

Parameters ​
model ​

BlockModel

filter? ​

(model) => boolean

Returns ​

TemplateResult

attributes ​

controllers ​

dev-mode ​

properties ​

rendering ​

render() ​

render(): TemplateResult | typeof nothing

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

Overrides ​

SignalWatcher( WithDisposable(ShadowlessElement) ).render

styles ​

updates ​

getUpdateComplete() ​

getUpdateComplete(): Promise<boolean>

Override point for the updateComplete promise.

It is not safe to override the updateComplete getter directly due to a limitation in TypeScript which means it is not possible to call a superclass getter (e.g. super.updateComplete.then(...)) when the target language is ES5 (https://github.com/microsoft/TypeScript/issues/338). This method should be overridden instead. For example:

ts
class MyElement extends LitElement {
  override async getUpdateComplete() {
    const result = await super.getUpdateComplete();
    await this._myChild.updateComplete;
    return result;
  }
}
Returns ​

Promise<boolean>

A promise of a boolean that resolves to true if the update completed without triggering another update.

Overrides ​

SignalWatcher( WithDisposable(ShadowlessElement) ).getUpdateComplete

EditorLifeCycleExtension ​

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 EditorLifeCycleExtension(std): EditorLifeCycleExtension

Parameters ​
std ​

BlockStdScope

Returns ​

EditorLifeCycleExtension

Overrides ​

LifeCycleWatcher.constructor

Properties ​

disposables ​

disposables: DisposableGroup

slots ​

readonly slots: object

created ​

created: Subject<void>

mounted ​

mounted: Subject<void>

rendered ​

rendered: Subject<void>

unmounted ​

unmounted: Subject<void>

key ​

static key: string = 'editor-life-cycle'

Overrides ​

LifeCycleWatcher.key

Methods ​

created() ​

created(): void

Called when std is created.

Returns ​

void

Overrides ​

LifeCycleWatcher.created

mounted() ​

mounted(): void

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

Returns ​

void

Overrides ​

LifeCycleWatcher.mounted

rendered() ​

rendered(): void

Called when std.render is called.

Returns ​

void

Overrides ​

LifeCycleWatcher.rendered

unmounted() ​

unmounted(): void

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

Returns ​

void

Overrides ​

LifeCycleWatcher.unmounted

EventSourceState ​

Extends ​

Constructors ​

Constructor ​

new EventSourceState(__namedParameters): EventSourceState

Parameters ​
__namedParameters ​

EventSourceStateOptions

Returns ​

EventSourceState

Overrides ​

UIEventState.constructor

Properties ​

sourceType ​

readonly sourceType: EventScopeSourceType

type ​

type: string = 'sourceState'

when extends, override it with pattern xxxState

Overrides ​

UIEventState.type

abstract GfxBlockComponent<Model, Service, WidgetName> ​

Extends ​

Extended by ​

Type Parameters ​

Model ​

Model extends GfxBlockElementModel = GfxBlockElementModel

Service ​

Service extends BlockService = BlockService

WidgetName ​

WidgetName extends string = string

Implements ​

  • GfxViewTransformInterface

Constructors ​

Other ​

[GfxElementSymbol] ​

[GfxElementSymbol]: boolean = true

transformState$ ​

readonly transformState$: Signal<"idle" | "active">

gfx ​
Get Signature ​

get gfx(): GfxController

Returns ​

GfxController

connectedCallback() ​

connectedCallback(): void

Returns ​

void

Overrides ​

BlockComponent.connectedCallback

getCSSScaleVal() ​

getCSSScaleVal(): number

Returns ​

number

getCSSTransform() ​

getCSSTransform(): string

Returns ​

string

getRenderingRect() ​

getRenderingRect(): object

Returns ​

object

h ​

h: any

w ​

w: any

x ​

x: any

y ​

y: any

zIndex ​

zIndex: string

onBoxSelected() ​

onBoxSelected(_): void

When the element is selected by box selection, return false to prevent the default selection behavior.

Parameters ​
_ ​

BoxSelectionContext

Returns ​

void

Implementation of ​

GfxViewTransformInterface.onBoxSelected

onDragEnd() ​

onDragEnd(): void

Returns ​

void

Implementation of ​

GfxViewTransformInterface.onDragEnd

onDragMove() ​

onDragMove(__namedParameters): void

Parameters ​
__namedParameters ​

DragMoveContext

Returns ​

void

Implementation of ​

GfxViewTransformInterface.onDragMove

onDragStart() ​

onDragStart(): void

Returns ​

void

Implementation of ​

GfxViewTransformInterface.onDragStart

renderBlock() ​

renderBlock(): unknown

Returns ​

unknown

Overrides ​

BlockComponent.renderBlock

renderGfxBlock() ​

renderGfxBlock(): unknown

Returns ​

unknown

renderPageContent() ​

renderPageContent(): unknown

Returns ​

unknown

toZIndex() ​

toZIndex(): string

Returns ​

string

updateZIndex() ​

updateZIndex(): void

Returns ​

void

attributes ​

controllers ​

dev-mode ​

lifecycle ​

properties ​

rendering ​

styles ​

updates ​

scheduleUpdate() ​

scheduleUpdate(): Promise<unknown>

Schedules an element update. You can override this method to change the timing of updates by returning a Promise. The update will await the returned Promise, and you should resolve the Promise to allow the update to proceed. If this method is overridden, super.scheduleUpdate() must be called.

For instance, to schedule updates to occur just before the next frame:

ts
override protected async scheduleUpdate(): Promise<unknown> {
  await new Promise((resolve) => requestAnimationFrame(() => resolve()));
  super.scheduleUpdate();
}
Returns ​

Promise<unknown>

Overrides ​

BlockComponent.scheduleUpdate

KeyboardEventState ​

Extends ​

Constructors ​

Constructor ​

new KeyboardEventState(__namedParameters): KeyboardEventState

Parameters ​
__namedParameters ​

KeyboardEventStateOptions

Returns ​

KeyboardEventState

Overrides ​

UIEventState.constructor

Properties ​

composing ​

composing: boolean

raw ​

raw: KeyboardEvent

type ​

type: string = 'keyboardState'

when extends, override it with pattern xxxState

Overrides ​

UIEventState.type

abstract LifeCycleWatcher ​

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 ​

Extended by ​

Constructors ​

Constructor ​

new LifeCycleWatcher(std): LifeCycleWatcher

Parameters ​
std ​

BlockStdScope

Returns ​

LifeCycleWatcher

Overrides ​

Extension.constructor

Properties ​

std ​

readonly std: BlockStdScope

key ​

static key: string

Methods ​

created() ​

created(): void

Called when std is created.

Returns ​

void

mounted() ​

mounted(): void

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

Returns ​

void

rendered() ​

rendered(): void

Called when std.render is called.

Returns ​

void

unmounted() ​

unmounted(): void

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

Returns ​

void

setup() ​

static setup(di): void

Parameters ​
di ​

Container

Returns ​

void

Overrides ​

Extension.setup

MultiPointerEventState ​

Extends ​

Constructors ​

Constructor ​

new MultiPointerEventState(event, pointers): MultiPointerEventState

Parameters ​
event ​

PointerEvent

pointers ​

PointerEventState[]

Returns ​

MultiPointerEventState

Overrides ​

UIEventState.constructor

Properties ​

pointers ​

pointers: PointerEventState[]

type ​

type: string = 'multiPointerState'

when extends, override it with pattern xxxState

Overrides ​

UIEventState.type

PointerEventState ​

Extends ​

Constructors ​

Constructor ​

new PointerEventState(__namedParameters): PointerEventState

Parameters ​
__namedParameters ​

PointerEventStateOptions

Returns ​

PointerEventState

Overrides ​

UIEventState.constructor

Properties ​

button ​

button: number

containerOffset ​

containerOffset: Point

delta ​

delta: Point

keys ​

keys: object

alt ​

alt: boolean

cmd ​

cmd: boolean

shift ​

shift: boolean

point ​

point: Point

pressure ​

pressure: number

raw ​

raw: PointerEvent

start ​

start: Point

type ​

type: string = 'pointerState'

when extends, override it with pattern xxxState

Overrides ​

UIEventState.type

Accessors ​

x ​
Get Signature ​

get x(): number

Returns ​

number

y ​
Get Signature ​

get y(): number

Returns ​

number

ServiceManager ​

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

Overrides ​

LifeCycleWatcher.key

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

ShadowlessElement ​

Extends ​

  • LitElement

Extended by ​

Constructors ​

Other ​

connectedCount ​

static connectedCount: WeakMap<Constructor, WeakMap<Node, number>>

onDisconnectedMap ​

static onDisconnectedMap: WeakMap<Constructor, WeakMap<Node, () => void | null>>

attributes ​

controllers ​

dev-mode ​

lifecycle ​

connectedCallback() ​

connectedCallback(): void

Invoked when the component is added to the document's DOM.

In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window.

ts
connectedCallback() {
  super.connectedCallback();
  addEventListener('keydown', this._handleKeydown);
}

Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback().

Returns ​

void

Overrides ​

LitElement.connectedCallback

disconnectedCallback() ​

disconnectedCallback(): void

Invoked when the component is removed from the document's DOM.

This callback is the main signal to the element that it may no longer be used. disconnectedCallback() should ensure that nothing is holding a reference to the element (such as event listeners added to nodes external to the element), so that it is free to be garbage collected.

ts
disconnectedCallback() {
  super.disconnectedCallback();
  window.removeEventListener('keydown', this._handleKeydown);
}

An element may be re-connected after being disconnected.

Returns ​

void

Overrides ​

LitElement.disconnectedCallback

properties ​

rendering ​

createRenderRoot() ​

createRenderRoot(): ShadowlessElement

Returns ​

ShadowlessElement

Overrides ​

LitElement.createRenderRoot

styles ​

finalizeStyles() ​

protected static finalizeStyles(styles?): CSSResultOrNative[]

Takes the styles the user supplied via the static styles property and returns the array of styles to apply to the element. Override this method to integrate into a style management system.

Styles are deduplicated preserving the last instance in the list. This is a performance optimization to avoid duplicated styles that can occur especially when composing via subclassing. The last item is kept to try to preserve the cascade order with the assumption that it's most important that last added styles override previous styles.

Parameters ​
styles? ​

CSSResultGroup

Returns ​

CSSResultOrNative[]

Nocollapse ​
Overrides ​

LitElement.finalizeStyles

updates ​

SurfaceSelection ​

Extends ​

Constructors ​

Constructor ​

new SurfaceSelection(blockId, elements, editing, inoperable): SurfaceSelection

Parameters ​
blockId ​

string

elements ​

string[]

editing ​

boolean

inoperable ​

boolean = false

Returns ​

SurfaceSelection

Overrides ​

BaseSelection.constructor

Properties ​

editing ​

readonly editing: boolean

elements ​

readonly elements: string[]

inoperable ​

readonly inoperable: boolean

group ​

static group: string = 'gfx'

Overrides ​

BaseSelection.group

recoverable ​

static recoverable: boolean = true

Overrides ​

BaseSelection.recoverable

type ​

static type: string = 'surface'

Overrides ​

BaseSelection.type

Accessors ​

Methods ​

equals() ​

equals(other): boolean

Parameters ​
other ​

BaseSelection

Returns ​

boolean

Overrides ​

BaseSelection.equals

isEmpty() ​

isEmpty(): boolean

Returns ​

boolean

toJSON() ​

toJSON(): Record<string, unknown>

Returns ​

Record<string, unknown>

Overrides ​

BaseSelection.toJSON

fromJSON() ​

static fromJSON(json): SurfaceSelection

Parameters ​
json ​

Record<string, unknown>

Returns ​

SurfaceSelection

Overrides ​

BaseSelection.fromJSON

TextSelection ​

Extends ​

Constructors ​

Constructor ​

new TextSelection(__namedParameters): TextSelection

Parameters ​
__namedParameters ​

TextSelectionProps

Returns ​

TextSelection

Overrides ​

BaseSelection.constructor

Properties ​

from ​

from: TextRangePoint

reverse ​

reverse: boolean

to ​

to: TextRangePoint | null

group ​

static group: string = 'note'

Overrides ​

BaseSelection.group

recoverable ​

static recoverable: boolean = true

Overrides ​

BaseSelection.recoverable

type ​

static type: string = 'text'

Overrides ​

BaseSelection.type

Accessors ​

end ​
Get Signature ​

get end(): TextRangePoint

Returns ​

TextRangePoint

start ​
Get Signature ​

get start(): TextRangePoint

Returns ​

TextRangePoint

Methods ​

empty() ​

empty(): boolean

Returns ​

boolean

equals() ​

equals(other): boolean

Parameters ​
other ​

BaseSelection

Returns ​

boolean

Overrides ​

BaseSelection.equals

isCollapsed() ​

isCollapsed(): boolean

Returns ​

boolean

isInSameBlock() ​

isInSameBlock(): boolean

Returns ​

boolean

toJSON() ​

toJSON(): Record<string, unknown>

Returns ​

Record<string, unknown>

Overrides ​

BaseSelection.toJSON

fromJSON() ​

static fromJSON(json): TextSelection

Parameters ​
json ​

Record<string, unknown>

Returns ​

TextSelection

Overrides ​

BaseSelection.fromJSON

UIEventDispatcher ​

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 UIEventDispatcher(std): UIEventDispatcher

Parameters ​
std ​

BlockStdScope

Returns ​

UIEventDispatcher

Overrides ​

LifeCycleWatcher.constructor

Properties ​

disposables ​

disposables: DisposableGroup

key ​

readonly static key: "UIEventDispatcher" = 'UIEventDispatcher'

Overrides ​

LifeCycleWatcher.key

Accessors ​

active ​
Get Signature ​

get active(): boolean

Returns ​

boolean

Set Signature ​

set active(active): void

Parameters ​
active ​

boolean

Returns ​

void

active$ ​
Get Signature ​

get active$(): Signal<boolean>

Returns ​

Signal<boolean>

host ​
Get Signature ​

get host(): EditorHost

Returns ​

EditorHost

Methods ​

add() ​

add(name, handler, options?): () => void

Parameters ​
name ​

"copy" | "blur" | "click" | "cut" | "focus" | "paste" | "wheel" | "doubleClick" | "tripleClick" | "pointerDown" | "pointerMove" | "pointerUp" | "pointerOut" | "dragStart" | "dragMove" | "dragEnd" | "pinch" | "pan" | "keyDown" | "keyUp" | "keyPress" | "selectionChange" | "compositionStart" | "compositionUpdate" | "compositionEnd" | "nativeDragStart" | "nativeDragMove" | "nativeDragEnd" | "nativeDrop" | "nativeDragOver" | "nativeDragLeave" | "beforeInput" | "contextMenu"

handler ​

UIEventHandler

options? ​

EventOptions

Returns ​

(): void

Returns ​

void

bindHotkey() ​

bindHotkey(...args): () => void

Parameters ​
args ​

...[Record<string, UIEventHandler>, EventOptions]

Returns ​

(): void

Returns ​

void

buildEventScope() ​

buildEventScope(name, blocks): EventHandlerRunner[] | undefined

Parameters ​
name ​

"copy" | "blur" | "click" | "cut" | "focus" | "paste" | "wheel" | "doubleClick" | "tripleClick" | "pointerDown" | "pointerMove" | "pointerUp" | "pointerOut" | "dragStart" | "dragMove" | "dragEnd" | "pinch" | "pan" | "keyDown" | "keyUp" | "keyPress" | "selectionChange" | "compositionStart" | "compositionUpdate" | "compositionEnd" | "nativeDragStart" | "nativeDragMove" | "nativeDragEnd" | "nativeDrop" | "nativeDragOver" | "nativeDragLeave" | "beforeInput" | "contextMenu"

blocks ​

string[]

Returns ​

EventHandlerRunner[] | undefined

mounted() ​

mounted(): void

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

Returns ​

void

Overrides ​

LifeCycleWatcher.mounted

run() ​

run(name, context, runners?): void

Parameters ​
name ​

"copy" | "blur" | "click" | "cut" | "focus" | "paste" | "wheel" | "doubleClick" | "tripleClick" | "pointerDown" | "pointerMove" | "pointerUp" | "pointerOut" | "dragStart" | "dragMove" | "dragEnd" | "pinch" | "pan" | "keyDown" | "keyUp" | "keyPress" | "selectionChange" | "compositionStart" | "compositionUpdate" | "compositionEnd" | "nativeDragStart" | "nativeDragMove" | "nativeDragEnd" | "nativeDrop" | "nativeDragOver" | "nativeDragLeave" | "beforeInput" | "contextMenu"

context ​

UIEventStateContext

runners? ​

EventHandlerRunner[]

Returns ​

void

unmounted() ​

unmounted(): void

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

Returns ​

void

Overrides ​

LifeCycleWatcher.unmounted

UIEventState ​

Extended by ​

Constructors ​

Constructor ​

new UIEventState(event): UIEventState

Parameters ​
event ​

Event

Returns ​

UIEventState

Properties ​

event ​

event: Event

type ​

type: string = 'defaultState'

when extends, override it with pattern xxxState

UIEventStateContext ​

Constructors ​

Constructor ​

new UIEventStateContext(): UIEventStateContext

Returns ​

UIEventStateContext

Methods ​

add() ​

add<State>(state): void

Type Parameters ​
State ​

State extends UIEventState = UIEventState

Parameters ​
state ​

State

Returns ​

void

get() ​

get<Type>(type): MatchEvent<Type>

Type Parameters ​
Type ​

Type extends keyof BlockSuiteUIEventState = keyof BlockSuiteUIEventState

Parameters ​
type ​

Type

Returns ​

MatchEvent<Type>

has() ​

has(type): boolean

Parameters ​
type ​

keyof BlockSuiteUIEventState

Returns ​

boolean

from() ​

static from(...states): UIEventStateContext

Parameters ​
states ​

...UIEventState[]

Returns ​

UIEventStateContext

ViewStore ​

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 ​

viewUpdated ​

viewUpdated: Subject<ViewUpdatePayload>

key ​

readonly static key: "viewStore" = 'viewStore'

Overrides ​

LifeCycleWatcher.key

Accessors ​

views ​
Get Signature ​

get views(): BlockComponent<BlockModel<object>, BlockService, string>[]

Returns ​

BlockComponent<BlockModel<object>, BlockService, string>[]

Methods ​

deleteBlock() ​

deleteBlock(node): void

Parameters ​
node ​

BlockComponent

Returns ​

void

deleteWidget() ​

deleteWidget(node): void

Parameters ​
node ​

WidgetComponent

Returns ​

void

getBlock() ​

getBlock(id): BlockComponent<BlockModel<object>, BlockService, string> | null

Parameters ​
id ​

string

Returns ​

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

getWidget() ​

getWidget(widgetName, hostBlockId): WidgetComponent<BlockModel<object>, BlockComponent<BlockModel<object>, BlockService, string>, BlockService> | null

Parameters ​
widgetName ​

string

hostBlockId ​

string

Returns ​

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

setBlock() ​

setBlock(node): void

Parameters ​
node ​

BlockComponent

Returns ​

void

setWidget() ​

setWidget(node): void

Parameters ​
node ​

WidgetComponent

Returns ​

void

unmounted() ​

unmounted(): void

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

Returns ​

void

Overrides ​

LifeCycleWatcher.unmounted

walkThrough() ​

walkThrough(fn, blockId?): void

Parameters ​
fn ​

(nodeView, index, parent) => true | null | undefined

blockId? ​

string | null

Returns ​

void

WidgetComponent<Model, B, S> ​

Extends ​

  • LitElement<this> & DisposableClass<this>

Extended by ​

Type Parameters ​

Model ​

Model extends BlockModel = BlockModel

B ​

B extends BlockComponent = BlockComponent

S ​

S extends BlockService = BlockService

Constructors ​

Other ​

block ​
Get Signature ​

get block(): B | null

Returns ​

B | null

flavour ​
Get Signature ​

get flavour(): string

Returns ​

string

host ​
Get Signature ​

get host(): EditorHost

Returns ​

EditorHost

model ​
Get Signature ​

get model(): Model

Returns ​

Model

service ​
Get Signature ​

get service(): S

Returns ​

S

std ​
Get Signature ​

get std(): BlockStdScope

Returns ​

BlockStdScope

store ​
Get Signature ​

get store(): Store

Returns ​

Store

widgetId ​
Get Signature ​

get widgetId(): string

Returns ​

string

bindHotKey() ​

bindHotKey(keymap, options?): void

Parameters ​
keymap ​

Record<string, UIEventHandler>

options? ​
global ​

boolean

Returns ​

void

handleEvent() ​

handleEvent(name, handler, options?): void

Parameters ​
name ​

"copy" | "blur" | "click" | "cut" | "focus" | "paste" | "wheel" | "doubleClick" | "tripleClick" | "pointerDown" | "pointerMove" | "pointerUp" | "pointerOut" | "dragStart" | "dragMove" | "dragEnd" | "pinch" | "pan" | "keyDown" | "keyUp" | "keyPress" | "selectionChange" | "compositionStart" | "compositionUpdate" | "compositionEnd" | "nativeDragStart" | "nativeDragMove" | "nativeDragEnd" | "nativeDrop" | "nativeDragOver" | "nativeDragLeave" | "beforeInput" | "contextMenu"

handler ​

UIEventHandler

options? ​
global? ​

boolean

Returns ​

void

attributes ​

controllers ​

dev-mode ​

lifecycle ​

connectedCallback() ​

connectedCallback(): void

Invoked when the component is added to the document's DOM.

In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window.

ts
connectedCallback() {
  super.connectedCallback();
  addEventListener('keydown', this._handleKeydown);
}

Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback().

Returns ​

void

Overrides ​

SignalWatcher(WithDisposable(LitElement)).connectedCallback

disconnectedCallback() ​

disconnectedCallback(): void

Invoked when the component is removed from the document's DOM.

This callback is the main signal to the element that it may no longer be used. disconnectedCallback() should ensure that nothing is holding a reference to the element (such as event listeners added to nodes external to the element), so that it is free to be garbage collected.

ts
disconnectedCallback() {
  super.disconnectedCallback();
  window.removeEventListener('keydown', this._handleKeydown);
}

An element may be re-connected after being disconnected.

Returns ​

void

Overrides ​

SignalWatcher(WithDisposable(LitElement)).disconnectedCallback

properties ​

rendering ​

render() ​

render(): unknown

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 ​

unknown

Overrides ​

SignalWatcher(WithDisposable(LitElement)).render

styles ​

updates ​

Interfaces ​

BlockStdOptions ​

Properties ​

extensions ​

extensions: ExtensionType[]

store ​

store: Store

ClipboardAdapterConfig ​

Properties ​

adapter ​

adapter: AdapterConstructor

mimeType ​

mimeType: string

priority ​

priority: number

ConfigFactory()<Config> ​

Type Parameters ​

Config ​

Config extends Record<string, any>

ConfigFactory(config): ExtensionType

Parameters ​

config ​

Config

Returns ​

ExtensionType

Properties ​

identifier ​

identifier: ServiceIdentifier<Config>

DNDEntity ​

Properties ​

basic ​

basic: DragEntity

InitCommandCtx ​

Properties ​

std ​

std: BlockStdScope

Type Aliases ​

AutoScroll<PayloadEntity, PayloadFrom> ​

AutoScroll<PayloadEntity, PayloadFrom> = object

Type Parameters ​

PayloadEntity ​

PayloadEntity extends DragEntity

PayloadFrom ​

PayloadFrom extends DragFrom

Properties ​

canScroll()? ​

optional canScroll: (args) => void

Parameters ​
args ​

ElementDragEventBaseArgs<DragPayload<PayloadEntity, PayloadFrom>>

Returns ​

void

element ​

element: HTMLElement

getAllowedAxis()? ​

optional getAllowedAxis: (args) => ReturnType<Required<OriginalAutoScrollOption>["getAllowedAxis"]>

Parameters ​
args ​

ElementDragEventBaseArgs<DragPayload<PayloadEntity, PayloadFrom>>

Returns ​

ReturnType<Required<OriginalAutoScrollOption>["getAllowedAxis"]>

getConfiguration()? ​

optional getConfiguration: (args) => ReturnType<Required<OriginalAutoScrollOption>["getConfiguration"]>

Parameters ​
args ​

ElementDragEventBaseArgs<DragPayload<PayloadEntity, PayloadFrom>>

Returns ​

ReturnType<Required<OriginalAutoScrollOption>["getConfiguration"]>

BlockViewType ​

BlockViewType = StaticValue | (model) => StaticValue

Chain<CommandCtx> ​

Chain<CommandCtx> = object

Type Parameters ​

CommandCtx ​

CommandCtx extends object = InitCommandCtx

Properties ​

[cmdSymbol] ​

[cmdSymbol]: Command[]

pipe() ​

pipe: {<Out>(command): Chain<CommandCtx & Out>; <Out, In>(command, input?): Chain<CommandCtx & In & Out>; }

Call Signature ​

<Out>(command): Chain<CommandCtx & Out>

Type Parameters ​
Out ​

Out extends object

Parameters ​
command ​

Command<CommandCtx, Out>

Returns ​

Chain<CommandCtx & Out>

Call Signature ​

<Out, In>(command, input?): Chain<CommandCtx & In & Out>

Type Parameters ​
Out ​

Out extends object

In ​

In extends object

Parameters ​
command ​

Command<In, Out>

input? ​

In

Returns ​

Chain<CommandCtx & In & Out>

run() ​

run: () => [false, Partial<CommandCtx> & InitCommandCtx] | [true, CommandCtx]

Returns ​

[false, Partial<CommandCtx> & InitCommandCtx] | [true, CommandCtx]

try() ​

try: <Out>(commands) => Chain<CommandCtx & Out>

Type Parameters ​
Out ​

Out extends object

Parameters ​
commands ​

(chain) => Chain<CommandCtx & Out>[]

Returns ​

Chain<CommandCtx & Out>

tryAll() ​

tryAll: <Out>(commands) => Chain<CommandCtx & Out>

Type Parameters ​
Out ​

Out extends object

Parameters ​
commands ​

(chain) => Chain<CommandCtx & Out>[]

Returns ​

Chain<CommandCtx & Out>

with() ​

with: <Out>(input) => Chain<CommandCtx & Out>

Type Parameters ​
Out ​

Out extends object

Parameters ​
input ​

Out

Returns ​

Chain<CommandCtx & Out>

Cmds ​

Cmds = object

Properties ​

[cmdSymbol] ​

[cmdSymbol]: Command[]

Command()<Input, Output> ​

Command<Input, Output> = (input, next) => void

Type Parameters ​

Input ​

Input = InitCommandCtx

Output ​

Output = { }

Parameters ​

input ​

Input & InitCommandCtx

next ​

(output?) => void

Returns ​

void

DragEntity ​

DragEntity = object

Properties ​

type ​

type: string

DragFrom ​

DragFrom = object

Properties ​

at ​

at: string

DragFromBlockSuite ​

DragFromBlockSuite = object

Properties ​

at ​

at: "blocksuite-editor"

docId ​

docId: string

DraggableOption<PayloadEntity, PayloadFrom, DropPayload> ​

DraggableOption<PayloadEntity, PayloadFrom, DropPayload> = Pick<OriginalDraggableOption, "element" | "dragHandle" | "canDrag"> & object & ElementDragEventMap<DragPayload<PayloadEntity, PayloadFrom>, DropPayload>

Type Declaration ​

setDragData()? ​

optional setDragData: (args) => PayloadEntity

Set drag data for the draggable element.

Parameters ​
args ​

ElementGetFeedbackArgs

Returns ​

PayloadEntity

See ​

ElementGetFeedbackArgs for callback arguments

setDragPreview? ​

optional setDragPreview: false | (options) => void | () => void

Set custom drag preview for the draggable element.

setDragPreview is a function that will be called with a container element and other drag data as parameter when the drag preview is generating. Append the custom element to the container which will be used to generate the preview. Once the drag preview is generated, the container element and its children will be removed automatically.

If you want to completely disable the drag preview, just set setDragPreview to false.

Example ​
ts
dnd.draggable({
 // ...
 setDragPreview: ({ container }) => {
   const preview = document.createElement('div');
   preview.style.width = '100px';
   preview.style.height = '100px';
   preview.style.backgroundColor = 'red';
   preview.innerText = 'Custom Drag Preview';
   container.appendChild(preview);

   return () => {
     // do some cleanup
   }
 }
})
Param ​

callback to set custom drag preview

Returns ​
setExternalDragData()? ​

optional setExternalDragData: (args) => ReturnType<Required<OriginalDraggableOption>["getInitialDataForExternal"]>

Set external drag data for the draggable element.

Parameters ​
args ​

ElementGetFeedbackArgs

Returns ​

ReturnType<Required<OriginalDraggableOption>["getInitialDataForExternal"]>

See ​

ElementGetFeedbackArgs for callback arguments

Type Parameters ​

PayloadEntity ​

PayloadEntity extends DragEntity

PayloadFrom ​

PayloadFrom extends DragFrom

DropPayload ​

DropPayload extends object

DragPayload<E, F> ​

DragPayload<E, F> = object

Type Parameters ​

E ​

E extends DragEntity = DragEntity

F ​

F extends DragFrom = DragFromBlockSuite

Properties ​

bsEntity? ​

optional bsEntity: E

from? ​

optional from: F

DropEdge ​

DropEdge = Edge

DropPayload<T> ​

DropPayload<T> = object & T

Type Declaration ​

edge? ​

optional edge: Edge

Type Parameters ​

T ​

T extends object = { }

DropTargetOption<PayloadEntity, PayloadFrom, DropPayload> ​

DropTargetOption<PayloadEntity, PayloadFrom, DropPayload> = object & ElementDropEventMap<DragPayload<PayloadEntity, PayloadFrom>, DropPayload>

Type Declaration ​

allowDropPosition? ​

optional allowDropPosition: Edge[]

Allow drop position for the drop target.

canDrop()? ​

optional canDrop: (args) => boolean

OriginalDropTargetOption.canDrop

Parameters ​
args ​

ElementDropTargetFeedbackArgs<DragPayload<PayloadEntity, PayloadFrom>>

Returns ​

boolean

element ​

element: HTMLElement

OriginalDropTargetOption.element

getDropEffect()? ​

optional getDropEffect: (args) => DropTargetRecord["dropEffect"]

OriginalDropTargetOption.getDropEffect

Parameters ​
args ​

ElementDropTargetFeedbackArgs<DragPayload<PayloadEntity, PayloadFrom>>

Returns ​

DropTargetRecord["dropEffect"]

getIsSticky()? ​

optional getIsSticky: (args) => boolean

OriginalDropTargetOption.getIsSticky

Parameters ​
args ​

ElementDropTargetFeedbackArgs<DragPayload<PayloadEntity, PayloadFrom>>

Returns ​

boolean

setDropData()? ​

optional setDropData: (args) => DropPayload

OriginalDropTargetOption.getData

Parameters ​
args ​

ElementDropTargetFeedbackArgs<DragPayload<PayloadEntity, PayloadFrom>>

Returns ​

DropPayload

Type Parameters ​

PayloadEntity ​

PayloadEntity extends DragEntity

PayloadFrom ​

PayloadFrom extends DragFrom

DropPayload ​

DropPayload extends object

EventHandlerRunner ​

EventHandlerRunner = object

Properties ​

blockId? ​

optional blockId: string

flavour? ​

optional flavour: string

fn ​

fn: UIEventHandler

EventName ​

EventName = typeof eventNames[number]

EventOptions ​

EventOptions = object

Properties ​

blockId? ​

optional blockId: string

flavour? ​

optional flavour: string

EventSourceStateOptions ​

EventSourceStateOptions = object

Properties ​

event ​

event: Event

sourceType ​

sourceType: EventScopeSourceType

MonitorOption<PayloadEntity, PayloadFrom, DropPayload> ​

MonitorOption<PayloadEntity, PayloadFrom, DropPayload> = object & ElementDragEventMap<DragPayload<PayloadEntity, PayloadFrom>, DropPayload>

Type Declaration ​

canMonitor()? ​

optional canMonitor: (args) => boolean

OriginalMonitorOption.canMonitor

Parameters ​
args ​

ElementMonitorFeedbackArgs<DragPayload<PayloadEntity, PayloadFrom>>

Returns ​

boolean

Type Parameters ​

PayloadEntity ​

PayloadEntity extends DragEntity

PayloadFrom ​

PayloadFrom extends DragFrom

DropPayload ​

DropPayload extends object

TextRangePoint ​

TextRangePoint = object

Properties ​

blockId ​

blockId: string

index ​

index: number

length ​

length: number

TextSelectionProps ​

TextSelectionProps = object

Properties ​

from ​

from: TextRangePoint

reverse? ​

optional reverse: boolean

to ​

to: TextRangePoint | null

UIEventHandler() ​

UIEventHandler = (context) => boolean | null | undefined | void

Parameters ​

context ​

UIEventStateContext

Returns ​

boolean | null | undefined | void

ViewUpdatePayload ​

ViewUpdatePayload = { id: string; method: ViewUpdateMethod; type: "block"; view: BlockComponent; } | { id: string; method: ViewUpdateMethod; type: "widget"; view: WidgetComponent; }

WidgetViewType ​

WidgetViewType = StaticValue

Variables ​

BLOCK_ID_ATTR ​

const BLOCK_ID_ATTR: "data-block-id" = 'data-block-id'

blockComponentSymbol ​

const blockComponentSymbol: typeof blockComponentSymbol

BlockFlavourIdentifier ​

const BlockFlavourIdentifier: ServiceIdentifier<{ flavour: string; }> & <U>(variant) => ServiceIdentifier<U>

BlockSelectionExtension ​

const BlockSelectionExtension: ExtensionType

BlockServiceIdentifier ​

const BlockServiceIdentifier: ServiceIdentifier<BlockService> & <U>(variant) => ServiceIdentifier<U>

BlockViewIdentifier ​

const BlockViewIdentifier: ServiceIdentifier<BlockViewType> & <U>(variant) => ServiceIdentifier<U>

ClipboardAdapterConfigIdentifier ​

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

cmdSymbol ​

const cmdSymbol: typeof cmdSymbol

CommandIdentifier ​

const CommandIdentifier: ServiceIdentifier<Command> & <U>(variant) => ServiceIdentifier<U>

ConfigIdentifier ​

const ConfigIdentifier: ServiceIdentifier<Record<string, unknown>> & <U>(variant) => ServiceIdentifier<U>

CursorSelectionExtension ​

const CursorSelectionExtension: ExtensionType

DndExtensionIdentifier ​

const DndExtensionIdentifier: ServiceIdentifier<DndController>

GfxElementSymbol ​

const GfxElementSymbol: typeof GfxElementSymbol

internalExtensions ​

const internalExtensions: (typeof ServiceManager | typeof RangeManager | typeof ViewStore | typeof UIEventDispatcher | typeof CommandManager | typeof LayerManager | typeof GridManager | typeof GfxSelectionManager | typeof SurfaceMiddlewareExtension | typeof ViewManager)[]

KeymapIdentifier ​

const KeymapIdentifier: ServiceIdentifier<{ getter: (std) => Record<string, UIEventHandler>; options?: EventOptions; }> & <U>(variant) => ServiceIdentifier<U>

LifeCycleWatcherIdentifier ​

const LifeCycleWatcherIdentifier: ServiceIdentifier<LifeCycleWatcher> & <U>(variant) => ServiceIdentifier<U>

modelContext ​

const modelContext: object

Type Declaration ​

__context__ ​

__context__: BlockModel

PropTypes ​

const PropTypes: object

Type Declaration ​

array() ​

array: (value) => value is any[]

Parameters ​
value ​

unknown

Returns ​

value is any[]

arrayOf() ​

arrayOf: (validator) => (value) => boolean

Parameters ​
validator ​

ValidatorFunction

Returns ​

(value): boolean

Parameters ​
value ​

unknown

Returns ​

boolean

boolean() ​

boolean: (value) => value is boolean

Parameters ​
value ​

unknown

Returns ​

value is boolean

instanceOf() ​

instanceOf: (expectedClass) => (value) => boolean

Parameters ​
expectedClass ​

Constructor

Returns ​

(value): boolean

Parameters ​
value ​

unknown

Returns ​

boolean

number() ​

number: (value) => value is number

Parameters ​
value ​

unknown

Returns ​

value is number

object() ​

object: (value) => value is object | null

Parameters ​
value ​

unknown

Returns ​

value is object | null

of() ​

of: (validator) => (value) => boolean

Parameters ​
validator ​

ValidatorFunction

Returns ​

(value): boolean

Parameters ​
value ​

unknown

Returns ​

boolean

recordOf() ​

recordOf: (validator) => (value) => boolean

Parameters ​
validator ​

ValidatorFunction

Returns ​

(value): boolean

Parameters ​
value ​

unknown

Returns ​

boolean

string() ​

string: (value) => value is string

Parameters ​
value ​

unknown

Returns ​

value is string

serviceContext ​

const serviceContext: object

Type Declaration ​

__context__ ​

__context__: BlockService

stdContext ​

const stdContext: object

Type Declaration ​

__context__ ​

__context__: BlockStdScope

StdIdentifier ​

const StdIdentifier: ServiceIdentifier<BlockStdScope> & <U>(variant) => ServiceIdentifier<U>

storeContext ​

const storeContext: object

Type Declaration ​

__context__ ​

__context__: Store

SurfaceSelectionExtension ​

const SurfaceSelectionExtension: ExtensionType

TextSelectionExtension ​

const TextSelectionExtension: ExtensionType

WIDGET_ID_ATTR ​

const WIDGET_ID_ATTR: "data-widget-id" = 'data-widget-id'

WidgetViewIdentifier ​

const WidgetViewIdentifier: ServiceIdentifier<StaticValue> & <U>(variant) => ServiceIdentifier<U>

Functions ​

androidBindKeymapPatch() ​

androidBindKeymapPatch(bindings): UIEventHandler

Parameters ​

bindings ​

Record<string, UIEventHandler>

Returns ​

UIEventHandler

bindKeymap() ​

bindKeymap(bindings): UIEventHandler

Parameters ​

bindings ​

Record<string, UIEventHandler>

Returns ​

UIEventHandler

BlockViewExtension() ​

BlockViewExtension(flavour, view): ExtensionType

Create a block view extension.

Parameters ​

flavour ​

string

The flavour of the block that the view is for.

view ​

BlockViewType

Lit literal template for the view. Example: my-list-block

The view is a lit template that is used to render the block.

Returns ​

ExtensionType

Example ​

ts
import { BlockViewExtension } from '@blocksuite/std';

const MyListBlockViewExtension = BlockViewExtension(
  'affine:list',
  literal`my-list-block`
);

ClipboardAdapterConfigExtension() ​

ClipboardAdapterConfigExtension(config): ExtensionType

Parameters ​

config ​

ClipboardAdapterConfig

Returns ​

ExtensionType

ConfigExtensionFactory() ​

ConfigExtensionFactory<Config>(configId): ConfigFactory<Config>

Create a config extension. A config extension provides a configuration object for a block flavour. The configuration object can be used like:

ts
const config = std.provider.getOptional(ConfigIdentifier('my-flavour'));

Type Parameters ​

Config ​

Config extends Record<string, any>

Parameters ​

configId ​

string

The id of the config. Should be unique for each config.

Returns ​

ConfigFactory<Config>

Example ​

ts
import { ConfigExtensionFactory } from '@blocksuite/std';
const MyConfigExtensionFactory = ConfigExtensionFactory<ConfigType>('my-flavour');
const MyConfigExtension = MyConfigExtensionFactory({
  option1: 'value1',
  option2: 'value2',
});

FlavourExtension() ​

FlavourExtension(flavour): ExtensionType

Create a flavour extension.

Parameters ​

flavour ​

string

The flavour of the block that the extension is for.

Returns ​

ExtensionType

Example ​

ts
import { FlavourExtension } from '@blocksuite/std';

const MyFlavourExtension = FlavourExtension('my-flavour');

isGfxBlockComponent() ​

isGfxBlockComponent(element): element is GfxBlockComponent<GfxBlockElementModel<GfxCompatibleProps>, BlockService, string>

Parameters ​

element ​

unknown

Returns ​

element is GfxBlockComponent<GfxBlockElementModel<GfxCompatibleProps>, BlockService, string>

KeymapExtension() ​

KeymapExtension(keymapFactory, options?): ExtensionType

Create a keymap extension.

Parameters ​

keymapFactory ​

(std) => Record<string, UIEventHandler>

Create keymap of the extension. It should return an object with keymap and options.

keymap is a record of keymap.

options? ​

EventOptions

options is an optional object that restricts the event to be handled.

Returns ​

ExtensionType

Example ​

ts
import { KeymapExtension } from '@blocksuite/std';

const MyKeymapExtension = KeymapExtension(std => {
  return {
    keymap: {
      'mod-a': SelectAll
    }
    options: {
      flavour: 'affine:paragraph'
    }
  }
});

requiredProperties() ​

requiredProperties(propTypes): (constructor) => void

Parameters ​

propTypes ​

Record<string, ValidatorFunction>

Returns ​

(constructor): void

Parameters ​
constructor ​

Constructor<LitElement>

Returns ​

void

toGfxBlockComponent() ​

toGfxBlockComponent<Model, Service, WidgetName, B>(CustomBlock): B & (...args) => GfxBlockComponent

Type Parameters ​

Model ​

Model extends GfxBlockElementModel<GfxCompatibleProps>

Service ​

Service extends BlockService

WidgetName ​

WidgetName extends string

B ​

B extends typeof BlockComponent

Parameters ​

CustomBlock ​

B

Returns ​

B & (...args) => GfxBlockComponent

WidgetViewExtension() ​

WidgetViewExtension(flavour, id, view): ExtensionType

Create a widget view extension.

Parameters ​

flavour ​

string

The flavour of the block that the widget view is for.

id ​

string

The id of the widget view.

view ​

StaticValue

The widget view lit literal.

A widget view is to provide a widget view for a block. For every target block, it's view will be rendered with the widget view.

Returns ​

ExtensionType

Example ​

ts
import { WidgetViewExtension } from '@blocksuite/std';

const MyWidgetViewExtension = WidgetViewExtension('my-flavour', 'my-widget', literal`my-widget-view`);

Copyright © 2022-present Toeverything