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,13 +319,16 @@ class Carbon extends React.PureComponent {
           <SpinnerWrapper loading={this.props.loading}>{content}</SpinnerWrapper>
           <div className="twitter-png-fix" />
         </div>
-        {!this.props.readOnly && this.state.selectionAt && (
-          <SelectionEditor
-            position={{ top: -4, right: 6 }}
-            onChange={this.onSelectionChange}
-            onClose={this.closeSelectionEditor}
-          />
-        )}
+        {!this.props.readOnly &&
+          this.state.selectionAt &&
+          ReactDOM.createPortal(
+            <SelectionEditor
+              onChange={this.onSelectionChange}
+              onClose={this.closeSelectionEditor}
+            />,
+            // TODO: don't use portal?
+            document.getElementById('style-editor-button')
+          )}
         <style jsx>
           {`
             .section,

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,73 +70,79 @@ function SelectionEditor({ position, onChange, onClose }) {
   }, [onChange, state])
 
   return (
-    <Popout
-      hidden={false}
-      pointerRight="16px"
-      style={{
-        zIndex: 100,
-        ...position
-      }}
-    >
-      <div className="colorizer">
-        <div className="modifier">
-          <ModifierButton selected={state.bold} onClick={() => dispatch({ type: 'BOLD' })}>
-            <b>B</b>
-          </ModifierButton>
-          <ModifierButton selected={state.italics} onClick={() => dispatch({ type: 'ITALICS' })}>
-            <i>I</i>
-          </ModifierButton>
-          <ModifierButton
-            selected={state.underline}
-            onClick={() => dispatch({ type: 'UNDERLINE' })}
-          >
-            <u>U</u>
-          </ModifierButton>
-          <button className="color-square" onClick={() => setOpen(o => !o)} />
-        </div>
-        {open && (
-          <div className="color-picker-container">
-            <ColorPicker
-              color={state.color || COLORS.PRIMARY}
-              disableAlpha={true}
-              onChange={d => dispatch({ type: 'COLOR', color: d.hex })}
-            />
+    <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' })}>
+              <b>B</b>
+            </ModifierButton>
+            <ModifierButton selected={state.italics} onClick={() => dispatch({ type: 'ITALICS' })}>
+              <i>I</i>
+            </ModifierButton>
+            <ModifierButton
+              selected={state.underline}
+              onClick={() => dispatch({ type: 'UNDERLINE' })}
+            >
+              <u>U</u>
+            </ModifierButton>
+            <button className="color-square" onClick={() => setOpen(o => !o)} />
           </div>
-        )}
-      </div>
-      <style jsx>
-        {`
-          .modifier {
-            padding: 0px 8px;
-            display: flex;
-          }
-          .colorizer b {
-            font-weight: bold;
-          }
-          .colorizer i {
-            font-style: italic;
-          }
-          .colorizer :global(button) {
-            min-width: 24px;
-          }
-          .color-square {
-            cursor: pointer;
-            appearance: none;
-            outline: none;
-            border: none;
-            border-radius: 3px;
-            padding: 12px;
-            margin: 4px 0 4px auto;
-            background: ${state.color || COLORS.PRIMARY};
-            box-shadow: ${`inset 0px 0px 0px ${open ? 2 : 1}px ${COLORS.SECONDARY}`};
-          }
-          .color-picker-container {
-            width: 218px;
-            border-top: 2px solid ${COLORS.SECONDARY};
-          }
-        `}
-      </style>
-    </Popout>
+          {open && (
+            <div className="color-picker-container">
+              <ColorPicker
+                color={state.color || COLORS.PRIMARY}
+                disableAlpha={true}
+                onChange={d => dispatch({ type: 'COLOR', color: d.hex })}
+              />
+            </div>
+          )}
+        </div>
+        <style jsx>
+          {`
+            .modifier {
+              padding: 0px 8px;
+              display: flex;
+            }
+            .colorizer b {
+              font-weight: bold;
+            }
+            .colorizer i {
+              font-style: italic;
+            }
+            .colorizer :global(button) {
+              min-width: 24px;
+            }
+            .color-square {
+              cursor: pointer;
+              appearance: none;
+              outline: none;
+              border: none;
+              border-radius: 3px;
+              padding: 12px;
+              margin: 4px 0 4px auto;
+              background: ${state.color || COLORS.PRIMARY};
+              box-shadow: ${`inset 0px 0px 0px ${open ? 2 : 1}px ${COLORS.SECONDARY}`};
+            }
+            .color-picker-container {
+              width: 218px;
+              border-top: 2px solid ${COLORS.SECONDARY};
+            }
+          `}
+        </style>
+      </Popout>
+    </div>
   )
 }