diff --git a/frontend/components/Editor/components/Image.js b/frontend/components/Editor/components/Image.js index aacbf36b2..c98ee7a47 100644 --- a/frontend/components/Editor/components/Image.js +++ b/frontend/components/Editor/components/Image.js @@ -1,16 +1,27 @@ // @flow import React from 'react'; import type { Props } from '../types'; +import { color } from 'styles/constants'; import styled from 'styled-components'; -const LoadingImage = styled.img` - opacity: .5; +const StyledImg = styled.img` + box-shadow: ${props => (props.active ? `0 0 0 3px ${color.slate}` : '0')}; + opacity: ${props => (props.loading ? 0.5 : 1)}; `; -export default function Image({ attributes, node }: Props) { +export default function Image({ attributes, state, node }: Props) { const loading = node.data.get('loading'); - const Component = loading ? LoadingImage : 'img'; - const src = node.data.get('inlineSrc') || node.data.get('src'); + const alt = node.data.get('alt'); + const src = node.data.get('src'); + const active = state.isFocused && state.selection.hasEdgeIn(node); - return ; + return ( + + ); } diff --git a/frontend/components/Editor/types.js b/frontend/components/Editor/types.js index 79cad5d49..0db4d68ae 100644 --- a/frontend/components/Editor/types.js +++ b/frontend/components/Editor/types.js @@ -1,5 +1,6 @@ // @flow import { List, Set, Map } from 'immutable'; +import { Selection } from 'slate'; export type NodeTransform = { addMarkByKey: Function, @@ -83,15 +84,6 @@ export type Block = Node & { export type Document = Node; -export type Props = { - node: Node, - parent?: Node, - attributes?: Object, - editor: Editor, - readOnly?: boolean, - children?: React$Element, -}; - export type State = { document: Document, selection: Selection, @@ -108,3 +100,13 @@ export type State = { transform: Function, isBlurred: Function, }; + +export type Props = { + node: Node, + parent?: Node, + attributes?: Object, + state: State, + editor: Editor, + readOnly?: boolean, + children?: React$Element, +};