Annotate text in text area?

[kad99kev]

Hello, thank you for the awesome work you've created here! I have a small question, is it possible to annotate text that I enter in a textarea? Thank you!

[rsimon]

Thanks!

I'm afraid annotating content inside a text area is not possible. For two reasons:

• RecogitoJS uses SPANs to render annotation highlights. Textarea elements don't allow markup, which makes highlights impossible. (To be precise: there are tricks to achieve it, by RecogitoJS doesn't implement them.)
• RecogitoJS records annotation position in terms of character offset from the start. If you edit annotated text, a single keystroke would potentially change all annotation data. Again, not something that's impossible to achieve, but RecogitoJS doesn't currently support it.

If you are looking for editable text and highlighting: perhaps something like ProseMirror could work?

[kad99kev]

Thank you for your quick response! ProseMirror isn't something I am looking for at this time. But I did manage to change the way I layout my website, so I don't need to annotate editable text anymore. But thank you for explaining how RecogitoJS works, it was very helpful. Cheers!

[kad99kev]

Hello! Sorry about this, but I had another question. Say instead of having to type the tag, I would like to have a dropdown with a predefined set of tags, is there any way to achieve this? I was trying to edit the source code but none of the change I make seem to have an effect on my application. Any help would be appreciated. Thank you!

[rsimon]

Hi,

you can load a vocabulary into the tagging widget. It has an autocomplete option, and you can hit the 'arrow down' key to see all all options. See documentation here. (The documentation is for the Annotorious image annotation library. But it's compatible with RecogitoJS as far as the widgets are concerned.)

If you want to replace the current tag widget with a normal dropdown: that's currently not possible without writing your own editor plugin, I'm afraid. If you want to try building a plugin: see the guides on editor widgets here and here.

Last but not least: there's also an existing PR about such a feature, but it's not finished yet. (See short discussion here: https://github.com/recogito/recogito-form-widgets/issues/2)

[smoke2007]

Here's a widget I made to add a selectbox with options

`var CategorySelectorWidget = function(args) {

var options = ["OPTION1","OPTION2","ANOTHEROPTION","YETANOTHER","FINALONE"]

// 1. Find a current color setting in the annotation, if any
 var currentCategory = args.annotation ? 
 args.annotation.bodies.find(function(b) {
     return b.purpose == 'category';
 }) : null;

 // 2. Keep the value in a variable
 var currentCategoryValue = currentCategory ? currentCategory.value : null;

 // 3. Triggers callbacks on user action
 var changeSelect = function(evt) {
     console.log("log"+ evt.target.value);
 if (currentCategory) {
     args.onUpdateBody(currentCategory, {
     type: 'TextualBody',
     purpose: 'category',
     value: evt.target.value
     });
 } else { 
     args.onAppendBody({
     type: 'TextualBody',
     purpose: 'category',
     value: evt.target.value
     });
 }
 }

 // 4. This part renders the UI elements

 var container = document.createElement('select');
 container.addEventListener('change', changeSelect); 
 container.className = 'categoryselector-widget';

//Creating the category "not specified" option

// create new option element 
 let opt1 = document.createElement('option');

 // create text node to add to option element (opt)
 opt1.appendChild( document.createTextNode('Not specified') );

 // set value property of opt
 opt1.value = 'NOCATEGORY'; 

 //create the default element : null value
 if(currentCategoryValue == null){
     opt1.selected = 'selected';
 }

 // add the option to the select component
 container.appendChild(opt1);

 //dynamically add extra options
 //loop over array of options and add them to Select
 options.forEach(addToSelect);

 function addToSelect(item) {
   let opt = document.createElement('option');
   opt.appendChild( document.createTextNode(item) );
   opt.value = item; 
   if(currentCategoryValue == item){
       opt.selected = 'selected';
   }
   container.appendChild(opt);
 }

 //return the widget container
 return container;`