How To Insert Text Programmaticaly Into Draft Js Rich Text Field While Maintaining The Current Inline Style?

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)

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