Реагировать Текстовая аннотация

Question

Я работаю над приложением React, где пользователи могут выбирать текст и добавлять простые аннотации.Кроме того, предыдущие аннотации будут загружаться из API через JSON.

Аннотации JSON выглядят примерно так:

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

Где start и end - это расположение символов вHTML, который также загружается через JSON и dangerouslySetInnerHTML.Поэтому, когда добавляются новые аннотации, их местоположение символов должно совпадать, когда аннотации сохраняются обратно в API.

В идеале аннотации также выделяются в пользовательском интерфейсе.

Любые предложения о том, каксделать это?AnnotatorJS, похоже, не очень хорошо поддерживается, поэтому я нервничаю по поводу его использования в производственном проекте.

Спасибо!

Answer 1

Используйте response-text-annotate Компонент React для интерактивного выделения частей текста.https://github.com/mcamac/react-text-annotate/

Вот ссылка для демонстрации для текстовых аннотаций в реаги

Answer 2

Я согласен с DBS выше в создании двух div, один с аннотированным стилем и один без.Выясните текст, который вы хотите аннотировать, с помощью сопоставления (.contains () или regex) или в любом другом случае, и визуализируйте эти тексты в div с классом, который вы хотите стилизовать.

Во-первых, я бы, вероятно, поместил весь текст в массив, возможно, превратил бы их в объекты с логическим значением isAnnotated, а затем отобразил бы массив в JSX.Если текст isAnnotated равен true, тогда используйте CSS-класс annotated-text для этой строки текста, в противном случае вставьте их в бесклассовый div.

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