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<{ affine:edgeless-text: { color: LineColor | { normal: string; } | { dark: string; light: string; }; fontFamily: FontFamily; fontStyle: FontStyle; fontWeight: FontWeight; textAlign: TextAlign; }; affine:frame: { background: { normal: string; } | { dark: string; light: string; } | FrameBackgroundColor; }; affine:note: { background: NoteBackgroundColor | { normal: string; } | { dark: string; light: string; }; displayMode: NoteDisplayMode; edgeless: { style: { borderRadius: number; borderSize: number; borderStyle: StrokeStyle; shadowType: NoteShadow; }; }; }; brush: { color: LineColor | { normal: string; } | { dark: string; light: string; }; lineWidth: LineWidth; }; connector: { frontEndpointStyle: PointStyle; labelStyle: { color: LineColor | { normal: string; } | { dark: string; light: string; }; fontFamily: FontFamily; fontSize: number; fontStyle: FontStyle; fontWeight: FontWeight; textAlign: TextAlign; }; mode: ConnectorMode; rearEndpointStyle: PointStyle; rough: boolean; stroke: LineColor | { normal: string; } | { dark: string; light: string; }; strokeStyle: StrokeStyle; strokeWidth: LineWidth; }; mindmap: { layoutType: LayoutType; style: MindmapStyle; }; shape:diamond: { color: LineColor | { normal: string; } | { dark: string; light: string; }; fillColor: ShapeFillColor | { normal: string; } | { dark: string; light: string; }; filled: boolean; fontFamily: FontFamily; fontSize: number; fontStyle: FontStyle; fontWeight: FontWeight; radius: number; roughness: number; shapeStyle: ShapeStyle; strokeColor: LineColor | { normal: string; } | { dark: string; light: string; }; strokeStyle: StrokeStyle; strokeWidth: number; textAlign: TextAlign; textHorizontalAlign: TextAlign; textVerticalAlign: TextVerticalAlign; }; shape:ellipse: { color: LineColor | { normal: string; } | { dark: string; light: string; }; fillColor: ShapeFillColor | { normal: string; } | { dark: string; light: string; }; filled: boolean; fontFamily: FontFamily; fontSize: number; fontStyle: FontStyle; fontWeight: FontWeight; radius: number; roughness: number; shapeStyle: ShapeStyle; strokeColor: LineColor | { normal: string; } | { dark: string; light: string; }; strokeStyle: StrokeStyle; strokeWidth: number; textAlign: TextAlign; textHorizontalAlign: TextAlign; textVerticalAlign: TextVerticalAlign; }; shape:rect: { color: LineColor | { normal: string; } | { dark: string; light: string; }; fillColor: ShapeFillColor | { normal: string; } | { dark: string; light: string; }; filled: boolean; fontFamily: FontFamily; fontSize: number; fontStyle: FontStyle; fontWeight: FontWeight; radius: number; roughness: number; shapeStyle: ShapeStyle; strokeColor: LineColor | { normal: string; } | { dark: string; light: string; }; strokeStyle: StrokeStyle; strokeWidth: number; textAlign: TextAlign; textHorizontalAlign: TextAlign; textVerticalAlign: TextVerticalAlign; }; shape:roundedRect: { color: LineColor | { normal: string; } | { dark: string; light: string; }; fillColor: ShapeFillColor | { normal: string; } | { dark: string; light: string; }; filled: boolean; fontFamily: FontFamily; fontSize: number; fontStyle: FontStyle; fontWeight: FontWeight; radius: number; roughness: number; shapeStyle: ShapeStyle; strokeColor: LineColor | { normal: string; } | { dark: string; light: string; }; strokeStyle: StrokeStyle; strokeWidth: number; textAlign: TextAlign; textHorizontalAlign: TextAlign; textVerticalAlign: TextVerticalAlign; }; shape:triangle: { color: LineColor | { normal: string; } | { dark: string; light: string; }; fillColor: ShapeFillColor | { normal: string; } | { dark: string; light: string; }; filled: boolean; fontFamily: FontFamily; fontSize: number; fontStyle: FontStyle; fontWeight: FontWeight; radius: number; roughness: number; shapeStyle: ShapeStyle; strokeColor: LineColor | { normal: string; } | { dark: string; light: string; }; strokeStyle: StrokeStyle; strokeWidth: number; textAlign: TextAlign; textHorizontalAlign: TextAlign; textVerticalAlign: TextVerticalAlign; }; text: { color: LineColor | { normal: string; } | { dark: string; light: string; }; fontFamily: FontFamily; fontSize: number; fontStyle: FontStyle; fontWeight: FontWeight; textAlign: TextAlign; }; }>

Defined in

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

---

slots

slots: object

storageUpdated

storageUpdated: Slot<{ key: "viewport" | "remoteColor" | "templateCache" | "showBidirectional" | "presentBlackBackground" | "presentFillScreen" | "presentHideToolbar" | "autoHideEmbedHTMLFullScreenToolbar"; value: string | boolean | { centerX: number; centerY: number; zoom: number; } | { padding: [number, number, number, number]; xywh: string; }; }>

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): { frontEndpointStyle: PointStyle; labelStyle: { color: LineColor | { normal: string; } | { light: string; dark: string; }; fontFamily: FontFamily; fontSize: number; fontStyle: FontStyle; fontWeight: FontWeight; textAlign: TextAlign; }; mode: ConnectorMode; rearEndpointStyle: PointStyle; rough: boolean; stroke: LineColor | { normal: string; } | { light: string; dark: string; }; strokeStyle: StrokeStyle; strokeWidth: LineWidth; } | { color: LineColor | { normal: string; } | { light: string; dark: string; }; lineWidth: LineWidth; } | { color: LineColor | { normal: string; } | { light: string; dark: string; }; fontFamily: FontFamily; fontSize: number; fontStyle: FontStyle; fontWeight: FontWeight; textAlign: TextAlign; } | { layoutType: LayoutType; style: MindmapStyle; } | { color: LineColor | { normal: string; } | { light: string; dark: string; }; fontFamily: FontFamily; fontStyle: FontStyle; fontWeight: FontWeight; textAlign: TextAlign; } | { background: NoteBackgroundColor | { normal: string; } | { light: string; dark: string; }; displayMode: NoteDisplayMode; edgeless: { style: { borderRadius: number; borderSize: number; borderStyle: StrokeStyle; shadowType: NoteShadow; }; }; } | { background: FrameBackgroundColor | { normal: string; } | { light: string; dark: string; } | undefined; } | { color: LineColor | { normal: string; } | { light: string; dark: string; }; fillColor: ShapeFillColor | { normal: string; } | { light: string; dark: string; }; filled: boolean; fontFamily: FontFamily; fontSize: number; fontStyle: FontStyle; fontWeight: FontWeight; radius: number; roughness: number; shapeStyle: ShapeStyle; strokeColor: LineColor | { normal: string; } | { light: string; dark: string; }; strokeStyle: StrokeStyle; strokeWidth: number; textAlign: TextAlign; textHorizontalAlign: TextAlign | undefined; textVerticalAlign: TextVerticalAlign | undefined; } & Record<string, unknown>

Parameters

key

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

props

Record<string, unknown>

Returns

{ frontEndpointStyle: PointStyle; labelStyle: { color: LineColor | { normal: string; } | { light: string; dark: string; }; fontFamily: FontFamily; fontSize: number; fontStyle: FontStyle; fontWeight: FontWeight; textAlign: TextAlign; }; mode: ConnectorMode; rearEndpointStyle: PointStyle; rough: boolean; stroke: LineColor | { normal: string; } | { light: string; dark: string; }; strokeStyle: StrokeStyle; strokeWidth: LineWidth; } | { color: LineColor | { normal: string; } | { light: string; dark: string; }; lineWidth: LineWidth; } | { color: LineColor | { normal: string; } | { light: string; dark: string; }; fontFamily: FontFamily; fontSize: number; fontStyle: FontStyle; fontWeight: FontWeight; textAlign: TextAlign; } | { layoutType: LayoutType; style: MindmapStyle; } | { color: LineColor | { normal: string; } | { light: string; dark: string; }; fontFamily: FontFamily; fontStyle: FontStyle; fontWeight: FontWeight; textAlign: TextAlign; } | { background: NoteBackgroundColor | { normal: string; } | { light: string; dark: string; }; displayMode: NoteDisplayMode; edgeless: { style: { borderRadius: number; borderSize: number; borderStyle: StrokeStyle; shadowType: NoteShadow; }; }; } | { background: FrameBackgroundColor | { normal: string; } | { light: string; dark: string; } | undefined; } | { color: LineColor | { normal: string; } | { light: string; dark: string; }; fillColor: ShapeFillColor | { normal: string; } | { light: string; dark: string; }; filled: boolean; fontFamily: FontFamily; fontSize: number; fontStyle: FontStyle; fontWeight: FontWeight; radius: number; roughness: number; shapeStyle: ShapeStyle; strokeColor: LineColor | { normal: string; } | { light: string; dark: string; }; strokeStyle: StrokeStyle; strokeWidth: number; textAlign: TextAlign; textHorizontalAlign: TextAlign | undefined; textVerticalAlign: TextVerticalAlign | undefined; } & 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" | "affine:edgeless-text" | "affine:frame" | "affine:note" | "brush" | "connector" | "mindmap" | "shape:diamond" | "shape:ellipse" | "shape:rect" | "shape:triangle" | "shape:roundedRect"

props

Partial<{ color: LineColor | { normal: string; } | { dark: string; light: string; }; fillColor: ShapeFillColor | { normal: string; } | { dark: string; light: string; }; filled: boolean; fontFamily: FontFamily; fontSize: number; fontStyle: FontStyle; fontWeight: FontWeight; radius: number; roughness: number; shapeStyle: ShapeStyle; strokeColor: LineColor | { normal: string; } | { dark: string; light: string; }; strokeStyle: StrokeStyle; strokeWidth: number; textAlign: TextAlign; textHorizontalAlign: TextAlign; textVerticalAlign: TextVerticalAlign; } | { color: LineColor | { normal: string; } | { dark: string; light: string; }; fillColor: ShapeFillColor | { normal: string; } | { dark: string; light: string; }; filled: boolean; fontFamily: FontFamily; fontSize: number; fontStyle: FontStyle; fontWeight: FontWeight; radius: number; roughness: number; shapeStyle: ShapeStyle; strokeColor: LineColor | { normal: string; } | { dark: string; light: string; }; strokeStyle: StrokeStyle; strokeWidth: number; textAlign: TextAlign; textHorizontalAlign: TextAlign; textVerticalAlign: TextVerticalAlign; } | { color: LineColor | { normal: string; } | { dark: string; light: string; }; fillColor: ShapeFillColor | { normal: string; } | { dark: string; light: string; }; filled: boolean; fontFamily: FontFamily; fontSize: number; fontStyle: FontStyle; fontWeight: FontWeight; radius: number; roughness: number; shapeStyle: ShapeStyle; strokeColor: LineColor | { normal: string; } | { dark: string; light: string; }; strokeStyle: StrokeStyle; strokeWidth: number; textAlign: TextAlign; textHorizontalAlign: TextAlign; textVerticalAlign: TextVerticalAlign; } | { color: LineColor | { normal: string; } | { dark: string; light: string; }; fillColor: ShapeFillColor | { normal: string; } | { dark: string; light: string; }; filled: boolean; fontFamily: FontFamily; fontSize: number; fontStyle: FontStyle; fontWeight: FontWeight; radius: number; roughness: number; shapeStyle: ShapeStyle; strokeColor: LineColor | { normal: string; } | { dark: string; light: string; }; strokeStyle: StrokeStyle; strokeWidth: number; textAlign: TextAlign; textHorizontalAlign: TextAlign; textVerticalAlign: TextVerticalAlign; } | { color: LineColor | { normal: string; } | { dark: string; light: string; }; fillColor: ShapeFillColor | { normal: string; } | { dark: string; light: string; }; filled: boolean; fontFamily: FontFamily; fontSize: number; fontStyle: FontStyle; fontWeight: FontWeight; radius: number; roughness: number; shapeStyle: ShapeStyle; strokeColor: LineColor | { normal: string; } | { dark: string; light: string; }; strokeStyle: StrokeStyle; strokeWidth: number; textAlign: TextAlign; textHorizontalAlign: TextAlign; textVerticalAlign: TextVerticalAlign; } | { background: NoteBackgroundColor | { normal: string; } | { dark: string; light: string; }; displayMode: NoteDisplayMode; edgeless: { style: { borderRadius: number; borderSize: number; borderStyle: StrokeStyle; shadowType: NoteShadow; }; }; } | { color: LineColor | { normal: string; } | { dark: string; light: string; }; fontFamily: FontFamily; fontSize: number; fontStyle: FontStyle; fontWeight: FontWeight; textAlign: TextAlign; } | { color: LineColor | { normal: string; } | { dark: string; light: string; }; fontFamily: FontFamily; fontStyle: FontStyle; fontWeight: FontWeight; textAlign: TextAlign; } | { background: { normal: string; } | { dark: string; light: string; } | FrameBackgroundColor; } | { color: LineColor | { normal: string; } | { dark: string; light: string; }; lineWidth: LineWidth; } | { frontEndpointStyle: PointStyle; labelStyle: { color: LineColor | { normal: string; } | { dark: string; light: string; }; fontFamily: FontFamily; fontSize: number; fontStyle: FontStyle; fontWeight: FontWeight; textAlign: TextAlign; }; mode: ConnectorMode; rearEndpointStyle: PointStyle; rough: boolean; stroke: LineColor | { normal: string; } | { dark: string; light: string; }; strokeStyle: StrokeStyle; strokeWidth: LineWidth; } | { layoutType: LayoutType; style: MindmapStyle; }>

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