이번에는 단축키 관련 내용들을 추가했습니다!!
이전에도 해봤던 내용이라 단순하게 생각했는데,
기존에 존재하는 에디터랑 사용하다보니 예상치 못한 변수들이 있었네요..
그 덕에 좋은 경험을 얻을 수 있었습니다!
🎉 Done
1. Toolbar 스타일 단축키 추가
여러 우여곡절 끝에 결국 직접 구현하는 방향을 선택했습니다.
1-1. 첫 번째 삽질 react-hot-keys
이전에 관련된 기능을 라이브러리를 통해 쉽게 구현했던 기억이 있었기때문에,
이번에도 라이브러리를 당연히 사용하려고 계획했습니다.
무려 11일 전까지 유지보수되고 있는 라이브러리가 있네요!
그래서 이걸 사용했더니... 웬걸
동작하지 않았습니다.
이 때까지만 해도 뭔가 호환성이 잘 안 맞나? 싶어서
단순하게 다른 라이브러리를 찾아봤습니다!
1-2. 두 번째 삽질 react-hotkeys
음식도 우리가 아는 맛이 더 그립듯이
예전에 썼던 라이브러리를 보니까 이름이 살-짝 다른 라이브러리더라고여
유지보수된지 조금 시간이 흐르기는 했지만,
이전에도 잘 동작했으니 이번에도 이 라이브러리는 잘 동작할 것이라 생각했습니다.
그러나 이것 역시 잘 동작하지 않았고,
이 때 뭔가 다른 문제가 있을 거라는 생각을 하게 됐습니다.
1-3. 제대로된 첫 삽 CodeMirror의 bubbling test
보통의 단축키들은 up event에서 커맨드를 실행하고 있는데,
CodeMirror에서 up event 의 버블링을 막고 있었습니다.
CodeMirror 자체가 에디터기 때문에 자신들이 정의한 단축키 셋이 있었고,
이 때 사이드 이펙트를 막기 위해 자기 안에서 발생한 단축키 event에 대해서는
stopPropagation 처리를 하고 있었던 거였죠...
보통 hotkey 관련 라이브러리들은 내가 단축키를 실행하고자 하는 컴포넌트를
감싸는 형태로 제공되기 때문에,
child 컴포넌트에서 parent로 전달하지 않으면 아무런 소용이 없는 것이었습니다 ㅠ
뒤늦게 나마 이 사실을 알게 됐고 아 이건 구현할 수밖에 없겠구나 생각이 들어서
직접 구현을 하게 됐습니다.
1-4. 직접 구현
먼저 ctrl 키와 맥 OS의 command 키를 구분하는 동작이 필요했습니다.
cmd는 KeyboardEvent의 metaKey로부터, ctrl은 ctrlKey로
구분할 수 있도록 돼있네요!
- 이전에는 눌린 키를 식별할 때 keyCode를 이용하곤 했는데, deprecated되고 key로 바뀌면서 코드를 좀 더 직관적으로 짤 수 있게 됐네요!
그리고 예전에 툴바 커맨드를 함수로 분리해놨기 때문에,
쉽게 연결하고 마무리할 수 있었습니다.
막상 알아보면 이렇게 간단한데 굳이 라이브러리를 사용할 필요가 있었나..?
라는 생각이 들게 되네요.
앞으로 구현할 일이 생기면 지금 경험을 토대로 더 수월하게 진행할 수 있을 거 같습니다!
1-5. 구현 후 회고
1-5-1. CodeMirror에서 단축키를 확장하는 방법은 없었을까?
- 갑자기 생각나서 찾아봤는데 공식 매뉴얼에는 없네요..
- 조금 더 찾아보면 다른 방법이 있을지도?
1-5-2. 첫 번째 라이브러리에 keyDown도 안 됐었는데.. 그건 그냥 버근가?
📝 To-Do
1. 스타일 적용 시나리오 보완
2. 인용 등에 적용되는 CSS 추가
3. 이미지 업로드 다이얼로그 구현
4. 출간하기 후 포스팅 view 페이지 연결
5. 기존 포스팅에서 수정하기 클릭 시
