React Editable Text Component with Custom Syntax Highlighting Support

reactjs syntax-highlighting cson
hevele picture hevele · Jan 18, 2017 · Viewed 8.4k times · Source

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.

Answer

pblankley picture pblankley · May 28, 2020

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.

Related questions

syntax highlighting for react code in sublime

I'm started writing some basic React code in sublime text. Here is what my syntax highlighting looks like. Its partly highlighted. Is there any suggested sublime plugin i can use to see a complete syntax highlight? import React, { Component } from …

Read More
Can you force a React component to rerender without calling setState?

I have an external (to the component), observable object that I want to listen for changes on. When the object is updated it emits change events, and then I want to rerender the component when any change is detected. With …

Read More
Loop inside React JSX

I'm trying to do something like the following in React JSX (where ObjectRow is a separate component): <tbody> for (var i=0; i < numrows; i++) { <ObjectRow/> } </tbody> I realize and understand why this isn't …

Read More