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:
+				plugins: [
-					'media table hr lists image link pagebreak code insertdatetime autoresize paste preview fullscreen directionality',
+					'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;

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
+        specifier: 5.1.0
-        version: 4.0.7(vue@3.2.47)
+        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
+        specifier: 6.4.1
-        version: 5.10.7
+        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):
+  /@tinymce/tinymce-vue@5.1.0(vue@3.2.47):
-    resolution: {integrity: sha512-1esB8wGWrjPCY+rK8vy3QB1cxwXo7HLJWuNrcyPl6LOVR+QJjub0OiV/C+TUEsLN6OpCtRv+QnIqMC5vXz783Q==}
+    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:
+  /tinymce@6.4.1:
-    resolution: {integrity: sha512-9UUjaO0R7FxcFo0oxnd1lMs7H+D0Eh+dDVo5hKbVe1a+VB0nit97vOqlinj+YwgoBDt6/DSCUoWqAYlLI8BLYA==}
+    resolution: {integrity: sha512-+/cS2AM9l6p72IBs2uolHbGsBUztLs0WslqNgFaTXtmMksTNUOhh8p08xtA/fa03UGlWEC6/EJoeV95/QDXa2A==}
     dev: true
 
   /tinypool@0.3.1: