From 330f0eb41d0897d1a11a5e7bd1ac661a1b38f72e Mon Sep 17 00:00:00 2001 From: Jori Lallo Date: Sat, 30 Dec 2017 13:46:21 -0800 Subject: [PATCH 1/2] Added support for block quotes --- app/components/Editor/Editor.js | 2 ++ app/components/Editor/components/Toolbar/BlockToolbar.js | 2 ++ .../Editor/components/Toolbar/components/FormattingToolbar.js | 1 + app/components/Editor/schema.js | 2 ++ 4 files changed, 7 insertions(+) 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..70a6e8899 100644 --- a/app/components/Editor/components/Toolbar/BlockToolbar.js +++ b/app/components/Editor/components/Toolbar/BlockToolbar.js @@ -89,6 +89,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 +160,7 @@ class BlockToolbar extends Component { {this.renderBlockButton('ordered-list', OrderedListIcon)} {this.renderBlockButton('todo-list', TodoListIcon)} + {this.renderBlockButton('block-quote', Heading2Icon)} {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..1c25d4ec6 100644 --- a/app/components/Editor/components/Toolbar/components/FormattingToolbar.js +++ b/app/components/Editor/components/Toolbar/components/FormattingToolbar.js @@ -92,6 +92,7 @@ class FormattingToolbar extends Component { {this.renderBlockButton('heading1', Heading1Icon)} {this.renderBlockButton('heading2', Heading2Icon)} + {this.renderBlockButton('block-quote', Heading2Icon)} 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', From 8bd640676fd162540c66fd72ed05f0e145409128 Mon Sep 17 00:00:00 2001 From: Jori Lallo Date: Mon, 1 Jan 2018 11:25:07 -0800 Subject: [PATCH 2/2] Added block quote icon --- .../Editor/components/Toolbar/BlockToolbar.js | 3 ++- .../Toolbar/components/FormattingToolbar.js | 3 ++- app/components/Icon/BlockQuoteIcon.js | 12 ++++++++++++ 3 files changed, 16 insertions(+), 2 deletions(-) create mode 100644 app/components/Icon/BlockQuoteIcon.js diff --git a/app/components/Editor/components/Toolbar/BlockToolbar.js b/app/components/Editor/components/Toolbar/BlockToolbar.js index 70a6e8899..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'; @@ -160,7 +161,7 @@ class BlockToolbar extends Component { {this.renderBlockButton('ordered-list', OrderedListIcon)} {this.renderBlockButton('todo-list', TodoListIcon)} - {this.renderBlockButton('block-quote', Heading2Icon)} + {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 1c25d4ec6..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,7 +93,7 @@ class FormattingToolbar extends Component { {this.renderBlockButton('heading1', Heading1Icon)} {this.renderBlockButton('heading2', Heading2Icon)} - {this.renderBlockButton('block-quote', Heading2Icon)} + {this.renderBlockButton('block-quote', BlockQuoteIcon)} 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 ( + + + + ); +}