Bump up Yorkie to v0.5.3 (#293)

* Bump up Yorkie to v0.5.2

* Bump up Yorkie to v0.5.3

package.json

@@ -69,7 +69,7 @@
     "remark-toc": "^8.0.1",
     "tss-react": "^4.8.2",
     "unique-names-generator": "^4.7.1",
-    "yorkie-js-sdk": "^0.4.13"
+    "yorkie-js-sdk": "^0.5.3"
   },
   "devDependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",

src/components/Editor/index.tsx

@@ -21,6 +21,7 @@ import {
 import { makeStyles } from 'styles/common';
 import { Presence, syncPeer } from 'features/peerSlices';
 import { Alert, Box, CircularProgress, Snackbar } from '@mui/material';
+import { StreamConnectionStatus } from 'yorkie-js-sdk';
 import WhiteBoardEditor from './mime/application/whiteboard/Editor';
 import Editor from './mime/text/md/Editor';
 
@@ -84,21 +85,10 @@ export default function BaseEditor(props: { docKey: string }) {
       return;
     }
 
-    const unsubscribeClient = client.subscribe((event) => {
-      if (
-        status === DocStatus.Connect &&
-        ((event.type === 'status-changed' && event.value === 'deactivated') ||
-          (event.type === 'stream-connection-status-changed' && event.value === 'disconnected') ||
-          (event.type === 'document-synced' && event.value === 'sync-failed'))
-      ) {
+    const unsubscribeClient = doc.subscribe('connection', (event) => {
+      if (status === DocStatus.Connect && event.value === StreamConnectionStatus.Disconnected) {
         dispatch(setStatus(DocStatus.Disconnect));
-      } else if (
-        status === DocStatus.Disconnect &&
-        (event.type === 'document-changed' ||
-          (event.type === 'status-changed' && event.value === 'activated') ||
-          (event.type === 'stream-connection-status-changed' && event.value === 'connected') ||
-          (event.type === 'document-synced' && event.value === 'synced'))
-      ) {
+      } else if (status === DocStatus.Disconnect && event.value === StreamConnectionStatus.Connected) {
         dispatch(setStatus(DocStatus.Connect));
       }
     });

src/components/Editor/mime/text/md/CodeEditor/index.tsx

@@ -5,7 +5,7 @@
 import React, { useEffect, useMemo, useRef, useCallback, useState, MouseEvent } from 'react';
 import { createRoot } from 'react-dom/client';
 import { useDispatch, useSelector } from 'react-redux';
-import { ActorID, DocEvent, OperationInfo } from 'yorkie-js-sdk';
+import { ActorID, OperationInfo } from 'yorkie-js-sdk';
 import CodeMirror from 'codemirror';
 import SimpleMDE from 'easymde';
 import SimpleMDEReact from 'react-simplemde-editor';
@@ -690,7 +690,7 @@ export default function CodeEditor() {
       }
     };
 
-    doc.subscribe((event: DocEvent) => {
+    doc.subscribe((event) => {
       if (event.type === 'snapshot') {
         // re-sync for the new text from the snapshot
         setText();

src/features/peerSlices.ts

@@ -10,6 +10,7 @@ export interface Presence {
   board: string;
   whiteboardUser?: TDUser;
   selection: any; // TODO(chacha912): Import type from yorkie-js-sdk
+  [key: string]: any; // NOTE(hackerwins): Quick fix for Indexable.
 }
 
 export enum ConnectionStatus {