diff --git a/components/Carbon.js b/components/Carbon.js index f8851bd..04f97d8 100644 --- a/components/Carbon.js +++ b/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( - , + , // TODO: don't use portal? document.getElementById('style-editor-button') )} diff --git a/components/SelectionEditor.js b/components/SelectionEditor.js index f1f62bf..3c161b6 100644 --- a/components/SelectionEditor.js +++ b/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 }) { - useKeyboardListener('Escape', onClose) +function SelectionEditor({ onChange }) { 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)} >