How to insert text programmaticaly into draft js rich text field while maintaining the current inline style?

Question

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?

Answer 1

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