Add a custom widget to recogito using React components

[AnthonyKamers]

Hello, I'm trying to add a custom widget to RecogitoJS (using that NPM package provided) using React components, but I'm getting an error probably because of what @rsimon said here:

It looks like it's currently not possible to use Preact hooks in a Recogito plugin. Using Hooks with React should work; and class components should also work (both with React and Preact).

I can hopefully figure out a workaround for this in the future. But for now, this seems to be a limition :-(

I tried to use class components, functional components, changing React for Preact, but nothing seemed to work.

I would like to use the recogito-js library directly or modify the minimum possible. Is there a way I can use the webpack provided in recogito-comments-mention so recogito-client-core would accept React components?

I just instantiate a new Recogito instance as the following:

While the HelloPluginJsx is the following:

I get the following error:

Debugging it, I found out that recogito-client-core/src/editor/widgets/index.jsx#getWidget is not considering it as a React plugin, so it calls instantiate(args) directly.

Originally posted by @AnthonyKamers in https://github.com/recogito/recogito-js/issues/15#issuecomment-2217805094

[rsimon]

Hi @AnthonyKamers,

the error definitely indicates a mismatch between (P)React versions in RecogitoJS and your own host app. (It's a long story but there's no reliable way to differentiate between whether something is a React component and a normal JS function. At least none that wouldn't change unexpectedly between versions...)

For that and other reasons, I've sort of stopped maintaining RecogitoJS. An official successor is almost there: https://github.com/recogito/text-annotator-js

The main missing piece is that it doesn't have any documentation yet. I'm hoping to work on it in the latter half of August. But if you're brave enough to fight your way through source code and the test example, I frankly think you might be better off using the new package.

Note that the new package is organized differently: it does not include a built-in popup! However, it does have a dedicated package with React bindings, and that also includes a <TextAnnotatorPopup> component you can use to roll your own completely custom React plugins.

Let me know if you manage to get started with this. Things get a bit more complicated than the initial example once you start interacting with the annotation (adding tags, comments, etc.) But that will all get documented in August - fingers crossed.

[AnthonyKamers]

Hey Simon,

Thank you for your answer. I was looking at the text-annotator-js project; it is more React-like and easier to fit into projects. I was able to incorporate the initial example into my project without difficulties. I'm still checking on some implementation details, but it is very intuitive. I'm trying to highlight the annotations properly now because even when I make some annotations, it does not highlight, even when I change the style prop of TextAnnotator.

As I advance on my example, I can share it with you later so that it helps with the documentation.

[rsimon]

Hi,

I'm not sure if this is what you mean, but: if you are making a text selection, and there is no visible annotation, then it's much more likely you haven't imported the Text Annotator CSS stylesheet to your project (e.g. import '@recogito/react-text-annotator/react-text-annotator.css';). You don't need to set a prop on the TextAnnotator for the annotations to be visible. There's a basic default style included.

[AnthonyKamers]

Sure, that was the problem!! Thank you.

[AnthonyKamers]

@rsimon I have created an issue to text-annotator-js and have coded it. I would like to be able to push it, is it possible? I could help with some other things since I'm involved in a project for my college at Universidade Federal de Santa Catarina, in Brazil.

[rsimon]

I wrote a reply. Re contributing: that's welcome of course! Simply fork the repository and send pull requests.

[AnthonyKamers]

Got it, thank you!