BlockSuite API Documentation / @blocksuite/blocks / EditPropsStore

Class: EditPropsStore

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.

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

• LifeCycleWatcher

Constructors

new EditPropsStore()

new EditPropsStore(std): EditPropsStore

Parameters

• std: BlockStdScope

Returns

EditPropsStore

Overrides

LifeCycleWatcher.constructor

Defined in

packages/affine/shared/dist/services/edit-props-store.d.ts:90

Properties

lastProps$

lastProps$: Signal<object>

Type declaration

affine:edgeless-text

affine:edgeless-text: object

affine:edgeless-text.color

affine:edgeless-text.color: LineColor | object | object

affine:edgeless-text.fontFamily

affine:edgeless-text.fontFamily: FontFamily

affine:edgeless-text.fontStyle

affine:edgeless-text.fontStyle: FontStyle

affine:edgeless-text.fontWeight

affine:edgeless-text.fontWeight: FontWeight

affine:edgeless-text.textAlign

affine:edgeless-text.textAlign: TextAlign

affine:frame

affine:frame: object

affine:frame.background?

optional affine:frame.background: object | object | FrameBackgroundColor

affine:note

affine:note: object

affine:note.background

affine:note.background: NoteBackgroundColor | object | object

affine:note.displayMode

affine:note.displayMode: NoteDisplayMode

affine:note.edgeless

affine:note.edgeless: object

affine:note.edgeless.style

affine:note.edgeless.style: object

affine:note.edgeless.style.borderRadius

affine:note.edgeless.style.borderRadius: number

affine:note.edgeless.style.borderSize

affine:note.edgeless.style.borderSize: number

affine:note.edgeless.style.borderStyle

affine:note.edgeless.style.borderStyle: StrokeStyle

affine:note.edgeless.style.shadowType

affine:note.edgeless.style.shadowType: NoteShadow

brush

brush: object

brush.color

brush.color: LineColor | object | object

brush.lineWidth

brush.lineWidth: LineWidth

connector

connector: object

connector.frontEndpointStyle

connector.frontEndpointStyle: PointStyle

connector.labelStyle

connector.labelStyle: object

connector.labelStyle.color

connector.labelStyle.color: LineColor | object | object

connector.labelStyle.fontFamily

connector.labelStyle.fontFamily: FontFamily

connector.labelStyle.fontSize

connector.labelStyle.fontSize: number

connector.labelStyle.fontStyle

connector.labelStyle.fontStyle: FontStyle

connector.labelStyle.fontWeight

connector.labelStyle.fontWeight: FontWeight

connector.labelStyle.textAlign

connector.labelStyle.textAlign: TextAlign

connector.mode

connector.mode: ConnectorMode

connector.rearEndpointStyle

connector.rearEndpointStyle: PointStyle

connector.rough

connector.rough: boolean

connector.stroke

connector.stroke: LineColor | object | object

connector.strokeStyle

connector.strokeStyle: StrokeStyle

connector.strokeWidth

connector.strokeWidth: LineWidth

mindmap

mindmap: object

mindmap.layoutType

mindmap.layoutType: LayoutType

mindmap.style

mindmap.style: MindmapStyle

shape:diamond

shape:diamond: object

shape:diamond.color

shape:diamond.color: LineColor | object | object

shape:diamond.fillColor

shape:diamond.fillColor: ShapeFillColor | object | object

shape:diamond.filled

shape:diamond.filled: boolean

shape:diamond.fontFamily

shape:diamond.fontFamily: FontFamily

shape:diamond.fontSize

shape:diamond.fontSize: number

shape:diamond.fontStyle

shape:diamond.fontStyle: FontStyle

shape:diamond.fontWeight

shape:diamond.fontWeight: FontWeight

shape:diamond.radius

shape:diamond.radius: number

shape:diamond.roughness

shape:diamond.roughness: number

shape:diamond.shapeStyle

shape:diamond.shapeStyle: ShapeStyle

shape:diamond.strokeColor

shape:diamond.strokeColor: LineColor | object | object

shape:diamond.strokeStyle

shape:diamond.strokeStyle: StrokeStyle

shape:diamond.strokeWidth

shape:diamond.strokeWidth: number

shape:diamond.textAlign

shape:diamond.textAlign: TextAlign

shape:diamond.textHorizontalAlign?

optional shape:diamond.textHorizontalAlign: TextAlign

shape:diamond.textVerticalAlign?

optional shape:diamond.textVerticalAlign: TextVerticalAlign

shape:ellipse

shape:ellipse: object

shape:ellipse.color

shape:ellipse.color: LineColor | object | object

shape:ellipse.fillColor

shape:ellipse.fillColor: ShapeFillColor | object | object

shape:ellipse.filled

shape:ellipse.filled: boolean

shape:ellipse.fontFamily

shape:ellipse.fontFamily: FontFamily

shape:ellipse.fontSize

shape:ellipse.fontSize: number

shape:ellipse.fontStyle

shape:ellipse.fontStyle: FontStyle

shape:ellipse.fontWeight

shape:ellipse.fontWeight: FontWeight

shape:ellipse.radius

shape:ellipse.radius: number

shape:ellipse.roughness

shape:ellipse.roughness: number

shape:ellipse.shapeStyle

shape:ellipse.shapeStyle: ShapeStyle

shape:ellipse.strokeColor

shape:ellipse.strokeColor: LineColor | object | object

shape:ellipse.strokeStyle

shape:ellipse.strokeStyle: StrokeStyle

shape:ellipse.strokeWidth

shape:ellipse.strokeWidth: number

shape:ellipse.textAlign

shape:ellipse.textAlign: TextAlign

shape:ellipse.textHorizontalAlign?

optional shape:ellipse.textHorizontalAlign: TextAlign

shape:ellipse.textVerticalAlign?

optional shape:ellipse.textVerticalAlign: TextVerticalAlign

shape:rect

shape:rect: object

shape:rect.color

shape:rect.color: LineColor | object | object

shape:rect.fillColor

shape:rect.fillColor: ShapeFillColor | object | object

shape:rect.filled

shape:rect.filled: boolean

shape:rect.fontFamily

shape:rect.fontFamily: FontFamily

shape:rect.fontSize

shape:rect.fontSize: number

shape:rect.fontStyle

shape:rect.fontStyle: FontStyle

shape:rect.fontWeight

shape:rect.fontWeight: FontWeight

shape:rect.radius

shape:rect.radius: number

shape:rect.roughness

shape:rect.roughness: number

shape:rect.shapeStyle

shape:rect.shapeStyle: ShapeStyle

shape:rect.strokeColor

shape:rect.strokeColor: LineColor | object | object

shape:rect.strokeStyle

shape:rect.strokeStyle: StrokeStyle

shape:rect.strokeWidth

shape:rect.strokeWidth: number

shape:rect.textAlign

shape:rect.textAlign: TextAlign

shape:rect.textHorizontalAlign?

optional shape:rect.textHorizontalAlign: TextAlign

shape:rect.textVerticalAlign?

optional shape:rect.textVerticalAlign: TextVerticalAlign

shape:roundedRect

shape:roundedRect: object

shape:roundedRect.color

shape:roundedRect.color: LineColor | object | object

shape:roundedRect.fillColor

shape:roundedRect.fillColor: ShapeFillColor | object | object

shape:roundedRect.filled

shape:roundedRect.filled: boolean

shape:roundedRect.fontFamily

shape:roundedRect.fontFamily: FontFamily

shape:roundedRect.fontSize

shape:roundedRect.fontSize: number

shape:roundedRect.fontStyle

shape:roundedRect.fontStyle: FontStyle

shape:roundedRect.fontWeight

shape:roundedRect.fontWeight: FontWeight

shape:roundedRect.radius

shape:roundedRect.radius: number

shape:roundedRect.roughness

shape:roundedRect.roughness: number

shape:roundedRect.shapeStyle

shape:roundedRect.shapeStyle: ShapeStyle

shape:roundedRect.strokeColor

shape:roundedRect.strokeColor: LineColor | object | object

shape:roundedRect.strokeStyle

shape:roundedRect.strokeStyle: StrokeStyle

shape:roundedRect.strokeWidth

shape:roundedRect.strokeWidth: number

shape:roundedRect.textAlign

shape:roundedRect.textAlign: TextAlign

shape:roundedRect.textHorizontalAlign?

optional shape:roundedRect.textHorizontalAlign: TextAlign

shape:roundedRect.textVerticalAlign?

optional shape:roundedRect.textVerticalAlign: TextVerticalAlign

shape:triangle

shape:triangle: object

shape:triangle.color

shape:triangle.color: LineColor | object | object

shape:triangle.fillColor

shape:triangle.fillColor: ShapeFillColor | object | object

shape:triangle.filled

shape:triangle.filled: boolean

shape:triangle.fontFamily

shape:triangle.fontFamily: FontFamily

shape:triangle.fontSize

shape:triangle.fontSize: number

shape:triangle.fontStyle

shape:triangle.fontStyle: FontStyle

shape:triangle.fontWeight

shape:triangle.fontWeight: FontWeight

shape:triangle.radius

shape:triangle.radius: number

shape:triangle.roughness

shape:triangle.roughness: number

shape:triangle.shapeStyle

shape:triangle.shapeStyle: ShapeStyle

shape:triangle.strokeColor

shape:triangle.strokeColor: LineColor | object | object

shape:triangle.strokeStyle

shape:triangle.strokeStyle: StrokeStyle

shape:triangle.strokeWidth

shape:triangle.strokeWidth: number

shape:triangle.textAlign

shape:triangle.textAlign: TextAlign

shape:triangle.textHorizontalAlign?

optional shape:triangle.textHorizontalAlign: TextAlign

shape:triangle.textVerticalAlign?

optional shape:triangle.textVerticalAlign: TextVerticalAlign

text

text: object

text.color

text.color: LineColor | object | object

text.fontFamily

text.fontFamily: FontFamily

text.fontSize

text.fontSize: number

text.fontStyle

text.fontStyle: FontStyle

text.fontWeight

text.fontWeight: FontWeight

text.textAlign

text.textAlign: TextAlign

Defined in

packages/affine/shared/dist/services/edit-props-store.d.ts:83

---

slots

slots: object

storageUpdated

storageUpdated: Slot<object>

Type declaration

key

key: "viewport" | "remoteColor" | "templateCache" | "showBidirectional" | "presentBlackBackground" | "presentFillScreen" | "presentHideToolbar" | "autoHideEmbedHTMLFullScreenToolbar"

value

value: string | boolean | object | object

Defined in

packages/affine/shared/dist/services/edit-props-store.d.ts:84

---

std

readonly std: BlockStdScope

Inherited from

LifeCycleWatcher.std

Defined in

packages/framework/block-std/dist/extension/lifecycle-watcher.d.ts:22

---

key

static key: string

Overrides

LifeCycleWatcher.key

Defined in

packages/affine/shared/dist/services/edit-props-store.d.ts:80

Methods

applyLastProps()

applyLastProps(key, props): object | object | object | object | object | object | object | object & Record<string, unknown>

Parameters

• key: "text" | "brush" | "connector" | "mindmap" | "affine:edgeless-text" | "affine:frame" | "affine:note" | "shape:diamond" | "shape:ellipse" | "shape:rect" | "shape:triangle" | "shape:roundedRect"

• props: Record<string, unknown>

Returns

object | object | object | object | object | object | object | object & Record<string, unknown>

Defined in

packages/affine/shared/dist/services/edit-props-store.d.ts:93

---

created()

created(): void

Called when std is created.

Returns

void

Inherited from

LifeCycleWatcher.created

Defined in

packages/framework/block-std/dist/extension/lifecycle-watcher.d.ts:29

---

dispose()

dispose(): void

Returns

void

Defined in

packages/affine/shared/dist/services/edit-props-store.d.ts:209

---

getStorage()

getStorage<T>(key): null | StorageProps[T]

Type Parameters

• T extends "viewport" | "remoteColor" | "templateCache" | "showBidirectional" | "presentBlackBackground" | "presentFillScreen" | "presentHideToolbar" | "autoHideEmbedHTMLFullScreenToolbar"

Parameters

• key: T

Returns

null | StorageProps[T]

Defined in

packages/affine/shared/dist/services/edit-props-store.d.ts:210

---

mounted()

mounted(): void

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

Returns

void

Inherited from

LifeCycleWatcher.mounted

Defined in

packages/framework/block-std/dist/extension/lifecycle-watcher.d.ts:34

---

recordLastProps()

recordLastProps(key, props): void

Parameters

• key: "text" | "brush" | "connector" | "mindmap" | "affine:edgeless-text" | "affine:frame" | "affine:note" | "shape:diamond" | "shape:ellipse" | "shape:rect" | "shape:triangle" | "shape:roundedRect"

• props: Partial<object | object | object | object | object | object | object | object | object | object | object | object>

Returns

void

Defined in

packages/affine/shared/dist/services/edit-props-store.d.ts:211

---

rendered()

rendered(): void

Called when std.render is called.

Returns

void

Inherited from

LifeCycleWatcher.rendered

Defined in

packages/framework/block-std/dist/extension/lifecycle-watcher.d.ts:38

---

setStorage()

setStorage<T>(key, value): void

Type Parameters

• T extends "viewport" | "remoteColor" | "templateCache" | "showBidirectional" | "presentBlackBackground" | "presentFillScreen" | "presentHideToolbar" | "autoHideEmbedHTMLFullScreenToolbar"

Parameters

• key: T

• value: StorageProps[T]

Returns

void

Defined in

packages/affine/shared/dist/services/edit-props-store.d.ts:212

---

unmounted()

unmounted(): void

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

Returns

void

Overrides

LifeCycleWatcher.unmounted

Defined in

packages/affine/shared/dist/services/edit-props-store.d.ts:213

---

setup()

static setup(di): void

Parameters

• di: Container

Returns

void

Inherited from

LifeCycleWatcher.setup

Defined in

packages/framework/block-std/dist/extension/lifecycle-watcher.d.ts:25