In Draft-JS, how do i insert an html iframe into my contentState?

Question

I am using React and react-draftjs-wysiwyg / Draft JS to build a text editor / CMS.

Right now i want to add functionality where:-

1. user goes into separate <Input /> on the page.

2. React detects what link it is (YouTube, SoundCloud, Vimeo)

3. My function creates an iframe for it

4. Draft inserts it at whatever the current cursor position is.

All of that is done except number 4. I was thinking, get the cursor position and push the iframe HTML el into that part of the contentState? But that's mixing two different data types. iframe is in html, contentState is draft-js' object.

Another idea was: get the text from the anchorKey, convert the existing contentState to HTML, locate the text, then find the next blank space after it (via regex perhaps) and append the iframe to that. Then convert the whole thing back to contentState and pass it to EditorState prop? Seems very bitty though...

At the moment my function looks like this:

// react methods...

insertIFrameAtCursorPoint = (iframeHTMLelement) => {
    const { editorState } = this.state;
    const SelectionState = editorState.getSelection();
    let currentCursorPosition = SelectionState.getAnchorKey();

    let currentContent = editorState.getCurrentContent();
    let currentContentBlock = currentContent.getBlockForKey(currentCursorPosition);

    // change iframeHTMLelement into a block?
    // add block back to currentContent?
    // 

}

// render() {
       return (...
   }

Help?

Answer 1

decorators

look at the official document carefully before ask the question,

1. use decorator
2. inside the strategy function, use regex to find YouTube link or whatever link.
3. inside the component function, return an iframe component with user entered link
4. done