Using Text Annotator together with Annotorious

[tessawiedmann]

Hi, I am interested in using both React versions of the Text Annotator and Annotorious for images together on one page in my app. Given a document like this:

<h1>The Role of Curiosity in Human Progress</h1>
<p>
  First paragraph with some things you might want to annotate
</p>
<img src="cat.png" />
<p>
  Second paragraph with some more things to annotate
</p>
<img src="dog.png" />
<p>
  Third paragraph with even more things to comment on
</p>

Is there a recommended way to use both the TextAnnotator from @recogito/react-text-annotator and ImageAnnotator from @annotorious/react so that the text and images can all be annotated at the same time?

Some things I tried:

1. One <Annotorious> root context tag and one <TextAnnotator> around the document. Then for each image, a separate <ImageAnnotator>. This allowed me to make annotations on the text, but neither of the images
2. One <Annotorious> root context tag around the document, since it is the same context used for both TextAnnotator and ImageAnnotator. Then for each section of text, wrap it in <TextAnnotator> or <ImageAnnotator> for a total of 5 sections. This ended up only letting me create annotations for one TextAnnotator section, and not for the two image sections or the other two text sections
3. One <Annotorious> root context tag for each text and image section. In the example above, this would be 5 total <Annotorious> contexts, each with their own <TextAnnotator> or <ImageAnnotator>. This does seem to let me make annotations for all the text and images but it feels like a overloaded workaround

Is there some other recommended way of combining text and images that I'm totally missing? Any other recommendations or guides or examples that could help me would be greatly appreciated.

[rsimon]

Hi @tessawiedmann,

in short: yes, one <Annotorious> context root is for one annotator instance exactly. (An annotator, in Annotorious terminology provides the annotation layer for either a single image, or a single text/HTML section) Therefore, the 3rd approach will be the only one that works, as you say.

However:

• I believe you should also be able to put one <Annotorious> root tag around the text as a whole, and then one <Annotorious> root tag around each image. This way, you'd at least avoid the need to split the text. The root tags around the images should, essentially, "mask" the root tag around the text. Or, in other words, using the useAnnotator hook inside a wrapped image would give you the image annotator, while using the same hook outside of the image would give you the text annotator, if that makes sense? (Note that this is a scenario I haven't personally tested, so... fingers crossed.)

• There is also a utility package called @annotorious/react-manifold which has the specific purpose of making it easier to manage a group of annotators that belong together. I'm afraid it's not documented, but could be useful at least in theory. (Likewise, however: I have never used it in the same way as you describe. I have been using it to manage multiple images side-by-side, though.)

[rsimon]

P.S.: in terms of markup (simplified & just for the rough component hierarchy), that would be something like the below. (The one thing I'm not quite sure about is how the TextAnnotator will behave about the ImageAnnotator children. As I said: that's a new use case.)

<Annotorious>
  <TextAnnotator>
    <h1>The Role of Curiosity in Human Progress</h1>
    <p>
      First paragraph with some things you might want to annotate
    </p>
    
   <Annotorious>
      <ImageAnnotator>
        <img src="cat.png" />
      </ImageAnnotator>
    </Annotorious>

    <p>
      Second paragraph with some more things to annotate
    </p>

   <Annotorious>
      <ImageAnnotator>
        <img src="dog.png" />
      </ImageAnnotator>
    </Annotorious>

    <p>
      Third paragraph with even more things to comment on
    </p>
  </TextAnnotator>
</Annotorious>

[tessawiedmann]

Super appreciate the quick reply!! I will check these options out thank you!