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 <pascal-jufer@bluewin.ch>

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",

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

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 || {}),
 			};

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;