Add remove button in editor

src/TextAnnotator.jsx

@@ -263,6 +263,7 @@ export default class TextAnnotator extends Component {
             selectedElement={this.state.selectedDOMElement}
             config={this.props.config}
             env={this.props.env}
+            isRemovable={this.props.isRemovable}
             onAnnotationCreated={this.onCreateOrUpdateAnnotation('onAnnotationCreated')}
             onAnnotationUpdated={this.onCreateOrUpdateAnnotation('onAnnotationUpdated')}
             onAnnotationDeleted={this.onDeleteAnnotation}

src/editor/Editor.jsx

@@ -132,9 +132,18 @@ const Editor = props => {
     }
   };
 
+  const onRemove = () => props.onAnnotationDeleted(props.annotation);
+
   // Use default comment + tag widget unless host app overrides
   const widgets = props.config.widgets ? 
     props.config.widgets.map(getWidget) : DEFAULT_WIDGETS;
+
+  const removable = 
+    currentAnnotation &&
+    currentAnnotation.bodies.length > 0 &&
+    !currentAnnotation.isSelection &&
+    (props.isRemovable ? props.isRemovable(currentAnnotation) : true);
+
   return (
     <div ref={element} className="r6o-editor">
       <div className="r6o-arrow" />
@@ -160,6 +169,12 @@ const Editor = props => {
           </div>
         ) : (
           <div className="r6o-footer">
+            { removable && (
+              <button className="r6o-btn highlight left outline" onClick={onRemove}>
+                {i18n.t('Remove')}
+              </button>
+            )}
+
             <button 
               className="r6o-btn outline"
               onClick={onCancel}>{i18n.t('Cancel')}</button>

themes/default/globals/includes/_buttons.scss

@@ -40,3 +40,14 @@
   background-color:transparent;
   text-shadow:none;
 }
+
+.r6o-btn.left {
+  margin-left: 8px;
+  margin-right: 0px;
+  float: left;
+}
+
+.r6o-btn.highlight.outline {
+  border:1px solid $orange;
+  color:$orange;
+}

themes/default/globals/includes/_colors.scss

@@ -19,6 +19,9 @@ $blueish-white-hi:lighten($blueish-white, 3%);
 $lightgrey-border:#e5e5e5;
 $lightgrey-border-darker:#d6d7d9;
 
+// Highlight color
+$orange: rgb(230, 149, 0);
+
 /** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ **/
 /** Type colors                    **/
 /** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ **/