Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

83
Views
Draft.js applying styles to many individual characters

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);
}
about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!