render styling palette to toolbar

components/Carbon.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import ReactDOM from 'react-dom'
 import dynamic from 'next/dynamic'
 import hljs from 'highlight.js/lib/highlight'
 import javascript from 'highlight.js/lib/languages/javascript'
@@ -318,12 +319,15 @@ class Carbon extends React.PureComponent {
           <SpinnerWrapper loading={this.props.loading}>{content}</SpinnerWrapper>
           <div className="twitter-png-fix" />
         </div>
-        {!this.props.readOnly && this.state.selectionAt && (
+        {!this.props.readOnly &&
+          this.state.selectionAt &&
+          ReactDOM.createPortal(
             <SelectionEditor
-            position={{ top: -4, right: 6 }}
               onChange={this.onSelectionChange}
               onClose={this.closeSelectionEditor}
-          />
+            />,
+            // TODO: don't use portal?
+            document.getElementById('style-editor-button')
           )}
         <style jsx>
           {`

components/Editor.js

@@ -392,6 +392,7 @@ class Editor extends React.Component {
               applyPreset={this.applyPreset}
               getCarbonImage={this.getCarbonImage}
             />
+            <div id="style-editor-button" />
             <div className="buttons">
               <TweetButton onClick={this.upload} />
               <ExportMenu

components/SelectionEditor.js

@@ -1,9 +1,12 @@
 import React from 'react'
+import { useKeyboardListener } from 'actionsack'
 import Popout from './Popout'
 import Button from './Button'
 import ColorPicker from './ColorPicker'
+import ThemeIcon from './svg/Theme'
 import { COLORS } from '../lib/constants'
-import { useKeyboardListener } from 'actionsack'
+
+const styleEditorButtonStyle = { width: 32, maxWidth: 32, height: 32, borderRadius: '50%' }
 
 function ModifierButton(props) {
   return (
@@ -50,9 +53,10 @@ function reducer(state, action) {
   throw new Error('Invalid action')
 }
 
-function SelectionEditor({ position, onChange, onClose }) {
+function SelectionEditor({ onChange, onClose }) {
   useKeyboardListener('Escape', onClose)
-  const [open, setOpen] = React.useState(false)
+  const [visible, setVisible] = React.useState(false)
+  const [open, setOpen] = React.useState(true)
 
   const [state, dispatch] = React.useReducer(reducer, {
     bold: false,
@@ -66,14 +70,19 @@ function SelectionEditor({ position, onChange, onClose }) {
   }, [onChange, state])
 
   return (
-    <Popout
-      hidden={false}
-      pointerRight="16px"
-      style={{
-        zIndex: 100,
-        ...position
-      }}
+    <div style={{ position: 'relative' }}>
+      <Button
+        title="Style Menu"
+        border
+        center
+        selected={visible}
+        style={styleEditorButtonStyle}
+        margin="4px 0 0"
+        onClick={() => setVisible(v => !v)}
       >
+        <ThemeIcon />
+      </Button>
+      <Popout hidden={!visible} pointerLeft="9px">
         <div className="colorizer">
           <div className="modifier">
             <ModifierButton selected={state.bold} onClick={() => dispatch({ type: 'BOLD' })}>
@@ -133,6 +142,7 @@ function SelectionEditor({ position, onChange, onClose }) {
           `}
         </style>
       </Popout>
+    </div>
   )
 }