230816 nuxt에서 quillJS 이용하여 텍스트에디터 기능 구현하기

개요

현재 전문가 콘솔 편집기 채팅방에서 노션에서 복사한 텍스트를 붙여넣기하면 일부서식이 삭제되는 문제가 있음

원인

현재 편집기 채팅방에서 사용중인 quillJS는 노션의 문단번호, 글머리표를 텍스트가 아닌 서식으로 인식하고, 아래와 같이 서식은 자체적인 규칙으로 생성된 delta object로 처리함

---

그럼 오늘의 미션 드릴게요.

1. 가장 최근 경험하고 있다고 생각되는 인지적 오류는 무엇인가요?
2. 위의 인지적 오류를 경험하는 상황은 어떤 순간인가요?
3. 어떤 이유로 위의 상황을 인지적 오류라고 생각하나요?

---

현재 quill Editor에서 허용된 서식은 4가지

list(문단번호, 글머리표)는 허용되지 않았기 때문에, 복사→ 붙여넣기해도 화면에 렌더링 되는 과정에서 삭제됨

해결방법

1. quillJS에서 list를 허용하도록 수정

→ quillJS에서 생성된 delta를 앱에서 인식할 수 없기 때문에 그대로 사용할 수 없

1. quillJS에서 list를 허용하고, 화면에 렌더링 되기 전에 서식을 text로 변환
   1. 가능한 방법이지만 여러 예외적인 케이스를 하나하나 직접 관리해야함
   • 현재까지 확인한 문제점 & 규칙 
     • 1. 그냥 문단번호 + 글머리표 조합은 사용가능
     • 2. 2depth 사용 불가
     • 3. 1depth + 일반 문자 사용 가능
     • 4. 숫자가 없어도 탭 사용 시 문단으로 인식
     • 5. 텍스트 에디터에서 직접 입력 시 강제 변환으로 커서 이동 및 숫자 변경

예상 일정 및 논의 사항

현재 local 환경에서 구현 완료하였으나, 위와 같은 에러 케이스로 일부 기능에 제한이 있어 PO, 연구소와 조율이 필요

• 현재까지 구현된 기능으로 사용에 문제가 없다면 QA 진행 후 배포 가능
  • (차주 배포 가능)
• 전체적으로 요건에 대한 조율, 테스트 등이 필요하다면 최소 1주 이상의 QA, 추가 개발일정이 필요
  • 문단번호 2depth는 반드시 필요하다, 서식 입력 시 강제 변환은 안된다 같은 추가 요건이나 대응해서 사용할 수 있는 규칙, 가능 여부에 대한 논의
• 템플릿 내재화 시 사용하지 않는 기능인지 확인이 필요

 

 

후기

이전에 만들어놨던 기능에서 생각하지 못한 구멍이 생겼었다.

어떻게든 이슈 자체는 해결할 수 있었지만, 라이브러리의 한계로 100% 클린하게 해결할 수는 없었다.