From 0ce2ef244dbddea8748dec94de018f7abfd8a474 Mon Sep 17 00:00:00 2001 From: Rijk van Zanten Date: Mon, 10 Apr 2023 15:22:37 -0400 Subject: [PATCH] Upgrade tinymce (#18107) * Upgrade tinymce * Omit 'skin_url' instead of setting it to false The option expect a string value. Instead of setting it to 'false' we can just completly omit it. Otherwise we get the following warning: > Invalid value passed for the skin_url option. The value must be a string. Although not explicitly mentioned in the migration doc, the stricter check / warning has probably been introduced with v6. * Disable pasting of images From https://www.tiny.cloud/docs/tinymce/6/migration-from-5x/#plugins-paste: > A paste default has changed. The paste_data_images option now defaults to true. > When paste was a plugin, this option was, by default, set to false, which prevented images being pasted from the local machine * Update toolbar option names --------- Co-authored-by: Pascal Jufer --- app/package.json | 4 ++-- .../interfaces/input-rich-text-html/index.ts | 4 ++-- .../input-rich-text-html.vue | 23 +++++++++++++------ .../tinymce-overrides.css | 5 ++++ pnpm-lock.yaml | 18 +++++++-------- 5 files changed, 34 insertions(+), 20 deletions(-) diff --git a/app/package.json b/app/package.json index a47a3e39d9..61ea905e3d 100644 --- a/app/package.json +++ b/app/package.json @@ -64,7 +64,7 @@ "@storybook/client-logger": "7.0.0-rc.4", "@storybook/vue3": "7.0.0-rc.4", "@storybook/vue3-vite": "7.0.0-rc.4", - "@tinymce/tinymce-vue": "4.0.7", + "@tinymce/tinymce-vue": "5.1.0", "@turf/meta": "6.5.0", "@types/base-64": "1.0.0", "@types/codemirror": "5.60.7", @@ -124,7 +124,7 @@ "react-dom": "18", "sass": "1.59.3", "storybook": "7.0.0-rc.4", - "tinymce": "5.10.7", + "tinymce": "6.4.1", "typescript": "4.9.5", "vite": "4.1.4", "vitest": "0.29.3", diff --git a/app/src/interfaces/input-rich-text-html/index.ts b/app/src/interfaces/input-rich-text-html/index.ts index 982d58f88b..e527aa8837 100644 --- a/app/src/interfaces/input-rich-text-html/index.ts +++ b/app/src/interfaces/input-rich-text-html/index.ts @@ -77,11 +77,11 @@ export default defineInterface({ text: '$t:wysiwyg_options.superscript', }, { - value: 'fontselect', + value: 'fontfamily', text: '$t:wysiwyg_options.fontselect', }, { - value: 'fontsizeselect', + value: 'fontsize', text: '$t:wysiwyg_options.fontsizeselect', }, { diff --git a/app/src/interfaces/input-rich-text-html/input-rich-text-html.vue b/app/src/interfaces/input-rich-text-html/input-rich-text-html.vue index d9b935650b..c90f72b206 100644 --- a/app/src/interfaces/input-rich-text-html/input-rich-text-html.vue +++ b/app/src/interfaces/input-rich-text-html/input-rich-text-html.vue @@ -187,20 +187,18 @@ import { useSettingsStore } from '@/stores/settings'; import { SettingsStorageAssetPreset } from '@directus/types'; import 'tinymce/tinymce'; +import 'tinymce/models/dom'; import 'tinymce/themes/silver'; import 'tinymce/plugins/autoresize/plugin'; import 'tinymce/plugins/code/plugin'; import 'tinymce/plugins/directionality/plugin'; import 'tinymce/plugins/fullscreen/plugin'; -import 'tinymce/plugins/hr/plugin'; import 'tinymce/plugins/image/plugin'; -import 'tinymce/plugins/imagetools/plugin'; import 'tinymce/plugins/insertdatetime/plugin'; import 'tinymce/plugins/link/plugin'; import 'tinymce/plugins/lists/plugin'; import 'tinymce/plugins/media/plugin'; import 'tinymce/plugins/pagebreak/plugin'; -import 'tinymce/plugins/paste/plugin'; import 'tinymce/plugins/preview/plugin'; import 'tinymce/plugins/table/plugin'; import 'tinymce/icons/default'; @@ -240,7 +238,6 @@ export default defineComponent({ 'customLink', 'customImage', 'customMedia', - 'hr', 'code', 'fullscreen', ], @@ -371,11 +368,22 @@ export default defineComponent({ return { skin: false, - skin_url: false, content_css: false, content_style: getEditorStyles(props.font as 'sans-serif' | 'serif' | 'monospace'), - plugins: - 'media table hr lists image link pagebreak code insertdatetime autoresize paste preview fullscreen directionality', + plugins: [ + 'media', + 'table', + 'lists', + 'image', + 'link', + 'pagebreak', + 'code', + 'insertdatetime', + 'autoresize', + 'preview', + 'fullscreen', + 'directionality', + ], branding: false, max_height: 1000, elementpath: false, @@ -390,6 +398,7 @@ export default defineComponent({ link_default_protocol: 'https', browser_spellcheck: true, directionality: props.direction, + paste_data_images: false, setup, ...(props.tinymceOverrides || {}), }; diff --git a/app/src/interfaces/input-rich-text-html/tinymce-overrides.css b/app/src/interfaces/input-rich-text-html/tinymce-overrides.css index 5884787e4e..a46ba47c15 100644 --- a/app/src/interfaces/input-rich-text-html/tinymce-overrides.css +++ b/app/src/interfaces/input-rich-text-html/tinymce-overrides.css @@ -405,6 +405,11 @@ body.dark .tox .tox-toolbar__overflow { visibility: hidden; } +.tox:not(.tox-tinymce-inline) .tox-editor-header { + padding: 0; + box-shadow: none; +} + @media screen and (max-width: 767px) { .tox .tox-dialog__body-nav-item { text-align: center; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5544b4ddbb..6c0de2a52b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -656,8 +656,8 @@ importers: specifier: 7.0.0-rc.4 version: 7.0.0-rc.4(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.5)(vite@4.1.4)(vue@3.2.47) '@tinymce/tinymce-vue': - specifier: 4.0.7 - version: 4.0.7(vue@3.2.47) + specifier: 5.1.0 + version: 5.1.0(vue@3.2.47) '@turf/meta': specifier: 6.5.0 version: 6.5.0 @@ -836,8 +836,8 @@ importers: specifier: 7.0.0-rc.4 version: 7.0.0-rc.4 tinymce: - specifier: 5.10.7 - version: 5.10.7 + specifier: 6.4.1 + version: 6.4.1 typescript: specifier: 4.9.5 version: 4.9.5 @@ -6657,12 +6657,12 @@ packages: qs: 6.11.1 dev: true - /@tinymce/tinymce-vue@4.0.7(vue@3.2.47): - resolution: {integrity: sha512-1esB8wGWrjPCY+rK8vy3QB1cxwXo7HLJWuNrcyPl6LOVR+QJjub0OiV/C+TUEsLN6OpCtRv+QnIqMC5vXz783Q==} + /@tinymce/tinymce-vue@5.1.0(vue@3.2.47): + resolution: {integrity: sha512-Z4R8zaOKrAXBhHWsq+qUlwHY+rvze2RgxHDrZ5+qTYkGvRofW5880HLG9gvv6TRPVsNSQBNMdsaOjJ/eueccgA==} peerDependencies: vue: ^3.0.0 dependencies: - tinymce: 5.10.7 + tinymce: 6.4.1 vue: 3.2.47 dev: true @@ -17869,8 +17869,8 @@ packages: resolution: {integrity: sha512-hGYWYBMPr7p4g5IarQE7XhlyWveh1EKhy4wUBS1LrHXCKYgvz+4/jCqgmJqZxxldesn05vccrtME2RLLZNW7iA==} dev: true - /tinymce@5.10.7: - resolution: {integrity: sha512-9UUjaO0R7FxcFo0oxnd1lMs7H+D0Eh+dDVo5hKbVe1a+VB0nit97vOqlinj+YwgoBDt6/DSCUoWqAYlLI8BLYA==} + /tinymce@6.4.1: + resolution: {integrity: sha512-+/cS2AM9l6p72IBs2uolHbGsBUztLs0WslqNgFaTXtmMksTNUOhh8p08xtA/fa03UGlWEC6/EJoeV95/QDXa2A==} dev: true /tinypool@0.3.1: