마크다운 에디터에 클립보드 이미지 붙여넣기 기능을 구현하려면 어떻게 해야 하나요?

안녕하세요! 혹시 마크다운 에디터를 직접 구현하신건가요? 아니면 오픈소스/유료 에디터를 사용하시는건가요? 에디터는 편집 모드와 읽기 모드 등 나뉘어진건가요 아니면 편집 모드 밖에 없는건가요? 직접 구현하시는거라면 리서치 하신 것 처럼 clipboard api를 사용하시면 될 것 같습니다. 붙여넣기를 어떻게 하느냐에 따라서 에디터에 이벤트 리스너를 구현해주시면 될 것 같아요. ex) onpaste, ondrag clipboard api에서 데이터를 불러오는거는 blob 형태로 불러와서 읽은 뒤 그걸 에디터에 넣어주는 방식이 일반적인것 같아요. - https://levelup.gitconnected.com/how-to-copy-or-paste-image-by-plain-javascript-6ea804c6944a (코드펜을 열어서 확인해야하더라구요) - https://blog.saeloun.com/2022/06/09/copying-texts-to-clipboard-using-javascript 편집과 읽기 모드가 나뉘어진 에디터라고 가정할때, clipboard api를 사용하는 건 에디터 편집할때고 실제 에디터의 내용을 보여줄때는 아마 질문자님이 구현하신 로직에 의해 이미지 데이터가 서버에서 저장된 뒤, 사내 CDN url로 에디터의 내용을 바꿔서 내려주지 않을까 예상해봅니다. drag and drop, paste 등의 기능은 충분히 라이브러리 없이 만들 수 있지만 만들 리소스가 부족하다면 오픈소스 라이브러리를 활용하는것도 방법이라고 생각합니다. 결론은 - 어떻게 붙여넣기를 하느냐에 따라 이벤트 리스너와 콜백 함수를 만들어주시면 될 것 같습니다 - 붙여넣기 할 때 이미지를 불러오는거는 clipboard api를 활용하면 될 것 같습니다 - 직접 구현하는 리소스가 많이 든다면 오픈소스 라이브러리를 활용하는 것도 방법입니다 돌아다니면서 본 npm 라이브러리들도 몇개 첨부할게요 :) - https://github.com/vutoan266/react-images-uploading - https://github.com/react-dropzone/react-dropzone/