From c9ff9be7ecee7ed4f84d1fd33e6a9a023004b4f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Jakes=CC=8C?= Date: Wed, 22 May 2019 14:58:41 +0200 Subject: [PATCH] Use TinyMCE as a module to avoid conflicts when used globally --- assets/js/lib/tinymce | 1 - .../behaviors/TextEditorBehavior.js | 12 ++++++++++++ package.json | 1 + tests/javascript/mochaTestHelper.js | 6 +++++- views/newsletter/editor.html | 2 -- webpack.config.js | 13 +++++++++++-- 6 files changed, 29 insertions(+), 6 deletions(-) delete mode 120000 assets/js/lib/tinymce diff --git a/assets/js/lib/tinymce b/assets/js/lib/tinymce deleted file mode 120000 index 228fbccca1..0000000000 --- a/assets/js/lib/tinymce +++ /dev/null @@ -1 +0,0 @@ -../../../node_modules/tinymce \ No newline at end of file diff --git a/assets/js/src/newsletter_editor/behaviors/TextEditorBehavior.js b/assets/js/src/newsletter_editor/behaviors/TextEditorBehavior.js index b812fbdbf8..b911344ed9 100644 --- a/assets/js/src/newsletter_editor/behaviors/TextEditorBehavior.js +++ b/assets/js/src/newsletter_editor/behaviors/TextEditorBehavior.js @@ -6,6 +6,16 @@ import Marionette from 'backbone.marionette'; import BehaviorsLookup from 'newsletter_editor/behaviors/BehaviorsLookup'; import App from 'newsletter_editor/App'; +import tinymce from 'tinymce/tinymce'; + +// TinyMCE theme and plugins +import 'tinymce/themes/modern'; +import 'tinymce/plugins/code'; +import 'tinymce/plugins/colorpicker'; +import 'tinymce/plugins/link'; +import 'tinymce/plugins/lists'; +import 'tinymce/plugins/paste'; +import 'tinymce/plugins/textcolor'; var BL = BehaviorsLookup; @@ -35,6 +45,8 @@ BL.TextEditorBehavior = Marionette.Behavior.extend({ } this.$(this.options.selector).tinymce(this.options.configurationFilter({ + tinymce.init(this.options.configurationFilter({ + target: this.el.querySelector(this.options.selector), inline: true, menubar: false, diff --git a/package.json b/package.json index 021522b598..3ffcde4da3 100644 --- a/package.json +++ b/package.json @@ -75,6 +75,7 @@ "chai": "2.2.0", "chai-jq": "0.0.8", "clean-webpack-plugin": "^1.0.0", + "copy-webpack-plugin": "^5.0.3", "cross-env": "^5.1.5", "eslint": "^5.15.3", "eslint-config-airbnb": "^17.1.0", diff --git a/tests/javascript/mochaTestHelper.js b/tests/javascript/mochaTestHelper.js index b908b6b8ae..9541149421 100644 --- a/tests/javascript/mochaTestHelper.js +++ b/tests/javascript/mochaTestHelper.js @@ -4,15 +4,19 @@ var sinonChai = require('sinon-chai'); var chaiJq = require('chai-jq'); var _ = require('underscore'); var jsdom = require('jsdom/lib/old-api.js').jsdom; +var URL = require('url').URL; chai.use(sinonChai); chai.use(chaiJq); global.expect = chai.expect; global.sinon = sinon; +global.URL = URL; if (!global.document || !global.window) { - global.document = jsdom('', {}, { + global.document = jsdom('', { + url: 'http://example.com', + }, { FetchExternalResources: ['script'], ProcessExternalResources: ['script'], MutationEvents: '2.0', diff --git a/views/newsletter/editor.html b/views/newsletter/editor.html index 4bafed1aa9..4c092280c7 100644 --- a/views/newsletter/editor.html +++ b/views/newsletter/editor.html @@ -424,8 +424,6 @@ <% block after_javascript %> <%= javascript( - 'lib/tinymce/tinymce.min.js', - 'lib/tinymce/jquery.tinymce.min.js', 'lib/mailpoet_shortcodes/plugin.js', 'lib/wplink/plugin.js', 'newsletter_editor.js' diff --git a/webpack.config.js b/webpack.config.js index ffcadd3185..2f7a8f747e 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -2,6 +2,7 @@ const webpack = require('webpack'); const webpackManifestPlugin = require('webpack-manifest-plugin'); const webpackCleanPlugin = require('clean-webpack-plugin'); const webpackTerserPlugin = require('terser-webpack-plugin'); +const webpackCopyPlugin = require('copy-webpack-plugin'); const path = require('path'); const globalPrefix = 'MailPoetLib'; const PRODUCTION_ENV = process.env.NODE_ENV === 'production'; @@ -277,6 +278,16 @@ const adminConfig = { form_editor: 'form_editor/webpack_index.jsx', newsletter_editor: 'newsletter_editor/webpack_index.jsx', }, + plugins: [ + ...baseConfig.plugins, + + new webpackCopyPlugin([ + { + from: 'node_modules/tinymce/skins/lightgray', + to: 'skins/lightgray' + }, + ]) + ], optimization: { runtimeChunk: { name: 'vendor', @@ -315,7 +326,6 @@ const adminConfig = { }, externals: { 'jquery': 'jQuery', - 'tinymce': 'tinymce' } }; @@ -414,7 +424,6 @@ const testConfig = { }, externals: { 'jquery': 'jQuery', - 'tinymce': 'tinymce', 'interact': 'interact', 'spectrum': 'spectrum', }