BlockSuite

Appearance

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

@blocksuite/affine-block-root ​

Classes ​

EdgelessClipboardController ​

PageClipboard is a class that provides a clipboard for the page root block. It is supported to copy and paste models in the page root block.

Extends ​

Constructors ​

Properties ​

key ​

static key: string = 'affine-edgeless-clipboard'

Overrides ​

PageClipboard.key

Methods ​

copy() ​

copy(): 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 ​

PageClipboard.mounted

toCanvas() ​

toCanvas(blocks, shapes, options?): Promise<HTMLCanvasElement | undefined>

Parameters ​
blocks ​

GfxBlockElementModel<GfxCompatibleProps>[]

shapes ​

ShapeElementModel[]

options? ​

CanvasExportOptions

Returns ​

Promise<HTMLCanvasElement | undefined>

EdgelessLocker ​

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 = 'edgeless-locker'

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

EdgelessRootBlockComponent ​

Extends ​

Constructors ​

Other ​

keyboardManager ​

keyboardManager: EdgelessPageKeyboardManager | null = null

backgroundElm ​
fontLoader ​
Get Signature ​

get fontLoader(): FontLoaderService

Returns ​

FontLoaderService

gfx ​
Get Signature ​

get gfx(): GfxController

Returns ​

GfxController

gfxViewportElm ​
mountElm ​
surface ​
surfaceBlockModel ​
Get Signature ​

get surfaceBlockModel(): SurfaceBlockModel

Returns ​

SurfaceBlockModel

viewportElement ​
Get Signature ​

get viewportElement(): HTMLElement

Returns ​

HTMLElement

bindHotKey() ​

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

Parameters ​
keymap ​

Record<string, UIEventHandler>

options? ​
flavour? ​

boolean

global? ​

boolean

Returns ​

() => void

Overrides ​

BlockComponent.bindHotKey

connectedCallback() ​

connectedCallback(): void

Returns ​

void

Overrides ​

BlockComponent.connectedCallback

disconnectedCallback() ​

disconnectedCallback(): void

Returns ​

void

Overrides ​

BlockComponent.disconnectedCallback

renderBlock() ​

renderBlock(): TemplateResult<1>

Returns ​

TemplateResult<1>

Overrides ​

BlockComponent.renderBlock

attributes ​

controllers ​

dev-mode ​

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 ​

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 ​

BlockComponent.firstUpdated

EdgelessRootPreviewBlockComponent ​

Extends ​

Constructors ​

Other ​

backgroundStyle ​
gfxViewportElm ​
overrideBackground ​
surface ​
surfaceBlockModel ​
Get Signature ​

get surfaceBlockModel(): SurfaceBlockModel

Returns ​

SurfaceBlockModel

viewportElement ​
Get Signature ​

get viewportElement(): HTMLElement

Returns ​

HTMLElement

connectedCallback() ​

connectedCallback(): void

Returns ​

void

Overrides ​

BlockComponent.connectedCallback

disconnectedCallback() ​

disconnectedCallback(): void

Returns ​

void

Overrides ​

BlockComponent.disconnectedCallback

renderBlock() ​

renderBlock(): TemplateResult<1>

Returns ​

TemplateResult<1>

Overrides ​

BlockComponent.renderBlock

attributes ​

controllers ​

dev-mode ​

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 ​

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 ​

BlockComponent.firstUpdated

EdgelessRootService ​

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 ​

Implements ​

Constructors ​

Constructor ​

new EdgelessRootService(std, flavourProvider): EdgelessRootService

Parameters ​
std ​

BlockStdScope

flavourProvider ​
flavour ​

string

Returns ​

EdgelessRootService

Overrides ​

BlockService.constructor

Properties ​

flavour ​

readonly static flavour: "affine:page" = RootBlockSchema.model.flavour

Overrides ​

BlockService.flavour

Accessors ​

blocks ​
Get Signature ​

get blocks(): GfxBlockElementModel<GfxCompatibleProps>[]

Returns ​

GfxBlockElementModel<GfxCompatibleProps>[]

crud ​
Get Signature ​

get crud(): EdgelessCRUDExtension

Returns ​

EdgelessCRUDExtension

edgelessElements ​
Get Signature ​

get edgelessElements(): GfxModel[]

sorted edgeless elements

Returns ​

GfxModel[]

elements ​
Get Signature ​

get elements(): GfxPrimitiveElementModel<BaseElementProps>[]

sorted canvas elements

Returns ​

GfxPrimitiveElementModel<BaseElementProps>[]

frame ​
Get Signature ​

get frame(): EdgelessFrameManager

Returns ​

EdgelessFrameManager

frames ​
Get Signature ​

get frames(): FrameBlockModel[]

Get all sorted frames by presentation orderer, the legacy frame that uses index as presentation order will be put at the beginning of the array.

Returns ​

FrameBlockModel[]

gfx ​
Get Signature ​

get gfx(): GfxController

Returns ​

GfxController

host ​
Get Signature ​

get host(): EditorHost

Returns ​

EditorHost

Implementation of ​

SurfaceContext.host

Overrides ​

BlockService.host

layer ​
Get Signature ​

get layer(): LayerManager

Returns ​

LayerManager

locked ​
Get Signature ​

get locked(): boolean

Returns ​

boolean

Set Signature ​

set locked(locked): void

Parameters ​
locked ​

boolean

Returns ​

void

selection ​
Get Signature ​

get selection(): GfxSelectionManager

Returns ​

GfxSelectionManager

Implementation of ​

SurfaceContext.selection

surface ​
Get Signature ​

get surface(): SurfaceBlockModel

Returns ​

SurfaceBlockModel

viewport ​
Get Signature ​

get viewport(): Viewport

Returns ​

Viewport

Implementation of ​

SurfaceContext.viewport

zoom ​
Get Signature ​

get zoom(): number

Returns ​

number

Methods ​

generateIndex() ​

generateIndex(): string

Returns ​

string

getConnectors() ​

getConnectors(element): ConnectorElementModel[]

Parameters ​
element ​

string | GfxModel

Returns ​

ConnectorElementModel[]

mounted() ​

mounted(): void

Returns ​

void

Overrides ​

BlockService.mounted

removeElement() ​

removeElement(id): void

Parameters ​
id ​

string | GfxModel

Returns ​

void

reorderElement() ​

reorderElement(element, direction): void

Parameters ​
element ​

GfxModel

direction ​

ReorderingDirection

Returns ​

void

setZoomByAction() ​

setZoomByAction(action): void

Parameters ​
action ​

"reset" | "fit" | "out" | "in"

Returns ​

void

setZoomByStep() ​

setZoomByStep(step): void

Parameters ​
step ​

number

Returns ​

void

unmounted() ​

unmounted(): void

Returns ​

void

Overrides ​

BlockService.unmounted

PageClipboard ​

PageClipboard is a class that provides a clipboard for the page root block. It is supported to copy and paste models in the page root block.

Extends ​

Extended by ​

Constructors ​

Properties ​

onPageCut ​

onPageCut: UIEventHandler

onPagePaste ​

onPagePaste: UIEventHandler

key ​

static key: string = 'affine-page-clipboard'

Overrides ​

ReadOnlyClipboard.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 ​

ReadOnlyClipboard.mounted

onBlockSnapshotPaste() ​

onBlockSnapshotPaste(snapshot, doc, parent?, index?): Promise<string | null>

Parameters ​
snapshot ​

BlockSnapshot

doc ​

Store

parent? ​

string

index? ​

number

Returns ​

Promise<string | null>

PageRootBlockComponent ​

Extends ​

Constructors ​

Other ​

keyboardManager ​

keyboardManager: PageKeyboardManager | null = null

rootElementContainer ​
rootScrollContainer ​
Get Signature ​

get rootScrollContainer(): HTMLElement

Returns ​

HTMLElement

viewport ​
Get Signature ​

get viewport(): Viewport

Returns ​

Viewport

viewportElement ​
Get Signature ​

get viewportElement(): HTMLElement

Returns ​

HTMLElement

viewportProvider ​
Get Signature ​

get viewportProvider(): ViewportElementService

Returns ​

ViewportElementService

connectedCallback() ​

connectedCallback(): void

Returns ​

void

Overrides ​

BlockComponent.connectedCallback

disconnectedCallback() ​

disconnectedCallback(): void

Returns ​

void

Overrides ​

BlockComponent.disconnectedCallback

focusFirstParagraph() ​

focusFirstParagraph(): object

Focus the first paragraph in the default note block. If there is no paragraph, create one.

Returns ​

object

id of the focused paragraph and whether it is created or not

created ​

created: boolean

id ​

id: string

prependParagraphWithText() ​

prependParagraphWithText(text): void

Parameters ​
text ​

Text

Returns ​

void

renderBlock() ​

renderBlock(): TemplateResult<1>

Returns ​

TemplateResult<1>

Overrides ​

BlockComponent.renderBlock

attributes ​

controllers ​

dev-mode ​

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 ​

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 ​

BlockComponent.firstUpdated

PreviewRootBlockComponent ​

Extends ​

Constructors ​

Other ​

connectedCallback() ​

connectedCallback(): void

Returns ​

void

Overrides ​

BlockComponent.connectedCallback

disconnectedCallback() ​

disconnectedCallback(): void

Returns ​

void

Overrides ​

BlockComponent.disconnectedCallback

renderBlock() ​

renderBlock(): TemplateResult<1>

Returns ​

TemplateResult<1>

Overrides ​

BlockComponent.renderBlock

attributes ​

controllers ​

dev-mode ​

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 ​

ReadOnlyClipboard ​

ReadOnlyClipboard is a class that provides a read-only clipboard for the root block. It is supported to copy models in the root block.

Extends ​

Extended by ​

Constructors ​

Properties ​

_disposables ​

protected _disposables: DisposableGroup

onPageCopy ​

onPageCopy: UIEventHandler

key ​

static key: string = 'affine-readonly-clipboard'

Overrides ​

LifeCycleWatcher.key

Methods ​

_copySelectedInPage() ​

protected readonly _copySelectedInPage(onCopy?): Chain<InitCommandCtx & object & object & object & object>

Parameters ​
onCopy? ​

() => void

Returns ​

Chain<InitCommandCtx & object & object & object & object>

_initAdapters() ​

protected _initAdapters(): 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

Type Aliases ​

RootBlockComponent ​

RootBlockComponent = PageRootBlockComponent | EdgelessRootBlockComponent

Variables ​

createElementsFromClipboardDataCommand ​

const createElementsFromClipboardDataCommand: Command<Input, Output>

EDGELESS_BLOCK_CHILD_PADDING ​

const EDGELESS_BLOCK_CHILD_PADDING: 24 = 24

RootBlockHtmlAdapterExtension ​

const RootBlockHtmlAdapterExtension: ExtensionType & object

Type Declaration ​

identifier ​

identifier: ServiceIdentifier<BlockHtmlAdapterMatcher>

rootBlockHtmlAdapterMatcher ​

const rootBlockHtmlAdapterMatcher: BlockHtmlAdapterMatcher

RootBlockMarkdownAdapterExtension ​

const RootBlockMarkdownAdapterExtension: ExtensionType & object

Type Declaration ​

identifier ​

identifier: ServiceIdentifier<BlockMarkdownAdapterMatcher>

rootBlockMarkdownAdapterMatcher ​

const rootBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher

RootBlockNotionHtmlAdapterExtension ​

const RootBlockNotionHtmlAdapterExtension: ExtensionType & object

Type Declaration ​

identifier ​

identifier: ServiceIdentifier<BlockNotionHtmlAdapterMatcher>

rootBlockNotionHtmlAdapterMatcher ​

const rootBlockNotionHtmlAdapterMatcher: BlockNotionHtmlAdapterMatcher

Functions ​

duplicate() ​

duplicate(edgeless, elements, select?): Promise<void>

Parameters ​

edgeless ​

BlockComponent

elements ​

GfxModel[]

select? ​

boolean = true

Returns ​

Promise<void>

getElementProps() ​

getElementProps(element, ids): SerializedElement

Parameters ​

element ​

GfxPrimitiveElementModel

ids ​

Map<string, string>

Returns ​

SerializedElement

isCanvasElement() ​

isCanvasElement(selectable): selectable is GfxPrimitiveElementModel<BaseElementProps>

Parameters ​

selectable ​

BlockModel<object> | GfxModel | null

Returns ​

selectable is GfxPrimitiveElementModel<BaseElementProps>

sortEdgelessElements() ​

sortEdgelessElements(elements): GfxModel[]

There are interdependencies between elements, so they must be added in a certain order

Parameters ​

elements ​

GfxModel[]

edgeless model list

Returns ​

GfxModel[]

sorted edgeless model list

splitElements() ​

splitElements(elements): object

Parameters ​

elements ​

GfxModel[]

Returns ​

object

edgelessTexts ​

edgelessTexts: EdgelessTextBlockModel[]

embedSyncedDocs ​

embedSyncedDocs: EmbedSyncedDocModel[]

frames ​

frames: FrameBlockModel[]

images ​

images: ImageBlockModel[]

notes ​

notes: NoteBlockModel[]

shapes ​

shapes: ShapeElementModel[]

Copyright © 2022-present Toeverything