Draft-js: Select all on focus

[yss14]

Is it possible to select the whole text when the user focuses the editor?
Can't find an approach on the other issues neither on the documentation.

[zhiquan-yu]

You can use Selection.selectAllChildren()

[yss14]

How do I apply this with draft.js? The draft.js Selection doesn't support selectAllChildren() and applying this to the editors DOM doesn't work.

[athomann]

Did you figure this out @yss14? I'm also trying to do this.

[yss14]

@athomann Unfortunately not.

[athomann]

@yss14 I was able to get the Select all effect by doing

document.execCommand('selectAll', false, null)

after calling a .focus(). Might have to debounce the command.

[cusxio]

Here's what I did.

select() {
  const { editorState } = this.state;
  const currentContent = editorState.getCurrentContent();
  const firstBlock = currentContent.getBlockMap().first();
  const lastBlock = currentContent.getBlockMap().last();
  const firstBlockKey = firstBlock.getKey();
  const lastBlockKey = lastBlock.getKey();
  const lengthOfLastBlock = lastBlock.getLength();

  const selection = new SelectionState({
    anchorKey: firstBlockKey,
    anchorOffset: 0,
    focusKey: lastBlockKey,
    focusOffset: lengthOfLastBlock,
  });

  this.setState({
    editorState: EditorState.acceptSelection(editorState, selection),
  });
}

It works, but I have not tested it thoroughly.

[qmind1995]

@cusxioI I tried but it doesn't work for me :(

[saeedezzati]

CSS user-select: all
Only supported in Chrome and Firefox
More info: https://css-tricks.com/almanac/properties/u/user-select/

[cusxio]

@qmind1995

@cusxioI I tried but it doesn't work for me :(

In some cases, you need to use forceSelection instead of acceptSelection

i.e.

this.setState({
  editorState: EditorState.forceSelection(editorState, selection),
});