Add new form editor hello world

[SHOP-2450]

assets/js/src/form_editor/index.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+const appElement = document.querySelector('#mailpoet_form_edit');
+
+if (appElement) {
+  ReactDOM.render(
+    <h1>
+      Here comes editor for:
+      {window.mailpoet_form_data.name}
+    </h1>,
+    appElement
+  );
+}

lib/AdminPages/Pages/FormEditor.php

@@ -3,6 +3,7 @@
 namespace MailPoet\AdminPages\Pages;
 
 use MailPoet\AdminPages\PageRenderer;
+use MailPoet\Features\FeaturesController;
 use MailPoet\Form\Block;
 use MailPoet\Form\Renderer as FormRenderer;
 use MailPoet\Models\Form;
@@ -13,8 +14,12 @@ class FormEditor {
   /** @var PageRenderer */
   private $page_renderer;
 
-  function __construct(PageRenderer $page_renderer) {
+  /** @var FeaturesController */
+  private $features_controller;
+
+  function __construct(PageRenderer $page_renderer, FeaturesController $features_controller) {
     $this->page_renderer = $page_renderer;
+    $this->features_controller = $features_controller;
   }
 
   function render() {
@@ -35,6 +40,11 @@ class FormEditor {
       'sub_menu' => 'mailpoet-forms',
     ];
 
-    $this->page_renderer->displayPage('form/editor.html', $data);
+    if ($this->features_controller->isSupported(FeaturesController::NEW_FORM_EDITOR)) {
+      $this->page_renderer->displayPage('form/editor.html', $data);
+    } else {
+      $this->page_renderer->displayPage('form/editor_legacy.html', $data);
+    }
+
   }
 }

views/form/editor.html

@@ -0,0 +1,12 @@
+<% extends 'layout.html' %>
+<% block content %>
+<div id="mailpoet_form_edit">
+</div>
+
+<script>
+  <% autoescape 'js' %>
+  var mailpoet_form_data = <%= json_encode(form) %>;
+  <% endautoescape %>
+</script>
+<%= javascript('form_editor.js')%>
+<% endblock %>

webpack.config.js

@@ -360,10 +360,22 @@ const testConfig = {
     'jquery': 'jQuery',
     'interact': 'interact',
     'spectrum': 'spectrum',
-  }
+  },
 };
 
-module.exports = [adminConfig, publicConfig, migratorConfig, testConfig].map((config) => {
+// FormEditor config
+const formEditorConfig = {
+  name: 'form_editor',
+  entry: {
+    form_editor: 'form_editor/index.jsx',
+  },
+  externals: {
+    'jquery': 'jQuery',
+    'mailpoet': 'MailPoet',
+  },
+};
+
+module.exports = [adminConfig, publicConfig, migratorConfig, formEditorConfig, testConfig].map((config) => {
   if (config.name !== 'test') {
     config.plugins = config.plugins || [];
     config.plugins.push(