diff --git a/docs/devtools.mdx b/docs/devtools.mdx
index 051d8bd..cf68005 100644
--- a/docs/devtools.mdx
+++ b/docs/devtools.mdx
@@ -16,11 +16,19 @@ Once installed, you'll find the `Yorkie🐾` panel within Chrome Developer Tools
-Please note that the devtools is available only in yorkie-js-sdk version `0.4.13` or later for development builds.
+To use devtools, you need to set the `enableDevtools` option when creating the Document.
+
+```javascript
+const doc = new yorkie.Document('docKey', {
+ enableDevtools: true, // Adjust the condition according to your situation
+});
+```
+
+Please note that the devtools is available only in yorkie-js-sdk version `0.4.18` or later.
### Key Features
-Within the `Yorkie 🐾` panel, on the left, you will see the `Document` pane, and on the right, there is the `Presence` pane.
+Within the `Yorkie 🐾` panel, you will find the `History` panel at the top, the `Document` panel at the bottom left, and the `Presence` panel at the bottom right.
#### Document pane
@@ -51,3 +59,20 @@ Within the `Yorkie 🐾` panel, on the left, you will see the `Document` pane, a
+
+#### History pane
+
+| Event Type | Document | Presence |
+| :------: | :------: | :------: |
+| Local Change | | |
+| Remote Change | | |
+
+- Observe events occurring within the document.
+ - Local changes are highlighted in yellow, remote changes in blue, presence changes are represented by cursor icons and document changes are indicated by document-shaped icons.
+- Easily debug through time-travel and replay.
+ - Move the slider and click on an event to check event details and see how the document has changed.
+ - Convenient navigation is possible using the arrow buttons at the top right or using the directional keys.
+
+
diff --git a/docs/js-sdk.mdx b/docs/js-sdk.mdx
index 66b66eb..7d80e66 100644
--- a/docs/js-sdk.mdx
+++ b/docs/js-sdk.mdx
@@ -156,64 +156,64 @@ for (const { clientID, presence } of users ) {
Here is an example of showing a list of users participating in the collaborative application.
- [Profile Stack](/examples/profile-stack)
-##### Document.subscribe("presence")
+##### Document.subscribe('presence')
This method allows you to subscribe to all presence-related changes.
By subscribing to these events, you can be notified when specific changes occur within the document, such as clients attaching, detaching, or modifying their presence.
```javascript
-const unsubscribe = doc.subscribe("presence", (event) => {
- if (event.type === "initialized") {
+const unsubscribe = doc.subscribe('presence', (event) => {
+ if (event.type === 'initialized') {
// Array of other users currently participating in the document
// event.value;
}
- if (event.type === "watched") {
+ if (event.type === 'watched') {
// A user has joined the document editing in online
// event.value;
}
- if (event.type === "unwatched") {
+ if (event.type === 'unwatched') {
// A user has left the document editing
// event.value;
}
- if (event.type === "presence-changed") {
+ if (event.type === 'presence-changed') {
// A user has updated their presence
// event.value;
}
});
```
-##### Document.subscribe("my-presence")
+##### Document.subscribe('my-presence')
This method is specifically for subscribing to changes in the presence of the current client that has attached to the document.
The possible event.type are: `initialized`, `presence-changed`.
```javascript
-const unsubscribe = doc.subscribe("my-presence", (event) => {
+const unsubscribe = doc.subscribe('my-presence', (event) => {
// Do something
});
```
-##### Document.subscribe("others")
+##### Document.subscribe('others')
This method enables you to subscribe to changes in the presence of other clients participating in the document.
The possible event.type are: `watched`, `unwatched`, `presence-changed`.
```javascript
-const unsubscribe = doc.subscribe("others", (event) => {
- if (event.type === "watched") {
+const unsubscribe = doc.subscribe('others', (event) => {
+ if (event.type === 'watched') {
addUser(event.value);
}
- if (event.type === "unwatched") {
+ if (event.type === 'unwatched') {
removeUser(event.value);
}
- if (event.type === "presence-changed") {
+ if (event.type === 'presence-changed') {
updateUser(event.value);
}
});
@@ -284,7 +284,7 @@ const unsubscribe = doc.subscribe((event) => {
});
```
-##### Document.subscribe("$.path")
+##### Document.subscribe('$.path')
Additionally, you can subscribe to changes for a specific path in the Document using `doc.subscribe(path, callback)` with a path argument, such as `$.todos`, where the `$` sign indicates the root of the document.
The callback function is called when the target path and its nested values are changed.
@@ -299,6 +299,22 @@ const unsubscribe = doc.subscribe('$.todos', (event) => {
});
```
+##### Document.subscribe('all')
+
+You can subscribe to all events occurring in the document by using `document.subscribe('all', callback)`. This is used for displaying events in [Devtools extension](/docs/devtools).
+
+Events received from the callback function are of type `TransactionEvent`, which is an `Array`. TransactionEvent represents a collection of events occurring within a single transaction (e.g., `doc.update()`).
+
+The `event.rawChange` value for `local-change` and `remote-change` events, and the `event.value.snapshot` for `snapshot` event, are set only when `enableDevtools` option is configured as `true`.
+
+```javascript
+const unsubscribe = doc.subscribe('all', (transactionEvent) => {
+ for (const docEvent of transactionEvent) {
+ console.log(docEvent);
+ }
+});
+```
+
#### Changing Synchronization Mode
To change the synchronization mode for a document, you can use `client.changeSyncMode(doc, syncMode)`.
diff --git a/public/assets/images/docs/devtools-event-local-document.png b/public/assets/images/docs/devtools-event-local-document.png
new file mode 100644
index 0000000..6ac5d75
Binary files /dev/null and b/public/assets/images/docs/devtools-event-local-document.png differ
diff --git a/public/assets/images/docs/devtools-event-local-presence.png b/public/assets/images/docs/devtools-event-local-presence.png
new file mode 100644
index 0000000..8163881
Binary files /dev/null and b/public/assets/images/docs/devtools-event-local-presence.png differ
diff --git a/public/assets/images/docs/devtools-event-remote-document.png b/public/assets/images/docs/devtools-event-remote-document.png
new file mode 100644
index 0000000..411b470
Binary files /dev/null and b/public/assets/images/docs/devtools-event-remote-document.png differ
diff --git a/public/assets/images/docs/devtools-event-remote-presence.png b/public/assets/images/docs/devtools-event-remote-presence.png
new file mode 100644
index 0000000..a81887a
Binary files /dev/null and b/public/assets/images/docs/devtools-event-remote-presence.png differ
diff --git a/public/assets/images/docs/devtools-history.mov b/public/assets/images/docs/devtools-history.mov
new file mode 100644
index 0000000..270fe8e
Binary files /dev/null and b/public/assets/images/docs/devtools-history.mov differ
diff --git a/public/assets/images/docs/devtools.png b/public/assets/images/docs/devtools.png
index cc16616..8330895 100644
Binary files a/public/assets/images/docs/devtools.png and b/public/assets/images/docs/devtools.png differ