Enable plugins for CanvasAnnotations, and enable MaterialUI props to be passed in

src/components/CanvasAnnotations.js

@@ -58,6 +58,7 @@ export class CanvasAnnotations extends Component {
   render() {
     const {
       annotations, classes, index, label, selectedAnnotationIds, t, totalSize,
+      listContainerComponent,
     } = this.props;
     if (annotations.length === 0) return <></>;
 
@@ -71,9 +72,10 @@ export class CanvasAnnotations extends Component {
             annotations.map(annotation => (
               <ListItem
                 button
-                component="li"
+                component={listContainerComponent}
                 className={classes.annotationListItem}
                 key={annotation.id}
+                annotationid={annotation.id}
                 selected={selectedAnnotationIds.includes(annotation.id)}
                 onClick={e => this.handleClick(e, annotation)}
                 onFocus={() => this.handleAnnotationHighlight(annotation)}
@@ -106,6 +108,7 @@ CanvasAnnotations.propTypes = {
   highlightAnnotation: PropTypes.func.isRequired,
   index: PropTypes.number.isRequired,
   label: PropTypes.string.isRequired,
+  listContainerComponent: PropTypes.elementType,
   selectAnnotation: PropTypes.func.isRequired,
   selectedAnnotationIds: PropTypes.arrayOf(PropTypes.string),
   t: PropTypes.func.isRequired,
@@ -115,5 +118,6 @@ CanvasAnnotations.propTypes = {
 CanvasAnnotations.defaultProps = {
   annotations: [],
   classes: {},
+  listContainerComponent: 'li',
   selectedAnnotationIds: [],
 };

src/containers/CanvasAnnotations.js

@@ -2,6 +2,7 @@ import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
 import { withStyles } from '@material-ui/core/styles';
+import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
 import {
   getAnnotationResourcesByMotivationForCanvas,
@@ -69,6 +70,7 @@ const enhance = compose(
   withTranslation(),
   withStyles(styles),
   connect(mapStateToProps, mapDispatchToProps),
+  withPlugins('CanvasAnnotations'),
 );
 
 export default enhance(CanvasAnnotations);