Unknown DraftEntity key: null.

caro-li commented 4 years ago

这是一个BUG，当我添加了一张图片之后，再输入一段中文，就报错了，输入英文字符就没有错

Kamigami55 commented 4 years ago

Also facing this issue

Kamigami55 commented 4 years ago

I followed the solution in this article. ref: https://www.jianshu.com/p/52df009e6ec1 It works great for me.

You have to implement a custom image atom renderer.

  function myBlockRenderer(contentBlock) {
    const type = contentBlock.getType();

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

  class MediaComponent extends React.Component {
    render() {
      const { block, contentState } = this.props;
      const { foo } = this.props.blockProps;
      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>
      );
    }
  }
 <Editor blockRendererFn={myBlockRenderer} />

liupeijun commented 4 years ago

thanks , It works great also for me .

MFinnnne commented 3 years ago

thanks

thorgan376 commented 4 months ago

Another approach if u want Functional Component in TyperScript: https://github.com/jpuri/react-draft-wysiwyg/issues/609#issuecomment-2197472192

jpuri / react-draft-wysiwyg

Unknown DraftEntity key: null. #979