diff --git a/app/components/Editor/components/BlockInsert.js b/app/components/Editor/components/BlockInsert.js
index 8988881a8..63a9288ba 100644
--- a/app/components/Editor/components/BlockInsert.js
+++ b/app/components/Editor/components/BlockInsert.js
@@ -8,7 +8,6 @@ import { observer } from 'mobx-react';
import styled from 'styled-components';
import { color } from 'shared/styles/constants';
import PlusIcon from 'components/Icon/PlusIcon';
-import BlockMenu from 'menus/BlockMenu';
import type { State } from '../types';
const { transforms } = EditList;
@@ -144,26 +143,9 @@ export default class BlockInsert extends Component {
return (
- (this.file = ref)}
- onChange={this.onChooseImage}
- accept="image/*"
- />
- }
- onPickImage={this.onPickImage}
- onInsertList={ev =>
- this.insertBlock(ev, {
- type: 'list-item',
- wrapper: 'bulleted-list',
- })}
- onInsertTodoList={ev =>
- this.insertBlock(ev, { type: todo, wrapper: 'todo-list' })}
- onInsertBreak={ev =>
- this.insertBlock(ev, { type: rule, append: 'paragraph' })}
- onOpen={this.handleMenuOpen}
- onClose={this.handleMenuClose}
+
+ this.insertBlock(ev, { type: 'block-toolbar', isVoid: true })}
/>
diff --git a/app/components/Editor/components/BlockToolbar.js b/app/components/Editor/components/BlockToolbar.js
new file mode 100644
index 000000000..08e974a38
--- /dev/null
+++ b/app/components/Editor/components/BlockToolbar.js
@@ -0,0 +1,84 @@
+// @flow
+import React, { Component } from 'react';
+import styled from 'styled-components';
+import Heading1Icon from 'components/Icon/Heading1Icon';
+import Heading2Icon from 'components/Icon/Heading2Icon';
+import ImageIcon from 'components/Icon/ImageIcon';
+import CodeIcon from 'components/Icon/CodeIcon';
+import BulletedListIcon from 'components/Icon/BulletedListIcon';
+import OrderedListIcon from 'components/Icon/OrderedListIcon';
+import HorizontalRuleIcon from 'components/Icon/HorizontalRuleIcon';
+import TodoListIcon from 'components/Icon/TodoListIcon';
+import Flex from 'shared/components/Flex';
+import type { Props } from '../types';
+import { color } from 'shared/styles/constants';
+import ToolbarButton from './Toolbar/components/ToolbarButton';
+
+class BlockToolbar extends Component {
+ props: Props;
+
+ onClickBlock = (ev: SyntheticEvent, type: string) => {
+ // TODO
+ };
+
+ renderBlockButton = (type: string, IconClass: Function) => {
+ return (
+ this.onClickBlock(ev, type)}>
+
+
+ );
+ };
+
+ render() {
+ const { state, node } = this.props;
+ const active = state.isFocused && state.selection.hasEdgeIn(node);
+
+ return (
+
+ {this.renderBlockButton('heading1', Heading1Icon)}
+ {this.renderBlockButton('heading2', Heading2Icon)}
+
+ {this.renderBlockButton('bulleted-list', BulletedListIcon)}
+ {this.renderBlockButton('ordered-list', OrderedListIcon)}
+ {this.renderBlockButton('todo-list', TodoListIcon)}
+
+ {this.renderBlockButton('code', CodeIcon)}
+ {this.renderBlockButton('horizontal-rule', HorizontalRuleIcon)}
+ {this.renderBlockButton('image', ImageIcon)}
+
+ );
+ }
+}
+
+const Separator = styled.div`
+ height: 100%;
+ width: 1px;
+ background: ${color.smokeDark};
+ display: inline-block;
+ margin-left: 10px;
+`;
+
+const Bar = styled(Flex)`
+ position: relative;
+ align-items: center;
+ background: ${color.smoke};
+ padding: 10px 0;
+ height: 44px;
+
+ &:before,
+ &:after {
+ content: "";
+ position: absolute;
+ left: -100%;
+ width: 100%;
+ height: 44px;
+ background: ${color.smoke};
+ }
+
+ &:after {
+ left: auto;
+ right: -100%;
+ }
+`;
+
+export default BlockToolbar;
diff --git a/app/components/Editor/schema.js b/app/components/Editor/schema.js
index 2010e4c22..295ae01ae 100644
--- a/app/components/Editor/schema.js
+++ b/app/components/Editor/schema.js
@@ -16,6 +16,7 @@ import {
Heading6,
} from './components/Heading';
import Paragraph from './components/Paragraph';
+import BlockToolbar from './components/BlockToolbar';
import type { Props, Node, Transform } from './types';
const createSchema = () => {
@@ -30,6 +31,7 @@ const createSchema = () => {
},
nodes: {
+ 'block-toolbar': (props: Props) => ,
paragraph: (props: Props) => ,
'block-quote': (props: Props) => (
{props.children}
diff --git a/app/components/Icon/CollectionIcon.js b/app/components/Icon/CollectionIcon.js
index 411d0920f..948ccec65 100644
--- a/app/components/Icon/CollectionIcon.js
+++ b/app/components/Icon/CollectionIcon.js
@@ -10,7 +10,7 @@ export default function CollectionIcon({
return (
{expanded
- ?
+ ?
: }
);
diff --git a/app/components/Icon/KeyboardIcon.js b/app/components/Icon/KeyboardIcon.js
new file mode 100644
index 000000000..d11264b05
--- /dev/null
+++ b/app/components/Icon/KeyboardIcon.js
@@ -0,0 +1,12 @@
+// @flow
+import React from 'react';
+import Icon from './Icon';
+import type { Props } from './Icon';
+
+export default function KeyboardIcon(props: Props) {
+ return (
+
+
+
+ );
+}
diff --git a/app/components/Icon/OrderedListIcon.js b/app/components/Icon/OrderedListIcon.js
index 855794bea..488520e52 100644
--- a/app/components/Icon/OrderedListIcon.js
+++ b/app/components/Icon/OrderedListIcon.js
@@ -6,7 +6,7 @@ import type { Props } from './Icon';
export default function OrderedListIcon(props: Props) {
return (
-
+
);
}