diff --git a/mailpoet/assets/js/src/mailpoet-email-editor-integration/index.ts b/mailpoet/assets/js/src/mailpoet-email-editor-integration/index.ts
new file mode 100644
index 0000000000..58e5e6b075
--- /dev/null
+++ b/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),
+);
diff --git a/mailpoet/assets/js/src/nps-poll.jsx b/mailpoet/assets/js/src/nps-poll.jsx
index 04ae2b0e6a..11e32759c2 100644
--- a/mailpoet/assets/js/src/nps-poll.jsx
+++ b/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));
}
}, []);
diff --git a/mailpoet/lib/EmailEditor/Integrations/MailPoet/EditorPageRenderer.php b/mailpoet/lib/EmailEditor/Integrations/MailPoet/EditorPageRenderer.php
index 4220b1604b..a8203a442d 100644
--- a/mailpoet/lib/EmailEditor/Integrations/MailPoet/EditorPageRenderer.php
+++ b/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(
diff --git a/mailpoet/webpack.config.js b/mailpoet/webpack.config.js
index 9c9b54f128..e05e026351 100644
--- a/mailpoet/webpack.config.js
+++ b/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;
}
diff --git a/packages/js/email-editor/src/editor.tsx b/packages/js/email-editor/src/editor.tsx
index 93da4892bd..bb82345b13 100644
--- a/packages/js/email-editor/src/editor.tsx
+++ b/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( );
+ // @ts-ignore
+ root.render( );
}