Fix preview

[MAILPOET-2600]

assets/js/src/form_editor/components/preview.jsx

@@ -1,4 +1,10 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, {
+  useEffect,
+  useState,
+  useCallback,
+  useRef,
+  useLayoutEffect,
+} from 'react';
 import MailPoet from 'mailpoet';
 import { Spinner } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
@@ -8,6 +14,7 @@ import Modal from '../../common/modal/modal.jsx';
 import blocksToFormBody from '../store/blocks_to_form_body.jsx';
 
 const FormPreview = () => {
+  const formEl = useRef(null);
   const [form, setForm] = useState(null);
 
   const formBlocks = useSelect(
@@ -18,6 +25,10 @@ const FormPreview = () => {
     (select) => select('mailpoet-form-editor').getAllAvailableCustomFields(),
     []
   );
+  const settings = useSelect(
+    (select) => select('mailpoet-form-editor').getFormSettings(),
+    []
+  );
 
   const { hidePreview } = useDispatch('mailpoet-form-editor');
   const isPreview = useSelect(
@@ -32,11 +43,12 @@ const FormPreview = () => {
       action: 'previewEditor',
       data: {
         body: blocksToFormBody(formBlocks, customFields),
+        settings,
       },
     }).done((response) => {
       setForm(response.data);
     });
-  }, [formBlocks, customFields]);
+  }, [formBlocks, customFields, settings]);
 
   useEffect(() => {
     if (isPreview) {
@@ -44,6 +56,13 @@ const FormPreview = () => {
     }
   }, [isPreview, loadFormPreviewFromServer]);
 
+  useLayoutEffect(() => {
+    // eslint-disable-next-line camelcase
+    if (formEl.current && form?.form_element_styles) {
+      formEl.current.setAttribute('style', form.form_element_styles);
+    }
+  }, [formEl, form]);
+
   if (!isPreview) return null;
 
   function onClose() {
@@ -69,12 +88,20 @@ const FormPreview = () => {
               {'.mailpoet_hp_email_label { display: none }' }
               {form.css}
             </style>
-            {/* eslint-disable-next-line react/no-danger */}
+            <form
-            <div dangerouslySetInnerHTML={{ __html: form.html }} />
+              target="_self"
-            <div className="mailpoet_message">
+              method="post"
-              <p className="mailpoet_validate_success">{MailPoet.I18n.t('successMessage')}</p>
+              className="mailpoet_form "
-              <p className="mailpoet_validate_error">{MailPoet.I18n.t('errorMessage')}</p>
+              noValidate
-            </div>
+              ref={formEl}
+            >
+              {/* eslint-disable-next-line react/no-danger */}
+              <div dangerouslySetInnerHTML={{ __html: form.html }} />
+              <div className="mailpoet_message">
+                <p className="mailpoet_validate_success">{MailPoet.I18n.t('successMessage')}</p>
+                <p className="mailpoet_validate_error">{MailPoet.I18n.t('errorMessage')}</p>
+              </div>
+            </form>
           </div>
         </Preview>
       )}

lib/API/JSON/v1/Forms.php

@@ -119,6 +119,7 @@ class Forms extends APIEndpoint {
     return $this->successResponse([
       'html' => $html,
       'css' => $css,
+      'form_element_styles' => $this->formRenderer->renderFormElementStyles($data),
     ]);
   }
 

lib/Form/Block/BlockRendererHelper.php

@@ -115,7 +115,9 @@ class BlockRendererHelper {
 
   public function renderFontStyle(array $formSettings) {
     if (isset($formSettings['fontSize'])) {
-      return 'style="font-size: ' . trim($formSettings['fontSize']) . 'px"';
+      return 'style="'
+        . 'font-size: ' . trim($formSettings['fontSize']) . 'px;'
+        . 'line-height: ' . trim($formSettings['fontSize']) * 1.2 . 'px";';
     }
     return '';
   }