diff --git a/app/components/Editor/Editor.js b/app/components/Editor/Editor.js index 5f6de6d92..41d5627f8 100644 --- a/app/components/Editor/Editor.js +++ b/app/components/Editor/Editor.js @@ -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 { diff --git a/app/components/Editor/components/Toolbar/BlockToolbar.js b/app/components/Editor/components/Toolbar/BlockToolbar.js index 8e5bd48d9..c9776860c 100644 --- a/app/components/Editor/components/Toolbar/BlockToolbar.js +++ b/app/components/Editor/components/Toolbar/BlockToolbar.js @@ -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)} + {this.renderBlockButton('block-quote', BlockQuoteIcon)} {this.renderBlockButton('code', CodeIcon)} {this.renderBlockButton('horizontal-rule', HorizontalRuleIcon)} {this.renderBlockButton('image', ImageIcon)} diff --git a/app/components/Editor/components/Toolbar/components/FormattingToolbar.js b/app/components/Editor/components/Toolbar/components/FormattingToolbar.js index dcf21e074..c9d9c22a3 100644 --- a/app/components/Editor/components/Toolbar/components/FormattingToolbar.js +++ b/app/components/Editor/components/Toolbar/components/FormattingToolbar.js @@ -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 { {this.renderBlockButton('heading1', Heading1Icon)} {this.renderBlockButton('heading2', Heading2Icon)} + {this.renderBlockButton('block-quote', BlockQuoteIcon)} diff --git a/app/components/Editor/schema.js b/app/components/Editor/schema.js index 8e2abcc2d..d3b757a4f 100644 --- a/app/components/Editor/schema.js +++ b/app/components/Editor/schema.js @@ -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', diff --git a/app/components/Icon/BlockQuoteIcon.js b/app/components/Icon/BlockQuoteIcon.js new file mode 100644 index 000000000..7915974b3 --- /dev/null +++ b/app/components/Icon/BlockQuoteIcon.js @@ -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 ( + + + + ); +}