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