Draft-js: Can't create a selection of all text in the editor?

[davidawad]

Do you want to request a feature or report a bug?
Bug / Help.

What is the current behavior?
It seems like i'm unable to programmatically force a selection of the entire editor.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. You can use this jsfiddle to get started: https://jsfiddle.net/stopachka/m6z0xn4r/.

I'm trying to manually create a selection and I can't get code examples like these to do much more than just select the first line.

There's almost no diff in the objects, What am I missing here?

How do I select the entire contents of the editor?

    let selection = editorState.getSelection().merge({
      // anchorOffset: 0,
      focusOffset: 7,  // If I set this to anything much higher, say 700, I get errors that don't make much sense.
    })

    let DEBUG = selection;

    let forcedEditorState = EditorState.forceSelection(editorState, selection);

    selection = forcedEditorState.getSelection();

    console.log("BEFORE")  
    console.log(selection)

    console.log("AFTER")    
    console.log(selection)

    console.log("DIFF: ", diff(DEBUG, selection));

What is the expected behavior?
I should be able to force a selection, the equivalent of a ctrl + a on the entire contents of the text window.

Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js?

here's my package.json for versions :

{
  "name": "thoth",
  "version": "0.1.0",
  "private": true,
  "engines": {
    "npm": "6.9.0",
    "node": "12.4.0"
  },
  "dependencies": {
    "deep-diff": "^1.0.2",
    "draft-js": "^0.10.5",
    "draft-js-plugins-editor": "^2.1.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-modal": "^3.8.1",
    "react-scripts": "3.0.1",
    "react-settings-pane": "^0.1.5",
    "react-top-loading-bar": "^1.0.6"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

[colinjeanne]

If you want to select the entire editor then you will want to create a selection whose anchor offset is 0, anchor key is the first block, focus offset is the length of the last block, and focus key is the last block. Right now your focus offset is within the same block as the existing selection and that block only appears to have 7 characters.

[davidawad]

Ah! I see what you mean now!

Thanks for the clarification @colinjeanne !

For anyone looking at this in the future, you can get a selection of the entire editor with the following code snippet.

    let selection = undefined;

    let currentContent = this.state.editorState.getCurrentContent();

    selection = this.state.editorState.getSelection().merge({
      anchorKey: currentContent.getFirstBlock().getKey(),
      anchorOffset: 0,  

      focusOffset: currentContent.getLastBlock().getText().length, 
      focusKey: currentContent.getLastBlock().getKey(),
    })

@mrkev do you think it would be worth making a static method to return a selection of the entire editor?

I'm happy to make a PR as I think it would save someone the pain of parsing through these abstractions. I've also gotten a lot of value out of the library so i'd like to give back at least a little bit if I can :)