Fail to get iframe components stored by EditorState

[kevinguard]

I successfully manage to add a custom block (an iframe) to the editor I'm working on and in fact the added block renders itself pretty well and shows up in the editor alongside other equations, images, and text. This means, when I take a look at the page layout and the HTML elements, I clearly see the iframe. However, the actual content (ContentState) doesn't contain the iframe. More specifically, I only get a whitespace enclosed by a set of <p> and </p> and nothing else.

This is what I'm currently doing: First, I receive an embeddedContent string which I simply pass it to the strategy of my custom VideoDecorator. It simply looks for VIDEO entities and finally passes the information to a React Component for render, which does it very well (See Fig.).

However when using, for example, stateToHTML utility to convert the current EditorState to HTML, I get <figure>&nbsp</figure>.

let editorState, onChange } = this.props;
let entityKey = Entity.create('VIDEO', 'MUTABLE', { embeddedContent });
const newEditorState = AtomicBlockUtils.insertAtomicBlock(editorState, entityKey, ' ');
onChange(newEditorState);
this.focusEditor();

and the VideoDEcorator:

type ReactNode = any;

type Props = {
    children: ReactNode,
    entityKey: string,
};

type EntityRangeCallback = (start:number, end:number) => void;

function Video(props: Props): React.Element {
    const entity = Entity.get(props.entityKey);
    const { embeddedContent } = entity.getData();
    const parsedContent = parseEmbeddedContent(embeddedContent);
    if (parsedContent.allowFullScreen) {
        return (
            <div>
                <iframe width={parsedContent.width}
                        height={parsedContent.height}
                        frameBorder={parsedContent.frameBorder}
                        src={parsedContent.src}
                        allowFullScreen>
                    {props.children}
                </iframe>
            </div>
        );
    } else {
        return (
            <div>
                <iframe width={parsedContent.width}
                        height={parsedContent.height}
                        frameBorder={parsedContent.frameBorder}
                        src={parsedContent.src}>
                    {props.children}
                </iframe>
            </div>
        );
    }
}

function findVideoEntities(contentBlock: ContentBlock, callback: EntityRangeCallback) {
    contentBlock.findEntityRanges((character) => {
        const entityKey = character.getEntity();
        return (
            entityKey != null &&
            Entity.get(entityKey).getType() === 'VIDEO'
        );
    }, callback);
}

export default {
    strategy: findVideoEntities,
    component: Video
};

Any idea where I am making a mistake?

Thanks for your help!

[nodeman777]

I have the same problem!! Do you resolve it?