I have been trying to tailor Draft.js into a sortof IDE with custom syntax highlighting, I am aware Prism exists including Prism for Draft.js but it lacks the features I require. I am not using Draft.js in the manner that is expected but it feels like it is something it should be able to handle.
In the Draft.js page Complex Inline Styles under Model they show an array of styles and while it is labelled as a "Model" and "In essence", it feels like that it may be possible to do something like that.
I have initially gone the route laid out in this thread Draftjs apply inline styling to text programatically however potentially every character is going to have a different style to the next and it isn't practical to do this for every character potentially on every key press. But generating an array of styles would be really easy to manage.
The documentation for Draft.js feels incomplete and I keep coming to dead ends whichever route I go, such as that there's no OrderedSet page. I know I'm meant to show code that I've tried but it's mostly that SO thread I've tried but moved it into an onChange function and made it work with onChange as well as toggling styles, I included it but I'm pretty sure I'd be told off for not providing anything.
I'm completely stumped and a little frustrated, there's probably a method there I'm looking for but I just can't find it.
const onChange = e => {
const selectionState = e.getSelection();
const newSelection = selectionState.merge({
anchorOffset: 0,
focusOffset: 1,
}); //Selects the first character of the line that was edited
const editorStateWithNewSelection = EditorState.forceSelection(e, newSelection);
const editorStateWithStyles = RichUtils.toggleInlineStyle(editorStateWithNewSelection,'red'); //There's no method to even just set a style, only toggle
const editorStateWithStylesAndPreviousSelection = EditorState.forceSelection(
editorStateWithStyles,
selectionState,
);
setEditorState(editorStateWithStylesAndPreviousSelection);
}