CODEWITHSUNDEEP
javascriptreactjshighlight
Seth Wilson
Seth Wilson

Reputation: 271

React Text Annotation

I'm working on a React app where users can select text and add simple annotations. In addition, previous annotations will be loaded from an API via JSON.

The annotations JSON looks something like this:

"annotations": [
  {
    "id": 1,
    "start": 12,
    "end": 67,
    "text": "Annotation Text"
  }
]

Where start and end are the character locations in the HTML, which is also loaded via JSON and dangerouslySetInnerHTML. So when new annotations are added, their character locations need to match up when the annotations are saved back to the API.

Ideally, annotations are also highlighted in the UI.

Any suggestions on how to do this? AnnotatorJS doesn't seem to be maintained very well, so I'm nervous about using it in a production project.

Thanks!

Upvotes: 3

Views: 4863

Answers (2)

cullanrocks
cullanrocks

Reputation: 497

I agree with DBS above in creating two divs, one that with annotated styling and one without. Figure out the text that you want annotated, via matching (.contains() or regex) or whatever your case is, and render those texts in a div with a class how you want styled.

First, I would probably push all the text into an array, maybe make them into objects with a boolean value, isAnnotated, and then map the array into JSX. If the text isAnnotated equals true, then use the annotated-text CSS class for that string of text, otherwise else push them into a classless div. 

const Footer = (props) => {
return(
<span>
 <div className='annotated-text'>{annotatedText}</div>
 <div> className='other-text'>{otherText}</div>
</span>
)}

Upvotes: 0

Murtaza Hussain
Murtaza Hussain

Reputation: 4285

Use react-text-annotate A React component for interactively highlighting parts of text. https://github.com/mcamac/react-text-annotate/

Here is the link for the demo for text annotations in react

Upvotes: 3

Related Questions