From 00c228a6c682fc659931ff0fd8c1b5c447e5fc4a Mon Sep 17 00:00:00 2001 From: Blesilda Ramirez Date: Mon, 6 Jan 2025 00:35:03 -0500 Subject: [PATCH 1/8] pkp/pkp-lib#9366 Upgrade tinymce from v5 to v6 --- package-lock.json | 25 +++++++++++-------- package.json | 4 +-- .../Form/fields/FieldPreparedContent.vue | 8 +++++- .../Form/fields/FieldRichText.stories.js | 2 +- .../Form/fields/FieldRichTextarea.mdx | 2 +- .../Form/fields/FieldRichTextarea.stories.js | 8 ++++-- .../Form/fields/FieldRichTextarea.vue | 9 ++----- .../mocks/field-rich-textarea-abstract.js | 2 +- .../Form/mocks/field-rich-textarea-bio.js | 2 +- .../mocks/field-rich-textarea-description.js | 2 +- .../mocks/field-rich-textarea-signature.js | 2 +- .../Form/mocks/form-announcement.js | 4 +-- .../Form/mocks/form-contributors.js | 2 +- .../Form/mocks/form-email-template.js | 2 +- .../Form/mocks/form-for-the-editors.js | 2 +- src/components/Form/mocks/form-relations.js | 2 +- .../Form/mocks/form-title-abstract.js | 2 +- src/pages/dashboard/mocks/pageInitConfig.js | 6 ++--- 18 files changed, 47 insertions(+), 39 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9181d1ee8..7acdca5c6 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": "^6.1.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": "6.1.0", + "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-6.1.0.tgz", + "integrity": "sha512-IdSdMlmuyhpEpUuabhBUaRC2NzZZxP2/CO/F+/54kTaAifB1Et5mKEty03pJYZxl6GBdFgclKRA2UU5JKJtJbA==" }, "node_modules/tinypool": { "version": "0.8.1", diff --git a/package.json b/package.json index 35c41d074..187b0520e 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": "^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 index 85f8629fe..b6cfefbd3 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,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 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/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..0940fbf56 100644 --- 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 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', }, From 3dda70ee27f72cf51aa24ccdaf88247e003cad08 Mon Sep 17 00:00:00 2001 From: Blesilda Ramirez Date: Mon, 6 Jan 2025 00:51:40 -0500 Subject: [PATCH 2/8] pkp/pkp-lib#9366 Remove array push for a custom plugin in tinymce --- src/components/Form/fields/FieldPreparedContent.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Form/fields/FieldPreparedContent.vue b/src/components/Form/fields/FieldPreparedContent.vue index b6cfefbd3..6eb926560 100644 --- a/src/components/Form/fields/FieldPreparedContent.vue +++ b/src/components/Form/fields/FieldPreparedContent.vue @@ -89,7 +89,6 @@ export default { } if (self.preparedContent.length) { - props.plugins.push('pkpInsert'); props.toolbar += '| pkpInsert'; } From 9318d83bb64311c53f4cd2a7b603c9da14722478 Mon Sep 17 00:00:00 2001 From: Blesilda Ramirez Date: Mon, 6 Jan 2025 01:02:56 -0500 Subject: [PATCH 3/8] pkp/pkp-lib#9366 Safeguard setting toolbar props for tinymce --- src/components/Form/fields/FieldPreparedContent.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Form/fields/FieldPreparedContent.vue b/src/components/Form/fields/FieldPreparedContent.vue index 6eb926560..6e7c270cc 100644 --- a/src/components/Form/fields/FieldPreparedContent.vue +++ b/src/components/Form/fields/FieldPreparedContent.vue @@ -88,7 +88,7 @@ export default { parent = parent.extends ? parent.extends : null; } - if (self.preparedContent.length) { + if (self.preparedContent.length && typeof props.toolbar === 'string') { props.toolbar += '| pkpInsert'; } From ffa43080f62edfcacb7aa0bbd64669dd12d08acb Mon Sep 17 00:00:00 2001 From: Blesilda Ramirez Date: Mon, 6 Jan 2025 01:22:55 -0500 Subject: [PATCH 4/8] pkp/pkp-lib#9366 Resolve issue with toolbar pkpAttachFiles for tinymce editor in Composer component --- src/components/Composer/Composer.vue | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) 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'; }, }; }, From e75069d4ab9d865ee872613bc29662a97884719e Mon Sep 17 00:00:00 2001 From: Blesilda Ramirez Date: Mon, 13 Jan 2025 00:09:48 -0500 Subject: [PATCH 5/8] pkp/pkp-lib#9366 Upgrade tinymce from v6 to v7 --- package-lock.json | 8 ++++---- package.json | 2 +- src/components/Form/fields/FieldRichTextarea.vue | 1 + 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7acdca5c6..482554d1f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,7 +29,7 @@ "pinia": "^2.1.7", "primevue": "^4.0.5", "tiny-emitter": "^2.1.0", - "tinymce": "^6.1.0", + "tinymce": "^7.6.0", "uuid": "^9.0.0", "vue": "^3.3.8", "vue-chartjs": "^5.2.0", @@ -15004,9 +15004,9 @@ "devOptional": true }, "node_modules/tinymce": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-6.1.0.tgz", - "integrity": "sha512-IdSdMlmuyhpEpUuabhBUaRC2NzZZxP2/CO/F+/54kTaAifB1Et5mKEty03pJYZxl6GBdFgclKRA2UU5JKJtJbA==" + "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 187b0520e..d2f1bf762 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "pinia": "^2.1.7", "primevue": "^4.0.5", "tiny-emitter": "^2.1.0", - "tinymce": "^6.1.0", + "tinymce": "^7.6.0", "uuid": "^9.0.0", "vue": "^3.3.8", "vue-chartjs": "^5.2.0", diff --git a/src/components/Form/fields/FieldRichTextarea.vue b/src/components/Form/fields/FieldRichTextarea.vue index 0940fbf56..33c1278b1 100644 --- a/src/components/Form/fields/FieldRichTextarea.vue +++ b/src/components/Form/fields/FieldRichTextarea.vue @@ -213,6 +213,7 @@ export default { return url; }; return { + license_key: 'gpl', skin_url: this.$root?.tinyMCE?.skinUrl || pkp?.tinyMCE?.skinUrl, content_css: $.pkp.app.tinyMceContentCSS, paste_data_images: true, From f0d65efbc9767820617ec6d0a6a3023783b6a824 Mon Sep 17 00:00:00 2001 From: Blesilda Ramirez Date: Tue, 14 Jan 2025 23:36:43 -0500 Subject: [PATCH 6/8] pkp/pkp-lib#9366 Add licenseKey when initializing tinymce in FieldRichTextarea component --- src/components/Form/fields/FieldRichTextarea.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Form/fields/FieldRichTextarea.vue b/src/components/Form/fields/FieldRichTextarea.vue index 33c1278b1..5358baf9e 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" From d5ecd034bbf77a8d1a171e2ab94d0e2852430943 Mon Sep 17 00:00:00 2001 From: Blesilda Ramirez Date: Tue, 14 Jan 2025 23:38:15 -0500 Subject: [PATCH 7/8] pkp/pkp-lib#9366 Resolve forced_root_block issue with having empty string value --- src/components/Form/fields/FieldRichText.vue | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) 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'); + }); }, }, }; From 7f70c83ce1b2b6f1fd4322b8172d0da87487f0cd Mon Sep 17 00:00:00 2001 From: Blesilda Ramirez Date: Thu, 23 Jan 2025 15:18:00 -0500 Subject: [PATCH 8/8] pkp/pkp-lib#9366 Add language_url param to tinymce --- src/components/Form/fields/FieldRichTextarea.vue | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/Form/fields/FieldRichTextarea.vue b/src/components/Form/fields/FieldRichTextarea.vue index 5358baf9e..1984e7901 100644 --- a/src/components/Form/fields/FieldRichTextarea.vue +++ b/src/components/Form/fields/FieldRichTextarea.vue @@ -227,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();