react-nested-annotator

A React Component for annotating nested text from html.

Nested means you can annotate on an annotated text, and select another tag.

basic usage

import { useState } from "react";
import { TextAnnotator } from "react-nested-annotator";

const TEXT = "这是一段话";
const argumentsTemplate = [];
const tags = {
  Tag1: "#3ee0b8",
  Tag2: "#84d2ff",
};

const App = () => {
  const [argument, setArguments] = useState(argumentsTemplate);

  return (
    <div className="container">
      <TextAnnotator
        content={TEXT}
        tags={tags}
        value={argument}
        onChange={function (value) {
          setArguments(value);
          return;
        }}
      />
    </div>
  );
};

export default App;

how to Delete the label

move mouse over the annotated text, and then rightclick

annotate with edge

<TextAnnotator
  content={TEXT}
  tags={tags}
  value={argument}
  onChange={function (value) {
    setArguments(value);
    return;
  }}
+ useEdge={true}
/>

DIY tag style

<TextAnnotator
  content={TEXT}
  tags={tags}
  value={argument}
  onChange={function (value) {
    setArguments(value);
    return;
  }}
+ tagStyle={{
+   verticalAlign: "middle",
+   backgroundColor: "white",
+   color: "black",
+   borderRadius: "5px",
+   fontSize: "0.5rem",
+   fontWeight: "bold",
+   padding: "4px"
+ }}
/>

codeSandBox

https://codesandbox.io/s/quirky-gauss-p6wfd?file=/src/App.js

APIs

key	type	description	default
content	string	text
tags	object	{ tagName: color-Hex }
value	object[]	entities Array
onChange	( value: [] ) => void	value change callback
useEdge	boolean	if annotate with edge	false
tagStyle	CSSProperties	diy tag style	null

Bold key means it must be provided.