Load paragraph block from server

[MAILPOET-2614]

assets/js/src/form_editor/store/form_body_to_blocks.jsx

@@ -110,6 +110,22 @@ const mapColorSlug = (colorDefinitions, colorValue) => {
   return result ? result.slug : undefined;
 };
 
+/**
+ * @param {Array.<{name: string, slug: string, size: number}>} fontSizeDefinitions
+ * @param {string} fontSizeValue
+ */
+const mapFontSizeSlug = (fontSizeDefinitions, fontSizeValue) => {
+  let value = 0;
+  if (fontSizeValue) {
+    value = parseInt(fontSizeValue, 10);
+    if (Number.isNaN(value)) {
+      value = 2;
+    }
+  }
+  const result = fontSizeDefinitions.find((fontSize) => fontSize.size === value);
+  return result ? result.slug : undefined;
+};
+
 const mapColumnBlocks = (data, colorDefinitions, customFields = []) => {
   // eslint-disable-next-line no-use-before-define
   const mapFormBodyToBlocks = formBodyToBlocksFactory(colorDefinitions, customFields);
@@ -146,9 +162,14 @@ const mapColumnBlocks = (data, colorDefinitions, customFields = []) => {
 /**
  * Factory for form data to blocks mapper
  * @param {Array.<{name: string, slug: string, color: string}>} colorDefinitions
+ * @param {Array.<{name: string, slug: string, size: number}>} fontSizeDefinitions
  * @param customFields - list of all custom Fields
  */
-export const formBodyToBlocksFactory = (colorDefinitions, customFields = []) => {
+export const formBodyToBlocksFactory = (
+  colorDefinitions,
+  fontSizeDefinitions,
+  customFields = []
+) => {
   if (!Array.isArray(customFields)) {
     throw new Error('Mapper expects customFields to be an array.');
   }
@@ -194,6 +215,17 @@ export const formBodyToBlocksFactory = (colorDefinitions, customFields = []) =>
         mapped.attributes.textColor = textColorSlug;
         mapped.attributes.customTextColor = !textColorSlug ? item.params.text_color : undefined;
       }
+      if (item.params && has(item.params, 'background_color')) {
+        const slug = mapColorSlug(colorDefinitions, item.params.background_color);
+        mapped.attributes.backgroundColor = slug;
+        mapped.attributes.customBackgroundColor = !slug
+          ? item.params.background_color : undefined;
+      }
+      if (item.params && has(item.params, 'font_size')) {
+        const slug = mapFontSizeSlug(fontSizeDefinitions, item.params.font_size);
+        mapped.attributes.fontSize = slug;
+        mapped.attributes.customFontSize = !slug ? item.params.font_size : undefined;
+      }
       let level = 2;
       switch (item.id) {
         case 'email':
@@ -224,6 +256,18 @@ export const formBodyToBlocksFactory = (colorDefinitions, customFields = []) =>
             },
             name: 'core/heading',
           };
+        case 'paragraph':
+          return {
+            ...mapped,
+            attributes: {
+              ...mapped.attributes,
+              content: item.params?.content || '',
+              align: item.params?.align,
+              className: item.params?.class_name,
+              dropCap: item.params?.drop_cap === '1',
+            },
+            name: 'core/paragraph',
+          };
         case 'first_name':
           return {
             ...mapped,

assets/js/src/form_editor/store/store.jsx

@@ -14,6 +14,7 @@ import mapFormDataAfterLoading from './map_form_data_after_loading.jsx';
 
 const formBodyToBlocks = formBodyToBlocksFactory(
   SETTINGS_DEFAULTS.colors,
+  SETTINGS_DEFAULTS.fontSizes,
   window.mailpoet_custom_fields
 );
 

tests/javascript/form_editor/store/form_body_to_blocks.spec.js

@@ -17,6 +17,7 @@ import {
   divider,
   nestedColumns,
   headingInput,
+  paragraphInput,
 } from './form_to_block_test_data.js';
 
 const colorDefinitions = [{
@@ -29,7 +30,12 @@ const colorDefinitions = [{
   color: '#ffffff',
 }];
 
-const formBodyToBlocks = formBodyToBlocksFactory(colorDefinitions, []);
+const fontSizeDefinitions = [
+  { name: 'Small', size: 13, slug: 'small' },
+  { name: 'Normal', size: 16, slug: 'normal' },
+];
+
+const formBodyToBlocks = formBodyToBlocksFactory(colorDefinitions, fontSizeDefinitions, []);
 
 const checkBlockBasics = (block) => {
   expect(block.clientId).to.be.a('string');
@@ -50,10 +56,10 @@ describe('Form Body To Blocks', () => {
 
   it('Should throw an error for wrong custom fields input', () => {
     const error = 'Mapper expects customFields to be an array.';
-    expect(() => formBodyToBlocksFactory([], null)).to.throw(error);
-    expect(() => formBodyToBlocksFactory([], 'hello')).to.throw(error);
-    expect(() => formBodyToBlocksFactory([], () => {})).to.throw(error);
-    expect(() => formBodyToBlocksFactory([], 1)).to.throw(error);
+    expect(() => formBodyToBlocksFactory([], [], null)).to.throw(error);
+    expect(() => formBodyToBlocksFactory([], [], 'hello')).to.throw(error);
+    expect(() => formBodyToBlocksFactory([], [], () => {})).to.throw(error);
+    expect(() => formBodyToBlocksFactory([], [], 1)).to.throw(error);
   });
 
   it('Should map email input to block', () => {
@@ -284,7 +290,7 @@ describe('Form Body To Blocks', () => {
       type: 'text',
       updated_at: '2019-12-10T15:05:06+00:00',
     };
-    const map = formBodyToBlocksFactory(colorDefinitions, [customField]);
+    const map = formBodyToBlocksFactory(colorDefinitions, fontSizeDefinitions, [customField]);
     const [block] = map([customTextInput]);
     checkBlockBasics(block);
     expect(block.clientId).to.be.include('1_');
@@ -312,7 +318,7 @@ describe('Form Body To Blocks', () => {
       type: 'radio',
       updated_at: '2019-12-10T15:05:06+00:00',
     };
-    const map = formBodyToBlocksFactory(colorDefinitions, [customField]);
+    const map = formBodyToBlocksFactory(colorDefinitions, fontSizeDefinitions, [customField]);
     const [block] = map([customRadioInput]);
     checkBlockBasics(block);
     expect(block.clientId).to.be.include('3_');
@@ -342,7 +348,7 @@ describe('Form Body To Blocks', () => {
       },
       position: null,
     };
-    const map = formBodyToBlocksFactory(colorDefinitions, [customField]);
+    const map = formBodyToBlocksFactory(colorDefinitions, fontSizeDefinitions, [customField]);
     const [block] = map([customCheckboxInput]);
     checkBlockBasics(block);
     expect(block.clientId).to.be.include('4_');
@@ -371,7 +377,7 @@ describe('Form Body To Blocks', () => {
       },
       position: null,
     };
-    const map = formBodyToBlocksFactory(colorDefinitions, [customField]);
+    const map = formBodyToBlocksFactory(colorDefinitions, fontSizeDefinitions, [customField]);
     const [block] = map([customSelectInput]);
     checkBlockBasics(block);
     expect(block.clientId).to.be.include('5_');
@@ -398,7 +404,7 @@ describe('Form Body To Blocks', () => {
       updated_at: '2019-12-13T15:22:07+00:00',
     };
 
-    const map = formBodyToBlocksFactory(colorDefinitions, [customField]);
+    const map = formBodyToBlocksFactory(colorDefinitions, fontSizeDefinitions, [customField]);
     const [block] = map([customDateInput]);
     checkBlockBasics(block);
     expect(block.clientId).to.be.include('6_');
@@ -519,6 +525,32 @@ describe('Form Body To Blocks', () => {
     expect(block.attributes.align).to.be.undefined;
   });
 
+  it('It should map paragraph', () => {
+    const paragraph = { ...paragraphInput };
+
+    const [block] = formBodyToBlocks([paragraph]);
+    expect(block.name).to.equal('core/paragraph');
+    expect(block.attributes.content).to.equal('content');
+    expect(block.attributes.dropCap).to.equal(true);
+    expect(block.attributes.align).to.equal('center');
+    expect(block.attributes.className).to.equal('class name');
+  });
+
+  it('It should map paragraph font size', () => {
+    const heading = { ...headingInput, params: { font_size: 13 } };
+
+    const [block] = formBodyToBlocks([heading]);
+    expect(block.attributes.fontSize).to.equal('small');
+  });
+
+  it('It should map paragraph custom font size', () => {
+    const heading = { ...headingInput, params: { font_size: 34 } };
+
+    const [block] = formBodyToBlocks([heading]);
+    expect(block.attributes.fontSize).to.be.undefined;
+    expect(block.attributes.customFontSize).to.eq(34);
+  });
+
   it('It should map heading with data', () => {
     const heading = {
       ...headingInput,

tests/javascript/form_editor/store/form_to_block_test_data.js

@@ -245,3 +245,14 @@ export const headingInput = {
   id: 'heading',
   position: null,
 };
+
+export const paragraphInput = {
+  type: 'paragraph',
+  id: 'paragraph',
+  params: {
+    content: 'content',
+    drop_cap: '1',
+    align: 'center',
+    class_name: 'class name',
+  },
+};