Как изменить порядок рендеринга ContentBlock в draftjs? - PullRequest
Новая
       21

Как изменить порядок рендеринга ContentBlock в draftjs?

0 голосов
/ 28 августа 2018

Есть вопрос по проекту JS.

Как я могу изменить порядок ContentBlocks? Я пытаюсь добавить внешнюю ссылку на контент и сделать видео внутри редактора.

Создание текущего состояния: 

createEditorState(source) {
        if (!source) {
          return EditorState.createEmpty();
        }

        const contentState = stateFromMarkdown(source);
        const editorState = EditorState.createWithContent(contentState);

        return addVideoContent(source, editorState)
 }

Добавить блок с видеоконтентом (поддерживается для рендеринга с помощью видео-плагина): 

addVideoContent(source, editorState) {
    function buildNewEditorState(state, src) {
      const currentContentState = state.getCurrentContent();
      const contentStateWithEntity = currentContentState
        .createEntity(VIDEO_PLUGIN_TYPE, 'IMMUTABLE', { src });
      const entityKey = contentStateWithEntity.getLastCreatedEntityKey();

      return AtomicBlockUtils.insertAtomicBlock(state, entityKey, ' ');
    }

    //defining video urls
    ...

    return videoUrls.reduce(buildNewEditorState, editorState);
}

Проблема в порядке рендеринга: 1. Видеоблок; 2. Блок ссылок.

Как изменить этот порядок на: 1. Блок ссылок; 2. Видеоблок.

1 Ответ

0 голосов
/ 30 августа 2018

OK. вопрос был в selectionState.

При инициализации начального состояния selectionState (положение якоря и фокуса) равно первому символу первого блока. Таким образом, метод AtomicBlockUtils.insertAtomicBlock будет разделять блоки между selectionState и вставлять 'atomic'.

Решение: EditorsState.moveSelectionToEnd(editorState).

...