Добавление сущности в свой блок в DraftJS

Question

Поэтому я пытаюсь создать довольно простой редактор WYSIWYG BBCode для своего проекта, чтобы представить себе DraftJS. Я следовал некоторым учебным пособиям, а также использовал в качестве примера response-rte (поскольку он обладает 99% необходимой мне функциональности и выглядит относительно простым для понимания).

Проблема, с которой я столкнулся, заключается в том, что react-rte вставляет сущности изображения в строку (добавляет пробел в текущем выделении, а затем связывает запись с этим пробелом) следующим образом:

const addEntity = (editorState, type, mutability = 'MUTABLE', data = {}) => {
    let currentContent = editorState.getCurrentContent();
    let selection = editorState.getSelection();
    currentContent = currentContent.createEntity(type, mutability, data);
    let entityKey = currentContent.getLastCreatedEntityKey();
    return Modifier.insertText(currentContent, selection, ' ', null, entityKey);
}

Я хочу, чтобы каждое изображение (и видео) находилось в отдельном блоке и делало так, чтобы в этот блок больше ничего нельзя было записать. Я нашел пример поведения, которое мне нужно, в мегадрафте, но я не смог пройтись по его коду, чтобы найти правильную реализацию.

Answer 1

Нашел решение после многих часов проб и ошибок (и множества руководств).

const addAtomic = (editorState, type, mutability = 'MUTABLE', data = {}) => {
    let currentContent = editorState.getCurrentContent();
    let selection = editorState.getSelection();
    currentContent = currentContent.createEntity(type, mutability, data);
    let entityKey = currentContent.getLastCreatedEntityKey();
    const newState = EditorState.set(editorState, { currentContent: currentContent })
    return AtomicBlockUtils.insertAtomicBlock(newState, entityKey, ' ')
}