add escape listener to selection editor (#900)

components/Carbon.js

@@ -137,6 +137,8 @@ class Carbon extends React.PureComponent {
     }
   }
 
+  closeSelectionEditor = () => this.setState({ selectionAt: null })
+
   render() {
     const config = { ...DEFAULT_SETTINGS, ...this.props.config }
 
@@ -317,7 +319,11 @@ class Carbon extends React.PureComponent {
           <div className="twitter-png-fix" />
         </div>
         {!this.props.readOnly && this.state.selectionAt && (
-          <SelectionEditor position={this.state.selectionAt} onChange={this.onSelectionChange} />
+          <SelectionEditor
+            position={this.state.selectionAt}
+            onChange={this.onSelectionChange}
+            onClose={this.closeSelectionEditor}
+          />
         )}
         <style jsx>
           {`

components/SelectionEditor.js

@@ -3,6 +3,7 @@ import Popout from './Popout'
 import Button from './Button'
 import ColorPicker from './ColorPicker'
 import { COLORS } from '../lib/constants'
+import { useKeyboardListener } from 'actionsack'
 
 function ModifierButton(props) {
   return (
@@ -49,7 +50,8 @@ function reducer(state, action) {
   throw new Error('Invalid action')
 }
 
-function SelectionEditor({ position, onChange }) {
+function SelectionEditor({ position, onChange, onClose }) {
+  useKeyboardListener('Escape', onClose)
   const [open, setOpen] = React.useState(false)
 
   const [state, dispatch] = React.useReducer(reducer, {