import React, { Component } from 'react';
import styles from './styles';
import { Entity } from 'draft-js';

export default (stickers) => {
  class Sticker extends Component {

    remove: Function = (event) => {
      // Note: important to avoid a content edit change
      event.preventDefault();
      event.stopPropagation();

      this.props.blockProps.onRemove(this.props.block.getKey());
    };

    render() {
      const { block } = this.props;
      const data = Entity.get(block.getEntityAt(0)).getData();
      return (
        <figure style={ styles.root } contentEditable={ false } data-offset-key={ `${block.get('key')}-0-0` }>
          <img height={100} src={ stickers.getIn([data.id, 'url']) } />
          <button style={ styles.removeButton } onClick={this.remove}>
            ✕
          </button>
        </figure>
      );
    }
  }
  return Sticker;
};

@@ -184,18 +184,8 @@
 move
-: Function
  = (
@@ -710,22 +710,32 @@
        %3C
-button
+span%0A           
  style=%7B
@@ -756,16 +756,28 @@
 Button %7D
+%0A           
  onClick
@@ -778,16 +778,17 @@
 nClick=%7B
+ 
 this.rem
@@ -790,17 +790,55 @@
 s.remove
-%7D
+ %7D%0A            type=%22button%22%0A          
 %3E%0A      
@@ -857,21 +857,19 @@
       %3C/
-butto
+spa
 n%3E%0A     

fix remove button