diff --git a/frontend/components/Editor/components/Image.js b/frontend/components/Editor/components/Image.js
index c98ee7a47..af1c5de44 100644
--- a/frontend/components/Editor/components/Image.js
+++ b/frontend/components/Editor/components/Image.js
@@ -1,27 +1,87 @@
// @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);
+ const showCaption = !readOnly || caption;
+
+ return (
+
+
+ {showCaption &&
+ }
+
+ );
+ }
+}
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};
+ padding: 2px 0;
+ line-height: 16px;
+ text-align: center;
+ width: 100%;
+ outline: none;
+
+ &::placeholder {
+ color: ${color.slate};
+ }
+`;
+
+export default Image;
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/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();
},
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..79f85039f 100644
--- a/frontend/components/Layout/Layout.js
+++ b/frontend/components/Layout/Layout.js
@@ -69,7 +69,7 @@ type Props = {
}
@keydown('shift+/')
- goToOpenKeyboardShortcuts() {
+ openKeyboardShortcuts() {
this.props.ui.setActiveModal('keyboard-shortcuts');
}
diff --git a/frontend/components/Modal/Modal.js b/frontend/components/Modal/Modal.js
index d0b208e93..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) => {
@@ -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 8aeb5f606..afb42649b 100644
--- a/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js
+++ b/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js
@@ -1,23 +1,117 @@
// @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';
-import HtmlContent from 'components/HtmlContent';
-import flatpages from 'static/flatpages';
-import { convertToMarkdown } from 'utils/markdown';
-
-const htmlContent = convertToMarkdown(flatpages.keyboard);
function KeyboardShortcuts() {
return (
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
+
+ e
+
+
+ m
+
+
+ / or t
+
+
+ d
+
+
+ ⌘ + /
+
+
+
+ Editor
+
+ ⌘ + Enter
+
+ ⌘ + S
+
+ ⌘ + Esc
+
+
+ ⌘ + b
+
+ ⌘ + i
+
+ ⌘ + u
+
+ ⌘ + d
+
+ ⌘ + k
+
+ ⌘ + z
+
+ ⌘ + Shift + z
+
+
+
+ Markdown
+
+ # 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 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
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;
+}