Skip to content

Commit aa8f779

Browse files
johnojohno
authored
Merge pull request blocks#39 from johno/help-menu
Add keyboard shortcuts and code and JSX buttons to toolbar
2 parents c01ffbb + b09a475 commit aa8f779

2 files changed

Lines changed: 103 additions & 50 deletions

File tree

‎packages/editor/src/plugins/toolbar/Toolbar.js‎

Lines changed: 62 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,39 @@ import ItalicIcon from '@material-ui/icons/FormatItalic'
88
import LinkIcon from '@material-ui/icons/InsertLink'
99
import ImageIcon from '@material-ui/icons/InsertPhoto'
1010
import QuoteIcon from '@material-ui/icons/FormatQuote'
11+
import CodeIcon from '@material-ui/icons/Code'
1112
// import ListIcon from '@material-ui/icons/FormatListBulleted'
1213
// import StrikethroughIcon from '@material-ui/icons/StrikethroughS'
1314
// import HeadingIcon from '@material-ui/icons/Title'
14-
// import CodeIcon from '@material-ui/icons/Code'
1515
// import NumberedListIcon from '@material-ui/icons/FormatListNumbered'
1616
// import ColorIcon from '@material-ui/icons/FormatColorText'
1717
// import BackgroundColorIcon from '@material-ui/icons/FormatColorFill'
1818

19-
const H1 = () => <b>H1</b>
20-
const H2 = () => <b>H2</b>
19+
// "icons"
20+
const B = props => (
21+
<b
22+
{...props}
23+
css={{
24+
paddingLeft: 2,
25+
paddingRight: 2,
26+
borderRadius: 2
27+
}}
28+
/>
29+
)
30+
const H1 = () => <B>H1</B>
31+
const H2 = () => <B>H2</B>
32+
const JSX = () => <B>JSX</B>
33+
34+
const Separator = () => (
35+
<div
36+
css={css({
37+
width: '1px',
38+
mx: 2,
39+
height: 24,
40+
bg: 'gray'
41+
})}
42+
/>
43+
)
2144

2245
const Root = props => (
2346
<div
@@ -44,7 +67,7 @@ const IconButton = ({ active, ...props }) => (
4467
{...props}
4568
css={css({
4669
display: 'block',
47-
width: 32,
70+
minWidth: 32,
4871
height: 32,
4972
padding: 1,
5073
fontSize: 16,
@@ -73,46 +96,60 @@ const isActive = type => editor => {
7396
// config
7497
const buttons = [
7598
{
76-
title: 'Toggle Bold',
99+
title: 'Toggle Bold (⌘ B)',
77100
Icon: BoldIcon,
78101
command: 'toggleBold',
79102
isActive: isActive('bold')
80103
},
81104
{
82-
title: 'Toggle Italic',
105+
title: 'Toggle Italic (⌘ I)',
83106
Icon: ItalicIcon,
84107
command: 'toggleItalic',
85108
isActive: isActive('italic')
86109
},
87110
{
88-
title: 'Toggle Heading Level 1',
111+
title: 'Toggle Heading Level 1 (⌘ ⌥ 1)',
89112
Icon: H1,
90113
command: 'toggleHeadingOne',
91114
isActive: isActive('heading-one')
92115
},
93116
{
94-
title: 'Toggle Heading Level 2',
117+
title: 'Toggle Heading Level 2 (⌘ ⌥ 2)',
95118
Icon: H2,
96119
command: 'toggleHeadingTwo',
97120
isActive: isActive('heading-two')
98121
},
99122
{
100-
title: 'Toggle Block Quote',
123+
title: 'Toggle Block Quote (⌃ ⌥ Q)',
101124
Icon: QuoteIcon,
102125
command: 'toggleBlockQuote',
103126
isActive: isActive('block-quote')
104127
},
105128
{
106-
title: 'Insert Link',
129+
title: 'Toggle Code Block',
130+
Icon: CodeIcon,
131+
command: 'togglePre',
132+
isActive: isActive('pre')
133+
},
134+
{ separator: true },
135+
{
136+
title: 'Insert Link (⌘ K)',
107137
Icon: LinkIcon,
108138
command: 'toggleLink',
109139
isActive: isActive('link')
110140
},
111141
{
112-
title: 'Insert Image',
142+
title: 'Insert Image (⌘ ⇧ I)',
113143
Icon: ImageIcon,
114144
command: 'insertImage',
115145
isActive: isActive('image')
146+
},
147+
{ separator: true },
148+
{
149+
title: 'Insert JSX Block',
150+
Icon: JSX,
151+
command: 'toggleJSX',
152+
isActive: isActive('jsx')
116153
}
117154
]
118155

@@ -121,16 +158,20 @@ export const Toolbar = props => {
121158

122159
return (
123160
<Root>
124-
{buttons.map(({ Icon, title, command, isActive }, i) => (
125-
<IconButton
126-
key={i}
127-
title={title}
128-
active={isActive(editor)}
129-
onClick={editor[command]}
130-
>
131-
<Icon size={20} />
132-
</IconButton>
133-
))}
161+
{buttons.map(({ separator, Icon, title, command, isActive }, i) =>
162+
separator ? (
163+
<Separator key={i} />
164+
) : (
165+
<IconButton
166+
key={i}
167+
title={title}
168+
active={isActive(editor)}
169+
onClick={editor[command]}
170+
>
171+
<Icon size={20} />
172+
</IconButton>
173+
)
174+
)}
134175
</Root>
135176
)
136177
}

‎packages/editor/src/plugins/toolbar/index.js‎

Lines changed: 41 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -14,42 +14,32 @@ const toggleItalic = editor => {
1414
editor.toggleMark('italic').focus()
1515
}
1616

17-
const toggleBlockQuote = editor => {
18-
if (editor.hasOuterBlock('block-quote')) {
19-
editor.unwrapBlock('block-quote')
20-
} else {
21-
editor.wrapBlock('block-quote')
22-
}
23-
}
17+
const DEFAULT_BLOCK = 'paragraph'
2418

25-
const toggleHeading = (editor, level) => {
26-
if (editor.hasBlock('heading-one')) {
27-
console.log('H1')
28-
} else if (editor.hasBlock('heading-two')) {
29-
console.log('H2')
30-
} else {
31-
}
19+
const hasBlock = (editor, type) => {
20+
return editor.value.blocks.some(node => node.type === type)
3221
}
3322

34-
const toggleHeadingOne = editor => {
35-
if (editor.hasBlock('heading-one')) {
36-
editor.setBlocks('paragraph')
23+
const toggleBlock = (editor, type) => {
24+
if (editor.hasBlock(type)) {
25+
editor.setBlocks(DEFAULT_BLOCK)
3726
} else {
38-
editor.setBlocks('heading-one')
27+
editor.setBlocks(type)
3928
}
4029
}
4130

42-
const toggleHeadingTwo = editor => {
43-
if (editor.hasBlock('heading-two')) {
44-
editor.setBlocks('paragraph')
31+
const toggleBlockQuote = editor => {
32+
if (editor.hasOuterBlock('block-quote')) {
33+
editor.unwrapBlock('block-quote')
4534
} else {
46-
editor.setBlocks('heading-two')
35+
editor.wrapBlock('block-quote')
4736
}
4837
}
4938

50-
const hasBlock = (editor, type) => {
51-
return editor.value.blocks.some(node => node.type === type)
52-
}
39+
const toggleHeadingOne = editor => toggleBlock(editor, 'heading-one')
40+
const toggleHeadingTwo = editor => toggleBlock(editor, 'heading-two')
41+
const toggleJSX = editor => toggleBlock(editor, 'jsx')
42+
const togglePre = editor => toggleBlock(editor, 'pre')
5343

5444
// Certain nodes like list-items and block-quotes have an inner
5545
// paragraph so we need to query the parent node rather than
@@ -75,21 +65,43 @@ export default (opts = {}) => ({
7565
commands: {
7666
toggleBold,
7767
toggleItalic,
68+
toggleBlock,
7869
toggleBlockQuote,
79-
toggleHeading,
8070
toggleHeadingOne,
81-
toggleHeadingTwo
71+
toggleHeadingTwo,
72+
toggleJSX,
73+
togglePre
8274
},
8375
onKeyDown: (event, editor, next) => {
8476
if (!keyboardEvent.isMod(event)) return next()
77+
const opt = event.altKey
78+
79+
if (opt) {
80+
switch (event.keyCode) {
81+
// Q
82+
case 81:
83+
editor.toggleBlockQuote()
84+
break
85+
// 1
86+
case 49:
87+
editor.toggleHeadingOne()
88+
break
89+
// 2
90+
case 50:
91+
editor.toggleHeadingTwo()
92+
break
93+
default:
94+
return next()
95+
}
96+
}
8597

8698
// these could live elsewhere...
8799
switch (event.key) {
88100
case 'b':
89-
toggleBold(editor)
101+
editor.toggleBold()
90102
break
91103
case 'i':
92-
toggleItalic(editor)
104+
editor.toggleItalic()
93105
break
94106
default:
95107
next()

0 commit comments

Comments
 (0)