docs(editor): add doc for reactive types in store (#10958)

blocksuite/docs/api/@blocksuite/store/README.md

@@ -11,6 +11,11 @@
 - [Extension](classes/Extension.md)
 - [StoreExtension](classes/StoreExtension.md)
 
+## Reactive
+
+- [Boxed](classes/Boxed.md)
+- [Text](classes/Text.md)
+
 ## Store
 
 - [Store](classes/Store.md)

blocksuite/docs/api/@blocksuite/store/classes/Boxed.md

@@ -0,0 +1,139 @@
+[**@blocksuite/store**](../../../@blocksuite/store/README.md)
+
+***
+
+[BlockSuite API Documentation](../../../README.md) / [@blocksuite/store](../README.md) / Boxed
+
+# Class: Boxed\<Value\>
+
+Boxed is to store raw data in Yjs.
+By default, store will try to convert a object to a Y.Map.
+If you want to store a raw object for you want to manipulate the Y.Map directly, you can use Boxed.
+
+> [!NOTE]
+> Please notice that the data will be stored in Y.Map anyway so it can not hold data structure like function.
+
+## Example
+
+```ts
+const boxedObject = new Boxed({ a: 1, b: 2 });
+const boxedYMap = new Boxed(new Y.Map());
+boxedObject.getValue().a; // 1
+boxedYMap.getValue().set('a', 1);
+boxedObject.setValue({ foo: 'bar' });
+```
+
+## Type Param
+
+The type of the value stored in the Boxed.
+
+## Type Parameters
+
+### Value
+
+`Value` = `unknown`
+
+## Methods
+
+### getValue()
+
+> **getValue**(): `undefined` \| `Value`
+
+Get the current value of the Boxed.
+
+#### Returns
+
+`undefined` \| `Value`
+
+***
+
+### setValue()
+
+> **setValue**(`value`): `Value`
+
+Replace the current value of the Boxed.
+
+#### Parameters
+
+##### value
+
+`Value`
+
+The new value to set.
+
+#### Returns
+
+`Value`
+
+***
+
+### from()
+
+> `static` **from**\<`Value`\>(`map`): `Boxed`\<`Value`\>
+
+Create a Boxed from a Y.Map.
+It is useful when you sync a Y.Map from remote.
+
+#### Type Parameters
+
+##### Value
+
+`Value`
+
+The type of the value.
+
+#### Parameters
+
+##### map
+
+`YMap`\<`unknown`\>
+
+#### Returns
+
+`Boxed`\<`Value`\>
+
+#### Example
+
+```ts
+const doc1 = new Y.Doc();
+const doc2 = new Y.Doc();
+keepSynced(doc1, doc2);
+
+const data1 = doc1.getMap('data');
+const boxed1 = new Boxed({ a: 1, b: 2 });
+data1.set('boxed', boxed1.yMap);
+
+const data2 = doc2.getMap('data');
+const boxed2 = Boxed.from<{ a: number; b: number }>(data2.get('boxed'));
+```
+
+***
+
+### is()
+
+> `static` **is**(`value`): `value is Boxed<unknown>`
+
+Check if a value is a Boxed.
+
+#### Parameters
+
+##### value
+
+`unknown`
+
+#### Returns
+
+`value is Boxed<unknown>`
+
+#### Example
+
+```ts
+const doc = new Y.Doc();
+
+const data = doc.getMap('data');
+const boxed = new Boxed({ a: 1, b: 2 });
+Boxed.is(boxed); // true
+
+data.set('boxed', boxed.yMap);
+Boxed.is(data.get('boxed)); // true
+```

blocksuite/docs/api/@blocksuite/store/classes/Text.md

@@ -0,0 +1,392 @@
+[**@blocksuite/store**](../../../@blocksuite/store/README.md)
+
+***
+
+[BlockSuite API Documentation](../../../README.md) / [@blocksuite/store](../README.md) / Text
+
+# Class: Text
+
+Text is an abstraction of Y.Text.
+It provides useful methods to manipulate the text content.
+
+## Example
+
+```ts
+const text = new Text('Hello, world!');
+text.insert(' blocksuite', 7);
+text.delete(7, 1);
+text.format(7, 1, { bold: true });
+text.join(new Text(' blocksuite'));
+text.split(7, 1);
+```
+
+Text [delta](https://docs.yjs.dev/api/delta-format) is a format from Y.js.
+
+## Constructors
+
+### new Text()
+
+> **new Text**(`input`?): `Text`
+
+#### Parameters
+
+##### input?
+
+The input can be a string, a Y.Text instance, or an array of DeltaInsert.
+
+`string` | `YText` | `DeltaInsert`[]
+
+#### Returns
+
+`Text`
+
+## Accessors
+
+### deltas$
+
+#### Get Signature
+
+> **get** **deltas$**(): `Signal`\<`DeltaOperation`[]\>
+
+Get the text delta as a signal.
+
+##### Returns
+
+`Signal`\<`DeltaOperation`[]\>
+
+## Methods
+
+### applyDelta()
+
+> **applyDelta**(`delta`): `void`
+
+Apply a delta to the text.
+
+#### Parameters
+
+##### delta
+
+`DeltaOperation`[]
+
+The delta to apply.
+
+#### Returns
+
+`void`
+
+#### Example
+
+```ts
+const text = new Text('Hello, world!');
+text.applyDelta([{insert: ' blocksuite', attributes: { bold: true }}]);
+```
+
+***
+
+### clear()
+
+> **clear**(): `void`
+
+Clear the text content.
+
+#### Returns
+
+`void`
+
+***
+
+### clone()
+
+> **clone**(): `Text`
+
+Clone the text to a new Text instance.
+
+#### Returns
+
+`Text`
+
+A new Text instance.
+
+***
+
+### delete()
+
+> **delete**(`index`, `length`): `void`
+
+Delete the text content.
+
+#### Parameters
+
+##### index
+
+`number`
+
+The index to delete.
+
+##### length
+
+`number`
+
+The length to delete.
+
+#### Returns
+
+`void`
+
+***
+
+### format()
+
+> **format**(`index`, `length`, `format`): `void`
+
+Format the text content.
+
+#### Parameters
+
+##### index
+
+`number`
+
+The index to format.
+
+##### length
+
+`number`
+
+The length to format.
+
+##### format
+
+`Record`\<`string`, `unknown`\>
+
+The format to apply.
+
+#### Returns
+
+`void`
+
+#### Example
+
+```ts
+const text = new Text('Hello, world!');
+text.format(7, 1, { bold: true });
+```
+
+***
+
+### insert()
+
+> **insert**(`content`, `index`, `attributes`?): `void`
+
+Insert content at the specified index.
+
+#### Parameters
+
+##### content
+
+`string`
+
+The content to insert.
+
+##### index
+
+`number`
+
+The index to insert.
+
+##### attributes?
+
+`Record`\<`string`, `unknown`\>
+
+#### Returns
+
+`void`
+
+#### Example
+
+```ts
+const text = new Text('Hello, world!');
+text.insert(' blocksuite', 7);
+```
+
+***
+
+### join()
+
+> **join**(`other`): `void`
+
+Join current text with another text.
+
+#### Parameters
+
+##### other
+
+`Text`
+
+The other text to join.
+
+#### Returns
+
+`void`
+
+#### Example
+
+```ts
+const text = new Text('Hello, world!');
+const other = new Text(' blocksuite');
+text.join(other);
+```
+
+***
+
+### replace()
+
+> **replace**(`index`, `length`, `content`, `attributes`?): `void`
+
+Replace the text content with a new content.
+
+#### Parameters
+
+##### index
+
+`number`
+
+The index to replace.
+
+##### length
+
+`number`
+
+The length to replace.
+
+##### content
+
+`string`
+
+The content to replace.
+
+##### attributes?
+
+`Record`\<`string`, `unknown`\>
+
+The attributes to replace.
+
+#### Returns
+
+`void`
+
+#### Example
+
+```ts
+const text = new Text('Hello, world!');
+text.replace(7, 1, ' blocksuite');
+```
+
+***
+
+### sliceToDelta()
+
+> **sliceToDelta**(`begin`, `end`?): `DeltaOperation`[]
+
+Slice the text to a delta.
+
+#### Parameters
+
+##### begin
+
+`number`
+
+The begin index.
+
+##### end?
+
+`number`
+
+The end index.
+
+#### Returns
+
+`DeltaOperation`[]
+
+The delta of the sliced text.
+
+***
+
+### split()
+
+> **split**(`index`, `length`): `Text`
+
+Split the text into another Text.
+
+#### Parameters
+
+##### index
+
+`number`
+
+The index to split.
+
+##### length
+
+`number` = `0`
+
+The length to split.
+
+#### Returns
+
+`Text`
+
+The right part of the text.
+
+#### Example
+
+```ts
+const text = new Text('Hello, world!');
+text.split(7, 1);
+```
+
+NOTE: The string included in [index, index + length) will be deleted.
+
+Here are three cases for point position(index + length):
+
+```
+[{insert: 'abc', ...}, {insert: 'def', ...}, {insert: 'ghi', ...}]
+1. abc|de|fghi
+   left: [{insert: 'abc', ...}]
+   right: [{insert: 'f', ...}, {insert: 'ghi', ...}]
+2. abc|def|ghi
+   left: [{insert: 'abc', ...}]
+   right: [{insert: 'ghi', ...}]
+3. abc|defg|hi
+   left: [{insert: 'abc', ...}]
+   right: [{insert: 'hi', ...}]
+```
+
+***
+
+### toDelta()
+
+> **toDelta**(): `DeltaOperation`[]
+
+Get the text delta.
+
+#### Returns
+
+`DeltaOperation`[]
+
+The delta of the text.
+
+***
+
+### toString()
+
+> **toString**(): `string`
+
+Get the text content as a string.
+In most cases, you should not use this method. It will lose the delta attributes information.
+
+#### Returns
+
+`string`
+
+The text content.

blocksuite/docs/api/@blocksuite/store/interfaces/StoreSlots.md

@@ -23,6 +23,13 @@ You can also use rxjs operators to handle the events.
 
 > **blockUpdated**: `Subject`\<`StoreBlockUpdatedPayloads`\>
 
+This fires when a block is updated via API call or has just been updated from existing ydoc.
+
+The payload can have three types:
+- add: When a new block is added
+- delete: When a block is removed
+- update: When a block's properties are modified
+
 ***
 
 ### historyUpdated