위지윅 에디터로 부동의 1위인 Quill을 사용했습니다.
Quill 1버전을 사용하면 ,
[Deprecation] Listener added for a synchronous 'DOMNodeInserted' DOM Mutation Event.
This event type is deprecated (https://w3c.github.io/uievents/#legacy-event-types) and work is underway to remove it from this browser.
Usage of this event listener will cause performance issues today, and represents a risk of future incompatibility.
Consider using MutationObserver instead.
라는 경고 메시지가 나옵니다, 해당 메시지의 내용은 다음과 같습니다.
DOMNodeInserted는 DOM 변이 이벤트 중 하나입니다.
이 이벤트 유형은 더 이상 사용되지 않으며, 일부 브라우저에서는 삭제 작업이 진행 중입니다.
이 이벤트 청취자를 사용하면 현재 성능 문제가 발생할 수 있고, 향후 호환성에도 문제가 생길 위험이 있으므로, 대신 MutationObserver를 사용하는 것을 권장합니다.
그래서 최신 Quill 2 버전에서는 해당 이벤트를 사용하지 않도록 변경되었습니다.
이미지 리사이즈 기능을 제공하기 위해 quill-image-resize-module 라이브러리를 사용했는데, 이 라이브러리는 Quill 1 버전과 호환되도록 제작되었습니다.
따라서 Quill 2 버전과 함께 사용할 경우 여러 버그가 발생하였습니다.
호환되지 않는 부분을 수정하는 과정에서, 이미지를 업로드한 후에만 리사이징이 가능하고 한 번 포커스를 잃은 상태에서는 다시 리사이징 모드로 진입할 수 없는 문제가 있었습니다.
또한, Quill 1 버전에서는
"attributors/style/float", "attributors/style/margin", "attributors/style/display"
등의 경로로 해당 모듈에 접근할 수 있었습니다.
하지만 Quill 2 버전에서는 내부 구조가 변경되어 이들 모듈의 경로를 찾을 수 없게 되었고, 따라서 정렬 기능을 구현하기 위해 커스텀 attributor를 직접 만들어야 했습니다.
코드를 수정해 나갈수록 해야 할 일이 늘어나는 것을 느꼈고, 시간이 너무 오래 걸릴 것 같아서
다운로드 수는 적더라도 Quill 2 버전과 호환되는 image-resize 라이브러리를 찾아 image-resize 기능을 추가하였습니다.
사용한 라이브러리의 주소를 링크 걸어 놓겠습니다.