Modify Snapshot Event to publish updated local changes

examples/vanilla-codemirror6/src/main.ts

@@ -1,17 +1,17 @@
 /* eslint-disable jsdoc/require-jsdoc */
 import yorkie, { DocEventType } from 'yorkie-js-sdk';
-import type { TextOperationInfo, EditOpInfo } from 'yorkie-js-sdk';
+import type { EditOpInfo, OperationInfo } from 'yorkie-js-sdk';
 import { basicSetup, EditorView } from 'codemirror';
 import { keymap } from '@codemirror/view';
 import {
   markdown,
   markdownKeymap,
   markdownLanguage,
 } from '@codemirror/lang-markdown';
-import { Transaction } from '@codemirror/state';
+import { Transaction, TransactionSpec } from '@codemirror/state';
 import { network } from './network';
 import { displayLog, displayPeers } from './utils';
-import { YorkieDoc } from './type';
+import { YorkieDoc, YorkiePresence } from './type';
 import './style.css';
 
 const editorParentElem = document.getElementById('editor')!;
@@ -28,7 +28,7 @@ async function main() {
   await client.activate();
 
   // 02-1. create a document then attach it into the client.
-  const doc = new yorkie.Document<YorkieDoc>(
+  const doc = new yorkie.Document<YorkieDoc, YorkiePresence>(
     `codemirror6-${new Date()
       .toISOString()
       .substring(0, 10)
@@ -55,10 +55,21 @@ async function main() {
   // 02-2. subscribe document event.
   const syncText = () => {
     const text = doc.getRoot().content;
-    view.dispatch({
+    const selection = doc.getMyPresence().selection;
+    const transactionSpec: TransactionSpec = {
       changes: { from: 0, to: view.state.doc.length, insert: text.toString() },
       annotations: [Transaction.remote.of(true)],
-    });
+    };
+
+    if (selection) {
+      // Restore the cursor position when the text is replaced.
+      const cursor = text.posRangeToIndexRange(selection);
+      transactionSpec['selection'] = {
+        anchor: cursor[0],
+        head: cursor[1],
+      };
+    }
+    view.dispatch(transactionSpec);
   };
   doc.subscribe((event) => {
     if (event.type === 'snapshot') {
@@ -98,6 +109,32 @@ async function main() {
         });
       }
     }
+
+    const hasFocus =
+      viewUpdate.view.hasFocus && viewUpdate.view.dom.ownerDocument.hasFocus();
+    const sel = hasFocus ? viewUpdate.state.selection.main : null;
+
+    doc.update((root, presence) => {
+      if (sel && root.content) {
+        const selection = root.content.indexRangeToPosRange([
+          sel.anchor,
+          sel.head,
+        ]);
+
+        if (
+          JSON.stringify(selection) !==
+          JSON.stringify(presence.get('selection'))
+        ) {
+          presence.set({
+            selection,
+          });
+        }
+      } else if (presence.get('selection')) {
+        presence.set({
+          selection: undefined,
+        });
+      }
+    });
   });
 
   // 03-2. create codemirror instance
@@ -113,7 +150,7 @@ async function main() {
   });
 
   // 03-3. define event handler that apply remote changes to local
-  function handleOperations(operations: Array<TextOperationInfo>) {
+  function handleOperations(operations: Array<OperationInfo>) {
     for (const op of operations) {
       if (op.type === 'edit') {
         handleEditOp(op);

examples/vanilla-codemirror6/src/type.ts

@@ -1,5 +1,9 @@
-import { type Text } from 'yorkie-js-sdk';
+import { TextPosStructRange, type Text } from 'yorkie-js-sdk';
 
 export type YorkieDoc = {
   content: Text;
 };
+
+export type YorkiePresence = {
+  selection?: TextPosStructRange;
+};

packages/sdk/src/document/document.ts

@@ -1180,11 +1180,26 @@ export class Document<T, P extends Indexable = Indexable> {
     }
 
     // NOTE(hackerwins): If the document has local changes, we need to apply
-    // them after applying the snapshot. We need to treat the local changes
-    // as remote changes because the application should apply the local
-    // changes to their own document.
+    // them after applying the snapshot, as local changes are not included in the snapshot data.
+    // Afterward, we should publish a snapshot event with the latest
+    // version of the document to ensure the user receives the most up-to-date snapshot.
     if (hasSnapshot) {
-      this.applyChanges(this.localChanges, OpSource.Remote);
+      this.applyChanges(this.localChanges, OpSource.Local);
+      this.publish([
+        {
+          type: DocEventType.Snapshot,
+          source: OpSource.Remote,
+          value: {
+            serverSeq: pack.getCheckpoint().getServerSeq().toString(),
+            snapshot: this.isEnableDevtools()
+              ? converter.bytesToHex(pack.getSnapshot()!)
+              : undefined,
+            snapshotVector: converter.versionVectorToHex(
+              pack.getVersionVector()!,
+            ),
+          },
+        },
+      ]);
     }
 
     // 03. Update the checkpoint.
@@ -1420,20 +1435,6 @@ export class Document<T, P extends Indexable = Indexable> {
 
     // drop clone because it is contaminated.
     this.clone = undefined;
-
-    this.publish([
-      {
-        type: DocEventType.Snapshot,
-        source: OpSource.Remote,
-        value: {
-          serverSeq: serverSeq.toString(),
-          snapshot: this.isEnableDevtools()
-            ? converter.bytesToHex(snapshot)
-            : undefined,
-          snapshotVector: converter.versionVectorToHex(snapshotVector),
-        },
-      },
-    ]);
   }
 
   /**