Merge pull request #32 from moveyourdigital/issue-23-implement-simple-image

Adds support to SimpleImage

Author: lightningspirit

README.md

@@ -50,6 +50,7 @@ The package ships with the following renderers, but you can include your custom
 - Header
 - Paragraph
 - Image
+- SimpleImage
 - Embed
 - List
 - Table

src/renderers/image/__snapshots__/index.test.tsx.snap

@@ -28,3 +28,15 @@ exports[`<Image /> when receives a Image block without actions renders a <figure
   </figcaption>
 </figure>
 `;
+
+exports[`<Image /> when receives a SimpleImage block renders a <figure> block with <img> and <figcaption> 1`] = `
+<figure>
+  <img
+    alt="Deep in the universe"
+    src="https://cdn.directions.pt/uploads/2020/08/681-2000x1300-2.jpg"
+  />
+  <figcaption>
+    Deep in the universe
+  </figcaption>
+</figure>
+`;

src/renderers/image/index.test.tsx

@@ -36,4 +36,18 @@ describe('<Image />', () => {
       expect(create(<Image data={data} />).toJSON()).toMatchSnapshot();
     });
   });
+
+  describe('when receives a SimpleImage block', () => {
+    const data: ImageBlockData = {
+      url: 'https://cdn.directions.pt/uploads/2020/08/681-2000x1300-2.jpg',
+      caption: 'Deep in the universe',
+      withBorder: false,
+      stretched: false,
+      withBackground: false,
+    };
+
+    it('renders a <figure> block with <img> and <figcaption>', () => {
+      expect(create(<Image data={data} />).toJSON()).toMatchSnapshot();
+    });
+  });
 });

src/renderers/image/index.tsx

@@ -3,10 +3,11 @@ import HTMLReactParser from 'html-react-parser';
 import { RenderFn } from '../..';
 
 export interface ImageBlockData {
-  file: {
+  file?: {
     url: string;
     name?: string;
   };
+  url?: string
   caption: string;
   withBorder: boolean;
   withBackground: boolean;
@@ -50,6 +51,7 @@ const Image: RenderFn<ImageBlockData, ImageBlockConfig> = ({
   return (
     <figure {...figureprops}>
       {data?.file?.url && <img src={data.file.url} alt={data.caption || data.file.name} />}
+      {data?.url && <img src={data.url} alt={data.caption} />}
       {data?.caption && <figcaption>{HTMLReactParser(data.caption)}</figcaption>}
     </figure>
   );