hide style editor on escape instead of removing selection

components/Carbon.js

@@ -129,8 +129,6 @@ class Carbon extends React.PureComponent {
     }
   }
 
-  closeSelectionEditor = () => this.setState({ selectionAt: null })
-
   render() {
     const config = { ...DEFAULT_SETTINGS, ...this.props.config }
 
@@ -313,10 +311,7 @@ class Carbon extends React.PureComponent {
         {!this.props.readOnly &&
           this.state.selectionAt &&
           ReactDOM.createPortal(
-            <SelectionEditor
+            <SelectionEditor onChange={this.onSelectionChange} />,
-              onChange={this.onSelectionChange}
-              onClose={this.closeSelectionEditor}
-            />,
             // TODO: don't use portal?
             document.getElementById('style-editor-button')
           )}

components/SelectionEditor.js

@@ -6,7 +6,7 @@ import ColorPicker from './ColorPicker'
 import ThemeIcon from './svg/Theme'
 import { COLORS } from '../lib/constants'
 
-const styleEditorButtonStyle = { width: 32, maxWidth: 32, height: 32, borderRadius: '50%' }
+const styleEditorButtonStyle = { width: 28, maxWidth: 28, height: 28, borderRadius: '50%' }
 
 function ModifierButton(props) {
   return (
@@ -53,11 +53,12 @@ function reducer(state, action) {
   throw new Error('Invalid action')
 }
 
-function SelectionEditor({ onChange, onClose }) {
+function SelectionEditor({ onChange }) {
-  useKeyboardListener('Escape', onClose)
   const [visible, setVisible] = React.useState(false)
   const [open, setOpen] = React.useState(true)
 
+  useKeyboardListener('Escape', () => setVisible(false))
+
   const [state, dispatch] = React.useReducer(reducer, {
     bold: false,
     italics: false,
@@ -77,7 +78,7 @@ function SelectionEditor({ onChange, onClose }) {
         center
         selected={visible}
         style={styleEditorButtonStyle}
-        margin="4px 0 0"
+        margin="6px 0 0"
         onClick={() => setVisible(v => !v)}
       >
         <ThemeIcon />