pkp/pkp-lib#9366 Upgrade tinymce from v5 to v6

blesildaramirez · Jan 8, 2025 · f004008 · f004008
1 parent f9aca59
commit f004008
Show file tree

Hide file tree

Showing 18 changed files with 47 additions and 39 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": "^6.1.0",
     "uuid": "^9.0.0",
     "vue": "^3.3.8",
     "vue-chartjs": "^5.2.0",

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,12 @@ export default {
 				});
 				parent = parent.extends ? parent.extends : null;
 			}
+
+			if (self.preparedContent.length) {
+				props.plugins.push('pkpInsert');
+				props.toolbar += '| pkpInsert';
+			}
+
 			return props;
 		},
 
@@ -120,7 +127,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/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
@@ -98,8 +98,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 +131,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,10 +209,6 @@ 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;
 			};

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',
 		},
 	],

diff --git a/src/pages/dashboard/mocks/pageInitConfig.js b/src/pages/dashboard/mocks/pageInitConfig.js
@@ -498,7 +498,7 @@ export default {
 				value: [],
 				i18nFormattingLabel: 'Formatting',
 				toolbar: 'formatgroup',
-				plugins: 'paste',
+				plugins: [],
 				size: 'oneline',
 				validElements: 'b,i,u,sup,sub',
 			},
@@ -513,7 +513,7 @@ export default {
 				value: [],
 				i18nFormattingLabel: 'Formatting',
 				toolbar: 'formatgroup',
-				plugins: 'paste',
+				plugins: [],
 				size: 'oneline',
 				validElements: 'b,i,u,sup,sub',
 			},
@@ -526,7 +526,7 @@ export default {
 				isMultilingual: true,
 				isInert: false,
 				value: [],
-				plugins: 'paste,link,noneditable',
+				plugins: ['link'],
 				size: 'large',
 				toolbar: 'bold italic superscript subscript | link',
 			},