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