Update v0.4.5 in codemirror and quill example

yorkie-team · Jul 20, 2023 · 566bb1f · 566bb1f
1 parent ae78380
commit 566bb1f
Show file tree

Hide file tree

Showing 12 changed files with 199 additions and 110 deletions.
diff --git a/examples/profile-stack/main.js b/examples/profile-stack/main.js
@@ -7,16 +7,8 @@ async function main() {
   });
   await client.activate();
   const doc = new yorkie.Document('profile-stack');
-  doc.subscribe('my-presence', (event) => {
-    if (event.type === DocEventType.Initialized) {
-      displayPeerList(doc.getPresences(), client.getID());
-    }
-  });
-  doc.subscribe('others', (event) => {
-    if (
-      event.type === DocEventType.Watched ||
-      event.type === DocEventType.Unwatched
-    ) {
+  doc.subscribe('presence', (event) => {
+    if (event.type !== DocEventType.PresenceChanged) {
       displayPeerList(doc.getPresences(), client.getID());
     }
   });

diff --git a/examples/vanilla-codemirror6/package.json b/examples/vanilla-codemirror6/package.json
@@ -20,6 +20,6 @@
     "@codemirror/state": "^6.1.2",
     "@codemirror/view": "^6.3.1",
     "codemirror": "^6.0.1",
-    "yorkie-js-sdk": "^0.4.2"
+    "yorkie-js-sdk": "^0.4.5"
   }
 }
diff --git a/examples/vanilla-codemirror6/src/main.ts b/examples/vanilla-codemirror6/src/main.ts
@@ -1,5 +1,5 @@
 /* eslint-disable jsdoc/require-jsdoc */
-import yorkie, { type Text as YorkieText, OperationInfo } from 'yorkie-js-sdk';
+import yorkie, { DocEventType, OperationInfo } from 'yorkie-js-sdk';
 import { basicSetup, EditorView } from 'codemirror';
 import { keymap } from '@codemirror/view';
 import {
@@ -10,12 +10,9 @@ import {
 import { Transaction } from '@codemirror/state';
 import { network } from './network';
 import { displayLog, displayPeers } from './utils';
+import { YorkieDoc } from './type';
 import './style.css';
 
-type YorkieDoc = {
-  content: YorkieText;
-};
-
 const editorParentElem = document.getElementById('editor')!;
 const peersElem = document.getElementById('peers')!;
 const documentElem = document.getElementById('document')!;
@@ -32,13 +29,6 @@ async function main() {
   // subscribe peer change event
   client.subscribe((event) => {
     network.statusListener(networkStatusElem)(event);
-    if (event.type === 'peers-changed') {
-      displayPeers(
-        peersElem,
-        client.getPeersByDocKey(doc.getKey()),
-        client.getID()!,
-      );
-    }
   });
 
   // 02-1. create a document then attach it into the client.
@@ -48,6 +38,11 @@ async function main() {
       .substring(0, 10)
       .replace(/-/g, '')}`,
   );
+  doc.subscribe('presence', (event) => {
+    if (event.type !== DocEventType.PresenceChanged) {
+      displayPeers(peersElem, doc.getPresences(), client.getID()!);
+    }
+  });
   await client.attach(doc);
   doc.update((root) => {
     if (!root.content) {

diff --git a/examples/vanilla-codemirror6/src/network.ts b/examples/vanilla-codemirror6/src/network.ts
@@ -1,4 +1,10 @@
-import type { ClientEvent } from 'yorkie-js-sdk';
+import {
+  ClientEvent,
+  ClientEventType,
+  ClientStatus,
+  StreamConnectionStatus,
+  DocumentSyncResultType,
+} from 'yorkie-js-sdk';
 export const network = {
   isOnline: false,
   showOffline: (elem: HTMLElement) => {
@@ -13,20 +19,23 @@ export const network = {
     return (event: ClientEvent) => {
       if (
         network.isOnline &&
-        ((event.type == 'status-changed' && event.value == 'deactivated') ||
-          (event.type == 'stream-connection-status-changed' &&
-            event.value == 'disconnected') ||
-          (event.type == 'document-synced' && event.value == 'sync-failed'))
+        ((event.type == ClientEventType.StatusChanged &&
+          event.value == ClientStatus.Deactivated) ||
+          (event.type == ClientEventType.StreamConnectionStatusChanged &&
+            event.value == StreamConnectionStatus.Disconnected) ||
+          (event.type == ClientEventType.DocumentSynced &&
+            event.value == DocumentSyncResultType.SyncFailed))
       ) {
         network.showOffline(elem);
       } else if (
         !network.isOnline &&
-        ((event.type == 'status-changed' && event.value == 'activated') ||
-          (event.type == 'stream-connection-status-changed' &&
-            event.value == 'connected') ||
-          (event.type == 'document-synced' && event.value == 'synced') ||
-          event.type == 'peers-changed' ||
-          event.type == 'documents-changed')
+        ((event.type == ClientEventType.StatusChanged &&
+          event.value == ClientStatus.Activated) ||
+          (event.type == ClientEventType.StreamConnectionStatusChanged &&
+            event.value == StreamConnectionStatus.Connected) ||
+          (event.type == ClientEventType.DocumentSynced &&
+            event.value == DocumentSyncResultType.Synced) ||
+          event.type == ClientEventType.DocumentsChanged)
       ) {
         network.showOnline(elem);
       }

diff --git a/examples/vanilla-codemirror6/src/type.ts b/examples/vanilla-codemirror6/src/type.ts
@@ -0,0 +1,5 @@
+import { type Text } from 'yorkie-js-sdk';
+
+export type YorkieDoc = {
+  content: Text;
+};
diff --git a/examples/vanilla-codemirror6/src/utils.ts b/examples/vanilla-codemirror6/src/utils.ts
@@ -1,5 +1,6 @@
 /* eslint-disable jsdoc/require-jsdoc */
-import { Document, Indexable, Text } from 'yorkie-js-sdk';
+import { Document, Indexable } from 'yorkie-js-sdk';
+import { YorkieDoc } from './type';
 
 // function to display peers
 export function displayPeers(
@@ -15,11 +16,11 @@ export function displayPeers(
 }
 
 // function to display document content
-export function displayLog<T extends { content: Text }>(
+export function displayLog(
   elem: HTMLElement,
   textElem: HTMLElement,
-  doc: Document<T>,
+  doc: Document<YorkieDoc>,
 ) {
   elem.innerText = doc.toJSON();
-  textElem.innerText = doc.getRoot().content.getStructureAsString();
+  textElem.innerText = doc.getRoot().content.toTestString();
 }
diff --git a/examples/vanilla-quill/package.json b/examples/vanilla-quill/package.json
@@ -20,6 +20,6 @@
     "quill-cursors": "^4.0.0",
     "quill-delta": "^5.0.0",
     "short-unique-id": "^4.4.4",
-    "yorkie-js-sdk": "^0.4.2"
+    "yorkie-js-sdk": "^0.4.5"
   }
 }
diff --git a/examples/vanilla-quill/src/main.ts b/examples/vanilla-quill/src/main.ts
@@ -1,18 +1,15 @@
 /* eslint-disable jsdoc/require-jsdoc */
-import yorkie, { Text, Indexable, OperationInfo } from 'yorkie-js-sdk';
+import yorkie, { DocEventType, Indexable, OperationInfo } from 'yorkie-js-sdk';
 import Quill, { type DeltaOperation, type DeltaStatic } from 'quill';
 import QuillCursors from 'quill-cursors';
 import ShortUniqueId from 'short-unique-id';
 import ColorHash from 'color-hash';
 import { network } from './network';
 import { displayLog, displayPeers } from './utils';
+import { YorkieDoc, YorkiePresence } from './type';
 import 'quill/dist/quill.snow.css';
 import './style.css';
 
-type YorkieDoc = {
-  content: Text;
-};
-
 type TextValueType = {
   attributes?: Indexable;
   content?: string;
@@ -47,33 +44,28 @@ async function main() {
   // 01-1. create client with RPCAddr(envoy) then activate it.
   const client = new yorkie.Client(import.meta.env.VITE_YORKIE_API_ADDR, {
     apiKey: import.meta.env.VITE_YORKIE_API_KEY,
-    presence: {
-      username: `username-${shortUniqueID()}`,
-    },
   });
   await client.activate();
 
   // 01-2. subscribe client event.
   client.subscribe((event) => {
     network.statusListener(networkStatusElem)(event);
-    if (event.type !== 'peers-changed') return;
+  });
 
-    const { type, peers } = event.value;
-    if (type === 'unwatched') {
-      peers[doc.getKey()].map((peer) => {
-        cursors.removeCursor(peer.presence.username);
-      });
+  // 02-1. create a document then attach it into the client.
+  const doc = new yorkie.Document<YorkieDoc, YorkiePresence>(documentKey);
+  doc.subscribe('presence', (event) => {
+    if (event.type !== DocEventType.PresenceChanged) {
+      displayPeers(peersElem, doc.getPresences(), client.getID()!);
     }
-    displayPeers(
-      peersElem,
-      client.getPeersByDocKey(doc.getKey()),
-      client.getID()!,
-    );
   });
 
-  // 02-1. create a document then attach it into the client.
-  const doc = new yorkie.Document<YorkieDoc>(documentKey);
-  await client.attach(doc);
+  await client.attach(doc, {
+    initialPresence: {
+      username: `username-${shortUniqueID()}`,
+      selection: null,
+    },
+  });
 
   doc.update((root) => {
     if (!root.content) {
@@ -93,10 +85,37 @@ async function main() {
 
   doc.subscribe('$.content', (event) => {
     if (event.type === 'remote-change') {
-      const { actor, operations } = event.value;
-      handleOperations(operations, actor);
+      handleOperations(event.value.operations);
     }
   });
+  doc.subscribe('others', (event) => {
+    if (event.type === DocEventType.Unwatched) {
+      // TODO(chacha912): We don't know presence of unwatched client now.
+      // cursors.removeCursor(event.value.presence.username);
+    } else if (event.type === DocEventType.PresenceChanged) {
+      displayRemoteCursors([event.value]);
+    }
+  });
+
+  function displayRemoteCursors(
+    peers: Array<{ clientID: string; presence: YorkiePresence }>,
+  ) {
+    for (const peer of peers) {
+      const {
+        presence: { username, selection },
+      } = peer;
+      if (!selection) continue;
+      const [fromIdx, toIdx] = doc
+        .getRoot()
+        .content.posRangeToIndexRange(selection);
+
+      cursors.createCursor(username, username, colorHash.hex(username));
+      cursors.moveCursor(username, {
+        index: fromIdx,
+        length: toIdx - fromIdx,
+      });
+    }
+  }
 
   await client.sync();
 
@@ -149,7 +168,8 @@ async function main() {
             'color: green',
           );
 
-          doc.update((root) => {
+          doc.update((root, presence) => {
+            let range;
             if (op.attributes !== undefined && op.insert === undefined) {
               root.content.setStyle(from, to, op.attributes);
             } else if (op.insert !== undefined) {
@@ -158,22 +178,31 @@ async function main() {
               }
 
               if (typeof op.insert === 'object') {
-                root.content.edit(from, to, ' ', {
+                range = root.content.edit(from, to, ' ', {
                   embed: JSON.stringify(op.insert),
                   ...op.attributes,
                 });
               } else {
-                root.content.edit(from, to, op.insert, op.attributes);
+                range = root.content.edit(from, to, op.insert, op.attributes);
               }
               from = to + op.insert.length;
             }
+
+            range &&
+              presence.set({
+                selection: root.content.indexRangeToPosRange(range),
+              });
           }, `update style by ${client.getID()}`);
         } else if (op.delete !== undefined) {
           to = from + op.delete;
           console.log(`%c local: ${from}-${to}: ''`, 'color: green');
 
-          doc.update((root) => {
-            root.content.edit(from, to, '');
+          doc.update((root, presence) => {
+            const range = root.content.edit(from, to, '');
+            range &&
+              presence.set({
+                selection: root.content.indexRangeToPosRange(range),
+              });
           }, `update content by ${client.getID()}`);
         } else if (op.retain !== undefined) {
           from = to + op.retain;
@@ -186,24 +215,21 @@ async function main() {
         return;
       }
 
-      doc.update((root) => {
-        root.content.select(range.index, range.index + range.length);
+      doc.update((root, presence) => {
+        presence.set({
+          selection: root.content.indexRangeToPosRange([
+            range.index,
+            range.index + range.length,
+          ]),
+        });
       }, `update selection by ${client.getID()}`);
     });
 
   // 04-2. document to Quill(remote).
-  function handleOperations(
-    ops: Array<OperationInfo>,
-    actor: string | undefined,
-  ) {
+  function handleOperations(ops: Array<OperationInfo>) {
     const deltaOperations = [];
     let prevTo = 0;
     for (const op of ops) {
-      const actorName = client.getPeerPresence(
-        doc.getKey(),
-        `${actor}`,
-      )?.username;
-
       if (op.type === 'edit') {
         const from = op.from;
         const to = op.to;
@@ -249,17 +275,6 @@ async function main() {
 
           deltaOperations.push(op);
         }
-        prevTo = to;
-      } else if (actorName && op.type === 'select') {
-        const from = op.from;
-        const to = op.to;
-        const retainTo = to - from;
-        cursors.createCursor(actorName, actorName, colorHash.hex(actorName));
-        cursors.moveCursor(actorName, {
-          index: from,
-          length: retainTo,
-        });
-
         prevTo = to;
       }
     }
@@ -287,6 +302,7 @@ async function main() {
   }
 
   syncText();
+  displayRemoteCursors(doc.getPresences());
   displayLog(documentElem, documentTextElem, doc);
 }