From 072804a41281ff8096b81cf70e10a5c7da583eea Mon Sep 17 00:00:00 2001
From: Rostislav Wolny <rosta@mailpoet.com>
Date: Wed, 1 Apr 2020 15:34:49 +0200
Subject: [PATCH] Add loading image blocks from server

[MAILPOET-2750]
---
 .../form_editor/store/form_body_to_blocks.jsx | 19 +++++++++++++++++++
 .../store/form_body_to_blocks.spec.js         | 17 +++++++++++++++++
 .../store/form_to_block_test_data.js          | 19 +++++++++++++++++++
 3 files changed, 55 insertions(+)

diff --git a/assets/js/src/form_editor/store/form_body_to_blocks.jsx b/assets/js/src/form_editor/store/form_body_to_blocks.jsx
index e5e2ba1434..e98c4a650b 100644
--- a/assets/js/src/form_editor/store/form_body_to_blocks.jsx
+++ b/assets/js/src/form_editor/store/form_body_to_blocks.jsx
@@ -274,6 +274,25 @@ export const formBodyToBlocksFactory = (
             },
             name: 'core/paragraph',
           };
+        case 'image':
+          return {
+            ...mapped,
+            name: 'core/image',
+            attributes: {
+              className: item.params?.class_name || '',
+              align: item.params?.align,
+              url: item.params?.url,
+              alt: item.params?.alt,
+              title: item.params?.title,
+              caption: item.params?.caption,
+              linkDestination: item.params?.link_destination,
+              link: item.params?.link,
+              id: item.params?.id,
+              sizeSlug: item.params?.size_slug,
+              width: item.params?.width,
+              height: item.params?.height,
+            },
+          };
         case 'first_name':
           return {
             ...mapped,
diff --git a/tests/javascript/form_editor/store/form_body_to_blocks.spec.js b/tests/javascript/form_editor/store/form_body_to_blocks.spec.js
index 2ffc4dd081..c80f0b20ce 100644
--- a/tests/javascript/form_editor/store/form_body_to_blocks.spec.js
+++ b/tests/javascript/form_editor/store/form_body_to_blocks.spec.js
@@ -18,6 +18,7 @@ import {
   nestedColumns,
   headingInput,
   paragraphInput,
+  image,
 } from './form_to_block_test_data.js';
 
 const colorDefinitions = [{
@@ -617,4 +618,20 @@ describe('Form Body To Blocks', () => {
     expect(block.attributes.anchor).to.be.equal('anchor');
     expect(block.attributes.customTextColor).to.be.equal('#f78da7');
   });
+
+  it('It should map image', () => {
+    const [block] = formBodyToBlocks([image]);
+    expect(block.name).to.equal('core/image');
+    expect(block.attributes.className).to.equal('my-class');
+    expect(block.attributes.align).to.equal('center');
+    expect(block.attributes.url).to.equal('http://example.com/image.jpg');
+    expect(block.attributes.alt).to.equal('Alt text');
+    expect(block.attributes.title).to.equal('Title');
+    expect(block.attributes.caption).to.equal('Caption');
+    expect(block.attributes.linkDestination).to.equal('none');
+    expect(block.attributes.id).to.equal(123);
+    expect(block.attributes.sizeSlug).to.equal('medium');
+    expect(block.attributes.width).to.equal(100);
+    expect(block.attributes.height).to.equal(200);
+  });
 });
diff --git a/tests/javascript/form_editor/store/form_to_block_test_data.js b/tests/javascript/form_editor/store/form_to_block_test_data.js
index f02abd48fa..93efc51a63 100644
--- a/tests/javascript/form_editor/store/form_to_block_test_data.js
+++ b/tests/javascript/form_editor/store/form_to_block_test_data.js
@@ -256,3 +256,22 @@ export const paragraphInput = {
     class_name: 'class name',
   },
 };
+
+export const image = {
+  type: 'image',
+  id: 'image',
+  params: {
+    class_name: 'my-class',
+    align: 'center',
+    url: 'http://example.com/image.jpg',
+    alt: 'Alt text',
+    title: 'Title',
+    caption: 'Caption',
+    link_destination: 'none',
+    link: 'http://example.com',
+    id: 123,
+    size_slug: 'medium',
+    width: 100,
+    height: 200,
+  },
+};