Setup the ability to delete created annotations

demo/src/index.js

 
 import mirador from 'mirador/dist/es/src/index';
 
-import { miradorAnnotationPlugin, externalStorageAnnotationPlugin } from '../../src';
+import { miradorAnnotationPlugin, externalStorageAnnotationPlugin, canvasAnnotationsPlugin } from '../../src';
 import LocalStorageAdapter from '../../src/LocalStorageAdapter';
 
 const config = {
@@ -16,5 +16,6 @@ const config = {
 
 mirador.viewer(config, [
   miradorAnnotationPlugin,
+  canvasAnnotationsPlugin,
   externalStorageAnnotationPlugin,
 ]);

src/AnnotationActionsContext.js

+import React from 'react';
+
+const AnnotationActionsContext = React.createContext();
+
+export default AnnotationActionsContext;

src/CanvasListItem.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { MiradorMenuButton } from 'mirador/dist/es/src/components/MiradorMenuButton';
+import DeleteIcon from '@material-ui/icons/Delete';
+import AnnotationActionsContext from './AnnotationActionsContext';
+
+/** */
+class CanvasListItem extends Component {
+  /** */
+  constructor(props) {
+    super(props);
+
+    this.handleDelete = this.handleDelete.bind(this);
+  }
+
+  /** */
+  handleDelete() {
+    const { canvases, receiveAnnotation, storageAdapter } = this.context;
+    const { annotationid } = this.props;
+    canvases.forEach((canvas) => {
+      const adapter = storageAdapter(canvas.id);
+      const annoPage = adapter.delete(annotationid);
+      receiveAnnotation(canvas.id, adapter.annotationPageId, annoPage);
+    });
+  }
+
+  /** */
+  render() {
+    const { children } = this.props;
+    return (
+      <li
+        {...this.props} // eslint-disable-line react/jsx-props-no-spreading
+      >
+        {children}
+        <MiradorMenuButton
+          aria-label="Delete"
+          onClick={this.handleDelete}
+        >
+          <DeleteIcon />
+        </MiradorMenuButton>
+      </li>
+    );
+  }
+}
+
+CanvasListItem.contextType = AnnotationActionsContext;
+
+export default CanvasListItem;

src/index.js

 export miradorAnnotationPlugin from './plugins/miradorAnnotationPlugin';
 export externalStorageAnnotationPlugin from './plugins/externalStorageAnnotationPlugin';
+export canvasAnnotationsPlugin from './plugins/canvasAnnotationsPlugin';

src/plugins/canvasAnnotationsPlugin.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { getVisibleCanvases } from 'mirador/dist/es/src/state/selectors/canvases';
+import * as actions from 'mirador/dist/es/src/state/actions';
+import CanvasListItem from '../CanvasListItem';
+import AnnotationActionsContext from '../AnnotationActionsContext';
+
+/** */
+class CanvasAnnotationsWrapper extends Component {
+  /** */
+  render() {
+    const { TargetComponent, targetProps } = this.props;
+    const props = {
+      ...targetProps,
+      listContainerComponent: CanvasListItem,
+    };
+    return (
+      <AnnotationActionsContext.Provider
+        value={{
+          canvases: this.props.canvases,
+          receiveAnnotation: this.props.receiveAnnotation,
+          storageAdapter: this.props.config.annotation.adapter
+        }}
+      >
+        <TargetComponent
+          {...props} // eslint-disable-line react/jsx-props-no-spreading
+        />
+      </AnnotationActionsContext.Provider>
+    );
+  }
+}
+
+CanvasAnnotationsWrapper.propTypes = {
+  TargetComponent: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.node,
+  ]).isRequired,
+  targetProps: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+};
+
+/** */
+function mapStateToProps(state, { targetProps }) {
+  return {
+    canvases: getVisibleCanvases(state, { windowId: targetProps.windowId }),
+    config: state.config,
+  };
+}
+
+/** */
+const mapDispatchToProps = (dispatch, props) => ({
+  receiveAnnotation: (targetId, id, annotation) => dispatch(
+    actions.receiveAnnotation(targetId, id, annotation),
+  ),
+});
+
+
+export default {
+  component: CanvasAnnotationsWrapper,
+  mapDispatchToProps,
+  mapStateToProps,
+  mode: 'wrap',
+  target: 'CanvasAnnotations',
+};