3

I am trying to integrate the Draft.js editor in a project. The way I am thinking of using it, is to create a new EditorState out of my own state on every render call (the reason for this approach are related to my specific context I am not going to detail here).

What I have not succeeded is to set the cursor position in the Editor.

I have created an example on Codepen: http://codepen.io/nutrina/pen/JKaaOo?editors=0011

In this example any character I type is prepended to the beginning of the text, instead of being inserted at the cursor position. I have tried setting the cursor by using:

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

but without much success. Any help would be appreciated.

Thanks, Gerald

nutrina
  • 1,002
  • 1
  • 12
  • 26
  • I happened answer the same question:http://stackoverflow.com/questions/38749474/losing-the-selection-after-a-mutation – Jiang YD Aug 04 '16 at 07:09
  • @JiangYD: Thanks for the hint, I am a step further now. In my case however the keys remain unchanged. I am basically restoring the selection state of the editor on each render, but now the cursor advances 2 positions? I have updated the Codepen sample. Any ideas? – nutrina Aug 04 '16 at 14:52
  • I suppose that some key press triggers multiple 'onChange' events, but your code break the events by generating a new EditorState, then something happens weirdly. 'create a new EditorState every render call' will not work I think. Maybe you could set a EditorState in component state for selection change rendering, and use your 'new state' for content change rendering. – Jiang YD Aug 05 '16 at 02:57

1 Answers1

0

A easy way to move the cursor around is to use Editor.forceSelection and a key binding function!

This is what your render function would look like once you have it set up 

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

Once you have your keybinding function, you can do something along the lines of

  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';
    }
  };

Feel free to replace anchorOffset and focusOffset with the position you would like the cursor to be in. Using a keybinding function allows better control over events

Your handleKeyCommand function would look something like this

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