fix(pat-tinymce): Add a fallback for Plone 5 images without data-picturevariant attributes.

Responsive picture variants were introduced in Plone 6. Content from
Plone 5 where no `data-picturevariant` was available lost had no scale
selected in the image dialog.
This PR fixes that by falling back to the `data-scale` attribute.
This allows old images in the TinyMCE‌ image edit dialog to have their
scale preselected. The precondition for this is that the old scales are
configured as picture variants.

Author: thet

src/pat/tinymce/js/links.js

@@ -899,10 +899,10 @@ export default Base.extend({
                 self.linkTypes[self.linkType].load(self.imgElm);
 
                 // set scale selection in link modal:
-                var pictureVariant = self.dom.getAttrib(
-                    self.imgElm,
-                    "data-picturevariant",
-                );
+                var pictureVariant =
+                    self.dom.getAttrib(self.imgElm, "data-picturevariant") ||
+                    // fallback for backwards compatibility
+                    self.dom.getAttrib(self.imgElm, "data-scale");
                 self.$scale.val(pictureVariant);
 
                 // var selectedImageUid = self.dom.getAttrib(

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

@@ -10,14 +10,18 @@ const log = logger.getLogger("tinymce--implementation");
 let LinkModal = null;
 
 export default class TinyMCE {
+
+    linkModal;
+    imageModal;
+
     constructor(el, options) {
         this.el = el;
         this.$el = $(el);
         this.options = options;
     }
     addLinkClicked() {
         var self = this;
-        if (self.linkModal === null) {
+        if (! self.linkModal) {
             var $el = $("<div/>").insertAfter(self.$el);
             var linkTypes = ["internal", "upload", "external", "email", "anchor"];
             if (!self.options.upload) {
@@ -38,7 +42,7 @@ export default class TinyMCE {
     }
     addImageClicked() {
         var self = this;
-        if (self.imageModal === null) {
+        if (! self.imageModal) {
             var linkTypes = ["image", "uploadImage", "externalImage"];
             if (!self.options.upload) {
                 linkTypes.splice(1, 1);
@@ -221,7 +225,6 @@ export default class TinyMCE {
         LinkModal = (await import("./js/links")).default;
 
         var self = this;
-        self.linkModal = self.imageModal = self.uploadModal = self.pasteModal = null;
         // tiny needs an id in order to initialize. Creat it if not set.
         var id = utils.setId(self.$el);
 

src/pat/tinymce/tinymce.test.js

@@ -4,14 +4,19 @@ import $ from "jquery";
 import sinon from "sinon";
 import registry from "@patternslib/patternslib/src/core/registry";
 import utils from "@patternslib/patternslib/src/core/utils";
+import events from "@patternslib/patternslib/src/core/events";
 
 $.fx.off = true;
 
 var createTinymce = async function (options) {
-    return await registry.patterns.tinymce.init(
-        $('<textarea class="pat-tinymce"></textarea>').appendTo("body"),
-        options || {},
-    );
+    document.body.innerHTML = `
+        <textarea class="pat-tinymce"></textarea>
+    `;
+    const textarea = document.querySelector("textarea");
+    const instance = new TinyMCE(textarea, options || {});
+    await events.await_pattern_init(instance);
+
+    return instance;
 };
 
 const registry_scan = async () => {
@@ -249,6 +254,48 @@ describe("TinyMCE", function () {
         );
     });
 
+    it.skip("When parsing images from old Plone installations without picture-variants, TinyMCE‌'s image dialog falls back to data-scale", async function () {
+        // TinyMCE contents without a picture variant but a data-scale, as it
+        // was used in Plone 5.
+        const pat_instance = await createTinymce(
+            {
+                prependToScalePart: "/@@images/image/",
+                imageScales: '[{"title": "Preview", "value": "preview"}]',
+                pictureVariants: {
+                    "preview": {
+                        "title": "Preview",
+                        "sourceset": [
+                            {
+                                "scale": "preview",
+                                "media": ""
+                            }
+                        ]
+                    },
+                },
+            }
+        );
+
+        // Await the TinyMCE initialization.
+        await utils.timeout(0);
+        const tiny = pat_instance.instance.tiny;
+
+        tiny.setContent(`
+            <img
+                src="resolveuid/foobar/@@images/image/preview"
+                data-scale="preview"
+                alt="This is an alt"
+                title="This is a title"
+                data-caption="This is a caption"
+            />
+        `);
+
+        // Select the image before opening the image dialog.
+        const img = tiny.dom.getRoot().getElementsByTagName("img")[0];
+        tiny.selection.select(img);
+
+        pat_instance.instance.addImageClicked();
+    });
+
     it("test inline tinyMCE", async function () {
         document.body.innerHTML = `
             <textarea class="pat-tinymce" data-pat-tinymce='{"inline": true}'></textarea>