pkp/pkp-lib#9366 Upgrade to TinyMCE6

package.json

@@ -17,7 +17,7 @@
     "@highlightjs/vue-plugin": "^2.1.0",
     "@lk77/vue3-color": "^3.0.6",
     "@storybook/test": "^8.0.5",
-    "@tinymce/tinymce-vue": "^5.1.1",
+    "@tinymce/tinymce-vue": "^6.1.0",
     "@vue-a11y/announcer": "^3.1.5",
     "@vueuse/core": "^10.5.0",
     "chart.js": "^4.4.3",
@@ -34,7 +34,7 @@
     "pinia": "^2.1.7",
     "primevue": "^4.0.5",
     "tiny-emitter": "^2.1.0",
-    "tinymce": "^5.10.7",
+    "tinymce": "^7.6.0",
     "uuid": "^9.0.0",
     "vue": "^3.3.8",
     "vue-chartjs": "^5.2.0",

src/components/Composer/Composer.vue

@@ -209,9 +209,9 @@
 					:all-errors="errors"
 					:init="bodyInit"
 					:form-id="id"
-					plugins="link"
+					:plugins="['link']"
 					size="large"
-					toolbar="bold italic superscript subscript | link"
+					:toolbar="toolbar"
 					:value="body"
 					:prepared-content="compiledVariables"
 					:insert-label="insertLabel"
@@ -553,6 +553,7 @@ export default {
 			searchPhrase: '',
 			searchResults: [],
 			showSearchResultCount: 10,
+			toolbar: 'bold italic superscript subscript | link',
 		};
 	},
 	computed: {
@@ -577,6 +578,9 @@ export default {
 				return {};
 			}
 			let self = this;
+
+			self.toolbar += ' | pkpAttachFiles';
+
 			return {
 				setup: function (editor) {
 					editor.ui.registry.addButton('pkpAttachFiles', {
@@ -592,7 +596,6 @@ export default {
 							});
 						},
 					});
-					editor.settings.toolbar += ' | pkpAttachFiles';
 				},
 			};
 		},

src/components/Form/fields/FieldPreparedContent.vue

@@ -76,6 +76,7 @@ export default {
 		 * for accepted props
 		 */
 		textareaProps() {
+			const self = this;
 			let props = {};
 			let parent = FieldRichTextarea;
 			while (parent) {
@@ -86,6 +87,11 @@ export default {
 				});
 				parent = parent.extends ? parent.extends : null;
 			}
+
+			if (self.preparedContent.length && typeof props.toolbar === 'string') {
+				props.toolbar += '| pkpInsert';
+			}
+
 			return props;
 		},
 
@@ -120,7 +126,6 @@ export default {
 							self.openInsertModal();
 						},
 					});
-					editor.settings.toolbar += ' | pkpInsert';
 				}
 			};
 			return {

src/components/Form/fields/FieldRichText.stories.js

@@ -31,7 +31,7 @@ export const Base = {
 		label: 'Title',
 		groupId: 'default',
 		isMultilingual: false,
-		plugins: 'paste',
+		plugins: [],
 		toolbar: 'formatgroup',
 		value: '',
 		i18nFormattingLabel: 'Formatting',

src/components/Form/fields/FieldRichText.vue

@@ -54,9 +54,9 @@ export default {
 			return {
 				...init,
 				...{
-					// This will not have any impact on TinyMCE 6.0+ ,
+					// Need to set to <div> wrapper, to resolve deprecated option forced_root_block of empty string
 					// @see https://github.com/tinymce/tinymce/discussions/7342
-					forced_root_block: '',
+					forced_root_block: 'div',
 
 					toolbar_groups: {
 						formatgroup: {
@@ -91,6 +91,15 @@ export default {
 								return;
 							}
 						});
+
+						editor.on('PostProcess', function (ed) {
+							// TinyMCE by default inserts a wrapper <p> around the content
+							// for each editor. We need to set forced_root_block with value "div"
+							// to use this as the wrapper, and then remove as a workaround to a
+							// deprecated option & value "{ forced_root_block: '' }"
+							// @see https://github.com/tinymce/tinymce/discussions/7342
+							ed.content = ed.content.replace(/^<div>(.*)<\/div>$/, '$1');
+						});
 					},
 				},
 			};

src/components/Form/fields/FieldRichTextarea.mdx

@@ -21,7 +21,7 @@ The editor will support image uploads, which are placed in the user's directory
 	...
 	uploadUrl: 'http://journal.com/api/v1/_uploadPublicFile',
 	toolbar: 'bold italic | link | image',
-	plugins: 'paste,link,image'
+	plugins: ['link','image']
 }
 ```
 

src/components/Form/fields/FieldRichTextarea.stories.js

@@ -30,6 +30,7 @@ export const Base = {
 		...FieldBaseMock,
 		...FieldRichTextareaBioMock,
 		isMultilingual: false,
+		value: '',
 	},
 };
 
@@ -38,10 +39,11 @@ export const MediumToolbar = {
 		...FieldBaseMock,
 		...FieldRichTextareaBioMock,
 		isMultilingual: false,
+		value: '',
 
 		toolbar:
 			'bold italic superscript subscript | link | blockquote bullist numlist',
-		plugins: 'paste,link,noneditable,lists',
+		plugins: ['link', 'lists'],
 	},
 };
 
@@ -50,10 +52,11 @@ export const HeavyToolbar = {
 		...FieldBaseMock,
 		...FieldRichTextareaBioMock,
 		isMultilingual: false,
+		value: '',
 
 		toolbar:
 			'bold italic superscript subscript | link | blockquote bullist numlist | image | code',
-		plugins: 'paste,link,lists,image,code',
+		plugins: ['link', 'lists', 'image', 'code'],
 	},
 };
 
@@ -64,5 +67,6 @@ export const WordLimit = {
 		wordLimit: 200,
 		wordCountLabel: 'Word Count: {$count}/{$limit}',
 		isMultilingual: false,
+		value: '',
 	},
 };

src/components/Form/fields/FieldRichTextarea.vue

@@ -48,6 +48,7 @@
 				ref="editor"
 				v-model="currentValue"
 				class="pkpFormField__input pkpFormField--richTextarea__input"
+				license-key="gpl"
 				:toolbar="toolbar"
 				:plugins="plugins"
 				:init="compiledInit"
@@ -98,8 +99,7 @@ import 'tinymce/plugins/code';
 import 'tinymce/plugins/image';
 import 'tinymce/plugins/link';
 import 'tinymce/plugins/lists';
-import 'tinymce/plugins/noneditable';
-import 'tinymce/plugins/paste';
+import 'tinymce/models/dom';
 import Editor from '@tinymce/tinymce-vue';
 import FieldBase from './FieldBase.vue';
 import debounce from 'debounce';
@@ -132,7 +132,7 @@ export default {
 		},
 		/**  Specify plugins the TinyMCE editor should load. See [TinyMCE documentation](https://www.tiny.cloud/docs/configure/integration-and-setup/#plugins). */
 		plugins: {
-			type: String,
+			type: Array,
 			required: true,
 		},
 		/** One of `default` or `large`. */
@@ -210,14 +210,11 @@ export default {
 				const smartyVariable = /\{\$(\w*)\}/.exec(url);
 				if (smartyVariable) {
 					url = smartyVariable[0];
-				} else {
-					this.settings.urlconverter_callback = false; // eslint-disable-line
-					url = this.convertURL(url);
-					this.settings.urlconverter_callback = urlConverterCallback; // eslint-disable-line
 				}
 				return url;
 			};
 			return {
+				license_key: 'gpl',
 				skin_url: this.$root?.tinyMCE?.skinUrl || pkp?.tinyMCE?.skinUrl,
 				content_css: $.pkp.app.tinyMceContentCSS,
 				paste_data_images: true,
@@ -230,6 +227,10 @@ export default {
 				statusbar: false,
 				entity_encoding: 'raw',
 				browser_spellcheck: true,
+				language:
+					$.pkp?.plugins?.generic?.tinymceplugin?.tinymceParams?.language,
+				language_url:
+					$.pkp?.plugins?.generic?.tinymceplugin?.tinymceParams?.language_url,
 				// See: https://www.tiny.cloud/docs/general-configuration-guide/upload-images/#rollingyourimagehandler
 				images_upload_handler(blobInfo, success, failure) {
 					const data = new FormData();

src/components/Form/mocks/field-rich-textarea-abstract.js

@@ -4,7 +4,7 @@ export default {
 	label: 'Abstract',
 	description: 'The abstract must be less than 300 words.',
 	isRequired: true,
-	plugins: 'paste,link,noneditable',
+	plugins: ['link'],
 	toolbar: 'bold italic superscript subscript | link',
 	value: {
 		en: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>',

src/components/Form/mocks/field-rich-textarea-bio.js

@@ -3,7 +3,7 @@ export default {
 	component: 'field-rich-textarea',
 	label: 'Bio Statement',
 	groupId: 'profile',
-	plugins: 'paste,link,noneditable',
+	plugins: ['link'],
 	toolbar: 'bold italic superscript subscript | link',
 	tooltip:
 		'Your biographical statement will usually include your department and rank, and may include research interests or key publications.',

src/components/Form/mocks/field-rich-textarea-description.js

@@ -3,7 +3,7 @@ export default {
 	component: 'field-rich-textarea',
 	label: 'Journal Description',
 	value: '',
-	plugins: 'paste,link,lists,image,code',
+	plugins: ['link', 'lists', 'image', 'code'],
 	toolbar:
 		'bold italic superscript subscript | link | blockquote bullist numlist | image | code',
 };

src/components/Form/mocks/field-rich-textarea-signature.js

@@ -12,7 +12,7 @@ export default {
 	},
 	groupId: 'contact',
 	isMultilingual: true,
-	plugins: 'paste,link,noneditable',
+	plugins: ['link'],
 	toolbar: 'bold italic superscript subscript | link',
 	value: {
 		en: '',

src/components/Form/mocks/form-announcement.js

@@ -20,7 +20,7 @@ export default {
 			component: 'field-rich-textarea',
 			label: 'Short Description',
 			isMultilingual: true,
-			plugins: 'paste,link,noneditable',
+			plugins: ['link'],
 			toolbar: 'bold italic superscript subscript | link',
 			value: {
 				en: '',
@@ -35,7 +35,7 @@ export default {
 			label: 'Description',
 			isMultilingual: true,
 			size: 'large',
-			plugins: 'paste,link,noneditable',
+			plugins: ['link'],
 			toolbar: 'bold italic superscript subscript | link',
 			value: {
 				en: '',

src/components/Form/mocks/form-contributors.js

@@ -94,7 +94,7 @@ export default {
 			isMultilingual: true,
 			isInert: false,
 			value: {en: '', es: '', fr_CA: '', pt: ''},
-			plugins: 'paste,link,noneditable',
+			plugins: ['link'],
 			toolbar: 'bold italic superscript subscript | link',
 		},
 		{

src/components/Form/mocks/form-email-template.js

@@ -37,7 +37,7 @@ export default {
 				'Use the "Insert Content" button to use dynamic data in your template. These variables will be replaced with real data before the email is sent.',
 			isMultilingual: true,
 			size: 'large',
-			plugins: 'paste,link,lists',
+			plugins: ['link', 'lists'],
 			toolbar:
 				'bold italic superscript subscript | link | blockquote bullist numlist',
 			value: {

src/components/Form/mocks/form-for-the-editors.js

@@ -16,7 +16,7 @@ export default {
 				'Add any information that you think our editorial staff should know when evaluating your submission.',
 			value: '',
 			toolbar: 'bold italic superscript subscript | link',
-			plugins: 'paste,link',
+			plugins: ['link'],
 			groupId: 'default',
 		},
 	],

src/components/Form/mocks/form-relations.js

@@ -15,7 +15,7 @@ export default {
 		{
 			...FieldRichTextareaAbstract,
 			toolbar: 'bold italic superscript subscript | link',
-			plugins: 'paste,link',
+			plugins: ['link'],
 			groupId: 'default',
 		},
 	],

src/components/Form/mocks/form-title-abstract.js

@@ -15,7 +15,7 @@ export default {
 		{
 			...FieldRichTextareaAbstract,
 			toolbar: 'bold italic superscript subscript | link',
-			plugins: 'paste,link',
+			plugins: ['link'],
 			groupId: 'default',
 		},
 	],