pkp/pkp-lib#9366 Upgrade to TinyMCE7 (#477)

* pkp/pkp-lib#9366 Upgrade tinymce from v5 to v6 * pkp/pkp-lib#9366 Remove array push for a custom plugin in tinymce * pkp/pkp-lib#9366 Safeguard setting toolbar props for tinymce * pkp/pkp-lib#9366 Resolve issue with toolbar pkpAttachFiles for tinymce editor in Composer component * pkp/pkp-lib#9366 Upgrade tinymce from v6 to v7 * pkp/pkp-lib#9366 Add licenseKey when initializing tinymce in FieldRichTextarea component * pkp/pkp-lib#9366 Resolve forced_root_block issue with having empty string value * pkp/pkp-lib#9366 Add language_url param to tinymce
pkp · Jan 27, 2025 · b4c4d1c · b4c4d1c
1 parent 96e8dda
commit b4c4d1c
Show file tree

Hide file tree

Showing 20 changed files with 69 additions and 44 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",

diff --git a/src/components/Composer/Composer.vue b/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';
 				},
 			};
 		},

diff --git a/src/components/Form/fields/FieldPreparedContent.vue b/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 {

diff --git a/src/components/Form/fields/FieldRichText.stories.js b/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',

diff --git a/src/components/Form/fields/FieldRichText.vue b/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');
+						});
 					},
 				},
 			};

diff --git a/src/components/Form/fields/FieldRichTextarea.mdx b/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']
 }
 ```
 

diff --git a/src/components/Form/fields/FieldRichTextarea.stories.js b/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: '',
 	},
 };
diff --git a/src/components/Form/fields/FieldRichTextarea.vue b/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();

diff --git a/src/components/Form/mocks/field-rich-textarea-abstract.js b/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>',

diff --git a/src/components/Form/mocks/field-rich-textarea-bio.js b/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.',

diff --git a/src/components/Form/mocks/field-rich-textarea-description.js b/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',
 };
diff --git a/src/components/Form/mocks/field-rich-textarea-signature.js b/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: '',

diff --git a/src/components/Form/mocks/form-announcement.js b/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: '',

diff --git a/src/components/Form/mocks/form-contributors.js b/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',
 		},
 		{

diff --git a/src/components/Form/mocks/form-email-template.js b/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: {

diff --git a/src/components/Form/mocks/form-for-the-editors.js b/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',
 		},
 	],

diff --git a/src/components/Form/mocks/form-relations.js b/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',
 		},
 	],

diff --git a/src/components/Form/mocks/form-title-abstract.js b/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',
 		},
 	],