From 4d60b79717b5b86b56c84f4a652878c96837b261 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Thu, 28 Sep 2017 22:49:31 -0700 Subject: [PATCH 1/9] Improve shortcut styling --- .../KeyboardShortcuts/KeyboardShortcuts.js | 71 +++++++++++++++++-- frontend/static/flatpages/index.js | 2 - frontend/static/flatpages/keyboard.md | 9 --- 3 files changed, 65 insertions(+), 17 deletions(-) delete mode 100644 frontend/static/flatpages/keyboard.md diff --git a/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js b/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js index 8aeb5f606..de9100343 100644 --- a/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js +++ b/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js @@ -1,12 +1,9 @@ // @flow import React from 'react'; +import styled from 'styled-components'; +import { color } from 'styles/constants'; import Flex from 'components/Flex'; import HelpText from 'components/HelpText'; -import HtmlContent from 'components/HtmlContent'; -import flatpages from 'static/flatpages'; -import { convertToMarkdown } from 'utils/markdown'; - -const htmlContent = convertToMarkdown(flatpages.keyboard); function KeyboardShortcuts() { return ( @@ -15,9 +12,71 @@ function KeyboardShortcuts() { Atlas is designed to be super fast and easy to use. All of your usual keyboard shortcuts work here. - + + Cmd + Enter + + + Cmd + S + + + Cmd + Esc + + + e + + + m + + + / or t + + + d + + + d + + + ? + + ); } +const List = styled.dl` + width: 100%; + overflow: hidden; + padding: 0; + margin: 0 +`; + +const Keys = styled.dt` + float: left; + width: 25%; + padding: 0 0 4px; + margin: 0 +`; + +const Label = styled.dd` + float: left; + width: 75%; + padding: 0 0 4px; + margin: 0 +`; + +const Key = styled.kbd` + display: inline-block; + padding: 4px 6px; + font: 11px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; + line-height: 10px; + color: ${color.text}; + vertical-align: middle; + background-color: ${color.smokeLight}; + border: solid 1px ${color.slateLight}; + border-bottom-color: ${color.slate}; + border-radius: 3px; + box-shadow: inset 0 -1px 0 ${color.slate}; +`; + export default KeyboardShortcuts; diff --git a/frontend/static/flatpages/index.js b/frontend/static/flatpages/index.js index 731dd6b70..3b1fe70f0 100644 --- a/frontend/static/flatpages/index.js +++ b/frontend/static/flatpages/index.js @@ -1,8 +1,6 @@ // @flow import api from './api.md'; -import keyboard from './keyboard.md'; export default { api, - keyboard, }; diff --git a/frontend/static/flatpages/keyboard.md b/frontend/static/flatpages/keyboard.md deleted file mode 100644 index 56e604a0c..000000000 --- a/frontend/static/flatpages/keyboard.md +++ /dev/null @@ -1,9 +0,0 @@ -- `Cmd+Enter` - Save and exit document editor -- `Cmd+s` - Save document and continue editing -- `Cmd+Esc` - Cancel edit -- `/` or `t` - Jump to search -- `d` - Jump to dashboard -- `c` - Compose within a collection -- `e` - Edit document -- `m` - Move document -- `?` - This guide From be47baf2fdb29da207e7e97ae51fd32a3d28b611 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Thu, 28 Sep 2017 23:18:15 -0700 Subject: [PATCH 2/9] Add MarkdownShortcuts --- frontend/components/HelpText/HelpText.js | 1 + frontend/components/Key/index.js | 3 + frontend/components/Key/key.js | 19 +++++ frontend/components/Layout/Layout.js | 2 +- .../components/Layout/components/Modals.js | 4 ++ frontend/components/Modal/Modal.js | 3 +- .../KeyboardShortcuts/KeyboardShortcuts.js | 19 +---- .../MarkdownShortcuts/MarkdownShortcuts.js | 71 +++++++++++++++++++ frontend/scenes/MarkdownShortcuts/index.js | 3 + 9 files changed, 105 insertions(+), 20 deletions(-) create mode 100644 frontend/components/Key/index.js create mode 100644 frontend/components/Key/key.js create mode 100644 frontend/scenes/MarkdownShortcuts/MarkdownShortcuts.js create mode 100644 frontend/scenes/MarkdownShortcuts/index.js diff --git a/frontend/components/HelpText/HelpText.js b/frontend/components/HelpText/HelpText.js index dcb48df84..a4ff8c9b3 100644 --- a/frontend/components/HelpText/HelpText.js +++ b/frontend/components/HelpText/HelpText.js @@ -3,6 +3,7 @@ import styled from 'styled-components'; import { color } from 'styles/constants'; const HelpText = styled.p` + margin-top: 0; color: ${color.slateDark}; `; diff --git a/frontend/components/Key/index.js b/frontend/components/Key/index.js new file mode 100644 index 000000000..efe24263a --- /dev/null +++ b/frontend/components/Key/index.js @@ -0,0 +1,3 @@ +// @flow +import Key from './key'; +export default Key; diff --git a/frontend/components/Key/key.js b/frontend/components/Key/key.js new file mode 100644 index 000000000..8f4954d8c --- /dev/null +++ b/frontend/components/Key/key.js @@ -0,0 +1,19 @@ +// @flow +import styled from 'styled-components'; +import { color } from 'styles/constants'; + +const Key = styled.kbd` + display: inline-block; + padding: 4px 6px; + font: 11px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; + line-height: 10px; + color: ${color.text}; + vertical-align: middle; + background-color: ${color.smokeLight}; + border: solid 1px ${color.slateLight}; + border-bottom-color: ${color.slate}; + border-radius: 3px; + box-shadow: inset 0 -1px 0 ${color.slate}; +`; + +export default Key; diff --git a/frontend/components/Layout/Layout.js b/frontend/components/Layout/Layout.js index 1d72cd14a..14cd805d7 100644 --- a/frontend/components/Layout/Layout.js +++ b/frontend/components/Layout/Layout.js @@ -70,7 +70,7 @@ type Props = { @keydown('shift+/') goToOpenKeyboardShortcuts() { - this.props.ui.setActiveModal('keyboard-shortcuts'); + this.props.ui.setActiveModal('markdown-shortcuts'); } handleCreateCollection = () => { diff --git a/frontend/components/Layout/components/Modals.js b/frontend/components/Layout/components/Modals.js index 37193b8b1..7ac3d91df 100644 --- a/frontend/components/Layout/components/Modals.js +++ b/frontend/components/Layout/components/Modals.js @@ -8,6 +8,7 @@ import CollectionEdit from 'scenes/CollectionEdit'; import CollectionDelete from 'scenes/CollectionDelete'; import DocumentDelete from 'scenes/DocumentDelete'; import KeyboardShortcuts from 'scenes/KeyboardShortcuts'; +import MarkdownShortcuts from 'scenes/MarkdownShortcuts'; import Settings from 'scenes/Settings'; @observer class Modals extends Component { @@ -51,6 +52,9 @@ import Settings from 'scenes/Settings'; + + + diff --git a/frontend/components/Modal/Modal.js b/frontend/components/Modal/Modal.js index d0b208e93..df0ee9e53 100644 --- a/frontend/components/Modal/Modal.js +++ b/frontend/components/Modal/Modal.js @@ -61,7 +61,8 @@ const StyledModal = styled(ReactModal)` overflow-x: hidden; overflow-y: auto; background: white; - padding: 15vh 2rem 2rem + padding: 13vh 2rem 2rem; + outline: none; `; const Close = styled.a` diff --git a/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js b/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js index de9100343..f0c27c53b 100644 --- a/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js +++ b/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js @@ -1,7 +1,7 @@ // @flow import React from 'react'; import styled from 'styled-components'; -import { color } from 'styles/constants'; +import Key from 'components/Key'; import Flex from 'components/Flex'; import HelpText from 'components/HelpText'; @@ -34,9 +34,6 @@ function KeyboardShortcuts() { d - d - - ? @@ -65,18 +62,4 @@ const Label = styled.dd` margin: 0 `; -const Key = styled.kbd` - display: inline-block; - padding: 4px 6px; - font: 11px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; - line-height: 10px; - color: ${color.text}; - vertical-align: middle; - background-color: ${color.smokeLight}; - border: solid 1px ${color.slateLight}; - border-bottom-color: ${color.slate}; - border-radius: 3px; - box-shadow: inset 0 -1px 0 ${color.slate}; -`; - export default KeyboardShortcuts; diff --git a/frontend/scenes/MarkdownShortcuts/MarkdownShortcuts.js b/frontend/scenes/MarkdownShortcuts/MarkdownShortcuts.js new file mode 100644 index 000000000..ff84ecf1d --- /dev/null +++ b/frontend/scenes/MarkdownShortcuts/MarkdownShortcuts.js @@ -0,0 +1,71 @@ +// @flow +import React from 'react'; +import styled from 'styled-components'; +import Key from 'components/Key'; +import Flex from 'components/Flex'; +import HelpText from 'components/HelpText'; + +function MarkdownShortcuts() { + return ( + + + Know a little markdown syntax? You + {"'"} + re going to love all of the markdown + shortcuts built right into the Atlas editor. + + + # Space + + ## Space + + ### Space + + + 1. Space + + - Space + + [ ] Space + + > Space + + --- + + {'```'} + + _italic_ + + **bold** + + ~~strikethrough~~ + + {'`code`'} + + + + ); +} + +const List = styled.dl` + width: 100%; + overflow: hidden; + padding: 0; + margin: 0 +`; + +const Keys = styled.dt` + float: left; + width: 25%; + padding: 0 0 4px; + margin: 0 +`; + +const Label = styled.dd` + float: left; + width: 75%; + padding: 0 0 4px; + margin: 0 +`; + +export default MarkdownShortcuts; diff --git a/frontend/scenes/MarkdownShortcuts/index.js b/frontend/scenes/MarkdownShortcuts/index.js new file mode 100644 index 000000000..1a6460e75 --- /dev/null +++ b/frontend/scenes/MarkdownShortcuts/index.js @@ -0,0 +1,3 @@ +// @flow +import MarkdownShortcuts from './MarkdownShortcuts'; +export default MarkdownShortcuts; From d015d37f53f0af3f97a9aa3cac377f41f40f8b65 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Thu, 28 Sep 2017 23:22:09 -0700 Subject: [PATCH 3/9] Add shortcut --- frontend/components/Layout/Layout.js | 7 ++++++- frontend/components/Layout/components/Modals.js | 2 +- frontend/components/Modal/Modal.js | 2 +- frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js | 3 +++ 4 files changed, 11 insertions(+), 3 deletions(-) diff --git a/frontend/components/Layout/Layout.js b/frontend/components/Layout/Layout.js index 14cd805d7..f72064a7b 100644 --- a/frontend/components/Layout/Layout.js +++ b/frontend/components/Layout/Layout.js @@ -69,7 +69,12 @@ type Props = { } @keydown('shift+/') - goToOpenKeyboardShortcuts() { + openKeyboardShortcuts() { + this.props.ui.setActiveModal('keyboard-shortcuts'); + } + + @keydown('shift+3') + openMarkdownShortcuts() { this.props.ui.setActiveModal('markdown-shortcuts'); } diff --git a/frontend/components/Layout/components/Modals.js b/frontend/components/Layout/components/Modals.js index 7ac3d91df..3d14bf025 100644 --- a/frontend/components/Layout/components/Modals.js +++ b/frontend/components/Layout/components/Modals.js @@ -52,7 +52,7 @@ import Settings from 'scenes/Settings'; - + diff --git a/frontend/components/Modal/Modal.js b/frontend/components/Modal/Modal.js index df0ee9e53..92dc4db66 100644 --- a/frontend/components/Modal/Modal.js +++ b/frontend/components/Modal/Modal.js @@ -18,7 +18,7 @@ type Props = { const Modal = ({ children, isOpen, - title = 'Untitled Modal', + title = 'Untitled', onRequestClose, ...rest }: Props) => { diff --git a/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js b/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js index f0c27c53b..c4cd1df0c 100644 --- a/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js +++ b/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js @@ -36,6 +36,9 @@ function KeyboardShortcuts() { ? + + # + ); From 6b5fef49546ece7eabbaf8beaf1264c07e38de9e Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Sat, 30 Sep 2017 19:59:08 -0700 Subject: [PATCH 4/9] Combine modals --- frontend/components/Layout/Layout.js | 5 -- .../components/Layout/components/Modals.js | 4 -- .../KeyboardShortcuts/KeyboardShortcuts.js | 69 ++++++++++++++---- .../MarkdownShortcuts/MarkdownShortcuts.js | 71 ------------------- frontend/scenes/MarkdownShortcuts/index.js | 3 - frontend/styles/base.css | 4 ++ 6 files changed, 61 insertions(+), 95 deletions(-) delete mode 100644 frontend/scenes/MarkdownShortcuts/MarkdownShortcuts.js delete mode 100644 frontend/scenes/MarkdownShortcuts/index.js diff --git a/frontend/components/Layout/Layout.js b/frontend/components/Layout/Layout.js index f72064a7b..79f85039f 100644 --- a/frontend/components/Layout/Layout.js +++ b/frontend/components/Layout/Layout.js @@ -73,11 +73,6 @@ type Props = { this.props.ui.setActiveModal('keyboard-shortcuts'); } - @keydown('shift+3') - openMarkdownShortcuts() { - this.props.ui.setActiveModal('markdown-shortcuts'); - } - handleCreateCollection = () => { this.props.ui.setActiveModal('collection-new'); }; diff --git a/frontend/components/Layout/components/Modals.js b/frontend/components/Layout/components/Modals.js index 3d14bf025..37193b8b1 100644 --- a/frontend/components/Layout/components/Modals.js +++ b/frontend/components/Layout/components/Modals.js @@ -8,7 +8,6 @@ import CollectionEdit from 'scenes/CollectionEdit'; import CollectionDelete from 'scenes/CollectionDelete'; import DocumentDelete from 'scenes/DocumentDelete'; import KeyboardShortcuts from 'scenes/KeyboardShortcuts'; -import MarkdownShortcuts from 'scenes/MarkdownShortcuts'; import Settings from 'scenes/Settings'; @observer class Modals extends Component { @@ -52,9 +51,6 @@ import Settings from 'scenes/Settings'; - - - diff --git a/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js b/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js index c4cd1df0c..037b05a12 100644 --- a/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js +++ b/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js @@ -10,18 +10,13 @@ function KeyboardShortcuts() { Atlas is designed to be super fast and easy to use. - All of your usual keyboard shortcuts work here. + All of your usual keyboard shortcuts work here, and there + {"'"} + s Markdown too. + +

Navigation

- Cmd + Enter - - - Cmd + S - - - Cmd + Esc - - e @@ -36,9 +31,59 @@ function KeyboardShortcuts() { ? + - # - +

Editor

+ + Cmd + Enter + + Cmd + S + + Cmd + Esc + + + Cmd + b + + Cmd + i + + Cmd + u + + Cmd + z + + Cmd + Shift + z + + + +

Markdown

+ + # Space + + ## Space + + ### Space + + + 1. Space + + - Space + + [ ] Space + + > Space + + --- + + {'```'} + + + _italic_ + + **bold** + + ~~strikethrough~~ + + {'`code`'} + ); diff --git a/frontend/scenes/MarkdownShortcuts/MarkdownShortcuts.js b/frontend/scenes/MarkdownShortcuts/MarkdownShortcuts.js deleted file mode 100644 index ff84ecf1d..000000000 --- a/frontend/scenes/MarkdownShortcuts/MarkdownShortcuts.js +++ /dev/null @@ -1,71 +0,0 @@ -// @flow -import React from 'react'; -import styled from 'styled-components'; -import Key from 'components/Key'; -import Flex from 'components/Flex'; -import HelpText from 'components/HelpText'; - -function MarkdownShortcuts() { - return ( - - - Know a little markdown syntax? You - {"'"} - re going to love all of the markdown - shortcuts built right into the Atlas editor. - - - # Space - - ## Space - - ### Space - - - 1. Space - - - Space - - [ ] Space - - > Space - - --- - - {'```'} - - _italic_ - - **bold** - - ~~strikethrough~~ - - {'`code`'} - - - - ); -} - -const List = styled.dl` - width: 100%; - overflow: hidden; - padding: 0; - margin: 0 -`; - -const Keys = styled.dt` - float: left; - width: 25%; - padding: 0 0 4px; - margin: 0 -`; - -const Label = styled.dd` - float: left; - width: 75%; - padding: 0 0 4px; - margin: 0 -`; - -export default MarkdownShortcuts; diff --git a/frontend/scenes/MarkdownShortcuts/index.js b/frontend/scenes/MarkdownShortcuts/index.js deleted file mode 100644 index 1a6460e75..000000000 --- a/frontend/scenes/MarkdownShortcuts/index.js +++ /dev/null @@ -1,3 +0,0 @@ -// @flow -import MarkdownShortcuts from './MarkdownShortcuts'; -export default MarkdownShortcuts; diff --git a/frontend/styles/base.css b/frontend/styles/base.css index 27eabf039..d7d50a1f2 100644 --- a/frontend/styles/base.css +++ b/frontend/styles/base.css @@ -137,3 +137,7 @@ hr { .activeDropZone a { color: #FFF !important; } + +.ReactModal__Body--open { + overflow: hidden; +} From 76d0597e9705081cc1010e940311c1837fe26d44 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Sat, 30 Sep 2017 20:53:17 -0700 Subject: [PATCH 5/9] Add cmd+k to insert link --- frontend/components/Editor/plugins/KeyboardShortcuts.js | 5 +++++ frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js | 4 ++++ 2 files changed, 9 insertions(+) diff --git a/frontend/components/Editor/plugins/KeyboardShortcuts.js b/frontend/components/Editor/plugins/KeyboardShortcuts.js index e9e150655..fb1f448c8 100644 --- a/frontend/components/Editor/plugins/KeyboardShortcuts.js +++ b/frontend/components/Editor/plugins/KeyboardShortcuts.js @@ -22,6 +22,11 @@ export default function KeyboardShortcuts() { return this.toggleMark(state, 'underlined'); case 'd': return this.toggleMark(state, 'deleted'); + case 'k': + return state + .transform() + .wrapInline({ type: 'link', data: { href: '' } }) + .apply(); default: return null; } diff --git a/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js b/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js index 037b05a12..bbae9e861 100644 --- a/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js +++ b/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js @@ -48,6 +48,10 @@ function KeyboardShortcuts() { Cmd + u + Cmd + d + + Cmd + k + Cmd + z Cmd + Shift + z From 379975253a78e2873b6fd417628db951a46a4be9 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Sat, 30 Sep 2017 21:12:09 -0700 Subject: [PATCH 6/9] Correct symbol --- .../KeyboardShortcuts/KeyboardShortcuts.js | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js b/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js index bbae9e861..afb42649b 100644 --- a/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js +++ b/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js @@ -29,32 +29,32 @@ function KeyboardShortcuts() { d - ? + ⌘ + /

Editor

- Cmd + Enter + ⌘ + Enter - Cmd + S + ⌘ + S - Cmd + Esc + ⌘ + Esc - Cmd + b + ⌘ + b - Cmd + i + ⌘ + i - Cmd + u + ⌘ + u - Cmd + d + ⌘ + d - Cmd + k + ⌘ + k - Cmd + z + ⌘ + z - Cmd + Shift + z + ⌘ + Shift + z From 2c07ab42163fd82977be41f79042beff6066e883 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Sun, 1 Oct 2017 10:03:05 -0700 Subject: [PATCH 7/9] Added ability to caption images (stored in alt) --- .../components/Editor/components/Image.js | 92 +++++++++++++++---- 1 file changed, 74 insertions(+), 18 deletions(-) diff --git a/frontend/components/Editor/components/Image.js b/frontend/components/Editor/components/Image.js index c98ee7a47..bf3a6e75b 100644 --- a/frontend/components/Editor/components/Image.js +++ b/frontend/components/Editor/components/Image.js @@ -1,27 +1,83 @@ // @flow -import React from 'react'; +import React, { Component } from 'react'; +import styled from 'styled-components'; import type { Props } from '../types'; import { color } from 'styles/constants'; -import styled from 'styled-components'; + +class Image extends Component { + props: Props; + + handleChange = (ev: SyntheticInputEvent) => { + const alt = ev.target.value; + const { editor, node } = this.props; + const data = node.data.toObject(); + const state = editor + .getState() + .transform() + .setNodeByKey(node.key, { data: { ...data, alt } }) + .apply(); + + editor.onChange(state); + }; + + handleClick = (ev: SyntheticInputEvent) => { + ev.stopPropagation(); + }; + + render() { + const { attributes, state, node, readOnly } = this.props; + const loading = node.data.get('loading'); + const caption = node.data.get('alt'); + const src = node.data.get('src'); + const active = state.isFocused && state.selection.hasEdgeIn(node); + + return ( + + + + + ); + } +} const StyledImg = styled.img` - box-shadow: ${props => (props.active ? `0 0 0 3px ${color.slate}` : '0')}; + box-shadow: ${props => (props.active ? `0 0 0 2px ${color.slate}` : '0')}; + border-radius: ${props => (props.active ? `2px` : '0')}; opacity: ${props => (props.loading ? 0.5 : 1)}; `; -export default function Image({ attributes, state, node }: Props) { - const loading = node.data.get('loading'); - const alt = node.data.get('alt'); - const src = node.data.get('src'); - const active = state.isFocused && state.selection.hasEdgeIn(node); +const CenteredImage = styled.div` + text-align: center; +`; - return ( - - ); -} +const Caption = styled.input` + border: 0; + display: block; + font-size: 13px; + font-style: italic; + color: ${color.slate}; + margin: 2px auto; + text-align: center; + width: 100%; + outline: none; + + &::placeholder { + color: ${color.slate}; + } +`; + +export default Image; From abff5aa33123dc96e21f9b44e3482756fb4a6614 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Sun, 1 Oct 2017 10:05:59 -0700 Subject: [PATCH 8/9] Prevent cropping of descenders --- frontend/components/Editor/components/Image.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/components/Editor/components/Image.js b/frontend/components/Editor/components/Image.js index bf3a6e75b..978d887be 100644 --- a/frontend/components/Editor/components/Image.js +++ b/frontend/components/Editor/components/Image.js @@ -70,7 +70,8 @@ const Caption = styled.input` font-size: 13px; font-style: italic; color: ${color.slate}; - margin: 2px auto; + padding: 2px 0; + line-height: 16px; text-align: center; width: 100%; outline: none; From cfc9e6fb6b63a001b36820b1d649a713f722d645 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Sun, 1 Oct 2017 10:58:20 -0700 Subject: [PATCH 9/9] Dont show caption placeholder in reading mode. Make it easier to escape image selected state --- .../components/Editor/components/Image.js | 21 +++++++++++-------- .../Editor/plugins/MarkdownShortcuts.js | 14 ++++++++++++- 2 files changed, 25 insertions(+), 10 deletions(-) diff --git a/frontend/components/Editor/components/Image.js b/frontend/components/Editor/components/Image.js index 978d887be..af1c5de44 100644 --- a/frontend/components/Editor/components/Image.js +++ b/frontend/components/Editor/components/Image.js @@ -30,6 +30,7 @@ class Image extends Component { const caption = node.data.get('alt'); const src = node.data.get('src'); const active = state.isFocused && state.selection.hasEdgeIn(node); + const showCaption = !readOnly || caption; return ( @@ -40,15 +41,17 @@ class Image extends Component { active={active} loading={loading} /> - + {showCaption && + } ); } diff --git a/frontend/components/Editor/plugins/MarkdownShortcuts.js b/frontend/components/Editor/plugins/MarkdownShortcuts.js index b63fec754..0dd924156 100644 --- a/frontend/components/Editor/plugins/MarkdownShortcuts.js +++ b/frontend/components/Editor/plugins/MarkdownShortcuts.js @@ -215,6 +215,19 @@ export default function MarkdownShortcuts() { return this.onBackspace(ev, state); if (endOffset !== startBlock.length) return; + // Hitting enter while an image is selected should jump caret below and + // insert a new paragraph + if (startBlock.type === 'image') { + ev.preventDefault(); + return state + .transform() + .collapseToEnd() + .insertBlock('paragraph') + .apply(); + } + + // Hitting enter in a heading or blockquote will split the node at that + // point and make the new node a paragraph if ( startBlock.type !== 'heading1' && startBlock.type !== 'heading2' && @@ -228,7 +241,6 @@ export default function MarkdownShortcuts() { } ev.preventDefault(); - return state.transform().splitBlock().setBlock('paragraph').apply(); },