FIX Update plugins to work with tinymce 6

client/src/entwine/TinyMCE_ssembed.js

@@ -20,44 +20,55 @@ const filter = 'div[data-shortcode="embed"]';
       const insertTitle = i18n._t('AssetAdmin.INSERT_VIA_URL', 'Insert media via URL');
       const editTitle = i18n._t('AssetAdmin.EDIT_MEDIA', 'Edit media');
       const contextTitle = i18n._t('AssetAdmin.MEDIA', 'Media');
-      editor.addButton('ssembed', {
-        title: insertTitle,
-        icon: 'media',
-        cmd: 'ssembed',
+
+      // See HtmlEditorField.js
+      // const embedAction = () => jQuery(`#${editor.id}`).entwine('ss').openEmbedDialog();
+
+      editor.addCommand('ssembed', () => {
+        // See HtmlEditorField.js
+        jQuery(`#${editor.id}`).entwine('ss').openEmbedDialog();
+      });
+
+      // Button in main toolbar
+      editor.ui.registry.addButton('ssembed', {
+        tooltip: insertTitle,
+        icon: 'embed',
+        onAction: () => editor.execCommand('ssembed'),
         stateSelector: filter
       });
-      editor.addMenuItem('ssembed', {
+
+      // Right click context menu item
+      editor.ui.registry.addMenuItem('ssembed', {
         text: contextTitle,
-        icon: 'media',
-        cmd: 'ssembed',
-      });
-      editor.addButton('ssembededit', {
-        title: editTitle,
-        icon: 'editimage',
-        cmd: 'ssembed'
+        icon: 'embed',
+        onAction: () => editor.execCommand('ssembed'),
       });
-      editor.addContextToolbar(
-        (embed) => editor.dom.is(embed, filter),
-        'alignleft aligncenter alignright | ssembededit'
-      );
 
-      editor.addCommand('ssembed', () => {
-        // See HtmlEditorField.js
-        jQuery(`#${editor.id}`).entwine('ss').openEmbedDialog();
+      // Context menu when an embed is selected
+      editor.ui.registry.addButton('ssembededit', {
+        tooltip: editTitle,
+        icon: 'edit-block',
+        onAction: () => editor.execCommand('ssembed'),
+      });
+      editor.ui.registry.addContextToolbar('ssembed', {
+        predicate: (node) => editor.dom.is(node, filter),
+        position: 'node',
+        scope: 'node',
+        items: 'alignleft aligncenter alignright | ssembededit'
       });
 
       // Replace the tinymce default media commands with the ssembed command
       editor.on('BeforeExecCommand', (e) => {
         const cmd = e.command;
         const ui = e.ui;
         const val = e.value;
-        if (cmd === 'mceAdvMedia' || cmd === 'mceAdvMedia') {
+        if (cmd === 'mceMedia') {
           e.preventDefault();
           editor.execCommand('ssembed', ui, val);
         }
       });
 
-      editor.on('SaveContent', (o) => {
+      editor.on('GetContent', (o) => {
         const content = jQuery(`<div>${o.content}</div>`);
 
         // Transform [embed] shortcodes
@@ -148,6 +159,16 @@ const filter = 'div[data-shortcode="embed"]';
         // eslint-disable-next-line no-param-reassign
         o.content = content;
       });
+
+      // getMetadata method on a returned object is used by the "help" plugin
+      return {
+        getMetadata() {
+          return {
+            name: 'Silverstripe Embed',
+            url: 'https://docs.silverstripe.org/en/4/developer_guides/forms/field_types/htmleditorfield',
+          };
+        }
+      };
     },
   };
 

client/src/entwine/TinyMCE_sslink-file.js

@@ -17,7 +17,7 @@ TinyMCEActionRegistrar.addAction(
   {
     text: i18n._t('AssetAdmin.LINKLABEL_FILE', 'Link to a file'),
     // eslint-disable-next-line no-console
-    onclick: (activeEditor) => activeEditor.execCommand(commandName),
+    onAction: (activeEditor) => activeEditor.execCommand(commandName),
     priority: 80
   },
   editorIdentifier,

client/src/entwine/TinyMCE_ssmedia.js

@@ -24,57 +24,63 @@ const filter = 'img[data-shortcode="image"]';
     /**
      * Initilise this plugin
      *
-     * @param {Object} ed TinyMCE editor object
+     * @param {Object} editor TinyMCE editor object
      */
-    init(ed) {
+    init(editor) {
       const insertTitle = i18n._t('AssetAdmin.INSERT_FROM_FILES', 'Insert from Files');
       const editTitle = i18n._t('AssetAdmin.EDIT_IMAGE', 'Edit image');
       const contextTitle = i18n._t('AssetAdmin.FILE', 'File');
-      ed.addButton('ssmedia', {
-        title: insertTitle,
+
+      editor.addCommand('ssmedia', () => {
+        // See HtmlEditorField.js
+        jQuery(`#${editor.id}`).entwine('ss').openMediaDialog();
+      });
+
+      // Button in main toolbar
+      editor.ui.registry.addButton('ssmedia', {
+        tooltip: insertTitle,
         icon: 'image',
-        cmd: 'ssmedia',
+        onAction: () => editor.execCommand('ssmedia'),
         stateSelector: filter
       });
-      ed.addMenuItem('ssmedia', {
+
+      // Right click context menu item
+      editor.ui.registry.addMenuItem('ssmedia', {
         text: contextTitle,
         icon: 'image',
-        cmd: 'ssmedia'
-      });
-      ed.addButton('ssmediaedit', {
-        title: editTitle,
-        icon: 'editimage',
-        cmd: 'ssmedia'
+        onAction: () => editor.execCommand('ssmedia'),
       });
 
-      const sizePresets = ed.getParam('image_size_presets');
+      // Context menu when an embed is selected
+      editor.ui.registry.addButton('ssmediaedit', {
+        tooltip: editTitle,
+        icon: 'edit-block',
+        onAction: () => editor.execCommand('ssmedia'),
+      });
+      const sizePresets = editor.getParam('image_size_presets');
       let buttonList = [];
       if (sizePresets) {
-        buttonList = imageSizePresetButtons(ed, sizePresets);
+        buttonList = imageSizePresetButtons(editor, sizePresets);
       }
-
-      ed.addContextToolbar(
-        (img) => ed.dom.is(img, filter),
-        `${buttonList.join(' ')} | ssmediaedit`
-      );
-
-      ed.addCommand('ssmedia', () => {
-        // See HtmlEditorField.js
-        jQuery(`#${ed.id}`).entwine('ss').openMediaDialog();
+      editor.ui.registry.addContextToolbar('ssmedia', {
+        predicate: (node) => editor.dom.is(node, filter),
+        position: 'node',
+        scope: 'node',
+        items: `${buttonList.join(' ')} | ssmediaedit`
       });
 
       // Replace the mceAdvImage and mceImage commands with the ssmedia command
-      ed.on('BeforeExecCommand', (e) => {
+      editor.on('BeforeExecCommand', (e) => {
         const cmd = e.command;
         const ui = e.ui;
         const val = e.value;
-        if (cmd === 'mceAdvImage' || cmd === 'mceImage') {
+        if (cmd === 'mceEditImage' || cmd === 'mceImage') {
           e.preventDefault();
-          ed.execCommand('ssmedia', ui, val);
+          editor.execCommand('ssmedia', ui, val);
         }
       });
 
-      ed.on('SaveContent', (o) => {
+      editor.on('Content', (o) => {
         const content = jQuery(o.content);
 
         // Transform [image] shortcodes
@@ -113,7 +119,7 @@ const filter = 'img[data-shortcode="image"]';
           }
         });
       });
-      ed.on('BeforeSetContent', (o) => {
+      editor.on('BeforeSetContent', (o) => {
         let content = o.content;
 
         // Transform [image] tag
@@ -136,6 +142,16 @@ const filter = 'img[data-shortcode="image"]';
 
         o.content = content;
       });
+
+      // getMetadata method on a returned object is used by the "help" plugin
+      return {
+        getMetadata() {
+          return {
+            name: 'Silverstripe Media',
+            url: 'https://docs.silverstripe.org/en/4/developer_guides/forms/field_types/htmleditorfield',
+          };
+        }
+      };
     },
   };
 

client/src/entwine/TinyMCE_ssmedia_sizepressets.js

@@ -71,7 +71,7 @@ function presetButton(editor, preset) {
    * Setups the button. Fired once, the first time the button is rendered.
    * @param event
    */
-  const onpostrender = (event) => {
+  const onPostRender = (event) => {
     // Get a reference to the button
     const button = event.target;
 
@@ -97,7 +97,7 @@ function presetButton(editor, preset) {
   /**
    * Action that gets run when a user clicks on the button
    */
-  const onclick = () => {
+  const onAction = () => {
     const img = image();
     if (!img) {
       return;
@@ -121,11 +121,10 @@ function presetButton(editor, preset) {
   };
 
   // Tell TinyMCE about our new button
-  editor.addButton(formatName, {
-    icon: false,
+  editor.ui.registry.addButton(formatName, {
     text,
-    onclick,
-    onpostrender
+    onAction,
+    onPostRender
   });
 
   return formatName;

tests/behat/features/insert-an-image.feature

@@ -20,7 +20,7 @@ Feature: Insert an image into a page
     Then I should see the "Form_fileInsertForm" form
       And I should not see an ".gallery-item--selectable" element
       And I should not see an ".bulk-actions" element
-    When I press the "Insert" button
+    When I press the "Insert file" button
     Then the "Content" HTML field should contain "file1.jpg"
     # Required to avoid "unsaved changed" browser dialog
       And I press the "Save" button
@@ -31,7 +31,7 @@ Feature: Insert an image into a page
       And I click on the file named "file1" in the gallery
     Then I should see the "Form_fileInsertForm" form
     When I fill in "Alternative text (alt)" with "My alt"
-      And I press the "Insert" button
+      And I press the "Insert file" button
     Then the "Content" HTML field should contain "file1.jpg"
       And the "Content" HTML field should contain "My alt"
       # Required to avoid "unsaved changed" browser dialog
@@ -107,7 +107,7 @@ Feature: Insert an image into a page
   Scenario: I can link to a file
     Given I select "awesome" in the "Content" HTML field
     When I press the "Insert link" HTML field button
-      And I click "Link to a file" in the ".mce-menu" element
+      And I click "Link to a file" in the ".tox-collection__group" element
       And I select the file named "folder1" in the gallery
       And I click on the file named "file1" in the gallery
     Then I should see the "Form_fileInsertForm" form
@@ -119,7 +119,7 @@ Feature: Insert an image into a page
     # Check that the field is reset when adding another new link
     When I select "awesome" in the "Content" HTML field
       And I press the "Insert link" HTML field button
-      And I click "Link to a file" in the ".mce-menu" element
+      And I click "Link to a file" in the ".tox-collection__group" element
     Then I should see the "Form_fileInsertForm" form
       And the "Description" field should contain "My file"
       And I should see "Link to file" in the "button[name=action_insert]" element

tests/behat/src/FixtureContext.php

@@ -456,20 +456,18 @@ public function iSelectTheImageInHtmlField($filename, $field)
         $filename = addcslashes($filename ?? '', "'");
         $js = <<<JS
 var editor = jQuery('#$inputFieldId').entwine('ss').getEditor(),
-	doc = editor.getInstance().getDoc(),
-	sel = editor.getInstance().selection,
-	rng = document.createRange(),
-	matched = false;
+    doc = editor.getInstance().getDoc(),
+    sel = doc.getSelection(),
+    rng = new Range(),
+    matched = false;
 
-editor.getInstance().focus();
 jQuery(doc).find("img[src*='$filename']").each(function() {
-	if(!matched) {
-		rng.setStart(this, 0);
-		rng.setEnd(this, 0);
-		sel.setRng(rng);
-		editor.getInstance().nodeChanged();
-		matched = true;
-	}
+    if(!matched) {
+        rng.selectNode(this);
+        sel.removeAllRanges();
+        sel.addRange(rng);
+        matched = true;
+    }
 });
 JS;
         $this->getMainContext()->getSession()->executeScript($js);