diff --git a/frontend/components/Editor/components/Image.js b/frontend/components/Editor/components/Image.js
index c98ee7a4..af1c5de4 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/MarkdownShortcuts.js b/frontend/components/Editor/plugins/MarkdownShortcuts.js
index b63fec75..0dd92415 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();
},