yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
Tom Moor
2017-10-31 22:17:14 -07:00
parent 53cda8ce2b
commit 14326d89f2
6 changed files with 103 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/components/Editor/components/BlockInsert.js
View File

@@ -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 (
<Portal isOpened>
<Trigger active={this.active} style={style}>
<HiddenInput
type="file"
innerRef={ref => (this.file = ref)}
onChange={this.onChooseImage}
accept="image/*"
/>
<BlockMenu
label={<PlusIcon />}
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}
<PlusIcon
onClick={ev =>
this.insertBlock(ev, { type: 'block-toolbar', isVoid: true })}
/>
</Trigger>
</Portal>

84
app/components/Editor/components/BlockToolbar.js Normal file
View File

@@ -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 (
<ToolbarButton onMouseDown={ev => this.onClickBlock(ev, type)}>
<IconClass color={color.text} />
</ToolbarButton>
);
};
render() {
const { state, node } = this.props;
const active = state.isFocused && state.selection.hasEdgeIn(node);
return (
<Bar active={active}>
{this.renderBlockButton('heading1', Heading1Icon)}
{this.renderBlockButton('heading2', Heading2Icon)}
<Separator />
{this.renderBlockButton('bulleted-list', BulletedListIcon)}
{this.renderBlockButton('ordered-list', OrderedListIcon)}
{this.renderBlockButton('todo-list', TodoListIcon)}
<Separator />
{this.renderBlockButton('code', CodeIcon)}
{this.renderBlockButton('horizontal-rule', HorizontalRuleIcon)}
{this.renderBlockButton('image', ImageIcon)}
</Bar>
);
}
}
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;

2
app/components/Editor/schema.js
View File

@@ -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) => <BlockToolbar {...props} />,
paragraph: (props: Props) => <Paragraph {...props} />,
'block-quote': (props: Props) => (
<blockquote>{props.children}</blockquote>

2
app/components/Icon/CollectionIcon.js
View File

@@ -10,7 +10,7 @@ export default function CollectionIcon({
return (
<Icon {...rest}>
{expanded
? <path d="M14,3.28571429 C15.1045695,3.12791864 16,3.8954305 16,5 L16,19 C16,20.1045695 15.1045695,20.8720814 14,20.7142857 L7,19.2857143 C5.8954305,19.1279186 5,18.3284271 5,17.5 L5,6.5 C5,5.67157288 5.8954305,4.87208136 7,4.71428571 L14,3.28571429 Z M7.5,6.47598949 L8.5,6.37337629 C8.77614237,6.34504044 9,6.49817875 9,6.71542029 L9,17.2845797 C9,17.5018212 8.77614237,17.6549596 8.5,17.6266237 L7.5,17.5240105 C7.22385763,17.4956747 7,17.3042518 7,17.0964555 L7,6.90354448 C7,6.69574823 7.22385763,6.50432534 7.5,6.47598949 Z M17,4 C18.1045695,4 19,4.8954305 19,6 L19,18 C19,19.1045695 18.1045695,20 17,20 L17,4 Z" />
? <path d="M16.701875,4.16415178 L17,4.14285714 C18.1045695,4.06395932 19,5.02334914 19,6.28571429 L19,17.7142857 C19,18.9766509 18.1045695,19.9360407 17,19.8571429 L16.701875,19.8358482 C16.8928984,19.371917 17,18.8348314 17,18.25 L17,5.75 C17,5.16516859 16.8928984,4.62808299 16.701875,4.16415178 Z M14,3.36363636 C15.1045695,3.16280555 16,4.15126779 16,5.57142857 L16,18.4285714 C16,19.8487322 15.1045695,20.8371945 14,20.6363636 L7,19.3636364 C5.8954305,19.1628055 5,18.1045695 5,17 L5,7 C5,5.8954305 5.8954305,4.83719445 7,4.63636364 L14,3.36363636 Z M7.5,6.67532468 C7.22385763,6.71118732 7,6.97574633 7,7.26623377 L7,16.7337662 C7,17.0242537 7.22385763,17.2888127 7.5,17.3246753 L8.5,17.4545455 C8.77614237,17.4904081 9,17.272365 9,16.9675325 L9,7.03246753 C9,6.72763504 8.77614237,6.5095919 8.5,6.54545455 L7.5,6.67532468 Z" />
: <path d="M7,4 L17,4 C18.1045695,4 19,4.8954305 19,6 L19,18 C19,19.1045695 18.1045695,20 17,20 L7,20 C5.8954305,20 5,19.1045695 5,18 L5,6 L5,6 C5,4.8954305 5.8954305,4 7,4 L7,4 Z M7.5,6 C7.22385763,6 7,6.22385763 7,6.5 L7,17.5 C7,17.7761424 7.22385763,18 7.5,18 L8.5,18 C8.77614237,18 9,17.7761424 9,17.5 L9,6.5 C9,6.22385763 8.77614237,6 8.5,6 L7.5,6 Z" />}
</Icon>
);

12
app/components/Icon/KeyboardIcon.js Normal file
View File

@@ -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 (
<Icon {...props}>
<path d="M6,6 L19,6 C20.1045695,6 21,6.8954305 21,8 L21,16 C21,17.1045695 20.1045695,18 19,18 L6,18 C4.8954305,18 4,17.1045695 4,16 L4,8 L4,8 C4,6.8954305 4.8954305,6 6,6 L6,6 Z M6,14 L6,16 L19,16 L19,14 L6,14 Z M16,8 L16,10 L19,10 L19,8 L16,8 Z M6,8 L6,10 L9,10 L9,8 L6,8 Z M13,8 L13,10 L15,10 L15,8 L13,8 Z M10,8 L10,10 L12,10 L12,8 L10,8 Z M7,11 L7,13 L9,13 L9,11 L7,11 Z M10,11 L10,13 L12,13 L12,11 L10,11 Z M13,11 L13,13 L15,13 L15,11 L13,11 Z M16,11 L16,13 L18,13 L18,11 L16,11 Z" />
</Icon>
);
}

2
app/components/Icon/OrderedListIcon.js
View File

@@ -6,7 +6,7 @@ import type { Props } from './Icon';
export default function OrderedListIcon(props: Props) {
return (
<Icon {...props}>
<path d="M1,3.99978522 L1,2.70798687 L0.853553391,2.85442299 C0.658291245,3.04967116 0.341708755,3.04967116 0.146446609,2.85442299 C-0.0488155365,2.65917483 -0.0488155365,2.342615 0.146446609,2.14736684 L1.14644661,1.14743843 C1.46142904,0.83247855 2,1.05554597 2,1.50096651 L2,3.99978522 L2.5000358,3.99978522 L2.5000358,3.99978522 C2.7761584,3.99978522 3,4.22362682 3,4.49974942 C3,4.77587203 2.7761584,4.99971363 2.5000358,4.99971363 L1.53191883,4.99971363 C1.52136474,5.00037848 1.51072178,5.00071593 1.5,5.00071593 C1.48927822,5.00071593 1.47863526,5.00037848 1.46808117,4.99971363 L0.499964203,4.99971363 L0.499964203,4.99971363 C0.223841598,4.99971363 3.38152664e-17,4.77587203 0,4.49974942 C-3.38152664e-17,4.22362682 0.223841598,3.99978522 0.499964203,3.99978522 L0.499964203,3.99978522 L1,3.99978522 Z M5.99992841,1.99992841 L15.0000716,1.99992841 L15.0000716,1.99992841 C15.5523168,1.99992841 16,2.4476116 16,2.99985681 L16,2.99985681 L16,2.99985681 C16,3.55210202 15.5523168,3.99978522 15.0000716,3.99978522 L5.99992841,3.99978522 L5.99992841,3.99978522 C5.4476832,3.99978522 5,3.55210202 5,2.99985681 L5,2.99985681 L5,2.99985681 C5,2.4476116 5.4476832,1.99992841 5.99992841,1.99992841 Z M5.99992841,11.9992125 L15.0000716,11.9992125 L15.0000716,11.9992125 C15.5523168,11.9992125 16,12.4468957 16,12.9991409 L16,12.9991409 L16,12.9991409 C16,13.5513861 15.5523168,13.9990693 15.0000716,13.9990693 L5.99992841,13.9990693 C5.4476832,13.9990693 5,13.5513861 5,12.9991409 C5,12.4468957 5.4476832,11.9992125 5.99992841,11.9992125 Z M5.99992841,6.99957044 L15.0000716,6.99957044 L15.0000716,6.99957044 C15.5523168,6.99957044 16,7.44725364 16,7.99949885 L16,7.99949885 C16,8.55174406 15.5523168,8.99942725 15.0000716,8.99942725 L5.99992841,8.99942725 L5.99992841,8.99942725 C5.4476832,8.99942725 5,8.55174406 5,7.99949885 C5,7.44725364 5.4476832,6.99957044 5.99992841,6.99957044 Z M0.646446609,12.6466151 L1.29289322,12.0002148 L0.5,12.0002148 C0.223857625,12.0002148 0,11.7763732 0,11.5002506 C0,11.224128 0.223857625,11.0002864 0.5,11.0002864 L2.5,11.0002864 C2.94545243,11.0002864 3.16853582,11.5388188 2.85355339,11.8537787 L2.14380887,12.5634724 C2.64120863,12.728439 3,13.1973672 3,13.7500895 C3,14.440396 2.44035594,15 1.75,15 L0.5,15 C0.223857625,15 0,14.7761584 0,14.5000358 C0,14.2239132 0.223857625,14.0000716 0.5,14.0000716 L1.75,14.0000716 C1.88807119,14.0000716 2,13.8881508 2,13.7500895 C2,13.6120282 1.88807119,13.5001074 1.75,13.5001074 L1,13.5001074 C0.554547575,13.5001074 0.331464179,12.961575 0.646446609,12.6466151 Z M2.40096969,8.70045104 L2.00096969,9.00042956 L2.50096969,9.00042956 C2.77711207,9.00042956 3.00096969,9.22427116 3.00096969,9.50039376 C3.00096969,9.77651637 2.77711207,10.000358 2.50096969,10.000358 L0.500969693,10.000358 C0.0204635467,10.000358 -0.183435224,9.38870545 0.200969693,9.1004224 L1.80096969,7.90050831 C1.92687261,7.80608788 2.00096969,7.65790433 2.00096969,7.50053695 L2.00096969,7.25055485 C2.00096969,7.11249355 1.88904088,7.00057275 1.75096969,7.00057275 L1.50096969,7.00057275 C1.22482732,7.00057275 1.00096969,7.22441434 1.00096969,7.50053695 C1.00096969,7.77665955 0.777112068,8.00050115 0.500969693,8.00050115 C0.224827319,8.00050115 0.000969693445,7.77665955 0.000969693445,7.50053695 C0.000969693445,6.67216913 0.672542569,6.00064434 1.50096969,6.00064434 L1.75096969,6.00064434 C2.44132563,6.00064434 3.00096969,6.56024834 3.00096969,7.25055485 L3.00096969,7.50053695 C3.00096969,7.9726391 2.77867846,8.41718975 2.40096969,8.70045104 Z" />
<path d="M5,7.99978522 L5,6.70798687 L4.85355339,6.85442299 C4.65829124,7.04967116 4.34170876,7.04967116 4.14644661,6.85442299 C3.95118446,6.65917483 3.95118446,6.342615 4.14644661,6.14736684 L5.14644661,5.14743843 C5.46142904,4.83247855 6,5.05554597 6,5.50096651 L6,7.99978522 L6.5000358,7.99978522 L6.5000358,7.99978522 C6.7761584,7.99978522 7,8.22362682 7,8.49974942 C7,8.77587203 6.7761584,8.99971363 6.5000358,8.99971363 L5.53191883,8.99971363 C5.52136474,9.00037848 5.51072178,9.00071593 5.5,9.00071593 C5.48927822,9.00071593 5.47863526,9.00037848 5.46808117,8.99971363 L4.4999642,8.99971363 L4.4999642,8.99971363 C4.2238416,8.99971363 4,8.77587203 4,8.49974942 C4,8.22362682 4.2238416,7.99978522 4.4999642,7.99978522 L4.4999642,7.99978522 L5,7.99978522 Z M9.99992841,5.99992841 L19.0000716,5.99992841 L19.0000716,5.99992841 C19.5523168,5.99992841 20,6.4476116 20,6.99985681 L20,6.99985681 L20,6.99985681 C20,7.55210202 19.5523168,7.99978522 19.0000716,7.99978522 L9.99992841,7.99978522 L9.99992841,7.99978522 C9.4476832,7.99978522 9,7.55210202 9,6.99985681 L9,6.99985681 L9,6.99985681 C9,6.4476116 9.4476832,5.99992841 9.99992841,5.99992841 Z M9.99992841,15.9992125 L19.0000716,15.9992125 L19.0000716,15.9992125 C19.5523168,15.9992125 20,16.4468957 20,16.9991409 L20,16.9991409 L20,16.9991409 C20,17.5513861 19.5523168,17.9990693 19.0000716,17.9990693 L9.99992841,17.9990693 C9.4476832,17.9990693 9,17.5513861 9,16.9991409 C9,16.4468957 9.4476832,15.9992125 9.99992841,15.9992125 Z M9.99992841,10.9995704 L19.0000716,10.9995704 L19.0000716,10.9995704 C19.5523168,10.9995704 20,11.4472536 20,11.9994988 L20,11.9994988 C20,12.5517441 19.5523168,12.9994273 19.0000716,12.9994273 L9.99992841,12.9994273 L9.99992841,12.9994273 C9.4476832,12.9994273 9,12.5517441 9,11.9994988 C9,11.4472536 9.4476832,10.9995704 9.99992841,10.9995704 Z M4.64644661,16.6466151 L5.29289322,16.0002148 L4.5,16.0002148 C4.22385763,16.0002148 4,15.7763732 4,15.5002506 C4,15.224128 4.22385763,15.0002864 4.5,15.0002864 L6.5,15.0002864 C6.94545243,15.0002864 7.16853582,15.5388188 6.85355339,15.8537787 L6.14380887,16.5634724 C6.64120863,16.728439 7,17.1973672 7,17.7500895 C7,18.440396 6.44035594,19 5.75,19 L4.5,19 C4.22385763,19 4,18.7761584 4,18.5000358 C4,18.2239132 4.22385763,18.0000716 4.5,18.0000716 L5.75,18.0000716 C5.88807119,18.0000716 6,17.8881508 6,17.7500895 C6,17.6120282 5.88807119,17.5001074 5.75,17.5001074 L5,17.5001074 C4.55454757,17.5001074 4.33146418,16.961575 4.64644661,16.6466151 Z M6.40096969,12.700451 L6.00096969,13.0004296 L6.50096969,13.0004296 C6.77711207,13.0004296 7.00096969,13.2242712 7.00096969,13.5003938 C7.00096969,13.7765164 6.77711207,14.000358 6.50096969,14.000358 L4.50096969,14.000358 C4.02046355,14.000358 3.81656478,13.3887054 4.20096969,13.1004224 L5.80096969,11.9005083 C5.92687261,11.8060879 6.00096969,11.6579043 6.00096969,11.5005369 L6.00096969,11.2505548 C6.00096969,11.1124935 5.88904088,11.0005727 5.75096969,11.0005727 L5.50096969,11.0005727 C5.22482732,11.0005727 5.00096969,11.2244143 5.00096969,11.5005369 C5.00096969,11.7766596 4.77711207,12.0005012 4.50096969,12.0005012 C4.22482732,12.0005012 4.00096969,11.7766596 4.00096969,11.5005369 C4.00096969,10.6721691 4.67254257,10.0006443 5.50096969,10.0006443 L5.75096969,10.0006443 C6.44132563,10.0006443 7.00096969,10.5602483 7.00096969,11.2505548 L7.00096969,11.5005369 C7.00096969,11.9726391 6.77867846,12.4171897 6.40096969,12.700451 Z" />
</Icon>
);
}