3

Good evening all,

I need an editable textarea-like component for my React project that supports custom syntax highlighting, preferably with the CSON and CSS. I have been searching it for ages. I finally gave up and decided to ask here. Does anyone know any reliable library that can be used for this?

Any help would be greatly appreciated!

EDIT: As I delve deeper into the topic, I came to an understanding that this problem consists of several parts.

  1. [mostly done with this one] Create contenteditable div component with React. I used contentEditable component for React.
  2. Find a way to customize appearance of the div (as React fills div's innerHTML as String)
  3. Find a way to implement a parser that reads tags from a CSON and applies 2nd item for each of them.
hevele
  • 903
  • 6
  • 20
  • 38

2 Answers2

6

This is way after the fact but for anyone else stumbling on this, https://github.com/satya164/react-simple-code-editor is a good, easy option.

pblankley
  • 134
  • 1
  • 3
3

I was able to use the npm package react-syntax-highlight to achieve this. Look that up and see if it helps!

aUXcoder
  • 1,048
  • 1
  • 20
  • 32
Sean O'Reilly
  • 31
  • 4
  • 1
    @aUXcoder -- how did you do this? The react-syntax-highlighter devs mention in this ticket they won't support editing: https://github.com/conorhastings/react-syntax-highlighter/issues/92 -- thanks! – matthewatabet Mar 16 '19 at 02:43
  • 4
    Sorry for the delay! I noticed that issue as well and had to get creative with it. For me, I set up a textarea to edit the code with an onChange listener that saved the code to state. Then I set the value prop of the class to the code which was saved. This gave the code box the appearance of being edited in real time, though you could still see the textarea side by side. I'd imagine you could hide the textarea, though it wasn't necessary for me. Having a visible cursor in the code box would be even trickier...anyways hope this helps! – Sean O'Reilly Jun 11 '19 at 01:43