From 6fe3ff3fe1a41b061e28b28e5a95cf966c5d8303 Mon Sep 17 00:00:00 2001 From: Pavel Dohnal Date: Wed, 18 Mar 2020 14:20:40 +0100 Subject: [PATCH] Load paragraph block from server [MAILPOET-2614] --- .../form_editor/store/form_body_to_blocks.jsx | 46 +++++++++++++++- assets/js/src/form_editor/store/store.jsx | 1 + .../store/form_body_to_blocks.spec.js | 52 +++++++++++++++---- .../store/form_to_block_test_data.js | 11 ++++ 4 files changed, 99 insertions(+), 11 deletions(-) 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 2a501ba9f2..f903b6444e 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 @@ -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, diff --git a/assets/js/src/form_editor/store/store.jsx b/assets/js/src/form_editor/store/store.jsx index 6b5e2e3b10..a0b9987f1b 100644 --- a/assets/js/src/form_editor/store/store.jsx +++ b/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 ); 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 83932ddb74..e2771b5453 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 @@ -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, 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 9e1dd7f2f8..f02abd48fa 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 @@ -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', + }, +};