Firefox fixes

README.md

@@ -93,6 +93,7 @@ Plugins include custom functionality which can be activated from a button in the
 - [ld-audio](https://github.com/steveniseki/ld-audio) - Adds an audio player with soundcloud support
 - [ld-color-picker](https://github.com/steveniseki/ld-color-picker) - Adds Color picker functionality
 - [ld-emoji](https://github.com/vacenz/ld-emoji) - Adds emoji functionality
+- [ld-gif](https://github.com/steveniseki/ld-gif) - Adds gif functionality from Giphy
 - [ld-mention](https://github.com/steveniseki/ld-mention) - Adds mention functionality
 - [ld-html](https://github.com/steveniseki/ld-html) - Adds Edit html functionality
 - [ld-todo](https://github.com/vacenz/ld-todo) - Adds todo functionality
@@ -102,10 +103,11 @@ import video from 'ld-video'
 import audio from 'ld-audio'
 import color from 'ld-color-picker'
 import emoji from 'ld-emoji'
+import gif from 'ld-gif'
 import mention from 'ld-mention'
 import html from 'ld-html'
 import todo from 'ld-todo'
-let plugins = [video, audio, color, emoji, mention, html, todo]
+let plugins = [video, audio, color, emoji, gif, mention, html, todo]
 
 <Editor
   editorState={this.state.value}

package.json

@@ -36,18 +36,19 @@
     "enzyme": "^2.7.1",
     "expect": "^1.20.2",
     "express": "^4.13.4",
-    "jsdom": "^9.11.0",
     "html-webpack-plugin": "^2.16.0",
+    "jsdom": "^9.11.0",
     "ld-audio": "1.0.7",
     "ld-color-picker": "1.0.6",
     "ld-emoji": "1.1.3",
+    "ld-gif": "1.0.0",
     "ld-html": "1.0.5",
     "ld-mention": "1.0.3",
     "ld-todo": "1.0.2",
     "ld-video": "1.0.5",
     "react": ">=15.3.1",
-    "react-dom": ">=15.3.1",
     "react-addons-test-utils": "^15.4.2",
+    "react-dom": ">=15.3.1",
     "standard": "^8.6.0",
     "tape": "^4.6.3",
     "webpack": "2.1.0-beta.27",

src/components/Sidebar/SideMenu.js

@@ -47,8 +47,8 @@ const SideMenuButton = styled.button`
 
   &:before {
     content: '';
-    width: 100%;
-    height: 100%;
+    width: 24px;
+    height: 24px;
     border-radius: 100%;
     display: inline-block;
     background-color: ${props => props.open ? '#f00' : '#181818'};

src/components/Toolbar/Toolbar.js

@@ -13,6 +13,7 @@ import Header from './Header'
 import {getSelectionCoords} from '../../utils/selection'
 import {hasEntity} from '../../utils/entity'
 import styled from 'styled-components'
+import insertDataBlock from '../../utils/insertDataBlock'
 
 export default class extends Component {
   constructor (props) {
@@ -198,6 +199,7 @@ export default class extends Component {
       toolbar = (
         <Modal
           {...this.props}
+          insertDataBlock={insertDataBlock}
           closeModal={::this.closeModal}
           submitHtmlModal={::this.submitHtmlModal}
           rangeLeft={this.state.rangeLeft} />

src/components/Toolbar/ToolbarButton.js

@@ -8,6 +8,7 @@
 import React, {Component} from 'react'
 import Separator from './Separator'
 import styled from 'styled-components'
+import insertDataBlock from '../../utils/insertDataBlock'
 
 export class PluginButton extends Component {
   render () {
@@ -16,9 +17,10 @@ export class PluginButton extends Component {
 
     return (
       <ToolbarButtonWrapper theme={theme} active={false} className='ld-toolbar-button-wrapper'>
-        <LdToolbarButton className='ld-toolbar-button' type='button'>
+        <LdToolbarButton className='ld-toolbar-button'>
           <Button
             theme={theme}
+            insertDataBlock={insertDataBlock}
             onChange={::this.props.onChange}
             uploadImageAsync={this.props.uploadImageAsync}
             uploadFile={this.props.uploadFile}
@@ -48,11 +50,7 @@ export class ToolbarButton extends Component {
 
     return (
       <ToolbarButtonWrapper theme={theme} active={active} className='ld-toolbar-button-wrapper'>
-        <LdToolbarButton
-          className='ld-toolbar-button'
-          onClick={() => this.toggleAction(this.props)}
-          type='button'
-        >
+        <LdToolbarButton className='ld-toolbar-button' onClick={() => this.toggleAction(this.props)}>
           <Icon />
         </LdToolbarButton>
       </ToolbarButtonWrapper>
@@ -72,13 +70,12 @@ const ToolbarButtonWrapper = styled.li`
   }
 `
 
-const LdToolbarButton = styled.button`
+const LdToolbarButton = styled.div`
   padding: 0;
-  color: inherit;
   cursor: pointer;
-  border: 0;
   height: 40px;
   width: 40px;
-  line-height: 1;
   background: transparent;
+  margin-top: 0.4rem;
+  margin-bottom: -1rem;
 `