diff --git a/package-lock.json b/package-lock.json index 9181d1ee8..482554d1f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,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", @@ -29,7 +29,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", @@ -4916,14 +4916,17 @@ } }, "node_modules/@tinymce/tinymce-vue": { - "version": "5.1.1", - "resolved": "https://registry.npmjs.org/@tinymce/tinymce-vue/-/tinymce-vue-5.1.1.tgz", - "integrity": "sha512-iO57HOWesFOhsaqjA5Ea6sDvQBmJJH3/dq00Uvg7metlct2kLF+ctRgoDsetLt6gmeZ7COPftr814/XzqnJ/dg==", - "dependencies": { - "tinymce": "^6.0.0 || ^5.5.1" - }, + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@tinymce/tinymce-vue/-/tinymce-vue-6.1.0.tgz", + "integrity": "sha512-7JdaKMOaohuFWpjKwRmaZJbT/eNVUUYHG93R7+lUf7SUN+hSqd2spbuqZcki+tG9kaSAGd2ZmvJIsmzWDNAzpw==", "peerDependencies": { + "tinymce": "^7.0.0 || ^6.0.0 || ^5.5.1", "vue": "^3.0.0" + }, + "peerDependenciesMeta": { + "tinymce": { + "optional": true + } } }, "node_modules/@types/aria-query": { @@ -15001,9 +15004,9 @@ "devOptional": true }, "node_modules/tinymce": { - "version": "5.10.9", - "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-5.10.9.tgz", - "integrity": "sha512-5bkrors87X9LhYX2xq8GgPHrIgJYHl87YNs+kBcjQ5I3CiUgzo/vFcGvT3MZQ9QHsEeYMhYO6a5CLGGffR8hMg==" + "version": "7.6.0", + "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-7.6.0.tgz", + "integrity": "sha512-kUrklnD7H8JbpSDEGRh51GKK6Mrf+pR9neSDzUHvXKV+2oRtMB7sqfAtEOnM0/WKdstwaX0qoNCZNo2H1Y0EFA==" }, "node_modules/tinypool": { "version": "0.8.1", diff --git a/package.json b/package.json index 35c41d074..d2f1bf762 100644 --- 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 index 62d1e29d0..506a1f999 100644 --- 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 index 85f8629fe..6e7c270cc 100644 --- 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 index 8f5db525b..1d63e958b 100644 --- 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 index 2d3938bb6..e4688c4fd 100644 --- 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
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

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>$/, '$1'); + }); }, }, }; diff --git a/src/components/Form/fields/FieldRichTextarea.mdx b/src/components/Form/fields/FieldRichTextarea.mdx index c1c631a5e..f8274d58c 100644 --- 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 index d1d241b79..7f0f2fa42 100644 --- 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 index bfce04b17..1984e7901 100644 --- 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 index 415a1489a..3e460e2c4 100644 --- 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: '

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.

', diff --git a/src/components/Form/mocks/field-rich-textarea-bio.js b/src/components/Form/mocks/field-rich-textarea-bio.js index eceb5e5c5..d45098f77 100644 --- 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 index c05a6f765..1b05317be 100644 --- 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 index fe8132927..bde8de653 100644 --- 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 index b2940a875..8f4f446e5 100644 --- 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 index 1a56f5ecb..281e7da29 100644 --- 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 index f8c8dafce..1db5fb122 100644 --- 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 index c906a2290..48f1b7443 100644 --- 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 index d49b65abb..49fc34ad5 100644 --- 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 index d49b65abb..49fc34ad5 100644 --- 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 index bcd4ee791..585c4e128 100644 --- 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', },