When I click on a button with a certain symbol, I'd like it to put the symbol in the text field.
To achieve that I use a function for text insertion:
insertText(characterToInsert) {
let editorState = this.state.editorState;
const currentContent = editorState.getCurrentContent(),
currentSelection = editorState.getSelection();
let newContent = Modifier.replaceText(
currentContent,
currentSelection,
characterToInsert
);
return EditorState.push(editorState, newContent, 'insert-characters');
}
I'd like it to put a subscript text there when the subscript inline style is on.
I tried to do something like
if (this.isSubscriptOn()) {
newContent = Modifier.applyInlineStyle(newContent, currentSelection, 'SUBSCRIPT');
}
however, I don't know how to alter the second argument so that the selection is targeting the newly placed characters.
Is there a better way to approach this?
The first step is to use the applyInlineStyle: function (contentState: ContentState, selectionState: SelectionState, inlineStyle: string) function of the static Modifier class. As you can see - it requires a selection of the area which we want our style to be applied to. We'll create such style by using the set method from immutable.js:
const textToInsertSelection = currentSelection.set('focusOffset', currentSelection.getFocusOffset() + textToInsert.length);
Then we'll get the OrderedSet of current inline styles and apply each of them to the aformentioned selection:
let inlineStyles = editorState.getCurrentInlineStyle();
inlineStyles.forEach(inLineStyle => newContent = Modifier.applyInlineStyle(newContent, textToInsertSelection, inLineStyle));
If we stop right here the text would be put into the input field while being selected (blue rectangle would appear around it). To avoid such behavior let's force a selection to the end of the inserted text:
newState = EditorState.forceSelection(newState, textToInsertSelection.set('anchorOffset', textToInsertSelection.getAnchorOffset() + textToInsert.length));
The whole function looks like this:
insertText(textToInsert) {
let editorState = this.state.editorState;
const currentContent = editorState.getCurrentContent();
const currentSelection = editorState.getSelection();
let newContent = Modifier.replaceText(
currentContent,
currentSelection,
textToInsert
);
const textToInsertSelection = currentSelection.set('focusOffset', currentSelection.getFocusOffset() + textToInsert.length);
let inlineStyles = editorState.getCurrentInlineStyle();
inlineStyles.forEach(inLineStyle => newContent = Modifier.applyInlineStyle(newContent, textToInsertSelection, inLineStyle));
let newState = EditorState.push(editorState, newContent, 'insert-characters');
newState = EditorState.forceSelection(newState, textToInsertSelection.set('anchorOffset', textToInsertSelection.getAnchorOffset() + textToInsert.length));
return newState;
}