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

Merge pull request #504 from outline/jori/block-quotes

Browse Source 
Added support for block quotes
This commit is contained in:
Jori Lallo
2018-01-01 12:09:39 -08:00
committed by GitHub
parent 1502f59a43 8bd640676f
commit 8d3a3f50d4
5 changed files with 21 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -304,7 +304,9 @@ const StyledEditor = styled(Editor)`
blockquote {
border-left: 3px solid #efefef;
margin: 1.2em 0;
padding-left: 10px;
font-style: italic;
}
table {

3
app/components/Editor/components/Toolbar/BlockToolbar.js
View File

@@ -6,6 +6,7 @@ import styled from 'styled-components';
import getDataTransferFiles from 'utils/getDataTransferFiles';
import Heading1Icon from 'components/Icon/Heading1Icon';
import Heading2Icon from 'components/Icon/Heading2Icon';
import BlockQuoteIcon from 'components/Icon/BlockQuoteIcon';
import ImageIcon from 'components/Icon/ImageIcon';
import CodeIcon from 'components/Icon/CodeIcon';
import BulletedListIcon from 'components/Icon/BulletedListIcon';
@@ -89,6 +90,7 @@ class BlockToolbar extends Component {
switch (type) {
case 'heading1':
case 'heading2':
case 'block-quote':
case 'code':
return this.insertBlock({ type });
case 'horizontal-rule':
@@ -159,6 +161,7 @@ class BlockToolbar extends Component {
{this.renderBlockButton('ordered-list', OrderedListIcon)}
{this.renderBlockButton('todo-list', TodoListIcon)}
<Separator />
{this.renderBlockButton('block-quote', BlockQuoteIcon)}
{this.renderBlockButton('code', CodeIcon)}
{this.renderBlockButton('horizontal-rule', HorizontalRuleIcon)}
{this.renderBlockButton('image', ImageIcon)}

2
app/components/Editor/components/Toolbar/components/FormattingToolbar.js
View File

@@ -8,6 +8,7 @@ import CodeIcon from 'components/Icon/CodeIcon';
import Heading1Icon from 'components/Icon/Heading1Icon';
import Heading2Icon from 'components/Icon/Heading2Icon';
import ItalicIcon from 'components/Icon/ItalicIcon';
import BlockQuoteIcon from 'components/Icon/BlockQuoteIcon';
import LinkIcon from 'components/Icon/LinkIcon';
import StrikethroughIcon from 'components/Icon/StrikethroughIcon';
@@ -92,6 +93,7 @@ class FormattingToolbar extends Component {
<Separator />
{this.renderBlockButton('heading1', Heading1Icon)}
{this.renderBlockButton('heading2', Heading2Icon)}
{this.renderBlockButton('block-quote', BlockQuoteIcon)}
<Separator />
<ToolbarButton onMouseDown={this.handleCreateLink}>
<LinkIcon light />

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

@@ -9,6 +9,7 @@ const schema = {
heading4: { marks: [''] },
heading5: { marks: [''] },
heading6: { marks: [''] },
'block-quote': { marks: [''] },
table: {
nodes: [{ types: ['table-row', 'table-head', 'table-cell'] }],
},
@@ -31,6 +32,7 @@ const schema = {
'heading4',
'heading5',
'heading6',
'block-quote',
'code',
'horizontal-rule',
'image',

12
app/components/Icon/BlockQuoteIcon.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 BlockQuoteIcon(props: Props) {
return (
<Icon {...props}>
<path d="M7,11 L9.00208688,11 C10.1055038,11 11,11.8982606 11,12.9979131 L11,15.0020869 C11,16.1055038 10.1017394,17 9.00208688,17 L6.99791312,17 C5.89449617,17 5,16.1017394 5,15.0020869 L5,12.9989566 L5,11 C5,8.790861 6.790861,7 9,7 L10,7 C10.5522847,7 11,7.44771525 11,8 C11,8.55228475 10.5522847,9 10,9 L9,9 C7.8954305,9 7,9.8954305 7,11 Z M15,11 L17.0020869,11 C18.1055038,11 19,11.8982606 19,12.9979131 L19,15.0020869 C19,16.1055038 18.1017394,17 17.0020869,17 L14.9979131,17 C13.8944962,17 13,16.1017394 13,15.0020869 L13,12.9989566 L13,11 C13,8.790861 14.790861,7 17,7 L18,7 C18.5522847,7 19,7.44771525 19,8 C19,8.55228475 18.5522847,9 18,9 L17,9 C15.8954305,9 15,9.8954305 15,11 Z" />
</Icon>
);
}