diff --git a/src/application/awareness/dispatch.ts b/src/application/awareness/dispatch.ts
index 4ed64c61..46328ca6 100644
--- a/src/application/awareness/dispatch.ts
+++ b/src/application/awareness/dispatch.ts
@@ -1,5 +1,6 @@
 import dayjs from 'dayjs';
-import { useCallback, useRef } from 'react';
+import { debounce } from 'lodash-es';
+import { useCallback, useMemo, useRef } from 'react';
 import { Editor } from 'slate';
 import { Awareness } from 'y-protocols/awareness';
 
@@ -105,6 +106,10 @@ export function useDispatchCursorAwareness(awareness?: Awareness) {
     }
   }, [awareness]);
 
+  const debounceSyncCursor = useMemo(() => {
+    return debounce(syncCursor, 100);
+  }, [syncCursor]);
+
   const dispatchCursor = useCallback(
     (userParams: UserAwarenessParams, editor?: Editor) => {
       if (!awareness || !editor) return;
@@ -114,45 +119,9 @@ export function useDispatchCursorAwareness(awareness?: Awareness) {
       editorRef.current = editor;
 
       // Initial sync
-      syncCursor();
-
-      // Log cursor awareness setup
-      console.log('🚀 Cursor awareness set up for user:', {
-        uid: userParams.uid,
-        device_id: userParams.device_id,
-        user_name: userParams.user_name,
-      });
-
-      // Set up onChange handler with debounce
-      let timeoutId: NodeJS.Timeout;
-
-      const originalOnChange = editor.onChange;
-
-      editor.onChange = (value) => {
-        // Call original onChange
-        if (originalOnChange) {
-          originalOnChange(value);
-        }
-
-        // For selection changes, we just need to sync the cursor
-        // The onChange is called whenever the editor state changes
-        clearTimeout(timeoutId);
-        timeoutId = setTimeout(() => {
-          syncCursor();
-        }, 100);
-      };
-
-      // Return cleanup function
-      return () => {
-        clearTimeout(timeoutId);
-        // Restore original onChange
-        editor.onChange = originalOnChange;
-
-        // Log cleanup
-        console.log('🧹 Cursor awareness cleaned up for user:', userParams.uid);
-      };
+      debounceSyncCursor();
     },
-    [awareness, syncCursor]
+    [awareness, debounceSyncCursor]
   );
 
   return dispatchCursor;
diff --git a/src/application/awareness/selector.ts b/src/application/awareness/selector.ts
index 320399c3..fe7a419b 100644
--- a/src/application/awareness/selector.ts
+++ b/src/application/awareness/selector.ts
@@ -18,9 +18,6 @@ export function useUsersSelector(awareness?: Awareness) {
     const renderUsers = () => {
       const states = awareness?.getStates() as Map<number, AwarenessState>;
 
-      // Log the raw awareness states map for debugging
-      console.log('👥 Raw awareness states map:', states);
-
       const users: AwarenessUser[] = [];
 
       states?.forEach((state) => {
@@ -45,7 +42,7 @@ export function useUsersSelector(awareness?: Awareness) {
         uniqBy(
           users.sort((a, b) => b.timestamp - a.timestamp),
           'uid'
-        )
+        ).filter((user) => !!user.name)
       );
     };
 
@@ -66,10 +63,6 @@ export function useRemoteSelectionsSelector(awareness?: Awareness) {
   useEffect(() => {
     const renderCursors = () => {
       const states = awareness?.getStates() as Map<number, AwarenessState>;
-
-      // Log the raw awareness states map for cursor processing
-      console.log('🎯 Raw awareness states map for cursors:', states);
-
       const cursors: Cursor[] = [];
 
       states?.forEach((state, clientId) => {
diff --git a/src/application/database-yjs/context.ts b/src/application/database-yjs/context.ts
index 4763e34d..b64dfad4 100644
--- a/src/application/database-yjs/context.ts
+++ b/src/application/database-yjs/context.ts
@@ -53,6 +53,7 @@ export interface DatabaseContextState {
   loadDatabasePrompts?: LoadDatabasePrompts;
   testDatabasePromptConfig?: TestDatabasePromptConfig;
   requestInstance?: AxiosInstance | null;
+  checkIfRowDocumentExists?: (documentId: string) => Promise<void>;
 }
 
 export const DatabaseContext = createContext<DatabaseContextState | null>(null);
diff --git a/src/application/database-yjs/group.ts b/src/application/database-yjs/group.ts
index e6ff8692..e4590094 100644
--- a/src/application/database-yjs/group.ts
+++ b/src/application/database-yjs/group.ts
@@ -135,7 +135,7 @@ export function groupBySelectOption(
       return;
     }
 
-    const cellData = getCellData(row.id, fieldId, rowMetas);
+    const cellData = getCellData(row.id, fieldId, rowMetas) || '';
 
     const selectedIds = (cellData as string)?.split(',') ?? [];
 
diff --git a/src/application/database-yjs/selector.ts b/src/application/database-yjs/selector.ts
index 4d2ea38b..2fb9b5e0 100644
--- a/src/application/database-yjs/selector.ts
+++ b/src/application/database-yjs/selector.ts
@@ -584,6 +584,7 @@ export function useRowsByGroup(groupId: string) {
   const { columns, fieldId } = useGroup(groupId);
   const rows = useRowDocMap();
   const rowOrders = useRowOrdersSelector();
+
   const [visibleColumns, setVisibleColumns] = useState<GroupColumn[]>([]);
 
   const fields = useDatabaseFields();
@@ -607,7 +608,6 @@ export function useRowsByGroup(groupId: string) {
         return;
       }
 
-
       const fieldType = Number(field.get(YjsDatabaseKey.type)) as FieldType;
 
       if (![FieldType.SingleSelect, FieldType.MultiSelect, FieldType.Checkbox].includes(fieldType)) {
@@ -615,7 +615,7 @@ export function useRowsByGroup(groupId: string) {
         setGroupResult(newResult);
         return;
       }
-      
+
       const filter = filters?.toArray().find((filter) => filter.get(YjsDatabaseKey.field_id) === fieldId);
 
       const groupResult = groupByField(rowOrders, rows, field, filter);
@@ -632,9 +632,24 @@ export function useRowsByGroup(groupId: string) {
 
     fields.observeDeep(onConditionsChange);
     filters?.observeDeep(onConditionsChange);
+
+    const debouncedConditionsChange = debounce(onConditionsChange, 150);
+
+    const observerRowsEvent = () => {
+      debouncedConditionsChange();
+    };
+
+    Object.values(rows).forEach((row) => {
+      row.getMap(YjsEditorKey.data_section).observeDeep(observerRowsEvent);
+    });
     return () => {
+      debouncedConditionsChange.cancel();
+
       fields.unobserveDeep(onConditionsChange);
       filters?.unobserveDeep(onConditionsChange);
+      Object.values(rows).forEach((row) => {
+        row.getMap(YjsEditorKey.data_section).unobserveDeep(observerRowsEvent);
+      });
     };
   }, [fieldId, fields, rowOrders, rows, filters]);
 
diff --git a/src/application/services/js-services/http/http_api.ts b/src/application/services/js-services/http/http_api.ts
index 5db0dd48..70c289c3 100644
--- a/src/application/services/js-services/http/http_api.ts
+++ b/src/application/services/js-services/http/http_api.ts
@@ -2135,3 +2135,21 @@ export async function addRecentPages(workspaceId: string, viewIds: string[]) {
 
   return Promise.reject(response?.data);
 }
+
+export async function checkIfCollabExists(workspaceId: string, objectId: string) {
+  const url = `/api/workspace/${workspaceId}/collab/${objectId}/row-document-collab-exists`;
+
+  const response = await axiosInstance?.get<{
+    code: number;
+    message: string;
+    data: {
+      exists: boolean;
+    };
+  }>(url);
+
+  if (response?.data.code === 0 && response?.data.data.exists === true) {
+    return;
+  }
+
+  return Promise.reject(response?.data);
+}
diff --git a/src/application/services/js-services/index.ts b/src/application/services/js-services/index.ts
index 38af85d3..8ef241b8 100644
--- a/src/application/services/js-services/index.ts
+++ b/src/application/services/js-services/index.ts
@@ -201,6 +201,10 @@ export class AFClientService implements AFService {
     return deleteRowDoc(rowKey);
   }
 
+  async checkIfCollabExists(workspaceId: string, objectId: string) {
+    return APIService.checkIfCollabExists(workspaceId, objectId);
+  }
+
   async getAppDatabaseViewRelations(workspaceId: string, databaseStorageId: string) {
     const res = await APIService.getCollab(workspaceId, databaseStorageId, Types.WorkspaceDatabase);
     const doc = new Y.Doc();
diff --git a/src/application/services/services.type.ts b/src/application/services/services.type.ts
index 361fcf22..4b091c11 100644
--- a/src/application/services/services.type.ts
+++ b/src/application/services/services.type.ts
@@ -1,57 +1,58 @@
-import {
-  Invitation,
-  DuplicatePublishView,
-  FolderView,
-  User,
-  UserWorkspaceInfo,
-  View,
-  Workspace,
-  YDoc,
-  DatabaseRelations,
-  GetRequestAccessInfoResponse,
-  Subscriptions,
-  SubscriptionPlan,
-  SubscriptionInterval,
-  UpdatePagePayload,
-  CreatePagePayload,
-  CreateSpacePayload,
-  UpdateSpacePayload,
-  WorkspaceMember,
-  QuickNoteEditorData,
-  QuickNote,
-  Subscription,
-  CreateWorkspacePayload,
-  UpdateWorkspacePayload,
-  PublishViewPayload,
-  UploadPublishNamespacePayload,
-  UpdatePublishConfigPayload,
-  CreateFolderViewPayload,
-  GenerateAISummaryRowPayload,
-  GenerateAITranslateRowPayload,
-  GuestInvitation,
-  GuestConversionCodeInfo,
-  MentionablePerson,
-} from '@/application/types';
+import { RepeatedChatMessage } from '@appflowyinc/ai-chat';
+import { AxiosInstance } from 'axios';
+
 import { GlobalComment, Reaction } from '@/application/comment.type';
 import { ViewMeta } from '@/application/db/tables/view_metas';
 import {
   Template,
   TemplateCategory,
   TemplateCategoryFormValues,
-  TemplateCreator, TemplateCreatorFormValues, TemplateSummary,
+  TemplateCreator,
+  TemplateCreatorFormValues,
+  TemplateSummary,
   UploadTemplatePayload,
 } from '@/application/template.type';
-import { AxiosInstance } from 'axios';
-import { RepeatedChatMessage } from '@appflowyinc/ai-chat';
+import {
+  CreateFolderViewPayload,
+  CreatePagePayload,
+  CreateSpacePayload,
+  CreateWorkspacePayload,
+  DatabaseRelations,
+  DuplicatePublishView,
+  FolderView,
+  GenerateAISummaryRowPayload,
+  GenerateAITranslateRowPayload,
+  GetRequestAccessInfoResponse,
+  GuestConversionCodeInfo,
+  GuestInvitation,
+  Invitation,
+  MentionablePerson,
+  PublishViewPayload,
+  QuickNote,
+  QuickNoteEditorData,
+  Subscription,
+  SubscriptionInterval,
+  SubscriptionPlan,
+  Subscriptions,
+  UpdatePagePayload,
+  UpdatePublishConfigPayload,
+  UpdateSpacePayload,
+  UpdateWorkspacePayload,
+  UploadPublishNamespacePayload,
+  User,
+  UserWorkspaceInfo,
+  View,
+  Workspace,
+  WorkspaceMember,
+  YDoc,
+} from '@/application/types';
 
-export type AFService =
-  PublishService
-  & AppService
-  & WorkspaceService
-  & TemplateService
-  & QuickNoteService
-  & AIChatService
-  & {
+export type AFService = PublishService &
+  AppService &
+  WorkspaceService &
+  TemplateService &
+  QuickNoteService &
+  AIChatService & {
     getClientId: () => number;
     getDeviceId: () => string;
     getAxiosInstance: () => AxiosInstance | null;
@@ -85,9 +86,7 @@ export interface WorkspaceService {
 }
 
 export interface AppService {
-  getPageDoc: (workspaceId: string, viewId: string, errorCallback?: (error: {
-    code: number;
-  }) => void) => Promise<YDoc>;
+  getPageDoc: (workspaceId: string, viewId: string, errorCallback?: (error: { code: number }) => void) => Promise<YDoc>;
   createRowDoc: (rowKey: string) => Promise<YDoc>;
   deleteRowDoc: (rowKey: string) => void;
   getAppDatabaseViewRelations: (workspaceId: string, databaseStorageId: string) => Promise<DatabaseRelations>;
@@ -98,7 +97,12 @@ export interface AppService {
   getAppTrash: (workspaceId: string) => Promise<View[]>;
   loginAuth: (url: string) => Promise<void>;
   signInMagicLink: (params: { email: string; redirectTo: string }) => Promise<void>;
-  signInOTP: (params: { email: string; code: string; redirectTo: string; type?: 'magiclink' | 'recovery' }) => Promise<void>;
+  signInOTP: (params: {
+    email: string;
+    code: string;
+    redirectTo: string;
+    type?: 'magiclink' | 'recovery';
+  }) => Promise<void>;
   signInWithPassword: (params: { email: string; password: string; redirectTo: string }) => Promise<void>;
   forgotPassword: (params: { email: string }) => Promise<void>;
   changePassword: (params: { password: string }) => Promise<void>;
@@ -131,7 +135,12 @@ export interface AppService {
   moveToTrash: (workspaceId: string, viewId: string) => Promise<void>;
   restoreFromTrash: (workspaceId: string, viewId?: string) => Promise<void>;
   movePage: (workspaceId: string, viewId: string, parentId: string, prevViewId?: string) => Promise<void>;
-  uploadFile: (workspaceId: string, viewId: string, file: File, onProgress?: (progress: number) => void) => Promise<string>;
+  uploadFile: (
+    workspaceId: string,
+    viewId: string,
+    file: File,
+    onProgress?: (progress: number) => void
+  ) => Promise<string>;
   duplicateAppPage: (workspaceId: string, viewId: string) => Promise<void>;
   joinWorkspaceByInvitationCode: (code: string) => Promise<string>;
   getWorkspaceInfoByInvitationCode: (code: string) => Promise<{
@@ -146,14 +155,18 @@ export interface AppService {
   generateAISummaryForRow: (workspaceId: string, payload: GenerateAISummaryRowPayload) => Promise<string>;
   generateAITranslateForRow: (workspaceId: string, payload: GenerateAITranslateRowPayload) => Promise<string>;
   createOrphanedView: (workspaceId: string, payload: { document_id: string }) => Promise<void>;
+  checkIfCollabExists: (workspaceId: string, objectId: string) => Promise<void>;
 }
 
 export interface QuickNoteService {
-  getQuickNoteList: (workspaceId: string, params: {
-    offset?: number;
-    limit?: number;
-    searchTerm?: string;
-  }) => Promise<{
+  getQuickNoteList: (
+    workspaceId: string,
+    params: {
+      offset?: number;
+      limit?: number;
+      searchTerm?: string;
+    }
+  ) => Promise<{
     data: QuickNote[];
     has_more: boolean;
   }>;
@@ -170,10 +183,7 @@ export interface TemplateService {
   createTemplateCreator: (creator: TemplateCreatorFormValues) => Promise<void>;
   deleteTemplateCreator: (creatorId: string) => Promise<void>;
   getTemplateById: (id: string) => Promise<Template>;
-  getTemplates: (params: {
-    categoryId?: string;
-    nameContains?: string;
-  }) => Promise<TemplateSummary[]>;
+  getTemplates: (params: { categoryId?: string; nameContains?: string }) => Promise<TemplateSummary[]>;
   deleteTemplate: (id: string) => Promise<void>;
   createTemplate: (template: UploadTemplatePayload) => Promise<void>;
   updateTemplate: (id: string, template: UploadTemplatePayload) => Promise<void>;
@@ -190,11 +200,11 @@ export interface PublishService {
   getPublishRowDocument: (viewId: string) => Promise<YDoc>;
   getPublishInfo: (viewId: string) => Promise<{
     namespace: string;
-    publishName: string,
-    publisherEmail: string,
-    publishedAt: string,
-    commentEnabled: boolean,
-    duplicateEnabled: boolean,
+    publishName: string;
+    publisherEmail: string;
+    publishedAt: string;
+    commentEnabled: boolean;
+    duplicateEnabled: boolean;
   }>;
   updatePublishConfig: (workspaceId: string, payload: UpdatePublishConfigPayload) => Promise<void>;
   getPublishNamespace: (namespace: string) => Promise<string>;
@@ -211,13 +221,8 @@ export interface PublishService {
   addPublishViewReaction: (viewId: string, commentId: string, reactionType: string) => Promise<void>;
   removePublishViewReaction: (viewId: string, commentId: string, reactionType: string) => Promise<void>;
   duplicatePublishView: (params: DuplicatePublishView) => Promise<string>;
-
 }
 
 export interface AIChatService {
-  getChatMessages: (
-    workspaceId: string,
-    chatId: string,
-    limit?: number | undefined,
-  ) => Promise<RepeatedChatMessage>;
+  getChatMessages: (workspaceId: string, chatId: string, limit?: number | undefined) => Promise<RepeatedChatMessage>;
 }
diff --git a/src/application/slate-yjs/plugins/withHistory.ts b/src/application/slate-yjs/plugins/withHistory.ts
index 3d751e02..8294fffa 100644
--- a/src/application/slate-yjs/plugins/withHistory.ts
+++ b/src/application/slate-yjs/plugins/withHistory.ts
@@ -3,6 +3,7 @@ import { ReactEditor } from 'slate-react';
 import * as Y from 'yjs';
 
 import { relativeRangeToSlateRange, slateRangeToRelativeRange } from '@/application/slate-yjs/utils/positions';
+import { isValidSelection } from '@/application/slate-yjs/utils/transformSelection';
 import { getDocument } from '@/application/slate-yjs/utils/yjs';
 import { CollabOrigin } from '@/application/types';
 
@@ -44,7 +45,13 @@ export function withYHistory<T extends YjsEditor>(editor: T): T & YHistoryEditor
     return e;
   }
 
-  e.undoManager = new Y.UndoManager(getDocument(e.sharedRoot), {
+  const document = getDocument(e.sharedRoot);
+
+  if (!document) {
+    return e;
+  }
+
+  e.undoManager = new Y.UndoManager(document, {
     trackedOrigins: new Set([CollabOrigin.Local, null]),
     captureTimeout: 200,
   });
@@ -87,11 +94,16 @@ export function withYHistory<T extends YjsEditor>(editor: T): T & YHistoryEditor
     if (!selection || !ReactEditor.hasRange(editor, selection)) {
       const startPoint = Editor.start(e, [0]);
 
-      Transforms.select(e, startPoint);
+      if (isValidSelection(e, { anchor: startPoint, focus: startPoint })) {
+        Transforms.select(e, startPoint);
+      }
+
       return;
     }
 
-    Transforms.select(e, selection);
+    if (isValidSelection(e, selection)) {
+      Transforms.select(e, selection);
+    }
   };
 
   const { connect } = e;
diff --git a/src/application/slate-yjs/plugins/withYjs.ts b/src/application/slate-yjs/plugins/withYjs.ts
index bcc45385..e6be9954 100644
--- a/src/application/slate-yjs/plugins/withYjs.ts
+++ b/src/application/slate-yjs/plugins/withYjs.ts
@@ -5,7 +5,6 @@ import Y, { Transaction, YEvent } from 'yjs';
 import { translateYEvents } from '@/application/slate-yjs/utils/applyToSlate';
 import { applyToYjs } from '@/application/slate-yjs/utils/applyToYjs';
 import { yDocToSlateContent } from '@/application/slate-yjs/utils/convert';
-import { transformSelectionWithOperations } from '@/application/slate-yjs/utils/transformSelection';
 import { CollabOrigin, YjsEditorKey, YSharedRoot } from '@/application/types';
 
 type LocalChange = {
@@ -82,11 +81,20 @@ export function withYjs<T extends Editor>(
     readSummary?: boolean;
     onContentChange?: (content: Descendant[]) => void;
     uploadFile?: (file: File) => Promise<string>;
+    onSelectionChange?: (editor: YjsEditor) => void;
   }
 ): T & YjsEditor {
-  const { id, uploadFile, localOrigin = CollabOrigin.Local, readSummary, onContentChange, readOnly = true } = opts ?? {};
+  const {
+    id,
+    uploadFile,
+    localOrigin = CollabOrigin.Local,
+    readSummary,
+    onContentChange,
+    readOnly = true,
+    onSelectionChange,
+  } = opts ?? {};
   const e = editor as T & YjsEditor;
-  const { apply, onChange } = e;
+  const { apply, onChange, select } = e;
 
   e.interceptLocalChange = false;
   e.readOnly = readOnly;
@@ -146,10 +154,7 @@ export function withYjs<T extends Editor>(
       translateYEvents(e, events);
       newSelection = myCurrentSelection;
     } else {
-      newSelection = transformSelectionWithOperations(editor, myCurrentSelection, () => {
-        // Apply remote user operations
-        translateYEvents(e, events);
-      });
+      translateYEvents(e, events);
     }
 
     // Update my cursor position
@@ -209,11 +214,49 @@ export function withYjs<T extends Editor>(
     }, localOrigin);
   };
 
+  // Proxy the select function with error handling
+  const selectWithErrorHandling = (...args: Parameters<typeof select>) => {
+    try {
+      return select.apply(e, args);
+    } catch (error) {
+      console.error('Editor select operation failed:', error);
+      console.warn('Selection arguments:', args);
+
+      // Try to fallback to a safe selection
+      try {
+        if (e.children.length > 0) {
+          // Try to select the start of the first block
+          const startPoint = Editor.start(e, [0]);
+
+          if (startPoint) {
+            select.call(e, startPoint);
+            console.info('Fallback to document start selection');
+            return;
+          }
+        }
+      } catch (fallbackError) {
+        console.error('Fallback selection also failed:', fallbackError);
+      }
+
+      // Last resort: deselect
+      try {
+        e.deselect();
+        console.info('Deselected as last resort');
+      } catch (deselectError) {
+        console.error('Even deselect failed:', deselectError);
+      }
+    }
+  };
+
   e.apply = applyIntercept;
+  e.select = selectWithErrorHandling;
 
   e.onChange = () => {
     if (YjsEditor.connected(e)) {
       YjsEditor.flushLocalChanges(e);
+      if (onSelectionChange) {
+        onSelectionChange(e);
+      }
     }
 
     onChange();
diff --git a/src/application/slate-yjs/utils/editor.ts b/src/application/slate-yjs/utils/editor.ts
index 6ee12e0e..e9796bdc 100644
--- a/src/application/slate-yjs/utils/editor.ts
+++ b/src/application/slate-yjs/utils/editor.ts
@@ -23,7 +23,6 @@ import {
   SOFT_BREAK_TYPES,
   TEXT_BLOCK_TYPES,
 } from '@/application/slate-yjs/command/const';
-import { isValidSelection } from '@/application/slate-yjs/utils/transformSelection';
 import {
   appendEmptyParagraph,
   assertDocExists,
@@ -499,12 +498,12 @@ export function getBlockEntry(editor: YjsEditor, point?: Point) {
     throw new Error('Point not found');
   }
 
-  if (!isValidSelection(editor, { anchor: at, focus: at })) {
+  if (!ReactEditor.hasRange(editor, { anchor: at, focus: at })) {
     return;
   }
 
   const blockEntry = editor.above({
-    at: point,
+    at,
     match: (n) => !Editor.isEditor(n) && Element.isElement(n) && n.blockId !== undefined,
   });
 
diff --git a/src/components/app/app.hooks.tsx b/src/components/app/app.hooks.tsx
index 922f58e7..f4549a4a 100644
--- a/src/components/app/app.hooks.tsx
+++ b/src/components/app/app.hooks.tsx
@@ -103,6 +103,7 @@ export interface AppContextType {
   eventEmitter?: EventEmitter;
   getMentionUser?: (uuid: string) => Promise<MentionablePerson | undefined>;
   awarenessMap?: Record<string, Awareness>;
+  checkIfRowDocumentExists?: (databaseId: string, rowIds: string[]) => Promise<void>;
 }
 
 const USER_NO_ACCESS_CODE = [1024, 1012];
@@ -328,8 +329,9 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
         const sharedRoot = workspaceDatabaseDocMapRef.current.get(currentWorkspaceId)?.getMap(YjsEditorKey.data_section);
         const observeEvent = () => {
           const databases = sharedRoot?.toJSON()?.databases;
-          const databaseId = databases?.find(
-            (database: { database_id: string; views: string[] }) => database.views[0] === id
+
+          const databaseId = databases?.find((database: { database_id: string; views: string[] }) =>
+            database.views.find((view) => view === id)
           )?.database_id;
 
           if (databaseId) {
@@ -392,7 +394,6 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
               }
 
               awareness = new Awareness(res);
-
               return { ...prev, [id]: awareness };
             });
           }
@@ -1107,26 +1108,29 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
     [getRows]
   );
 
-  const loadDatabasePrompts = async (
-    config: PromptDatabaseConfiguration
-  ): Promise<{
-    rawDatabasePrompts: DatabasePrompt[];
-    fields: DatabasePromptField[];
-  }> => {
-    const fields = await getFields(config.databaseViewId);
+  const loadDatabasePrompts = useCallback(
+    async (
+      config: PromptDatabaseConfiguration
+    ): Promise<{
+      rawDatabasePrompts: DatabasePrompt[];
+      fields: DatabasePromptField[];
+    }> => {
+      const fields = await getFields(config.databaseViewId);
 
-    const rawDatabasePrompts = await loadDatabasePromptsWithFields(config, fields);
+      const rawDatabasePrompts = await loadDatabasePromptsWithFields(config, fields);
 
-    return {
-      rawDatabasePrompts,
-      fields: fields.map((field) => ({
-        id: field.id,
-        name: field.name,
-        isPrimary: field.isPrimary,
-        isSelect: field.fieldType === FieldType.SingleSelect || field.fieldType === FieldType.MultiSelect,
-      })),
-    };
-  };
+      return {
+        rawDatabasePrompts,
+        fields: fields.map((field) => ({
+          id: field.id,
+          name: field.name,
+          isPrimary: field.isPrimary,
+          isSelect: field.fieldType === FieldType.SingleSelect || field.fieldType === FieldType.MultiSelect,
+        })),
+      };
+    },
+    [getFields, loadDatabasePromptsWithFields]
+  );
 
   const testDatabasePromptConfig = useCallback(
     async (viewId: string) => {
@@ -1170,7 +1174,6 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
 
   const mentionableUsersRef = useRef<MentionablePerson[]>([]);
 
-  // 原始的请求函数
   const _loadMentionableUsers = useCallback(async () => {
     if (!currentWorkspaceId || !service) {
       throw new Error('No workspace or service found');
@@ -1217,6 +1220,17 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
     [loadMentionableUsers]
   );
 
+  const checkIfRowDocumentExists = useCallback(
+    async (documentId: string) => {
+      if (!service || !currentWorkspaceId) {
+        throw new Error('No service found');
+      }
+
+      return service.checkIfCollabExists(currentWorkspaceId, documentId);
+    },
+    [service, currentWorkspaceId]
+  );
+
   return (
     <AppContext.Provider
       value={{
@@ -1269,6 +1283,7 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
         eventEmitter: eventEmitterRef.current,
         getMentionUser,
         awarenessMap,
+        checkIfRowDocumentExists,
       }}
     >
       <AIChatProvider>
@@ -1443,6 +1458,7 @@ export function useAppHandlers() {
     eventEmitter: context.eventEmitter,
     getMentionUser: context.getMentionUser,
     awarenessMap: context.awarenessMap,
+    checkIfRowDocumentExists: context.checkIfRowDocumentExists,
   };
 }
 
diff --git a/src/components/database/components/database-row/DatabaseRowSubDocument.tsx b/src/components/database/components/database-row/DatabaseRowSubDocument.tsx
index 8286090a..189622d6 100644
--- a/src/components/database/components/database-row/DatabaseRowSubDocument.tsx
+++ b/src/components/database/components/database-row/DatabaseRowSubDocument.tsx
@@ -13,22 +13,22 @@ import {
 } from '@/application/database-yjs';
 import { getCellDataText } from '@/application/database-yjs/cell.parse';
 import { useUpdateRowMetaDispatch } from '@/application/database-yjs/dispatch';
-import { YDatabaseCell, YDatabaseField, YDoc, YjsDatabaseKey } from '@/application/types';
+import { YDatabaseCell, YDatabaseField, YDatabaseRow, YDoc, YjsDatabaseKey, YjsEditorKey } from '@/application/types';
 import { Editor } from '@/components/editor';
 import { EditorSkeleton } from '@/components/_shared/skeleton/EditorSkeleton';
 
-const ViewNotFoundCodes = [1040, 1017]; // Error code for "View not found"
-
 export const DatabaseRowSubDocument = memo(({ rowId }: { rowId: string }) => {
   const meta = useRowMetaSelector(rowId);
   const readOnly = useReadOnly();
   const documentId = meta?.documentId;
   const context = useDatabaseContext();
   const database = useDatabase();
-  const row = useRowData(rowId);
+  const row = useRowData(rowId) as YDatabaseRow | undefined;
+  const checkIfRowDocumentExists = context.checkIfRowDocumentExists;
 
   const getCellData = useCallback(
     (cell: YDatabaseCell, field: YDatabaseField) => {
+      if (!row) return '';
       const type = Number(field?.get(YjsDatabaseKey.type));
 
       if (type === FieldType.CreatedTime) {
@@ -52,6 +52,8 @@ export const DatabaseRowSubDocument = memo(({ rowId }: { rowId: string }) => {
   const properties = useMemo(() => {
     const obj = {};
 
+    if (!row) return obj;
+
     const cells = row.get(YjsDatabaseKey.cells);
     const fields = database.get(YjsDatabaseKey.fields);
     const fieldIds = Array.from(fields.keys());
@@ -84,7 +86,7 @@ export const DatabaseRowSubDocument = memo(({ rowId }: { rowId: string }) => {
         setDoc(null);
         await createOrphanedView({ document_id: documentId });
 
-        const doc = await loadView?.(documentId, true);
+        const doc = await loadView?.(documentId, true, true);
 
         if (doc) {
           setDoc(doc);
@@ -96,6 +98,7 @@ export const DatabaseRowSubDocument = memo(({ rowId }: { rowId: string }) => {
     },
     [createOrphanedView, loadView]
   );
+  const document = doc?.getMap(YjsEditorKey.data_section)?.get(YjsEditorKey.document);
 
   const handleOpenDocument = useCallback(
     async (documentId: string) => {
@@ -109,23 +112,26 @@ export const DatabaseRowSubDocument = memo(({ rowId }: { rowId: string }) => {
         // eslint-disable-next-line
       } catch (e: any) {
         console.error(e);
-        if (ViewNotFoundCodes.includes(e.code)) {
-          // This means the document does not exist, so we create a new one
-          void handleCreateDocument(documentId);
-        } else {
-          toast.error(e.message);
-        }
+        toast.error(e.message);
       } finally {
         setLoading(false);
       }
     },
-    [loadView, handleCreateDocument]
+    [loadView]
   );
 
   useEffect(() => {
     if (!documentId) return;
-    void handleOpenDocument(documentId);
-  }, [handleOpenDocument, documentId]);
+
+    void (async () => {
+      try {
+        await checkIfRowDocumentExists?.(documentId);
+        void handleOpenDocument(documentId);
+      } catch (e) {
+        void handleCreateDocument(documentId);
+      }
+    })();
+  }, [handleOpenDocument, documentId, handleCreateDocument, checkIfRowDocumentExists]);
 
   const getMoreAIContext = useCallback(() => {
     return JSON.stringify(properties);
@@ -135,7 +141,7 @@ export const DatabaseRowSubDocument = memo(({ rowId }: { rowId: string }) => {
     return <EditorSkeleton />;
   }
 
-  if (!doc || !documentId) return null;
+  if (!document || !doc || !documentId || !row) return null;
   return (
     <Editor
       {...context}
diff --git a/src/components/database/components/header/Title.tsx b/src/components/database/components/header/Title.tsx
index df041933..77a775aa 100644
--- a/src/components/database/components/header/Title.tsx
+++ b/src/components/database/components/header/Title.tsx
@@ -124,8 +124,10 @@ export function Title({
               value={value}
               onChange={(e) => {
                 if (readOnly) return;
-                setValue(e.target.value);
+
                 updateCell(e.target.value);
+
+                setValue(e.target.value);
               }}
               onKeyDown={(e) => {
                 if (createHotkey(HOT_KEY_NAME.ESCAPE)(e.nativeEvent)) {
diff --git a/src/components/document/Document.tsx b/src/components/document/Document.tsx
index 92443903..d8e5b69f 100644
--- a/src/components/document/Document.tsx
+++ b/src/components/document/Document.tsx
@@ -99,7 +99,7 @@ export const Document = (props: DocumentProps) => {
     clearCursor();
   }, [clearCursor]);
 
-  const handleEditorConnected = useCallback(
+  const handleSyncCursor = useCallback(
     (editor: YjsEditor) => {
       // Set up cursor synchronization when editor is connected
       if (currentUser && service && awareness) {
@@ -117,13 +117,20 @@ export const Document = (props: DocumentProps) => {
 
         dispatchCursorAwareness(userParams, editor);
       }
+    },
+    [dispatchCursorAwareness, currentUser, service, awareness]
+  );
 
+  const handleEditorConnected = useCallback(
+    (editor: YjsEditor) => {
+      // Set up cursor synchronization when editor is connected
+      handleSyncCursor(editor);
       // Call original onEditorConnected if provided
       if (onEditorConnected) {
         onEditorConnected(editor);
       }
     },
-    [currentUser, service, awareness, dispatchCursorAwareness, onEditorConnected]
+    [handleSyncCursor, onEditorConnected]
   );
 
   if (!document || !viewMeta.viewId) return null;
@@ -148,6 +155,7 @@ export const Document = (props: DocumentProps) => {
             onJumpedBlockId={onJumpedBlockId}
             onRendered={handleRendered}
             onEditorConnected={handleEditorConnected}
+            onSelectionChange={handleSyncCursor}
             awareness={awareness}
             {...props}
           />
diff --git a/src/components/editor/CollaborativeEditor.tsx b/src/components/editor/CollaborativeEditor.tsx
index 78fefad1..c5913931 100644
--- a/src/components/editor/CollaborativeEditor.tsx
+++ b/src/components/editor/CollaborativeEditor.tsx
@@ -1,24 +1,28 @@
-import { withYHistory } from '@/application/slate-yjs/plugins/withHistory';
-import { CollabOrigin } from '@/application/types';
-import { withYjs, YjsEditor } from '@/application/slate-yjs/plugins/withYjs';
-import EditorEditable from '@/components/editor/Editable';
-import { useEditorContext } from '@/components/editor/EditorContext';
-import { withPlugins } from '@/components/editor/plugins';
-import { getTextCount } from '@/utils/word';
+import { debounce } from 'lodash-es';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { createEditor, Descendant } from 'slate';
 import { Slate, withReact } from 'slate-react';
 import * as Y from 'yjs';
+
+import { withYHistory } from '@/application/slate-yjs/plugins/withHistory';
+import { withYjs, YjsEditor } from '@/application/slate-yjs/plugins/withYjs';
+import { CollabOrigin } from '@/application/types';
+import EditorEditable from '@/components/editor/Editable';
+import { useEditorContext } from '@/components/editor/EditorContext';
+import { withPlugins } from '@/components/editor/plugins';
 import { clipboardFormatKey } from '@/components/editor/plugins/withCopy';
+import { getTextCount } from '@/utils/word';
 
 const defaultInitialValue: Descendant[] = [];
 
 function CollaborativeEditor({
   doc,
   onEditorConnected,
+  onSelectionChange,
 }: {
   doc: Y.Doc;
   onEditorConnected?: (editor: YjsEditor) => void;
+  onSelectionChange?: (editor: YjsEditor) => void;
 }) {
   const context = useEditorContext();
   const readSummary = context.readSummary;
@@ -39,6 +43,23 @@ function CollaborativeEditor({
     [onWordCountChange, viewId, onRendered]
   );
 
+  const debounceCalculateWordCount = useMemo(() => {
+    return debounce((editor) => {
+      const wordCount = getTextCount(editor.children);
+
+      onWordCountChange?.(viewId, wordCount);
+    }, 300);
+  }, [onWordCountChange, viewId]);
+
+  const handleSelectionChange = useCallback(
+    (editor: YjsEditor) => {
+      onSelectionChange?.(editor);
+
+      debounceCalculateWordCount(editor);
+    },
+    [onSelectionChange, debounceCalculateWordCount]
+  );
+
   const editor = useMemo(
     () =>
       doc &&
@@ -52,6 +73,7 @@ function CollaborativeEditor({
               onContentChange,
               uploadFile,
               id: viewId,
+              onSelectionChange: handleSelectionChange,
             })
           ),
           clipboardFormatKey
diff --git a/src/components/editor/Editable.tsx b/src/components/editor/Editable.tsx
index a6cce79a..16271911 100644
--- a/src/components/editor/Editable.tsx
+++ b/src/components/editor/Editable.tsx
@@ -1,14 +1,11 @@
 import { Skeleton } from '@mui/material';
-import { debounce } from 'lodash-es';
-import React, { lazy, Suspense, useCallback, useEffect, useMemo } from 'react';
+import React, { lazy, Suspense, useCallback } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { BaseRange, Editor, Element as SlateElement, NodeEntry, Range, Text } from 'slate';
 import { Editable, RenderElementProps, useSlate } from 'slate-react';
 
-import { useRemoteSelectionsSelector } from '@/application/awareness/selector';
 import { YjsEditor } from '@/application/slate-yjs';
 import { CustomEditor } from '@/application/slate-yjs/command';
-import { ensureBlockText } from '@/application/slate-yjs/utils/editor';
 import { BlockType } from '@/application/types';
 import { BlockPopoverProvider } from '@/components/editor/components/block-popover/BlockPopoverContext';
 import { useDecorate } from '@/components/editor/components/blocks/code/useDecorate';
@@ -21,16 +18,14 @@ import { useEditorContext } from '@/components/editor/EditorContext';
 import { useShortcuts } from '@/components/editor/shortcut.hooks';
 import { ElementFallbackRender } from '@/components/error/ElementFallbackRender';
 import { cn } from '@/lib/utils';
-import { getTextCount } from '@/utils/word';
 
 import { Element } from './components/element';
 
 const EditorOverlay = lazy(() => import('@/components/editor/EditorOverlay'));
 
 const EditorEditable = () => {
-  const { readOnly, decorateState, onWordCountChange, viewId, workspaceId, fullWidth, awareness } = useEditorContext();
+  const { readOnly, decorateState, viewId, workspaceId, fullWidth } = useEditorContext();
   const editor = useSlate();
-  const remoteSelections = useRemoteSelectionsSelector(awareness);
 
   const codeDecorate = useDecorate(editor);
 
@@ -76,30 +71,6 @@ const EditorEditable = () => {
     }
   }, [editor]);
 
-  const debounceCalculateWordCount = useMemo(() => {
-    return debounce(() => {
-      const wordCount = getTextCount(editor.children);
-
-      onWordCountChange?.(viewId, wordCount);
-    }, 300);
-  }, [onWordCountChange, viewId, editor]);
-
-  useEffect(() => {
-    if (readOnly) return;
-    const { onChange } = editor;
-
-    editor.onChange = () => {
-      ensureBlockText(editor as YjsEditor);
-
-      onChange();
-      debounceCalculateWordCount();
-    };
-
-    return () => {
-      editor.onChange = onChange;
-    };
-  }, [editor, debounceCalculateWordCount, readOnly]);
-
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
       const currentTarget = e.currentTarget as HTMLElement;
@@ -189,7 +160,7 @@ const EditorEditable = () => {
               className={cn(fullWidth ? 'w-full' : 'w-[952px]', 'relative h-full min-w-0 max-w-full px-24 max-sm:px-6')}
             >
               <ErrorBoundary fallback={null}>
-                <RemoteSelectionsLayer remoteSelections={remoteSelections} editor={editor} />
+                <RemoteSelectionsLayer editor={editor} />
               </ErrorBoundary>
             </div>
           </div>
diff --git a/src/components/editor/Editor.tsx b/src/components/editor/Editor.tsx
index 271c83b6..77592e49 100644
--- a/src/components/editor/Editor.tsx
+++ b/src/components/editor/Editor.tsx
@@ -8,9 +8,10 @@ import './editor.scss';
 export interface EditorProps extends EditorContextState {
   doc: YDoc;
   onEditorConnected?: (editor: YjsEditor) => void;
+  onSelectionChange?: (editor: YjsEditor) => void;
 }
 
-export const Editor = memo(({ doc, onEditorConnected, layoutStyle = defaultLayoutStyle, ...props }: EditorProps) => {
+export const Editor = memo(({ doc, onEditorConnected, onSelectionChange, layoutStyle = defaultLayoutStyle, ...props }: EditorProps) => {
   const [codeGrammars, setCodeGrammars] = React.useState<Record<string, string>>({});
 
   const handleAddCodeGrammars = React.useCallback((blockId: string, grammar: string) => {
@@ -24,7 +25,7 @@ export const Editor = memo(({ doc, onEditorConnected, layoutStyle = defaultLayou
       addCodeGrammars={handleAddCodeGrammars}
       layoutStyle={layoutStyle}
     >
-      <CollaborativeEditor doc={doc} onEditorConnected={onEditorConnected} />
+      <CollaborativeEditor doc={doc} onEditorConnected={onEditorConnected} onSelectionChange={onSelectionChange} />
     </EditorContextProvider>
   );
 });
diff --git a/src/components/editor/components/blocks/image/ImageBlock.tsx b/src/components/editor/components/blocks/image/ImageBlock.tsx
index f5958dd5..71d23a18 100644
--- a/src/components/editor/components/blocks/image/ImageBlock.tsx
+++ b/src/components/editor/components/blocks/image/ImageBlock.tsx
@@ -120,6 +120,7 @@ export const ImageBlock = memo(
       [uploadFile]
     );
 
+
     const handleRetry = useCallback(
       async (e: React.MouseEvent) => {
         e.stopPropagation();
diff --git a/src/components/editor/components/blocks/image/Img.tsx b/src/components/editor/components/blocks/image/Img.tsx
index 77f68b39..3aef54b3 100644
--- a/src/components/editor/components/blocks/image/Img.tsx
+++ b/src/components/editor/components/blocks/image/Img.tsx
@@ -1,8 +1,9 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
 import { ReactComponent as ErrorOutline } from '@/assets/icons/error.svg';
 import LoadingDots from '@/components/_shared/LoadingDots';
 import { checkImage } from '@/utils/image';
-import React, { useCallback, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 
 function Img({
   onLoad,
diff --git a/src/components/editor/components/remote-selections/RemoteSelectionsLayer.tsx b/src/components/editor/components/remote-selections/RemoteSelectionsLayer.tsx
index 53eb4339..99abc4c7 100644
--- a/src/components/editor/components/remote-selections/RemoteSelectionsLayer.tsx
+++ b/src/components/editor/components/remote-selections/RemoteSelectionsLayer.tsx
@@ -2,20 +2,11 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { Editor, Range, Text } from 'slate';
 import { ReactEditor } from 'slate-react';
 
+import { useRemoteSelectionsSelector } from '@/application/awareness';
+import { useEditorContext } from '@/components/editor/EditorContext';
 import { cn } from '@/lib/utils';
 import { renderColor } from '@/utils/color';
 
-interface RemoteSelection {
-  uid: number;
-  name: string;
-  deviceId: string;
-  cursorColor: string;
-  selectionColor: string;
-  baseRange?: {
-    anchor: { path: number[]; offset: number };
-    focus: { path: number[]; offset: number };
-  };
-}
 
 interface SelectionRect {
   x: number;
@@ -36,11 +27,13 @@ interface RemoteSelectionPosition {
 }
 
 interface RemoteSelectionsLayerProps {
-  remoteSelections: RemoteSelection[];
   editor: Editor;
 }
 
-export const RemoteSelectionsLayer: React.FC<RemoteSelectionsLayerProps> = ({ remoteSelections, editor }) => {
+export const RemoteSelectionsLayer: React.FC<RemoteSelectionsLayerProps> = ({ editor }) => {
+  const { awareness } = useEditorContext();
+  const remoteSelections = useRemoteSelectionsSelector(awareness);
+
   const [selectionPositions, setSelectionPositions] = useState<RemoteSelectionPosition[]>([]);
 
   const calculateSelectionPositions = useCallback((): RemoteSelectionPosition[] => {
diff --git a/src/components/editor/plugins/withInsertText.ts b/src/components/editor/plugins/withInsertText.ts
index 06cd2fdd..e0659f32 100644
--- a/src/components/editor/plugins/withInsertText.ts
+++ b/src/components/editor/plugins/withInsertText.ts
@@ -1,10 +1,11 @@
+import { BaseRange, NodeEntry, Point, Range, Text, Transforms } from 'slate';
+import { ReactEditor } from 'slate-react';
+import { TextInsertTextOptions } from 'slate/dist/interfaces/transforms/text';
+
 import { YjsEditor } from '@/application/slate-yjs';
 import { isEmbedBlockTypes } from '@/application/slate-yjs/command/const';
 import { getBlockEntry } from '@/application/slate-yjs/utils/editor';
 import { BlockType } from '@/application/types';
-import { BaseRange, NodeEntry, Point, Range, Text, Transforms } from 'slate';
-import { ReactEditor } from 'slate-react';
-import { TextInsertTextOptions } from 'slate/dist/interfaces/transforms/text';
 
 export const withInsertText = (editor: ReactEditor) => {
   const { insertText } = editor;
@@ -18,6 +19,7 @@ export const withInsertText = (editor: ReactEditor) => {
     }
 
     const point = newAt.anchor;
+
     const entry = getBlockEntry(editor as YjsEditor, point);
 
     if (!entry) return;
@@ -31,7 +33,8 @@ export const withInsertText = (editor: ReactEditor) => {
     }
 
     const [textEntry] = editor.nodes({
-      at: point, match: n => {
+      at: point,
+      match: (n) => {
         return Text.isText(n);
       },
     });
@@ -63,4 +66,4 @@ export const withInsertText = (editor: ReactEditor) => {
   };
 
   return editor;
-};
\ No newline at end of file
+};
diff --git a/src/components/editor/plugins/withPasted.ts b/src/components/editor/plugins/withPasted.ts
index 3606038c..5c8f77f6 100644
--- a/src/components/editor/plugins/withPasted.ts
+++ b/src/components/editor/plugins/withPasted.ts
@@ -1,4 +1,9 @@
+import { BasePoint, Element, Node, Text, Transforms } from 'slate';
+import { ReactEditor } from 'slate-react';
+import isURL from 'validator/lib/isURL';
+
 import { YjsEditor } from '@/application/slate-yjs';
+import { CustomEditor } from '@/application/slate-yjs/command';
 import { slateContentInsertToYData } from '@/application/slate-yjs/utils/convert';
 import {
   beforePasted,
@@ -6,24 +11,17 @@ import {
   getBlockEntry,
   getSharedRoot,
 } from '@/application/slate-yjs/utils/editor';
+import { assertDocExists, deleteBlock, getBlock, getChildrenArray } from '@/application/slate-yjs/utils/yjs';
 import { BlockType, LinkPreviewBlockData, MentionType, VideoBlockData, YjsEditorKey } from '@/application/types';
 import { deserializeHTML } from '@/components/editor/utils/fragment';
-import { BasePoint, Node, Transforms, Text, Element } from 'slate';
-import { ReactEditor } from 'slate-react';
-import isURL from 'validator/lib/isURL';
-import { assertDocExists, deleteBlock, getBlock, getChildrenArray } from '@/application/slate-yjs/utils/yjs';
-import { CustomEditor } from '@/application/slate-yjs/command';
 import { processUrl } from '@/utils/url';
 
 export const withPasted = (editor: ReactEditor) => {
-
   editor.insertTextData = (data: DataTransfer) => {
-    if(!beforePasted(editor))
-      return false;
+    if (!beforePasted(editor)) return false;
     const text = data.getData('text/plain');
 
-    if(text) {
-
+    if (text) {
       const lines = text.split(/\r\n|\r|\n/);
 
       const html = data.getData('text/html');
@@ -36,29 +34,34 @@ export const withPasted = (editor: ReactEditor) => {
 
       const [node] = entry;
 
-      if(lineLength === 1) {
+      if (lineLength === 1) {
         const isUrl = !!processUrl(text);
 
-        if(isUrl) {
+        if (isUrl) {
           const isAppFlowyLinkUrl = isURL(text, {
             host_whitelist: [window.location.hostname],
           });
 
-          if(isAppFlowyLinkUrl) {
+          if (isAppFlowyLinkUrl) {
             const url = new URL(text);
             const blockId = url.searchParams.get('blockId');
 
-            if(blockId) {
+            if (blockId) {
               const pageId = url.pathname.split('/').pop();
               const point = editor.selection?.anchor as BasePoint;
 
-              Transforms.insertNodes(editor, {
-                text: '@', mention: {
-                  type: MentionType.PageRef,
-                  page_id: pageId,
-                  block_id: blockId,
+              Transforms.insertNodes(
+                editor,
+                {
+                  text: '@',
+                  mention: {
+                    type: MentionType.PageRef,
+                    page_id: pageId,
+                    block_id: blockId,
+                  },
                 },
-              }, { at: point, select: true, voids: false });
+                { at: point, select: true, voids: false }
+              );
 
               return true;
             }
@@ -68,36 +71,45 @@ export const withPasted = (editor: ReactEditor) => {
             host_whitelist: ['youtube.com', 'www.youtube.com', 'youtu.be', 'vimeo.com'],
           });
 
-          if(isVideoUrl) {
-            insertFragment(editor, [{
-              type: BlockType.VideoBlock,
-              data: { url: text } as VideoBlockData,
-              children: [{
-                text: '',
-              }],
-            }]);
+          if (isVideoUrl) {
+            insertFragment(editor, [
+              {
+                type: BlockType.VideoBlock,
+                data: { url: text } as VideoBlockData,
+                children: [
+                  {
+                    text: '',
+                  },
+                ],
+              },
+            ]);
             return true;
           }
 
-          insertFragment(editor, [{
-            type: BlockType.LinkPreview,
-            data: { url: text } as LinkPreviewBlockData,
-            children: [{ text: '' }],
-          }]);
+          insertFragment(editor, [
+            {
+              type: BlockType.LinkPreview,
+              data: { url: text } as LinkPreviewBlockData,
+              children: [{ text: '' }],
+            },
+          ]);
 
           return true;
         }
       }
 
-      if(lineLength > 1 && node.type !== BlockType.CodeBlock) {
-        if(html) {
+      if (lineLength > 1 && node.type !== BlockType.CodeBlock) {
+        if (html) {
           return insertHtmlData(editor, data);
         } else {
           const fragment = lines.map((line) => ({
-            type: BlockType.Paragraph, children: [{
-              type: 'text',
-              children: [{ text: line }],
-            }],
+            type: BlockType.Paragraph,
+            children: [
+              {
+                type: 'text',
+                children: [{ text: line }],
+              },
+            ],
           }));
 
           insertFragment(editor, fragment);
@@ -105,15 +117,19 @@ export const withPasted = (editor: ReactEditor) => {
         }
       }
 
-      for(const line of lines) {
+      for (const line of lines) {
         const point = editor.selection?.anchor as BasePoint;
 
-        if(line) {
-          Transforms.insertNodes(editor, { text: `${line}${lineLength > 1 ? `\n` : ''}` }, {
-            at: point,
-            select: true,
-            voids: false,
-          });
+        if (line) {
+          Transforms.insertNodes(
+            editor,
+            { text: `${line}${lineLength > 1 ? `\n` : ''}` },
+            {
+              at: point,
+              select: true,
+              voids: false,
+            }
+          );
         }
       }
 
@@ -133,7 +149,7 @@ export const withPasted = (editor: ReactEditor) => {
 export function insertHtmlData(editor: ReactEditor, data: DataTransfer) {
   const html = data.getData('text/html');
 
-  if(html) {
+  if (html) {
     console.log('insert HTML Data', html);
     const fragment = deserializeHTML(html) as Node[];
 
@@ -147,8 +163,7 @@ export function insertHtmlData(editor: ReactEditor, data: DataTransfer) {
 
 function insertFragment(editor: ReactEditor, fragment: Node[], options = {}) {
   console.log('insertFragment', fragment, options);
-  if(!beforePasted(editor))
-    return;
+  if (!beforePasted(editor)) return;
 
   const point = editor.selection?.anchor as BasePoint;
   const entry = getBlockEntry(editor as YjsEditor, point);
@@ -168,15 +183,15 @@ function insertFragment(editor: ReactEditor, fragment: Node[], options = {}) {
   const index = parentChildren.toArray().findIndex((id) => id === block.get(YjsEditorKey.block_id));
   const doc = assertDocExists(sharedRoot);
 
-  if(fragment.length === 1) {
+  if (fragment.length === 1) {
     const firstNode = fragment[0] as Element;
 
     const findTextNodes = (node: Node): Node[] => {
-      if(Text.isText(node)) {
+      if (Text.isText(node)) {
         return [];
       }
 
-      if(Element.isElement(node) && node.textId) {
+      if (Element.isElement(node) && node.textId) {
         return [node];
       }
 
@@ -185,14 +200,13 @@ function insertFragment(editor: ReactEditor, fragment: Node[], options = {}) {
 
     const textNodes = findTextNodes(firstNode);
 
-    if(textNodes.length === 1) {
+    if (textNodes.length === 1) {
       const textNode = textNodes[0] as Element;
       const texts = textNode.children.filter((node) => Text.isText(node));
 
       Transforms.insertNodes(editor, texts, { at: point, select: true, voids: false });
       return;
     }
-
   }
 
   let lastBlockId = blockId;
@@ -201,9 +215,10 @@ function insertFragment(editor: ReactEditor, fragment: Node[], options = {}) {
     const newBlockIds = slateContentInsertToYData(block.get(YjsEditorKey.block_parent), index + 1, fragment, doc);
 
     lastBlockId = newBlockIds[newBlockIds.length - 1];
-    if(isEmptyNode) {
+    if (isEmptyNode) {
       deleteBlock(sharedRoot, blockId);
     }
+
   });
 
   setTimeout(() => {
@@ -217,12 +232,10 @@ function insertFragment(editor: ReactEditor, fragment: Node[], options = {}) {
       const point = editor.end(path);
 
       editor.select(point);
-
-    } catch(e) {
+    } catch (e) {
       console.error(e);
     }
-
   }, 50);
 
   return;
-}
\ No newline at end of file
+}
diff --git a/src/components/view-meta/TitleEditable.tsx b/src/components/view-meta/TitleEditable.tsx
index b8fa5438..4de11186 100644
--- a/src/components/view-meta/TitleEditable.tsx
+++ b/src/components/view-meta/TitleEditable.tsx
@@ -38,16 +38,23 @@ function TitleEditable({
 }) {
   const { t } = useTranslation();
   const debounceUpdateName = useMemo(() => {
-    return debounce(onUpdateName, 300);
+    return debounce(onUpdateName, 200);
   }, [onUpdateName]);
   const contentRef = useRef<HTMLDivElement>(null);
+  const timestampsRef = useRef<{
+    local: number;
+    remote: number;
+  }>({
+    local: 0,
+    remote: 0,
+  });
 
   useEffect(() => {
-    if (contentRef.current) {
+    timestampsRef.current.remote = Date.now();
+    if (contentRef.current && timestampsRef.current.local < timestampsRef.current.remote) {
       contentRef.current.textContent = name;
     }
-    // eslint-disable-next-line
-  }, []);
+  }, [name]);
 
   useEffect(() => {
     if (contentRef.current) {
@@ -102,18 +109,17 @@ function TitleEditable({
       contentEditable={true}
       aria-readonly={false}
       autoFocus={true}
-      onFocus={onFocus}
+      onFocus={() => {
+        onFocus?.();
+      }}
       onInput={() => {
         if (!contentRef.current) return;
+        timestampsRef.current.local = Date.now();
         debounceUpdateName(contentRef.current.textContent || '');
         if (contentRef.current.innerHTML === '<br>') {
           contentRef.current.innerHTML = '';
         }
       }}
-      onBlur={() => {
-        if (!contentRef.current) return;
-        onUpdateName(contentRef.current.textContent || '');
-      }}
       onKeyDown={(e) => {
         if (!contentRef.current) return;
         if (e.key === 'Enter' || e.key === 'Escape') {
@@ -124,6 +130,7 @@ function TitleEditable({
             const afterText = contentRef.current.textContent?.slice(offset) || '';
 
             contentRef.current.textContent = beforeText;
+            timestampsRef.current.remote = Date.now();
             onUpdateName(beforeText);
             onEnter?.(afterText);
 
@@ -131,6 +138,7 @@ function TitleEditable({
               focusedTextbox();
             }, 0);
           } else {
+            timestampsRef.current.remote = Date.now();
             onUpdateName(contentRef.current.textContent || '');
           }
         } else if (e.key === 'ArrowDown' || (e.key === 'ArrowRight' && isCursorAtEnd(contentRef.current))) {
diff --git a/src/components/view-meta/ViewMetaPreview.tsx b/src/components/view-meta/ViewMetaPreview.tsx
index d0aa36ca..a2892605 100644
--- a/src/components/view-meta/ViewMetaPreview.tsx
+++ b/src/components/view-meta/ViewMetaPreview.tsx
@@ -259,7 +259,13 @@ export function ViewMetaPreview({
               </CustomIconPopover>
             ) : null}
             {!readOnly && viewId ? (
-              <TitleEditable onFocus={onFocus}   viewId={viewId} name={name || ''} onUpdateName={handleUpdateName} onEnter={onEnter} />
+              <TitleEditable
+                onFocus={onFocus}
+                viewId={viewId}
+                name={name || ''}
+                onUpdateName={handleUpdateName}
+                onEnter={onEnter}
+              />
             ) : (
               <div
                 style={{
diff --git a/src/components/ws/useBroadcastChannel.ts b/src/components/ws/useBroadcastChannel.ts
index e2b386ee..1afa8e9b 100644
--- a/src/components/ws/useBroadcastChannel.ts
+++ b/src/components/ws/useBroadcastChannel.ts
@@ -1,15 +1,16 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { messages } from "@/proto/messages";
+import { messages } from '@/proto/messages';
 
 export type BroadcastChannelType = {
   lastBroadcastMessage: messages.Message | null;
   postMessage: (msg: messages.IMessage, keep?: boolean) => void;
-}
+};
 
 export const useBroadcastChannel = (channelName: string): BroadcastChannelType => {
   const channel = useMemo(() => new BroadcastChannel(channelName), [channelName]);
   const [lastMessage, setLastMessage] = useState<messages.Message | null>(null);
+  const [isChannelClosed, setIsChannelClosed] = useState(false);
 
   useEffect(() => {
     const handleMessage = (event: MessageEvent) => {
@@ -18,17 +19,30 @@ export const useBroadcastChannel = (channelName: string): BroadcastChannelType =
       setLastMessage(message);
     };
 
-    channel.addEventListener("message", handleMessage);
+    channel.addEventListener('message', handleMessage);
 
     return () => {
-      channel.removeEventListener("message", handleMessage);
+      channel.removeEventListener('message', handleMessage);
+      setIsChannelClosed(true);
       channel.close();
     };
   }, [channel]);
 
-  const sendMessage = useCallback((msg: messages.IMessage) => {
-    channel.postMessage(messages.Message.encode(msg).finish());
-  }, [channel]);
+  const sendMessage = useCallback(
+    (msg: messages.IMessage) => {
+      if (isChannelClosed) {
+        console.warn('You cannot send message to a closed channel');
+        return;
+      }
+
+      try {
+        channel.postMessage(messages.Message.encode(msg).finish());
+      } catch (error) {
+        console.error('Failed to send message to BroadcastChannel:', error);
+      }
+    },
+    [channel, isChannelClosed]
+  );
 
   return { lastBroadcastMessage: lastMessage, postMessage: sendMessage };
-};
\ No newline at end of file
+};
diff --git a/src/components/ws/useSync.ts b/src/components/ws/useSync.ts
index c4228911..42900c94 100644
--- a/src/components/ws/useSync.ts
+++ b/src/components/ws/useSync.ts
@@ -4,20 +4,20 @@ import * as awarenessProtocol from 'y-protocols/awareness';
 import * as Y from 'yjs';
 
 import { handleMessage, initSync, SyncContext } from '@/application/services/js-services/sync-protocol';
-import {Types} from "@/application/types";
+import { Types } from '@/application/types';
 import { AppflowyWebSocketType } from '@/components/ws/useAppflowyWebSocket';
-import {BroadcastChannelType} from "@/components/ws/useBroadcastChannel";
-import {messages} from "@/proto/messages";
+import { BroadcastChannelType } from '@/components/ws/useBroadcastChannel';
+import { messages } from '@/proto/messages';
 
 export interface RegisterSyncContext {
   /**
    * The Y.Doc instance to be used for collaboration.
    * It must have a valid guid (UUID v4).
    */
-  doc: Y.Doc,
-  awareness?: awarenessProtocol.Awareness,
-  collabType: Types,
-  emit?: (reply: messages.IMessage) => void
+  doc: Y.Doc;
+  awareness?: awarenessProtocol.Awareness;
+  collabType: Types;
+  emit?: (reply: messages.IMessage) => void;
 }
 
 export type UpdateCollabInfo = {
@@ -25,18 +25,18 @@ export type UpdateCollabInfo = {
    * The objectId of the Y.Doc instance.
    * It must be a valid UUID v4.
    */
-  objectId: string,
-  collabType: Types,
+  objectId: string;
+  collabType: Types;
   /**
    * The timestamp when the corresponding update has been known to the server.
    */
-  publishedAt?: Date,
-}
+  publishedAt?: Date;
+};
 
 export type SyncContextType = {
-  registerSyncContext: (context: RegisterSyncContext) => SyncContext,
-  lastUpdatedCollab: UpdateCollabInfo | null,
-}
+  registerSyncContext: (context: RegisterSyncContext) => SyncContext;
+  lastUpdatedCollab: UpdateCollabInfo | null;
+};
 
 export const useSync = (ws: AppflowyWebSocketType, bc: BroadcastChannelType): SyncContextType => {
   const { sendMessage, lastMessage } = ws;
@@ -60,7 +60,7 @@ export const useSync = (ws: AppflowyWebSocketType, bc: BroadcastChannelType): Sy
 
       console.log('Received collab message:', message.collabType, publishedAt, message);
 
-      setLastUpdatedCollab({objectId, publishedAt, collabType: message.collabType as Types});
+      setLastUpdatedCollab({ objectId, publishedAt, collabType: message.collabType as Types });
     }
   }, [lastMessage, registeredContexts, setLastUpdatedCollab]);
 
@@ -80,43 +80,45 @@ export const useSync = (ws: AppflowyWebSocketType, bc: BroadcastChannelType): Sy
 
       console.log('Received broadcasted collab message:', message.collabType, publishedAt, message);
 
-      setLastUpdatedCollab({objectId, publishedAt, collabType: message.collabType as Types});
+      setLastUpdatedCollab({ objectId, publishedAt, collabType: message.collabType as Types });
     }
-
   }, [lastBroadcastMessage, registeredContexts, setLastUpdatedCollab]);
 
-  const registerSyncContext = useCallback(((context: RegisterSyncContext): SyncContext => {
-    if (!uuidValidate(context.doc.guid)) {
-      throw new Error(`Invalid Y.Doc guid: ${context.doc.guid}. It must be a valid UUID v4.`);
-    }
+  const registerSyncContext = useCallback(
+    (context: RegisterSyncContext): SyncContext => {
+      if (!uuidValidate(context.doc.guid)) {
+        throw new Error(`Invalid Y.Doc guid: ${context.doc.guid}. It must be a valid UUID v4.`);
+      }
 
-    const existingContext = registeredContexts.current.get(context.doc.guid);
+      const existingContext = registeredContexts.current.get(context.doc.guid);
 
-    // If the context is already registered, return it
-    if (existingContext !== undefined) {
-      return existingContext;
-    }
+      // If the context is already registered, return it
+      if (existingContext !== undefined) {
+        return existingContext;
+      }
 
-    console.log(`Registering sync context for objectId ${context.doc.guid} with collabType ${context.collabType}`);
-    context.emit = (message) => {
-      sendMessage(message);
-      postMessage(message);
-    };
+      console.log(`Registering sync context for objectId ${context.doc.guid} with collabType ${context.collabType}`);
+      context.emit = (message) => {
+        sendMessage(message);
+        postMessage(message);
+      };
 
-    // SyncContext extends RegisterSyncContext by attaching the emit function and destroy handler
-    const syncContext = context as SyncContext;
+      // SyncContext extends RegisterSyncContext by attaching the emit function and destroy handler
+      const syncContext = context as SyncContext;
 
-    registeredContexts.current.set(syncContext.doc.guid, syncContext);
-    context.doc.on('destroy', () => {
-      // Remove the context from the registered contexts when the Y.Doc is destroyed
-      registeredContexts.current.delete(context.doc.guid);
-    });
+      registeredContexts.current.set(syncContext.doc.guid, syncContext);
+      context.doc.on('destroy', () => {
+        // Remove the context from the registered contexts when the Y.Doc is destroyed
+        registeredContexts.current.delete(context.doc.guid);
+      });
 
-    // Initialize the sync process for the new context
-    initSync(syncContext);
+      // Initialize the sync process for the new context
+      initSync(syncContext);
 
-    return syncContext;
-  }), [registeredContexts, sendMessage, postMessage]);
+      return syncContext;
+    },
+    [registeredContexts, sendMessage, postMessage]
+  );
 
-  return {registerSyncContext, lastUpdatedCollab};
-}
\ No newline at end of file
+  return { registerSyncContext, lastUpdatedCollab };
+};
diff --git a/src/pages/AppPage.tsx b/src/pages/AppPage.tsx
index 9f88bc4c..67071cf1 100644
--- a/src/pages/AppPage.tsx
+++ b/src/pages/AppPage.tsx
@@ -1,6 +1,7 @@
+import React, { lazy, memo, Suspense, useCallback, useContext, useEffect, useMemo } from 'react';
+
 import { UIVariant, ViewLayout, ViewMetaProps, YDoc } from '@/application/types';
-import Help from '@/components/_shared/help/Help';
-import { findView } from '@/components/_shared/outline/utils';
+import { AIChat } from '@/components/ai-chat';
 import {
   AppContext,
   useAppHandlers,
@@ -12,13 +13,13 @@ import DatabaseView from '@/components/app/DatabaseView';
 import { Document } from '@/components/document';
 import RecordNotFound from '@/components/error/RecordNotFound';
 import { useService } from '@/components/main/app.hooks';
+import Help from '@/components/_shared/help/Help';
+import { findView } from '@/components/_shared/outline/utils';
 import { getPlatform } from '@/utils/platform';
-import React, { lazy, memo, Suspense, useCallback, useContext, useEffect, useMemo } from 'react';
-import { AIChat } from '@/components/ai-chat';
 
 const ViewHelmet = lazy(() => import('@/components/_shared/helmet/ViewHelmet'));
 
-function AppPage () {
+function AppPage() {
   const viewId = useAppViewId();
   const outline = useAppOutline();
   const ref = React.useRef<HTMLDivElement>(null);
@@ -48,10 +49,7 @@ function AppPage () {
   const helmet = useMemo(() => {
     return view && rendered ? (
       <Suspense>
-        <ViewHelmet
-          name={view.name}
-          icon={view.icon || undefined}
-        />
+        <ViewHelmet name={view.name} icon={view.icon || undefined} />
       </Suspense>
     ) : null;
   }, [rendered, view]);
@@ -72,7 +70,7 @@ function AppPage () {
         console.error(e);
       }
     },
-    [loadView],
+    [loadView]
   );
 
   useEffect(() => {
@@ -91,15 +89,15 @@ function AppPage () {
   const viewMeta: ViewMetaProps | null = useMemo(() => {
     return view
       ? {
-        name: view.name,
-        icon: view.icon || undefined,
-        cover: view.extra?.cover || undefined,
-        layout: view.layout,
-        visibleViewIds: [],
-        viewId: view.view_id,
-        extra: view.extra,
-        workspaceId,
-      }
+          name: view.name,
+          icon: view.icon || undefined,
+          cover: view.extra?.cover || undefined,
+          layout: view.layout,
+          visibleViewIds: [],
+          viewId: view.view_id,
+          extra: view.extra,
+          workspaceId,
+        }
       : null;
   }, [view, workspaceId]);
 
@@ -111,7 +109,7 @@ function AppPage () {
 
       return Promise.reject();
     },
-    [uploadFile, view],
+    [uploadFile, view]
   );
 
   const service = useService();
@@ -119,14 +117,10 @@ function AppPage () {
   const isMobile = getPlatform().isMobile;
 
   const viewDom = useMemo(() => {
-
     if (!doc && layout === ViewLayout.AIChat && viewId) {
       return (
         <Suspense>
-          <AIChat
-            chatId={viewId}
-            onRendered={onRendered}
-          />
+          <AIChat chatId={viewId} onRendered={onRendered} />
         </Suspense>
       );
     }
@@ -157,7 +151,29 @@ function AppPage () {
         {...handlers}
       />
     ) : null;
-  }, [doc, layout, handlers, viewId, viewMeta, workspaceId, requestInstance, isMobile, toView, loadViewMeta, createRowDoc, appendBreadcrumb, loadView, onRendered, updatePage, addPage, deletePage, openPageModal, loadViews, setWordCount, handleUploadFile]);
+  }, [
+    doc,
+    layout,
+    handlers,
+    viewId,
+    viewMeta,
+    workspaceId,
+    requestInstance,
+    isMobile,
+    toView,
+    loadViewMeta,
+    createRowDoc,
+    appendBreadcrumb,
+    loadView,
+    onRendered,
+    updatePage,
+    addPage,
+    deletePage,
+    openPageModal,
+    loadViews,
+    setWordCount,
+    handleUploadFile,
+  ]);
 
   useEffect(() => {
     if (!viewId) return;
@@ -166,10 +182,7 @@ function AppPage () {
 
   if (!viewId) return null;
   return (
-    <div
-      ref={ref}
-      className={'relative h-full w-full'}
-    >
+    <div ref={ref} className={'relative h-full w-full'}>
       {helmet}
 
       {notFound ? <RecordNotFound /> : <div className={'h-full w-full'}>{viewDom}</div>}