Add tag creation for an annotation

[mejackreed]

Design pending for tag creation and tag display in annotation list

cc @ggeisler

[ggeisler]

Proposed design:

Uses the MUI Autocomplete component. There are many options for this component but none of the examples seem exactly what we want, so I'll describe the functionality we want and assume it can be done by combining various options of the component.

Add Tags section

• Add a new section with the "TAGS" header below the Content textarea
• Use the simple (non-outlined) version of the multiple value input

Tags options menu

• When the user selects the tags input display, the tags option menu opens to show available tags (assuming we can get a list of all tags used in the associated annotation store to use as the options set)

Allow new tag creation

• In addition to selecting a tag from the options menu, we want to enable the user to create a new tag (the "createable" setting from the component, I think):

The resulting tag chip should be deletable.

Allow multiple tags

Obviously we need to allow multiple tags, so if the user starts to type again, they can enter another new tag or select one from the menu:

Highlights

I wouldn't consider this a must-have if there is any technical drawback to using it, but the Highlights utility seems nice to help the user see where their input text matches the options.

[robcast]

The annotation data model would also need to support multiple bodies, including new ones with purpose: tagging.

[mejackreed]

Mirador already supports this upstream like so: https://github.com/ProjectMirador/mirador/blob/master/__tests__/fixtures/version-3/001.json#L277-L337

WebAnnotation.js needs the update I think?

[robcast]

The examples in fixtures look good.

WebAnnotation.js needs:

• a way to store the tags internally (an array of tags additional to the body string?)
• serialize body and tags into multiple bodies in .toJson()

[robcast]

How does upstream Mirador store tags in annotation bodies? Maybe emulate that?

[robcast]

I have implemented loading multiple bodies from SAS:

https://github.com/robcast/mirador-annotations/blob/33f2dbd4c587febd2524b76c8341560545931930/src/SimpleAnnotationServerV2Adapter.js

but AnnotationCreation.js expected only a single text body so I changed it to filter out the text body:

https://github.com/robcast/mirador-annotations/commit/813e8422d3526d4d794eea6cf779fd55e8dcfbd8

(we could get by with only selecting the first body if we can make sure that the first body is the text body)

Existing tags display ok, of course they are not editable and disappear when saving.

When tags loaded from SAS are displayed I get a warning in the console:

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `CanvasAnnotations`. See https://fb.me/react-warning-keys for more information.
    in WithStyles(ForwardRef(Chip)) (created by CanvasAnnotations)
    in CanvasAnnotations (at canvasAnnotationsPlugin.js:32)
    in CanvasAnnotationsWrapper (created by ConnectFunction)
...

[robcast]

Now the tags are correctly loaded and saved and kept (as array "tags") in the annotation object in the editor:

https://github.com/robcast/mirador-annotations/commit/cf732bceae89a393d5d58a44a6dd78cff14f8679

Now you can edit the text body content in M3 without losing the tags. We just need somebody to create the editor UI to display and change tags :-)