Невозможно установить курсор в редакторе Draft.js

Question

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

Что мне не удалось, так это установить позицию курсора в редакторе.

Я создал пример для Codepen: http://codepen.io/nutrina/pen/JKaaOo?editors=0011

В этом примере любой вводимый символ вводится перед началом текста, а не вставляется в позицию курсора. Я попытался установить курсор с помощью:

  state = EditorState.acceptSelection(state, this.state.selectionState);
  state = EditorState.forceSelection(state, this.state.selectionState);

но без особого успеха. Любая помощь будет оценена.

Спасибо, Джеральд

Answer 1

Самый простой способ перемещения курсора - использовать Editor.forceSelection и функцию привязки клавиш!

Вот как будет выглядеть ваша функция рендера после настройки

render() {
    return (
      <Editor
        editorState={this.state.editorState}
        onChange={this.onChange}
        handleKeyCommand={this.handleKeyCommand}
        keyBindingFn={this.myKeyBindingFn}
      />
    );
  }

Когда у вас есть функция связывания клавиш, вы можете сделать что-то вроде

  myKeyBindingFn = (e) => {
    // on spacebar
    if (e.keyCode == 32) {
      const newSelection = selectionState.merge({
        anchorOffset: selectionState.getAnchorOffset() + 1,
        focusOffset: selectionState.getAnchorOffset() + 1,
      });

      const newEditorState = EditorState.forceSelection(
        editorState,
        newSelection,
      );

      this.setState({ editorState: newEditorState });

      return 'space-press';
    }
  };

Не стесняйтесь заменить anchorOffset а также focusOffset с позицией, в которой вы хотите, чтобы курсор находился. Использование функции привязки клавиш позволяет лучше контролировать события

Ваша функция handleKeyCommand будет выглядеть примерно так

handleKeyCommand = (command: string): DraftHandleValue => {
    if (command === 'space-press') {
      return 'handled';
    }
    return 'not-handled';
  };