Apply custom css in editor

[MAILPOET-2455]

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

@@ -6,6 +6,7 @@ import Header from './header.jsx';
 import Sidebar from './sidebar.jsx';
 import FormTitle from './form_title.jsx';
 import Notices from './notices.jsx';
+import FormStyles from './form_styles.jsx';
 
 /**
  * This component renders the form editor app.
@@ -19,6 +20,7 @@ export default () => {
     (select) => select('mailpoet-form-editor').getSidebarOpened(),
     []
   );
+
   const layoutClass = classnames('edit-post-layout', {
     'is-sidebar-opened': sidebarOpened,
   });
@@ -29,7 +31,7 @@ export default () => {
         <div className="edit-post-layout__content">
           <Notices />
           <div className="edit-post-visual-editor editor-styles-wrapper">
-            <div className="editor-writing-flow block-editor-writing-flow">
+            <div className="editor-writing-flow block-editor-writing-flow mailpoet_form">
               <FormTitle />
             </div>
           </div>
@@ -39,6 +41,7 @@ export default () => {
         </div>
         <Popover.Slot />
       </SlotFillProvider>
+      <FormStyles />
     </div>
   );
 };

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

@@ -0,0 +1,22 @@
+import ReactDOM from 'react-dom';
+import { useSelect } from '@wordpress/data';
+import { transformStyles } from '@wordpress/block-editor';
+import css from 'css';
+
+export default () => {
+  const element = document.getElementById('mailpoet-form-editor-form-styles');
+
+  const formStyles = useSelect(
+    (select) => select('mailpoet-form-editor').getFormStyles(),
+    []
+  );
+
+  try {
+    css.parse(formStyles);
+  } catch (e) {
+    return ReactDOM.createPortal(null, element);
+  }
+
+  const transoformedStyles = transformStyles([{ css: formStyles }], '.editor-styles-wrapper');
+  return ReactDOM.createPortal(transoformedStyles[0], element);
+};