How to remove the "add reply" part and change UI of the annotation box

[JINO-ROHIT]

Thanks for the wonderful tool. Can you help me remove the "add reply" part and changing the UI of the annotation box? Id like to extend functionality of this for a personal project

[rsimon]

Hi, thanks for the kind feedback!

Unfortunately, the old RecogitoJS hasn't aged well. Extending the functionality is, by now, almost impossible - at least if you want to use a framework (React etc.) If you just want to get rid of the reply box, I recommend simply applying display: none. to the reply container element in your own CSS stylesheet.

If you want to implement a more comprehensively customized popup, you may want to consider switching to RecogitoJS's successor project. (Currently called, simply, "Recogito Text Annotator"):

https://github.com/recogito/text-annotator-js

The caveat: I did not yet have the time to write documentation. At the moment, you'd have to dig yourself through the source code. (Specifically the demo setups in the test/ directories.) The new version will be especially useful if you use React, BTW. But even the vanilla JS is probably easier to handle than old RecogitoJS.

[alaksandarjesus]

I don't think you could get rid of reply box with display:none as it is used to have comments too. Instead if you are using vanillajs then create your own widget as follows

   var MyWidget = function (a) {
        const textarea = document.createElement("textarea");
        textarea.classList.add("form-control");
        const body = a.annotation.underlying.body;
        const item = body.find((x) => x.type == "customTa");
        if (item) {
          textarea.value = item.value;
        }
        textarea.onchange = function () {
          a.onUpsertBody(item, {type:'customTa', value:textarea.value})
        };
        return textarea;
      };

And remove other widgets like comment and tag and include this widget

       var r = Recogito.init({
          content: "content", // Element id or DOM node to attach to
          locale: "auto",
          allowEmpty: true,
          widgets: [{ widget: MyWidget }],
          relationVocabulary: ["isRelated", "isPartOf", "isSameAs "],
        });

Sharing the screenshot in realtime implementation