Merge branch 'master' into ui-improves

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 (
+      <CenteredImage>
+        <StyledImg
+          {...attributes}
+          src={src}
+          alt={caption}
+          active={active}
+          loading={loading}
+        />
+        {showCaption &&
+          <Caption
+            type="text"
+            placeholder="Write a caption"
+            onChange={this.handleChange}
+            onClick={this.handleClick}
+            defaultValue={caption}
+            contentEditable={false}
+            disabled={readOnly}
+            tabIndex={-1}
+          />}
+      </CenteredImage>
+    );
+  }
+}
 
 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 (
-    <StyledImg
-      {...attributes}
-      src={src}
-      alt={alt}
-      active={active}
-      loading={loading}
-    />
-  );
-}
+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;

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;
       }

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();
     },
 

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};
 `;
 

frontend/components/Key/index.js

@@ -0,0 +1,3 @@
+// @flow
+import Key from './key';
+export default Key;

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;

frontend/components/Layout/Layout.js

@@ -69,7 +69,7 @@ type Props = {
   }
 
   @keydown('shift+/')
-  goToOpenKeyboardShortcuts() {
+  openKeyboardShortcuts() {
     this.props.ui.setActiveModal('keyboard-shortcuts');
   }
 

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`