1. 지금은 private repo여서 이슈를 볼순 없지만 이전에 작성할떄 WYSIWYG가 상당히 어려운 분야라는걸 깨달았습니다. 현재 기준으로 slate.js의 한글 인코딩 이슈 해결되어서 모바일에서도 사용가능하나, 거의 6년이 다되가는데 제 v20 휴대폰을 기준으로 너무 느려서 prosemirror를 사용하기로 했습니다.
2. prosemirror 그대로 사용하기엔 진입장벽이 매우 높아서 한번 포팅한 라이브러리인 tiptap을 사용할까 생각했지만 공부할때 근간부터 차근차근 하는것을 즐기는 성격이라 prosemirror를 쌩으로 한번 사용해보기로 했습니다.

표본

개인적으로 naver blog에서 글작성을 할때 pc, mobile에따라 각각 최적화된 editor를 지원하며, 이미지 등의 figure를 옮길때도 드래드&드롭 방식으로 한줄한줄 이동하기에도 매우 편했습니다.

하지만 그렇게까지 만들기에 기술적&시간적으로 부족한 상황이기에 글, 사진, youtube 영상 등을 성격에따라 블록단위로 나눈다음에

1. 글 block에서는 prosemirror를 사용
2. 사진, youtube block에서는 데이터에 따라 react를 사용

위와같은 방향으로 접근할경우 글을 제외한 다른 성격의 block에서는 react를 적극적으로 활용할수 있다고 생각했기 때문에 이렇게 진행하기로 했습니다.

때문에 추후 투표, 글 + 사진 block 같은 다른 성격의 block들이 생겨도 react를 활용해서 대응가능합니다.

하지만 pc에서는 키보드 상, 하, control + a 같은 특수키에 대응시켜야하는 경우도 많기때문에 추후 block을 전체적으로 기능이 view, state로 나눠진 prosemirror의 장점을 활용해서 감쌀 예정입니다. (현재는 block 레벨에서 키보드 특수키에 대한 대응이 없는상태입니다)

Componenting

prosemirror-view의 view 메소드를 이용했습니다.

Context로 넘겨주는 값들

1. prosemirror view state
2. addEventListener