리액트 에디터 개발 기록

현재 나는 무엇을 하고있는가?

저는 현재 프로젝트로 개발자 커뮤니티를 제작중입니다.
여기서 특징은 게시글과 댓글 모두 마크다운 문법을 사용할 수 있는 에디터를 이용한다는 것인데 직접 만들어 사용하기로 결정했습니다.

왜 에디터를 직접 만드려고 하는가?

기존에 존재하는 에디터를 가져와도 되지 않나?라는 의문이 충분히 드실 수 있는데, 일단 기존에 존재하는 WYSIWYG(위즈윅: What you see is what you get) 에디터를 사용하기 위해 여러가지 패키지들을 다운받아봤지만 원하는 기능(코드 블럭을 사용할 수 있는가?)을 충족시키는 에디터가 별로 없었고 찾았더라도 업데이트가 되어있지 않아 사용하고있는 리액트 버전에선 동작하지 않는 경우가 많았습니다. 그나마 CKEditor를 끝까지 사용해보려했지만 제가 무언가 잘못했는지 코드 블럭을 추가할 수 없는 문제가 발생했습니다.(다크 모드도 지원하지 않아 CSS 조작을 따로 해야하는 점도 불편합니다.)

사용하려던 에디터에도 문제가 생겼고 원래 기획에도 시간이 남는다면 에디터를 만들기로 했었기 때문에 차라리 직접 만들자는 생각이 들어 만들게 되었습니다.

노션 같은 에디터

이러한 에디터를 작성하기 위해 좋은 글을 발견했고 TS로 교체하느라 조금 고생했지만 얼추 정상적으로 동작하는 코드를 만들 수 있었습니다.

추가한 코드

placeholder 적용하기(흉내내기)

contentEditable에 placeholder 적용하기(흉내내기)

위,아래 방향키로 블록 이동하기

if (e.key === "ArrowUp") {
  const previous = this.contentEditable.current
  ?.previousElementSibling as HTMLElement;
  if (previous) {
    previous.focus();
  }
}
if (e.key === "ArrowDown") {
  const next = this.contentEditable.current
  ?.nextElementSibling as HTMLElement;
  if (next) {
    next.focus();
  }
}