Show selected state

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 <Component {...attributes} src={src} alt={node.data.get('alt')} />;
+  return (
+    <StyledImg
+      {...attributes}
+      src={src}
+      alt={alt}
+      active={active}
+      loading={loading}
+    />
+  );
 }

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