pat(tinymce): Update TinyMCE to version 6

src/pat/tinymce/js/links.js

@@ -4,7 +4,6 @@ import Base from "@patternslib/patternslib/src/core/base";
 import events from "@patternslib/patternslib/src/core/events";
 import registry from "@patternslib/patternslib/src/core/registry";
 
-import tinymce from "tinymce/tinymce";
 import LinkTemplate from "../templates/link.xml";
 import ImageTemplate from "../templates/image.xml";
 import RelatedItems from "../../relateditems/relateditems";
@@ -344,61 +343,6 @@ var AnchorLink = LinkType.extend({
     },
 });
 
-tinymce.PluginManager.add("ploneimage", function (editor) {
-    editor.ui.registry.addButton("ploneimage", {
-        icon: "image",
-        text: "Insert image",
-        tooltip: "Insert/edit image",
-        onAction: editor.settings.addImageClicked,
-        // stateSelector: "img:not([data-mce-object])",
-    });
-    editor.ui.registry.addMenuItem("ploneimage", {
-        icon: "image",
-        text: "Insert image",
-        onAction: editor.settings.addImageClicked,
-        // stateSelector: "img:not([data-mce-object])",
-    });
-});
-
-/* register the tinymce plugin */
-tinymce.PluginManager.add("plonelink", function (editor) {
-    editor.ui.registry.addButton("plonelink", {
-        icon: "link",
-        tooltip: "Insert/edit link",
-        shortcut: "Ctrl+K",
-        onAction: editor.settings.addLinkClicked,
-        stateSelector: "a[href]",
-    });
-    editor.ui.registry.addMenuItem("plonelink", {
-        icon: "link",
-        text: "Insert link",
-        shortcut: "Ctrl+K",
-        onAction: editor.settings.addLinkClicked,
-        stateSelector: "a[href]",
-    });
-
-    editor.ui.registry.addButton("unlink", {
-        icon: "unlink",
-        tooltip: "Remove link",
-        onAction: function () {
-            editor.execCommand("unlink");
-        },
-        stateSelector: "a[href]",
-    });
-
-    // editor.ui.registry.addButton("Ctrl+K", "", editor.settings.addLinkClicked);
-
-    // editor.ui.registry.addButton("plonelink", {
-    //     icon: "link",
-    //     text: "Insert link",
-    //     shortcut: "Ctrl+K",
-    //     onAction: editor.settings.addLinkClicked,
-    //     stateSelector: "a[href]",
-    //     context: "insert",
-    //     prependToContext: true,
-    // });
-});
-
 export default Base.extend({
     name: "linkmodal",
     trigger: ".pat-linkmodal",
@@ -861,8 +805,8 @@ export default Base.extend({
 
         if (self.anchorElm) {
             self.data.target = self.tiny.dom.getAttrib(self.anchorElm, "target");
-        } else if (self.tiny.settings.default_link_target) {
-            self.data.target = self.tiny.settings.default_link_target;
+        } else if (self.tiny.options.get('link_default_target')) {
+            self.data.target = self.tiny.options.get('link_default_target');
         }
 
         if ((value = self.tiny.dom.getAttrib(self.anchorElm, "rel"))) {

src/pat/tinymce/tinymce--implementation.js

@@ -149,6 +149,8 @@ export default class TinyMCE {
         import (`tinymce/skins/ui/${css}/skin.css`);
 
         const tinymce = (await import("tinymce/tinymce")).default;
+        await import("tinymce/models/dom");
+
         let valid_plugins = [];
         // tinyMCE Plugins
         for (const plugin of this.options.tiny.plugins) {
@@ -189,15 +191,70 @@ export default class TinyMCE {
         }
         self.tinyId = self.options.inline ? id + "-editable" : id; // when displaying TinyMCE inline, a separate div is created.
         tinyOptions.selector = "#" + self.tinyId;
-        tinyOptions.addLinkClicked = function () {
-            self.addLinkClicked.apply(self, []);
-        };
-        tinyOptions.addImageClicked = function (file) {
-            self.addImageClicked.apply(self, [file]);
-        };
         // XXX: disabled skin means it wont load css files which we already
         // include in widgets.min.css
         tinyOptions.skin = false;
+        // do not show the "upgrade" button for plugins
+        tinyOptions.promotion = false;
+
+        // image plugin
+        // eslint-disable-next-line no-unused-vars
+        tinymce.PluginManager.add("ploneimage", (editor, url) => {
+            editor.ui.registry.addButton("ploneimage", {
+                icon: "image",
+                text: "Insert image",
+                tooltip: "Insert/edit image",
+                // eslint-disable-next-line no-unused-vars
+                onAction: (api) => {
+                    self.addImageClicked();
+                },
+                // stateSelector: "img:not([data-mce-object])",
+            });
+            editor.ui.registry.addMenuItem("ploneimage", {
+                icon: "image",
+                text: "Insert image",
+                // eslint-disable-next-line no-unused-vars
+                onAction: (api) => {
+                    self.addImageClicked();
+                },
+                // stateSelector: "img:not([data-mce-object])",
+            });
+        });
+
+        // link plugin
+        // eslint-disable-next-line no-unused-vars
+        tinymce.PluginManager.add("plonelink", function (editor, url) {
+            editor.ui.registry.addButton("plonelink", {
+                icon: "link",
+                tooltip: "Insert/edit link",
+                shortcut: "Ctrl+K",
+                // eslint-disable-next-line no-unused-vars
+                onAction: (api) => {
+                    self.addLinkClicked();
+                },
+                stateSelector: "a[href]",
+            });
+            editor.ui.registry.addMenuItem("plonelink", {
+                icon: "link",
+                text: "Insert link",
+                shortcut: "Ctrl+K",
+                // eslint-disable-next-line no-unused-vars
+                onAction: (api) => {
+                    self.addLinkClicked();
+                },
+                stateSelector: "a[href]",
+            });
+
+            editor.ui.registry.addButton("unlink", {
+                icon: "unlink",
+                tooltip: "Remove link",
+                // eslint-disable-next-line no-unused-vars
+                onAction: (api) => {
+                    editor.execCommand("unlink");
+                },
+                stateSelector: "a[href]",
+            });
+        });
 
         tinyOptions.init_instance_callback = function (editor) {
             if (self.tiny === undefined || self.tiny === null) {
@@ -291,10 +348,10 @@ export default class TinyMCE {
                 return url;
             }
             // otherwise default tiny behavior
-            if (self.tiny.settings.relative_urls) {
+            if (self.tiny.options.get('relative_urls')) {
                 return self.tiny.documentBaseURI.toRelative(url);
             }
-            url = self.tiny.documentBaseURI.toAbsolute(url, self.tiny.settings.remove_script_host);
+            url = self.tiny.documentBaseURI.toAbsolute(url, self.tiny.options.get('remove_script_host'));
             return url;
         }
 

src/pat/tinymce/tinymce.scss

@@ -117,3 +117,7 @@ div.mce-content-body[contenteditable="true"] {
     border: 1px solid var(--bs-border-color);
     border-radius: var(--bs-border-radius);
 }
+
+.tox-tinymce {
+    border-width:1px;
+}

src/pat/tinymce/tinymce.test.js

@@ -130,7 +130,6 @@ describe("TinyMCE", function () {
         ).appendTo("body");
         registry.scan($el);
         await utils.timeout(10);
-        console.log(tinymce.get(0).getContent());
         expect(tinymce.get(0).getContent()).toEqual("<p>foobar</p>");
         tinymce.get(0).remove();
     });
@@ -141,8 +140,10 @@ describe("TinyMCE", function () {
         ).appendTo("body");
         registry.scan($el);
         await utils.timeout(10);
-        expect(tinymce.get(0).settings.plugins).toContain("plonelink ploneimage");
-        expect(tinymce.get(0).settings.toolbar).toContain("plonelink ploneimage");
+        expect(tinymce.get(0).options.get('plugins')).toContain("ploneimage");
+        expect(tinymce.get(0).options.get('plugins')).toContain("plonelink");
+        expect(tinymce.get(0).options.get('toolbar')).toContain("plonelink");
+        expect(tinymce.get(0).options.get('toolbar')).toContain("ploneimage");
         tinymce.get(0).remove();
     });