Merge pull request #37633 from Digital-Peak/j4/tinymce/6

[5.0] Upgrade TinyMCE to version 6

Author: HLeithner

build/build-modules-js/init/exemptions/tinymce.es6.js

@@ -50,12 +50,14 @@ module.exports.tinyMCE = async (packageName, version) => {
     await mkdir(join(itemvendorPath, 'skins'), { mode: 0o755 });
     await mkdir(join(itemvendorPath, 'themes'), { mode: 0o755 });
     await mkdir(join(itemvendorPath, 'templates'), { mode: 0o755 });
+    await mkdir(join(itemvendorPath, 'models'), { mode: 0o755 });
   }
 
   await copyAllFiles('icons', 'tinymce', 'icons');
   await copyAllFiles('plugins', 'tinymce', 'plugins');
   await copyAllFiles('skins', 'tinymce', 'skins');
   await copyAllFiles('themes', 'tinymce', 'themes');
+  await copyAllFiles('models', 'tinymce', 'models');
 
   await copyArrayFiles('', ['tinymce.js', 'tinymce.min.js', 'changelog.txt', 'license.txt'], 'tinymce', '');
 

build/media_source/plg_editors_tinymce/js/tinymce.es6.js

@@ -120,7 +120,7 @@
 
       if (buttonValues.length) {
         options.setup = (editor) => {
-          editor.settings.readonly = readOnlyMode;
+          editor.mode.set(readOnlyMode ? 'readonly' : 'design');
 
           Object.keys(icons).forEach((icon) => {
             editor.ui.registry.addIcon(icon, icons[icon]);
@@ -134,7 +134,7 @@
         };
       } else {
         options.setup = (editor) => {
-          editor.settings.readonly = readOnlyMode;
+          editor.mode.set(readOnlyMode ? 'readonly' : 'design');
         };
       }
 

package-lock.json

@@ -62,7 +62,7 @@
     "roboto-fontface": "^0.10.0",
     "short-and-sweet": "^1.0.4",
     "skipto": "^4.1.6",
-    "tinymce": "^5.10.2",
+    "tinymce": "^6.1.2",
     "vue": "3.2.26",
     "vuex": "^4.0.2",
     "vuex-persistedstate": "^4.1.0"

package.json

@@ -380,7 +380,7 @@ public function onDisplay(
         }
 
         // Convert pt to px in dropdown
-        $scriptOptions['fontsize_formats'] = '8px 10px 12px 14px 18px 24px 36px';
+        $scriptOptions['font_size_formats'] = '8px 10px 12px 14px 18px 24px 36px';
 
         // select the languages for the "language of parts" menu
         if (isset($extraOptions->content_languages) && $extraOptions->content_languages) {
@@ -401,6 +401,11 @@ public function onDisplay(
             $plugins   = array_merge($plugins, explode(strpos($custom_plugin, ',') !== false ? ',' : ' ', $custom_plugin));
         }
 
+        // Version 6 unload removed plugins
+        $plugins = array_filter($plugins, function ($plugin) {
+            return !in_array($plugin, ['hr', 'paste', 'print']);
+        });
+
         if ($custom_button) {
             $toolbar1  = array_merge($toolbar1, explode(strpos($custom_button, ',') !== false ? ',' : ' ', $custom_button));
         }
@@ -412,7 +417,6 @@ public function onDisplay(
         $scriptOptions   = array_merge(
             $scriptOptions,
             [
-                'deprecation_warnings' => JDEBUG ? true : false,
                 'suffix'   => JDEBUG ? '' : '.min',
                 'baseURL'  => Uri::root(true) . '/media/vendor/tinymce',
                 'directionality' => $language->isRtl() ? 'rtl' : 'ltr',

plugins/editors/tinymce/src/PluginTraits/DisplayTrait.php

@@ -45,10 +45,10 @@ public static function getKnownButtons()
             'italic'         => ['label' => 'Italic'],
             'underline'      => ['label' => 'Underline'],
             'strikethrough'  => ['label' => 'Strikethrough'],
-            'styleselect'    => ['label' => Text::_('PLG_TINY_TOOLBAR_BUTTON_STYLESELECT'), 'text' => 'Formats'],
-            'formatselect'   => ['label' => Text::_('PLG_TINY_TOOLBAR_BUTTON_FORMATSELECT'), 'text' => 'Paragraph'],
-            'fontselect'     => ['label' => Text::_('PLG_TINY_TOOLBAR_BUTTON_FONTSELECT'), 'text' => 'Font Family'],
-            'fontsizeselect' => ['label' => Text::_('PLG_TINY_TOOLBAR_BUTTON_FONTSIZESELECT'), 'text' => 'Font Sizes'],
+            'styles'         => ['label' => Text::_('PLG_TINY_TOOLBAR_BUTTON_STYLESELECT'), 'text' => 'Formats'],
+            'blocks'         => ['label' => Text::_('PLG_TINY_TOOLBAR_BUTTON_FORMATSELECT'), 'text' => 'Paragraph'],
+            'fontfamily'     => ['label' => Text::_('PLG_TINY_TOOLBAR_BUTTON_FONTSELECT'), 'text' => 'Font Family'],
+            'fontsize'       => ['label' => Text::_('PLG_TINY_TOOLBAR_BUTTON_FONTSIZESELECT'), 'text' => 'Font Sizes'],
 
             'alignleft'      => ['label' => 'Align left'],
             'aligncenter'    => ['label' => 'Align center'],

plugins/editors/tinymce/src/PluginTraits/KnownButtons.php

@@ -64,7 +64,7 @@ public static function getToolbarPreset()
                     'alignleft', 'aligncenter', 'alignright', 'alignjustify', '|',
                     'lineheight', '|',
                     'styleselect', '|',
-                    'formatselect', 'fontselect', 'fontsizeselect', '|',
+                    'formatselect', 'fontfamily', 'fontsizeselect', '|',
                     'searchreplace', '|',
                     'bullist', 'numlist', '|',
                     'outdent', 'indent', '|',

plugins/editors/tinymce/src/PluginTraits/ToolbarPresets.php

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <extension type="plugin" group="editors" method="upgrade">
 	<name>plg_editors_tinymce</name>
-	<version>5.10.5</version>
+	<version>6.1.2</version>
 	<creationDate>2005-08</creationDate>
 	<author>Tiny Technologies, Inc</author>
 	<authorEmail>N/A</authorEmail>