[알게된 것] react-draft-wysiwyg, Unknown DraftEntity key: null 오류

😀발단

위지윅 에디터를 사용하던 도중, 이미지를 등록한 게시물을 수정하는 과정에서 한글을 타이핑 하면 해당 에러가 발생하였음

😁해결

// 이미지를 감지해 컴포넌트로 변환해주는 사용자 정의 fn
function imageBlockRenderer(contentBlock: ContentBlock) {
  const type = contentBlock.getType();

  // Convert image type to mediaComponent
  if (type === "atomic") {
    return {
      component: MediaComponent,
      editable: false,
      props: {
        foo: "bar",
      },
    };
  }
}

// 이미지가 입력될 경우 img 태그로 변환
function MediaComponent({ block, contentState, blockProps: { foo } }: any) {
  const data = contentState.getEntity(block.getEntityAt(0)).getData();
  const emptyHtml = " ";
  return (
    <div>
      {emptyHtml}
      <img
        src={data.src}
        alt={data.alt || ""}
        style={{ height: data.height || "auto", width: data.width || "auto" }}
      />
    </div>
  );
}

...

return (
 <Editor 
   ...
   customBlockRenderFunc={imageBlockRenderer} 
 />
)

위와 같이 등록해서 내 변환된 이미지 데이터를 img 태그로 변환해 입력되도록 수정하였음