react-draft-wysiwyg editor 에 대한 버그 사항.

[saseungmin]

🚀 이슈 사항

• react-draft-wysiwyg editor에 자체적인 버그가 존재한다. 저만의 문제인 줄 알았지만, 공식 사이트의 데모에서도 같은 문제가 발생.

📢 첫 번째 문제

그냥 엔터를 치게되면, <p></p>태그가 삽입되어, 중간에 공백이 생겨 코드 블럭등 아래와 같이 되게 된다.

• 그렇기 때문에 Shift-Enter로 입력을 해줘야 한다.

• 여기서 영어로 입력할 때는 문제가 되는 점은 없다. 하지만, 한글로 입력시 버그가 존재한다. 이 문제는 공식 사이트의 데모에서도 해본 결과 같은 문제가 발생하고, 이슈에서도 확인하였지만 여전히 존재하고 수정하지 않는거 같았다. 입력을 하고 Shift-Enter를 하면 그전에 입력했던 글자들이 씹히는 현상이다.

• 딱히 해결 방안은 없는거 같고, 다음과 같이 입력하면 되긴한다. 입력을 다하고, Shift-Enter를 입력하기전 방향키 ➡를 입력해주고 하면 된다.

• 리덕스에 값이 들어가는 것을 확인해봤는데, 한글은 현재 입력중인 상태를 onChange하면 바로바로 들어가지 않는다. space를 치거나 enter를 쳐야지 그때 리덕스에 상태가 반영이 된다. 그래서 리덕스에서는 값이 존재하지 않는데, editor의 value가 redux store의 value로 변경이되서 기존에 editor에 입력했던 값들이 삭제된다.

📢 두 번째 문제

• 에디터를 사용하여 image를 넣고 싶을 때 생기는 문제. 이 문제 역시 issue 사항에 계속 올라오는 문제 (Unknown DraftEntity key: null) 이 문제는 이미지를 삽입한 뒤, 바로 한글(중국어도..)를 입력시 생기는 문제이다. 이 경우의 해결 방법은 draft.js 버전을 0.10.* 버전으로 변경하면 해결이 되긴한다. 하지만, 버전이 낮아 unsafe-lifecycles warning이 나타난다.

🤔 흠..

버그가 존재하지만 npm에 최근 배포날짜가 8달 전인거 봐서 아마 수정할 계획은 없는거 같고, 400개가 넘는 issue도 존재하니 더욱 수정할 계획은 없어보인다. 아마 새로운 에디터를 만들고 계신거 같다.. (https://github.com/nib-edit/Nib)

[ggombee]

버그가 지속되는 것 같은데,, 혹시 새로운 에디터로 교체 하셨나요..?

[saseungmin]

@ggombee 버그는 아마 해결되지 않을거 같아요.. 아뇨! 아직 교체하지는 않았습니당. 근데 언젠가는 교체할듯싶네요.

만약에 교체한다면 markdown 에디터를 사용하거나 직접 markdown에디터를 만들어 사용할 거 같아요! TOAST UI Markdown Editor 같은 것을 사용하거나? 직접 만든다면 marked.js와 highlight.js를 사용해서 만들 수 있을 거 같아요!

[ggombee]

@saseungmin 답변 감사드립니다~!