Skip to content

Commit 540dbf8

Browse files
nperez0111nperez0111
authored
feat: change event allows getting a list of the block changed (#1585)
This adds a callback function to compute the changes that were made by a transaction and return the blocks that were updated in that transaction
1 parent 97c3dc7 commit 540dbf8

20 files changed

+1337
-20
lines changed

‎docs/pages/docs/editor-api/events.mdx

+55-3
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,64 @@ editor.onCreate(() => {
2626
The `onChange` callback is called when the editor content changes.
2727

2828
```typescript
29-
editor.onChange(() => {
29+
editor.onChange((editor, { getChanges }) => {
3030
console.log("Editor updated");
31+
const changes = getChanges();
32+
console.log(changes);
3133
});
3234
```
3335

36+
You can see what specific changes occurred in the editor by calling `getChanges()` in the callback. This function returns an array of block changes which looks like:
37+
38+
```typescript
39+
/**
40+
* The changes that occurred in the editor.
41+
*/
42+
type BlocksChanged = Array<
43+
| {
44+
// The affected block
45+
block: Block;
46+
// The source of the change
47+
source: BlockChangeSource;
48+
type: "insert" | "delete";
49+
// Insert and delete changes don't have a previous block
50+
prevBlock: undefined;
51+
}
52+
| {
53+
// The affected block
54+
block: Block;
55+
// The source of the change
56+
source: BlockChangeSource;
57+
type: "update";
58+
// The block before the update
59+
prevBlock: Block;
60+
}
61+
)>;
62+
63+
/**
64+
* This attributes the changes to a specific source.
65+
*/
66+
type BlockChangeSource = {
67+
/**
68+
* The type of change source:
69+
* - "local": Triggered by local user (default)
70+
* - "paste": From paste operation
71+
* - "drop": From drop operation
72+
* - "undo"/"redo"/"undo-redo": From undo/redo operations
73+
* - "yjs-remote": From remote user
74+
*/
75+
type:
76+
| "local"
77+
| "paste"
78+
| "drop"
79+
| "undo"
80+
| "redo"
81+
| "undo-redo"
82+
| "yjs-remote";
83+
};
84+
```
85+
86+
3487
## `onSelectionChange`
3588

3689
The `onSelectionChange` callback is called when the editor selection changes.
@@ -39,5 +92,4 @@ The `onSelectionChange` callback is called when the editor selection changes.
3992
editor.onSelectionChange(() => {
4093
console.log("Editor selection changed");
4194
});
42-
```
43-
95+
```

‎packages/core/src/api/__snapshots__/blocks-deleted-nested-deep.json

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
[
2+
{
3+
"block": {
4+
"children": [],
5+
"content": [
6+
{
7+
"styles": {},
8+
"text": "Double Nested Paragraph 0",
9+
"type": "text",
10+
},
11+
],
12+
"id": "double-nested-paragraph-0",
13+
"props": {
14+
"backgroundColor": "default",
15+
"textAlignment": "left",
16+
"textColor": "default",
17+
},
18+
"type": "paragraph",
19+
},
20+
"prevBlock": undefined,
21+
"source": {
22+
"type": "local",
23+
},
24+
"type": "delete",
25+
},
26+
]

‎packages/core/src/api/__snapshots__/blocks-deleted-nested.json

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
[
2+
{
3+
"block": {
4+
"children": [
5+
{
6+
"children": [],
7+
"content": [
8+
{
9+
"styles": {},
10+
"text": "Double Nested Paragraph 0",
11+
"type": "text",
12+
},
13+
],
14+
"id": "double-nested-paragraph-0",
15+
"props": {
16+
"backgroundColor": "default",
17+
"textAlignment": "left",
18+
"textColor": "default",
19+
},
20+
"type": "paragraph",
21+
},
22+
],
23+
"content": [
24+
{
25+
"styles": {},
26+
"text": "Nested Paragraph 0",
27+
"type": "text",
28+
},
29+
],
30+
"id": "nested-paragraph-0",
31+
"props": {
32+
"backgroundColor": "default",
33+
"textAlignment": "left",
34+
"textColor": "default",
35+
},
36+
"type": "paragraph",
37+
},
38+
"prevBlock": undefined,
39+
"source": {
40+
"type": "local",
41+
},
42+
"type": "delete",
43+
},
44+
{
45+
"block": {
46+
"children": [],
47+
"content": [
48+
{
49+
"styles": {},
50+
"text": "Double Nested Paragraph 0",
51+
"type": "text",
52+
},
53+
],
54+
"id": "double-nested-paragraph-0",
55+
"props": {
56+
"backgroundColor": "default",
57+
"textAlignment": "left",
58+
"textColor": "default",
59+
},
60+
"type": "paragraph",
61+
},
62+
"prevBlock": undefined,
63+
"source": {
64+
"type": "local",
65+
},
66+
"type": "delete",
67+
},
68+
]

‎packages/core/src/api/__snapshots__/blocks-deleted.json

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
[
2+
{
3+
"block": {
4+
"children": [],
5+
"content": [
6+
{
7+
"styles": {},
8+
"text": "Paragraph 0",
9+
"type": "text",
10+
},
11+
],
12+
"id": "paragraph-0",
13+
"props": {
14+
"backgroundColor": "default",
15+
"textAlignment": "left",
16+
"textColor": "default",
17+
},
18+
"type": "paragraph",
19+
},
20+
"prevBlock": undefined,
21+
"source": {
22+
"type": "local",
23+
},
24+
"type": "delete",
25+
},
26+
]

‎packages/core/src/api/__snapshots__/blocks-inserted-nested.json

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
[
2+
{
3+
"block": {
4+
"children": [
5+
{
6+
"children": [],
7+
"content": [
8+
{
9+
"styles": {},
10+
"text": "Nested",
11+
"type": "text",
12+
},
13+
],
14+
"id": "1",
15+
"props": {
16+
"backgroundColor": "default",
17+
"textAlignment": "left",
18+
"textColor": "default",
19+
},
20+
"type": "paragraph",
21+
},
22+
],
23+
"content": [],
24+
"id": "0",
25+
"props": {
26+
"backgroundColor": "default",
27+
"textAlignment": "left",
28+
"textColor": "default",
29+
},
30+
"type": "paragraph",
31+
},
32+
"prevBlock": undefined,
33+
"source": {
34+
"type": "local",
35+
},
36+
"type": "insert",
37+
},
38+
{
39+
"block": {
40+
"children": [],
41+
"content": [
42+
{
43+
"styles": {},
44+
"text": "Nested",
45+
"type": "text",
46+
},
47+
],
48+
"id": "1",
49+
"props": {
50+
"backgroundColor": "default",
51+
"textAlignment": "left",
52+
"textColor": "default",
53+
},
54+
"type": "paragraph",
55+
},
56+
"prevBlock": undefined,
57+
"source": {
58+
"type": "local",
59+
},
60+
"type": "insert",
61+
},
62+
]

‎packages/core/src/api/__snapshots__/blocks-inserted.json

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
[
2+
{
3+
"block": {
4+
"children": [],
5+
"content": [],
6+
"id": "0",
7+
"props": {
8+
"backgroundColor": "default",
9+
"textAlignment": "left",
10+
"textColor": "default",
11+
},
12+
"type": "paragraph",
13+
},
14+
"prevBlock": undefined,
15+
"source": {
16+
"type": "local",
17+
},
18+
"type": "insert",
19+
},
20+
]

‎packages/core/src/api/__snapshots__/blocks-updated-content-inserted.json

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
[
2+
{
3+
"block": {
4+
"children": [],
5+
"content": [
6+
{
7+
"styles": {},
8+
"text": "HelloParagraph 2",
9+
"type": "text",
10+
},
11+
],
12+
"id": "paragraph-2",
13+
"props": {
14+
"backgroundColor": "default",
15+
"textAlignment": "left",
16+
"textColor": "default",
17+
},
18+
"type": "paragraph",
19+
},
20+
"prevBlock": {
21+
"children": [],
22+
"content": [
23+
{
24+
"styles": {},
25+
"text": "Paragraph 2",
26+
"type": "text",
27+
},
28+
],
29+
"id": "paragraph-2",
30+
"props": {
31+
"backgroundColor": "default",
32+
"textAlignment": "left",
33+
"textColor": "default",
34+
},
35+
"type": "paragraph",
36+
},
37+
"source": {
38+
"type": "local",
39+
},
40+
"type": "update",
41+
},
42+
]

‎packages/core/src/api/__snapshots__/blocks-updated-multiple-insert.json

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
[
2+
{
3+
"block": {
4+
"children": [],
5+
"content": [
6+
{
7+
"styles": {},
8+
"text": "ABC",
9+
"type": "text",
10+
},
11+
],
12+
"id": "0",
13+
"props": {
14+
"backgroundColor": "default",
15+
"textAlignment": "left",
16+
"textColor": "default",
17+
},
18+
"type": "paragraph",
19+
},
20+
"prevBlock": undefined,
21+
"source": {
22+
"type": "local",
23+
},
24+
"type": "insert",
25+
},
26+
{
27+
"block": {
28+
"children": [],
29+
"content": [
30+
{
31+
"styles": {},
32+
"text": "DEF",
33+
"type": "text",
34+
},
35+
],
36+
"id": "1",
37+
"props": {
38+
"backgroundColor": "default",
39+
"textAlignment": "left",
40+
"textColor": "default",
41+
},
42+
"type": "paragraph",
43+
},
44+
"prevBlock": undefined,
45+
"source": {
46+
"type": "local",
47+
},
48+
"type": "insert",
49+
},
50+
]

0 commit comments

Comments
 (0)