Bug : 같은 라인에서 동시 입력시 한글 밀리는 현상

[komplamoose]

설명

---

재현 조건

• 같은 라인, 본인의 커서 앞에서 누군가 remoteInsert 중에 한글을 입력할 시에, 글이 밀려서 보임
• 다른 라인이거나, 본인 커서 뒤에서 입력하면 괜찮음.

버그 이유 (추측)

• 한글의 경우 +input가 아니라 *Composit 처리가 되는데, 내가 Composition 중에 remoteInsert를 처리하면, 그 상태에서 새롭게 CompositionStart가 발행되어, 새로운 Composit 문자 합성으로 넘어가고 CompositionUpdate가 되어버림.
• 원래는 CompositionUpdate 시 기존 문자를 덮어씌워야 하는데, start를 새로하게 되면 덮어씌울 문자가 없어서 새로운 문자 입력으로 처리되어버림.
• 또한 이 경우 CompositionEnd 이벤트도 발생하지 않는다. (강제로 넘어가버렸는데도)
• 처음엔 커서가 밀려서 입력이 제대로 안되고 인덱스 삭제 처리가 안되는 줄 알았는데, 애초에 DOM Event단에서 Start를 찍어버린다 (커서랑 연관된 것인지는 아직 모름)

EVENT_NAME : +input
14:57:32.926 Editor.tsx:70 from :  0
14:57:32.926 Editor.tsx:71 to :  0
14:57:32.926 Editor.tsx:72 EVENT Value : [' ']
14:57:40.419 Editor.tsx:100 COMPOSITION START 
14:57:40.420 Editor.tsx:101 COMPOSITION UPDATE 
14:57:40.421 Editor.tsx:69 EVENT_NAME : *compose
14:57:40.421 Editor.tsx:70 from :  1
14:57:40.421 Editor.tsx:71 to :  1
14:57:40.421 Editor.tsx:72 EVENT Value : ['ㅇ'] 
14:57:40.497 Editor.tsx:101 COMPOSITION UPDATE
14:57:40.498 Editor.tsx:69 EVENT_NAME : *compose
14:57:40.498 Editor.tsx:70 from :  1
14:57:40.498 Editor.tsx:71 to :  2
14:57:40.498 Editor.tsx:72 EVENT Value : ['아']
14:57:40.639 Editor.tsx:101 COMPOSITION UPDATE
14:57:40.640 Editor.tsx:69 EVENT_NAME : *compose
14:57:40.640 Editor.tsx:70 from :  1
14:57:40.640 Editor.tsx:71 to :  2
14:57:40.640 Editor.tsx:72 EVENT Value : ['안']
14:57:40.779 Editor.tsx:101 COMPOSITION UPDATE
14:57:40.782 Editor.tsx:102 COMPOSITION End:  SyntheticBaseEvent {_reactName: 'onCompositionEnd', _targetInst: null, type: 'compositionend', nativeEvent: CompositionEvent, target: textarea, …}
14:57:40.783 Editor.tsx:100 COMPOSITION START 
14:57:40.783 Editor.tsx:101 COMPOSITION UPDATE
14:57:40.784 Editor.tsx:69 EVENT_NAME : *compose
14:57:40.784 Editor.tsx:70 from :  2
14:57:40.784 Editor.tsx:71 to :  2
14:57:40.784 Editor.tsx:72 EVENT Value : ['ㄴ']
14:57:40.942 Editor.tsx:100 COMPOSITION START
14:57:40.942 Editor.tsx:101 COMPOSITION UPDATE
14:57:40.943 Editor.tsx:69 EVENT_NAME : *compose
14:57:40.943 Editor.tsx:70 from :  4
14:57:40.943 Editor.tsx:71 to :  4
14:57:40.943 Editor.tsx:72 EVENT Value : ['녀']
14:57:41.227 Editor.tsx:100 COMPOSITION START
14:57:41.227 Editor.tsx:101 COMPOSITION UPDATE
14:57:41.228 Editor.tsx:69 EVENT_NAME : *compose
14:57:41.229 Editor.tsx:70 from :  7
14:57:41.229 Editor.tsx:71 to :  7
14:57:41.229 Editor.tsx:72 EVENT Value : ['녕']
14:57:41.666 Editor.tsx:69 EVENT_NAME : *compose
14:57:41.666 Editor.tsx:70 from :  10
14:57:41.666 Editor.tsx:71 to :  10
14:57:41.666 Editor.tsx:72 EVENT Value : ['녕']
14:57:41.674 Editor.tsx:100 COMPOSITION START
14:57:41.675 Editor.tsx:101 COMPOSITION UPDATE
14:57:41.676 Editor.tsx:69 EVENT_NAME : *compose
14:57:41.676 Editor.tsx:70 from :  11
14:57:41.676 Editor.tsx:71 to :  11
14:57:41.676 Editor.tsx:72 EVENT Value : ['ㅎ']
14:57:41.785 Editor.tsx:101 COMPOSITION UPDATE
14:57:41.785 Editor.tsx:69 EVENT_NAME : *compose
14:57:41.786 Editor.tsx:70 from :  11
14:57:41.786 Editor.tsx:71 to :  12
14:57:41.786 Editor.tsx:72 EVENT Value : ['하']
14:57:41.886 Editor.tsx:101 COMPOSITION UPDATE
14:57:41.887 Editor.tsx:69 EVENT_NAME : *compose
14:57:41.887 Editor.tsx:70 from :  11
14:57:41.887 Editor.tsx:71 to :  12
14:57:41.887 Editor.tsx:72 EVENT Value : ['핫']
14:57:41.989 Editor.tsx:101 COMPOSITION UPDATE
14:57:41.993 Editor.tsx:69 EVENT_NAME : *compose
14:57:41.993 Editor.tsx:70 from :  11
14:57:41.993 Editor.tsx:71 to :  12
14:57:41.993 Editor.tsx:72 EVENT Value : ['하']
14:57:42.010 Editor.tsx:102 COMPOSITION End:  SyntheticBaseEvent {_reactName: 'onCompositionEnd', _targetInst: null, type: 'compositionend', nativeEvent: CompositionEvent, target: textarea, …}
14:57:42.021 Editor.tsx:100 COMPOSITION START
14:57:42.022 Editor.tsx:101 COMPOSITION UPDATE
14:57:42.027 Editor.tsx:69 EVENT_NAME : *compose
14:57:42.027 Editor.tsx:70 from :  12
14:57:42.027 Editor.tsx:71 to :  12
14:57:42.027 Editor.tsx:72 EVENT Value : ['세']
14:57:42.086 Editor.tsx:101 COMPOSITION UPDATE
14:57:42.087 Editor.tsx:69 EVENT_NAME : *compose
14:57:42.088 Editor.tsx:70 from :  12
14:57:42.088 Editor.tsx:71 to :  13
14:57:42.088 Editor.tsx:72 EVENT Value : ['셍']
14:57:42.251 Editor.tsx:101 COMPOSITION UPDATE
14:57:42.252 Editor.tsx:69 EVENT_NAME : *compose
14:57:42.252 Editor.tsx:70 from :  12
14:57:42.252 Editor.tsx:71 to :  13
14:57:42.252 Editor.tsx:72 EVENT Value : ['세']
14:57:42.259 Editor.tsx:102 COMPOSITION End:  SyntheticBaseEvent {_reactName: 'onCompositionEnd', _targetInst: null, type: 'compositionend', nativeEvent: CompositionEvent, target: textarea, …}
14:57:42.260 Editor.tsx:100 COMPOSITION START
14:57:42.261 Editor.tsx:101 COMPOSITION UPDATE
14:57:42.262 Editor.tsx:69 EVENT_NAME : *compose
14:57:42.262 Editor.tsx:70 from :  13
14:57:42.262 Editor.tsx:71 to :  13
14:57:42.262 Editor.tsx:72 EVENT Value : ['요']
14:58:03.971 Editor.tsx:102 COMPOSITION End:  SyntheticBaseEvent {_reactName: 'onCompositionEnd', _targetInst: null, type: 'compositionend', nativeEvent: CompositionEvent, target: textarea, …}

완료 조건

---

• 현재 문서에 " "가 존재하고, 왼쪽에 유저 1이 aaaaa를 입력하는 상황에서 유저 2가 "안녕하세요"를 입력했을 때, 결과물이 "aaaaa 안녕하세요"가 된다

[komplamoose]

홍영택님 상담 결과 Codemirror 라이브러리를 뜯어서 고쳐야 하는 걸로 보임.