편집기 구현 방법

vi 모방 vs 기능 없는 편집기

• vi 를 이용한 Git 문제가 많이 있다. vi 편집기를 사용하지 않는 문제를 제외하면, 학습할 수 있는 내용이 많이 없어진다.
• 지원하지 않는다면, 편집 후 (편집 완료 버튼같은)버튼으로 처리하거나 해야하는데 그렇게 되면 프로젝트의 완성도가 조금 떨어지는 것 같다고 판단했다.
• 개발 속도 또한 고려해야 하므로 최소한의 기능만 지원하기로 결정했다.

편집기 HTML 구조

지원하는 기능

지원하지 않는 명령어 안내

• ❌ 지원하는 명령어가 아니면, 안내 메시지를 보여주자
  • textarea 포커싱되어있다. 페이지 새로고침하려고 ctrl + r 을 눌렀는데 textarea에서 지원하지 않는 명령어라고 뜬다. 그리고 preventDefault 라서 새로고침도 안 되는 문제가 있다.
• ❌ 지원하지 않는 명령어라면, 안내 메시지를 보여주자

  • vi 모드별로 명령어가 너무 많다.

    

    https://inpa.tistory.com/entry/LINUX-📚-Vi-Vim-에디터-다루기-명령어-💯-정리

    • 명령모드일 때 지원하지 않는 명령어
    • 라인모드일 때 지원하지 않는 명령어
    • 입력모드일 때 지원하지 않는 명령어
• ✅ 편집기 하단에 캡션으로 지원하는 명령어를 보여주자

textarea 요소 > keydown 이벤트 핸들러 > preventDefault 문제

• 문제점
  • 현재 편집기 모드가 명령 모드일 때, textarea 요소에 입력이 되면 안 된다. 이를 keydown 이벤트 핸들러에서 명령 모드라면 preventDefault 메서드를 실행해 구현했었다.
  • 하지만 textarea 요소에 포커싱한 채로 페이지 새로고침 단축키(ctrl + r) 과 같은 입력이 들어왔을 때, 기본 동작이 중단된다.