Fix Korean IME composition breakage by pausing sync during composition

During Korean IME composition, remote changes applied to the Yorkie Tree
via applyChangePack() caused PM-Yorkie state divergence, breaking jaso
completion. Switch to SyncMode.RealtimeSyncOff during composition to
prevent remote changes from arriving, then resume Realtime sync and
flush accumulated changes after compositionend.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: hackerwins

examples/vanilla-prosemirror/src/main.ts

@@ -74,6 +74,7 @@ async function main() {
     const view = new EditorView(editorEl, { state });
 
     const binding = new YorkieProseMirrorBinding(view, doc, 'tree', {
+      client,
       cursors: {
         enabled: true,
         overlayElement: cursorOverlayEl,

packages/prosemirror/examples/basic.ts

@@ -163,6 +163,7 @@ async function main() {
 
     // 4. Create and initialize binding
     const binding = new YorkieProseMirrorBinding(view, doc, 'tree', {
+      client,
       cursors: {
         enabled: true,
         overlayElement: cursorOverlayEl,

packages/prosemirror/examples/custom-schema.ts

@@ -210,6 +210,7 @@ async function main() {
 
     // 4. Create and initialize binding
     const binding = new YorkieProseMirrorBinding(view, doc, 'tree', {
+      client,
       markMapping,
       cursors: {
         enabled: true,

packages/prosemirror/src/binding.ts

@@ -1,6 +1,6 @@
 import type { EditorView } from 'prosemirror-view';
 import type { Transaction } from 'prosemirror-state';
-import { Tree } from '@yorkie-js/sdk';
+import { Tree, SyncMode } from '@yorkie-js/sdk';
 import type { MarkMapping, YorkieProseMirrorOptions } from './types';
 import { buildMarkMapping, invertMapping } from './defaults';
 import { pmToYorkie } from './convert';
@@ -42,8 +42,10 @@ export class YorkieProseMirrorBinding {
   private markMapping: MarkMapping;
   private elementToMarkMapping: Record<string, string>;
   private wrapperElementName: string;
+  private client?: { changeSyncMode(doc: any, syncMode: string): Promise<any> };
   private isSyncing = false;
   private isComposing = false;
+  private isSyncPaused = false;
   private composingBlockRange: { from: number; to: number } | undefined =
     undefined;
   private hasPendingRemoteChanges = false;
@@ -68,6 +70,7 @@ export class YorkieProseMirrorBinding {
     this.elementToMarkMapping = invertMapping(this.markMapping);
     this.wrapperElementName = options.wrapperElementName || 'span';
     this.onLog = options.onLog;
+    this.client = options.client;
 
     if (options.cursors?.enabled) {
       this.cursorManager = new CursorManager(options.cursors);
@@ -125,6 +128,7 @@ export class YorkieProseMirrorBinding {
    * Clean up all subscriptions and overrides.
    */
   destroy(): void {
+    this.resumeRemoteSync();
     this.unsubscribeDoc?.();
     this.unsubscribePresence?.();
     this.cursorManager?.destroy();
@@ -156,6 +160,7 @@ export class YorkieProseMirrorBinding {
   private onCompositionStart = (): void => {
     this.isComposing = true;
     this.composingBlockRange = this.getComposingBlockRange();
+    this.pauseRemoteSync();
   };
 
   private onCompositionEnd = (): void => {
@@ -182,6 +187,25 @@ export class YorkieProseMirrorBinding {
     return undefined;
   }
 
+  private pauseRemoteSync(): void {
+    if (!this.client || this.isSyncPaused) return;
+    this.isSyncPaused = true;
+    this.client
+      .changeSyncMode(this.doc, SyncMode.RealtimeSyncOff)
+      .catch((e) => {
+        this.onLog?.('error', `Failed to pause sync: ${(e as Error).message}`);
+        this.isSyncPaused = false;
+      });
+  }
+
+  private resumeRemoteSync(): void {
+    if (!this.client || !this.isSyncPaused) return;
+    this.isSyncPaused = false;
+    this.client.changeSyncMode(this.doc, SyncMode.Realtime).catch((e) => {
+      this.onLog?.('error', `Failed to resume sync: ${(e as Error).message}`);
+    });
+  }
+
   /**
    * Check whether a block-level diff overlaps the block being composed.
    */
@@ -209,7 +233,7 @@ export class YorkieProseMirrorBinding {
    * Flush all deferred remote changes after composition ends.
    */
   private flushPendingRemoteChanges(): void {
-    if (!this.hasPendingRemoteChanges) return;
+    if (!this.hasPendingRemoteChanges && !this.isSyncPaused) return;
     this.hasPendingRemoteChanges = false;
 
     // Wait for the browser to finish processing the compositionend event
@@ -222,6 +246,9 @@ export class YorkieProseMirrorBinding {
         return;
       }
 
+      // Resume sync first so accumulated remote changes arrive
+      this.resumeRemoteSync();
+
       // Apply any accumulated remote content changes
       try {
         this.isSyncing = true;

packages/prosemirror/src/types.ts

@@ -69,4 +69,8 @@ export type YorkieProseMirrorOptions = {
   cursors?: CursorOptions;
   /** Callback for sync log messages. */
   onLog?: (type: 'local' | 'remote' | 'error', message: string) => void;
+  /** Yorkie client instance used to pause/resume sync during IME composition. */
+  client?: {
+    changeSyncMode(doc: any, syncMode: string): Promise<any>;
+  };
 };