Added zooming image and max width fix

app/components/Editor/components/Image.js

@@ -1,5 +1,6 @@
 // @flow
 import React, { Component } from 'react';
+import ImageZoom from 'react-medium-image-zoom';
 import styled from 'styled-components';
 import type { Props } from '../types';
 import { color } from 'shared/styles/constants';
@@ -34,13 +35,25 @@ class Image extends Component {
 
     return (
       <CenteredImage>
-        <StyledImg
-          {...attributes}
-          src={src}
-          alt={caption}
-          active={active}
-          loading={loading}
-        />
+        {!readOnly
+          ? <StyledImg
+              {...attributes}
+              src={src}
+              alt={caption}
+              active={active}
+              loading={loading}
+            />
+          : <ImageZoom
+              image={{
+                src,
+                alt: caption,
+                style: {
+                  maxWidth: '100%',
+                },
+                ...attributes,
+              }}
+              shouldRespectMaxDimension
+            />}
         {showCaption &&
           <Caption
             type="text"
@@ -58,6 +71,7 @@ class Image extends Component {
 }
 
 const StyledImg = styled.img`
+  max-width: 100%;
   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)};

package.json

@@ -4,11 +4,14 @@
   "main": "index.js",
   "scripts": {
     "clean": "rimraf dist",
-    "build:webpack": "NODE_ENV=production webpack --config webpack.config.prod.js",
-    "build:analyze": "NODE_ENV=production webpack --config webpack.config.prod.js --json | webpack-bundle-size-analyzer",
+    "build:webpack":
+      "NODE_ENV=production webpack --config webpack.config.prod.js",
+    "build:analyze":
+      "NODE_ENV=production webpack --config webpack.config.prod.js --json | webpack-bundle-size-analyzer",
     "build": "npm run clean && npm run build:webpack",
     "start": "node index.js",
-    "dev": "NODE_ENV=development DEBUG=sql,cache,presenters ./node_modules/.bin/nodemon --inspect --watch server index.js",
+    "dev":
+      "NODE_ENV=development DEBUG=sql,cache,presenters ./node_modules/.bin/nodemon --inspect --watch server index.js",
     "lint": "npm run lint:flow && npm run lint:js",
     "lint:js": "eslint app",
     "lint:flow": "flow",
@@ -18,39 +21,24 @@
     "sequelize:migrate": "sequelize db:migrate",
     "test": "npm run test:app && npm run test:server",
     "test:app": "jest",
-    "test:server": "jest --config=server/.jestconfig.json --runInBand --forceExit",
+    "test:server":
+      "jest --config=server/.jestconfig.json --runInBand --forceExit",
     "precommit": "lint-staged"
   },
   "lint-staged": {
-    "*.js": [
-      "eslint --fix",
-      "git add"
-    ]
+    "*.js": ["eslint --fix", "git add"]
   },
   "jest": {
     "verbose": false,
-    "roots": [
-      "app"
-    ],
+    "roots": ["app"],
     "moduleNameMapper": {
       "^.*[.](s?css|css)$": "<rootDir>/__mocks__/styleMock.js",
       "^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js"
     },
-    "moduleFileExtensions": [
-      "js",
-      "jsx",
-      "json"
-    ],
-    "moduleDirectories": [
-      "node_modules"
-    ],
-    "modulePaths": [
-      "app"
-    ],
-    "setupFiles": [
-      "<rootDir>/setupJest.js",
-      "<rootDir>/__mocks__/window.js"
-    ]
+    "moduleFileExtensions": ["js", "jsx", "json"],
+    "moduleDirectories": ["node_modules"],
+    "modulePaths": ["app"],
+    "setupFiles": ["<rootDir>/setupJest.js", "<rootDir>/__mocks__/window.js"]
   },
   "engines": {
     "node": ">= 7.6"
@@ -145,6 +133,7 @@
     "react-dropzone": "3.6.0",
     "react-helmet": "^5.2.0",
     "react-keydown": "^1.7.3",
+    "react-medium-image-zoom": "^2.0.3",
     "react-modal": "^2.2.1",
     "react-portal": "^3.1.0",
     "react-router-dom": "^4.1.1",

yarn.lock

@@ -7360,6 +7360,10 @@ react-keydown@^1.7.3:
   dependencies:
     core-js "^2.5.0"
 
+react-medium-image-zoom@^2.0.3:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/react-medium-image-zoom/-/react-medium-image-zoom-2.0.6.tgz#9c6c6b38f2bae4f9f5fd7f8adf43c2b816e13660"
+
 react-modal@^2.2.1:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-2.2.4.tgz#a32483c3555bd7677f09bca65d82f51da3abcbc0"