Add NpsPoll feature support for Email editor

MAILPOET-6315

mailpoet/assets/js/src/mailpoet-email-editor-integration/index.ts

@@ -0,0 +1,10 @@
+// This file acts as a way of adding JS integration support for the email editor package
+// We have something similar for the PHP package in `mailpoet/lib/EmailEditor/Integrations`
+// Here, we can expose MailPoet specific components for use in the Email editor.
+
+import { addFilter } from '@wordpress/hooks';
+import { withNpsPoll } from '../nps-poll';
+
+addFilter('mailpoet_email_editor_the_editor_component', 'mailpoet', (editor) =>
+  withNpsPoll(editor),
+);

mailpoet/assets/js/src/nps-poll.jsx

@@ -71,7 +71,10 @@ const useNpsPoll = () => {
       });
     };
 
-    if (window.mailpoet_display_nps_poll && MailPoet.libs3rdPartyEnabled) {
+    if (
+      window.mailpoet_display_nps_poll &&
+      window.mailpoet_3rd_party_libs_enabled
+    ) {
       getTrackingData().then(({ data }) => callSatismeter(data));
     }
   }, []);

mailpoet/lib/EmailEditor/Integrations/MailPoet/EditorPageRenderer.php

@@ -59,6 +59,16 @@ class EditorPageRenderer {
       return;
     }
 
+    // load mailpoet email editor JS integrations
+    $editorIntegrationAssetsParams = require Env::$assetsPath . '/dist/js/email_editor_integration/email_editor_integration.asset.php';
+    $this->wp->wpEnqueueScript(
+      'email_editor_integration',
+      Env::$assetsUrl . '/dist/js/email_editor_integration/email_editor_integration.js',
+      $editorIntegrationAssetsParams['dependencies'],
+      $editorIntegrationAssetsParams['version'],
+      true
+    );
+
     $assetsParams = require Env::$assetsPath . '/dist/js/email-editor/email_editor.asset.php';
 
     $this->wp->wpEnqueueScript(

mailpoet/webpack.config.js

@@ -530,6 +530,24 @@ const emailEditorCustom = Object.assign({}, wpScriptConfig, {
     : [...wpScriptConfig.plugins, new ForkTsCheckerWebpackPlugin()],
 });
 
+const emailEditorIntegration = Object.assign({}, wpScriptConfig, {
+  name: 'email_editor_integration',
+  entry: {
+    email_editor_integration: 'mailpoet-email-editor-integration/index.ts',
+  },
+  output: {
+    filename: '[name].js',
+    path: path.join(__dirname, 'assets/dist/js/email_editor_integration'),
+  },
+  resolve: {
+    ...wpScriptConfig.resolve,
+    modules: ['node_modules', 'assets/js/src'],
+  },
+  plugins: PRODUCTION_ENV
+    ? wpScriptConfig.plugins
+    : [...wpScriptConfig.plugins, new ForkTsCheckerWebpackPlugin()],
+});
+
 const configs = [
   publicConfig,
   adminConfig,
@@ -538,6 +556,7 @@ const configs = [
   postEditorBlock,
   marketingOptinBlock,
   emailEditorBlocks,
+  emailEditorIntegration,
 ];
 
 module.exports = (env) => {
@@ -555,7 +574,8 @@ module.exports = (env) => {
     const config = Object.assign({}, conf);
     if (
       config.name === 'marketing_optin_block' ||
-      config.name === 'email_editor'
+      config.name === 'email_editor' ||
+      config.name === 'email_editor_integration'
     ) {
       return config;
     }

packages/js/email-editor/src/editor.tsx

@@ -1,10 +1,10 @@
 import '@wordpress/format-library'; // Enables text formatting capabilities
 import { useSelect } from '@wordpress/data';
 import { StrictMode, createRoot } from '@wordpress/element';
-// import { withNpsPoll } from '../../nps-poll'; // TODO: need to fix this import. custom component from core MP plugin
+import { applyFilters } from '@wordpress/hooks';
 import { initBlocks } from './blocks';
 import { initializeLayout } from './layouts/flex-email';
-import { InnerEditor } from './components/block-editor/editor';
+import { InnerEditor } from './components/block-editor';
 import { createStore, storeName } from './store';
 import { initHooks } from './editor-hooks';
 import { KeyboardShortcuts } from './components/keybord-shortcuts';
@@ -32,6 +32,11 @@ function Editor() {
 	);
 }
 
+const WrappedEditor = applyFilters(
+	'mailpoet_email_editor_the_editor_component',
+	Editor
+);
+
 export function initialize( elementId: string ) {
 	const container = document.getElementById( elementId );
 	if ( ! container ) {
@@ -42,5 +47,6 @@ export function initialize( elementId: string ) {
 	initBlocks();
 	initHooks();
 	const root = createRoot( container );
-	root.render( <Editor /> );
+	// @ts-ignore
+	root.render( <WrappedEditor /> );
 }