Load headings data

[MAILPOET-2613]

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

@@ -1,3 +1,4 @@
+/* eslint-disable camelcase */
 import { has } from 'lodash';
 import formatCustomFieldBlockName from '../blocks/format_custom_field_block_name.jsx';
 
@@ -142,6 +143,19 @@ export const formBodyToBlocksFactory = (colorDefinitions, customFields = []) =>
         mapped.attributes.label = item.params.label ? item.params.label : '';
       }
       switch (item.id) {
+        case 'heading':
+          return {
+            ...mapped,
+            attributes: {
+              content: item.params?.content || '',
+              level: item.params?.level || 2,
+              align: item.params?.align,
+              textColor: item.params?.text_color,
+              anchor: item.params?.anchor,
+              className: item.params?.class_name,
+            },
+            name: 'core/heading',
+          };
         case 'email':
           return {
             ...mapped,

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

@@ -15,6 +15,7 @@ import {
   customHtml,
   divider,
   nestedColumns,
+  headingInput,
 } from './form_to_block_test_data.js';
 
 const colorDefinitions = [{
@@ -390,4 +391,36 @@ describe('Form Body To Blocks', () => {
     const [block] = formBodyToBlocks([nested]);
     expect(block.attributes.className).to.be.equal('custom-class');
   });
+
+  it('It should map heading', () => {
+    const heading = { ...headingInput, position: '1' };
+
+    const [block] = formBodyToBlocks([heading]);
+    expect(block.attributes.content).to.be.equal('');
+    expect(block.attributes.level).to.be.equal(2);
+    expect(block.attributes.align).to.be.undefined;
+  });
+
+  it('It should map heading with data', () => {
+    const heading = {
+      ...headingInput,
+      position: '1',
+      params: {
+        text_color: 'vivid-red',
+        content: 'Content',
+        level: 1,
+        anchor: 'anchor',
+        align: 'right',
+        class_name: 'class',
+      },
+    };
+
+    const [block] = formBodyToBlocks([heading]);
+    expect(block.attributes.content).to.be.equal('Content');
+    expect(block.attributes.level).to.be.equal(1);
+    expect(block.attributes.align).to.be.equal('right');
+    expect(block.attributes.className).to.be.equal('class');
+    expect(block.attributes.anchor).to.be.equal('anchor');
+    expect(block.attributes.textColor).to.be.equal('vivid-red');
+  });
 });

tests/javascript/form_editor/store/form_to_block_test_data.js

@@ -226,3 +226,8 @@ export const nestedColumns = {
     },
   ],
 };
+export const headingInput = {
+  type: 'heading',
+  id: 'heading',
+  position: null,
+};