В Draft-JS, как вставить HTML-фрейм в мой contentState?

Question

Я использую React и Reaction-draftjs-wysiwyg / Draft JS для создания текстового редактора / CMS.

Сейчас я хочу добавить функциональность, где: -

1. пользователь переходит в отдельное <Input /> на странице.

2. React определяет, какая это ссылка (YouTube, SoundCloud, Vimeo)

3. Моя функция создает для него iframe

4. Черновик вставляет его при любой текущей позиции курсора.

Все это выполняется, кроме номера 4Я думал, получить позицию курсора и вставить iframe HTML el в эту часть contentState?Но это смешивает два разных типа данных.iframe находится в html, contentState является объектом draft-js.

Другая идея заключалась в следующем: получить текст из anchorKey, преобразовать существующее contentState в HTML, найти текст, , затем найтиследующий пробел после него (возможно, через regex) и добавьте к нему iframe.Затем преобразовать все это обратно в contentState и передать его в EditorState prop?Хотя выглядит очень горько ...

На данный момент моя функция выглядит следующим образом:

// 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 (...
   }

Помощь?

Answer 1

декораторы

внимательно посмотрите на официальный документ, прежде чем задавать вопрос,

1. используйте декоратор
2. внутри функции стратегии, используйтерегулярное выражение, чтобы найти ссылку на YouTube или любую другую ссылку.
3. внутри функции компонента, вернуть компонент iframe с введенной пользователем ссылкой
4. done