Toast UI Editor를 React에서 사용하던 중에 만족감있게 사용하고 있었는데 사용자가 이미지를 넣고나서 해당 이미지를 나중에 보여주기 위해서 Supabase Storage에 등록을 해야 했다.

어떻게 동작하는지 공식 문서에서 어느정도 나와있긴 했는데 실 사용이 나오지 않아서 고생을 좀 했다.

Hooks 제공

toast ui editor react에서 hooks라는 props안에 addImageBlobHook이라고 있다. 이것을 이용해서 이미지가 추가될 때 뭔가를 할 수 있다.

import {Editor} from '@toast-ui/react-editor'
export default function EditorMain() {
  const handleImageUpload = async (blob:Blob|File, callback:HookCallback) => {
	const data = uploadImageLogic(blob);
    callback(data);
  }
  return <Editor 
           hooks={{
      		addImageBlobHook : handleImageUpload
    		}}
           />
}

위와 같은 방식으로 사용할 수 있고, 이 함수가 작동하는 원리를 좀 여러가지 만져보면서 추측하건데
문자열을 반환한다고 해서 에디터에 추가는 되지 않는다.
callback의 매개변수로 이미지 경로 문자열을 넣어줘야 에디터에 정상적으로 넣을 수 있다.
이렇게 작성하다 보니 별거 없는 내용이지만 자세하게 어떻게 써야하는 example이 공식문서에서 없어서 조금 헤매긴 했다.

뭐 결론적으로 금방 해결하기는 했으나 잊어 버리지 않기 위해 기록한다.