[MD]Quill의 placeholder에서 한글 IME 인식 문제: 기능 구현

현재 프로젝트에서 React Quill new를 다루는 과정에서 에디터를 만지면서 만난 에러들을 해결하는 포스팅이다.

react-quill-new를 쓰기로 선택한 이유는 특정 이벤트에 대한 지원이 중단 되면서 기본 react quill에서는 아래와 같은 경고 표시가 떴기 때문이다. 지원 중단 부분만 개선되고 지금까지는 기존 quill과 크게 다르지 않은 것 같다.

react-quill.js?v=d23b9689:5562 [Deprecation] Listener added for a 
'DOMNodeInserted' mutation event. Support for this event type has been removed, 
and this event will no longer be fired. See https://chromestatus.com/feature/5083947249172480 
for more information.

 

📍주어진 React Quill의 placeholder 기능에 문제가 생겼다.

기본으로 주어진 placeholder 기능 사용

 

한 글자를 입력했는데 사라지지 않는다.

 

당혹스럽게도, 두 글자까지 입력한 뒤에야 placeholder가 사라지는 상황을 맞닥뜨린다. 영어의 경우 문제가 없는데, 한국어의 경우에만 처음 텍스트 입력시 placeholder가 남아있는 상황. 한글 입력 방식(IME, Input Method Editor)이 영어와 다르기 때문에 입력을 처리하는 과정이 달라 발생하는 문제 같은데, 어쨌든 나는 한국인이고...

어쨌든 한국어를 커버해야 하는 입장이라 난감해지고 말았다.

 

 

 

 

💡해결법: placeholder 유사하게 자체 구현

마음 같아서는 placeholder을 그냥 빼버리면 더없이 좋겠으나... 사전 만들어진 디자인에 따르면 이 페이지는 placeholder을 제공해야 한다. 따라서 유사하게라도 구현을 해보기로 했다.

원리 자체는 어렵지 않다. 아래와 같이 값이 존재하는가, focus 되었는가 두 가지 조건의 useState를 사용한다.

  const [values, setValues] = useState<string>('');
  const [isFocused, setIsFocused] = useState<boolean>(false);

 

onFocus와 onBlur를 사용하여 해당 영역에 focus가 되었는지 여부를 감시한다. 

값이 없고 focus 되지 않은 경우만 placeholder라는 class를 가진 div가 드러나도록 조건을 준다.

!value로 처리하지 않으면 값을 입력하다가 focus만 벗어나도 다시 placeholder가 보인다.

!isFocused로 처리하지 않으면 quill의 value가 여전히 한글의 IME를 2글자부터 인식해서 제대로 작동하지 않는다.

          <div className={styles.quillWrapper}>
            {!isFocused && !values && (
              <div className={styles.placeholder}>
                데스크무드를 소개해주세요!                 
              </div> //기능을 따로 구현한 placeholder
            )}
            <QuillWrapper
              theme={'snow'}
              modules={modules}
              formats={['bold', 'color']}
              value={values}
              onChange={handleTextChange}
              onFocus={() => setIsFocused(true)}
              onBlur={() => setIsFocused(false)}
              className={styles.customQuill}
              placeholder="데스크무드를 소개해주세요!" //이렇게 입력한 placeholder이 문제여서 후에 삭제
            />
          </div>

 

적용된 사항

 

 

 

 

 

P.S. 사실 이 기능은 한 달 전에 해결하며 급하게 기능만 구현해둔 것인데, 불현듯 '왜 에디터에 기본 placeholder 기능이 분명 있을 텐데 내가 쓰지 않았지...?' 하며 까먹고 다시 적용 해봤다가 '아...' 하고 깨달아 기록해둔다.

기본 placeholder을 한글도 인식 되게 라이브러리 자체를 수정하는 방법이 있으면 더 좋을 것 같다.