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( ); }