Merge branch 'main' into apply-yorkie-ui

.env

@@ -1,10 +1,10 @@
 # Common Environment Variables
-NEXT_PUBLIC_YORKIE_VERSION='0.4.19'
-NEXT_PUBLIC_YORKIE_JS_VERSION='0.4.19'
+NEXT_PUBLIC_YORKIE_VERSION='0.4.23'
+NEXT_PUBLIC_YORKIE_JS_VERSION='0.4.23'
 NEXT_PUBLIC_YORKIE_IOS_VERSION='0.4.17'
 NEXT_PUBLIC_YORKIE_ANDROID_VERSION='0.4.16'
 NEXT_PUBLIC_DASHBOARD_PATH='/dashboard'
-NEXT_PUBLIC_JS_SDK_URL='https://cdnjs.cloudflare.com/ajax/libs/yorkie-js-sdk/0.4.19/yorkie-js-sdk.js'
+NEXT_PUBLIC_JS_SDK_URL='https://cdnjs.cloudflare.com/ajax/libs/yorkie-js-sdk/0.4.23/yorkie-js-sdk.js'
 
 # Development Environment Variables
 NEXT_PUBLIC_SITE_URL='http://localhost:3000'

MAINTAINING.md

@@ -1,15 +1,12 @@
-# Maintaining yorkie-ui
+# Maintaining
 
 ## Releasing a New Version
 
-### 1. Update the version number.
+### Updating and Deploying homepage
 
-- Update `version` in [package.json](https://github.com/yorkie-team/yorkie-ui/blob/main/package.json#L3).
-
-### 2. Create Pull Request and merge it into main.
-
-### 3. Publish a new release.
-
-Create [a new release](https://github.com/yorkie-team/yorkie-ui/releases/new) by attaching the changelog by clicking Generate release notes button.
-
-Then [GitHub action](https://github.com/yorkie-team/yorkie-ui/blob/main/.github/workflows/npm-publish.yml) will publish Yorkie UI to [npm](https://www.npmjs.com/package/yorkie-ui).
+1. Update `version` in [package.json](https://github.com/yorkie-team/yorkie-team.github.io/blob/main/package.json#L36).
+2. Update `NEXT_PUBLIC_YORKIE_VERSION`, `NEXT_PUBLIC_YORKIE_JS_VERSION`, and `NEXT_PUBLIC_JS_SDK_URL` in [.env](https://github.com/yorkie-team/yorkie-team.github.io/blob/34e382b81029c8cfb865bc549bdfe8a4cdd884b8/.env).
+3. Modify Yorkie [documentation](https://github.com/yorkie-team/yorkie-team.github.io/tree/main/docs) and add explanations as necessary.
+4. Run `npm install` and `npm run fetch:examples` to update the code on the [examples page](https://yorkie.dev/examples).
+5. Run `npm run build` and ensure there are no errors.
+6. Create Pull Request and merge it into main.

docs/js-sdk.mdx

@@ -140,33 +140,39 @@ Here is an example of showing a list of users participating in the collaborative
 
 ##### 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.
+This method allows you to subscribe to presence-related changes.
+
+You'll be notified whenever clients watch, unwatch, or modify their presence.
+
+The `initialized` event occurs when the client list needs to be initialized.
+For example, this happens when you first connect a watch stream to a document, when the connection is lost, or when it is reconnected.
+
+<Alert status="warning">
+Subscribe before attaching the document to ensure you receive the initial `initialized` event.
+</Alert>
 
 ```javascript
 const unsubscribe = doc.subscribe('presence', (event) => {
   if (event.type === 'initialized') {
-    // Array of other users currently participating in the document
-    // event.value;
+    // event.value: Array of users currently participating in the document
   }
 
   if (event.type === 'watched') {
-    // A user has joined the document editing in online
-    // event.value;
+    // event.value: A user has joined the document editing in online
   }
 
   if (event.type === 'unwatched') {
-    // A user has left the document editing
-    // event.value;
+    // event.value: A user has left the document editing
   }
 
   if (event.type === 'presence-changed') {
-    // A user has updated their presence 
-    // event.value;
+    // event.value: A user has updated their presence
   }
 });
 ```
 
+Use `my-presence` and `others` topics to distinguish between your own events and those of others.
+
 ##### 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.
@@ -241,14 +247,11 @@ Whenever the Document is modified, change events are triggered and we can subscr
 
 The callback is called with an event object, and the `event.type` property indicates the source of the change, which can be one of the following values: `local-change`, `remote-change`, or `snapshot`.
 
-When the `event.type` is `local-change` or `remote-change`, the `event.value` is a changeInfo, which has `{operations, message}` properties.
-
-For more information about changeInfo for document events, please refer to the [ChangeInfo](https://yorkie.dev/yorkie-js-sdk/api-reference/interfaces/ChangeInfo.html).
-
-
 ```javascript
 const unsubscribe = doc.subscribe((event) => {
-  if (event.type === 'local-change') {
+  if (event.type === 'snapshot') {
+    // Update with data from the Yorkie Document.
+  } else if (event.type === 'local-change') {
     console.log(event);
   } else if (event.type === 'remote-change') {
     // `message` delivered when calling document.update
@@ -266,6 +269,24 @@ const unsubscribe = doc.subscribe((event) => {
 });
 ```
 
+When the `event.type` is `local-change` or `remote-change`, the `event.value` is a changeInfo, which has `{operations, message}` properties.
+For more information about changeInfo for document events, please refer to the [ChangeInfo](https://yorkie.dev/yorkie-js-sdk/api-reference/interfaces/ChangeInfo.html).
+
+<Alert status="warning">
+The `event.rawChange` value for `local-change` and `remote-change` events, and the `event.value.snapshot` for `snapshot` event, are set only when [`enableDevtools`](/docs/devtools/#install-the-extension) option is configured as `true`.
+</Alert>
+
+The `snapshot` event is triggered when a snapshot is received from the server.
+This occurs when the changes that a document needs to fetch from the server exceed a certain `SnapshotThreshold`.
+Instead of sending numerous changes, the server sends a snapshot of the document.
+In such cases, it is essential to update with data from the Yorkie Document.
+Refer to the [example code](https://github.com/yorkie-team/yorkie-js-sdk/blob/9c7accdfe337b9c9e7c7d0d3b3acc335951866ce/public/index.html#L346-L350) for handling snapshots in CodeMirror.
+
+<Alert status="warning">
+If a client has not synchronized for a prolonged period and then makes a sync request, it might receive a `snapshot` event.
+Ensure your application processes these snapshot events correctly to maintain document synchronization.
+</Alert>
+
 ##### 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.
@@ -317,8 +338,6 @@ You can subscribe to all events occurring in the document by using `document.sub
 
 Events received from the callback function are of type `TransactionEvent`, which is an `Array<DocEvent>`. 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) {