Toggle inline styles to current block(s), even when it is not fully selected

First of all, thank you very much for making public this fantastic editor.

I’m trying to do something simple, at least I think so 😃 I want to toggle inline styles for the entire current block(s), as if fully selected, even when it is not. Even with the clear understanding that I have to play with SelectionState, I can’t understand how to do it.

This is what I have so far (the basic functionality), taken from the RichEditor example:

_toggleInlineStyle(inlineStyle) {
  this.onChange(
    RichUtils.toggleInlineStyle(
      this.state.editorState,
      inlineStyle
    )
  );
}

Thanks again for this awesome project!

[pveyes]

First you have to change your selection into entire block. To do that you can set anchorOffset to 0, and focusOffset to content length, then apply using forceSelection which will return new editorstate. You can then use the new editor state to perform the operation you want, like this

const editorState = this.state.editorState;
const currentKey = editorState.getSelection().getAnchorKey();
const currentBlock = editorState.getCurrentContent().getBlockForKey(currentKey);
const selectionState = SelectionState.createEmpty();
const entireBlockSelectionState = selectionState.merge({
  anchorKey: currentKey,
  anchorOffset: 0,
  focusKey: currentKey,
  focusOffset: currentBlock.getText().length
});

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

// do what you want using newEditorState here, e.g:
this.onChange(
  RichUtils.toggleInlineStyle(
    newEditorState,
    inlineStyle
  )
);

[lmgonzalves]

Yeah, it’s solved now! Thanks again!