diff --git a/src/pat/tinymce/js/links.js b/src/pat/tinymce/js/links.js index 6dd5832fd5..5948c25625 100644 --- a/src/pat/tinymce/js/links.js +++ b/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( diff --git a/src/pat/tinymce/tinymce--implementation.js b/src/pat/tinymce/tinymce--implementation.js index b697f1bb17..6fd457f94f 100644 --- a/src/pat/tinymce/tinymce--implementation.js +++ b/src/pat/tinymce/tinymce--implementation.js @@ -10,6 +10,9 @@ const log = logger.getLogger("tinymce--implementation"); let LinkModal = null; export default class TinyMCE { + linkModal; + imageModal; + constructor(el, options) { this.el = el; this.$el = $(el); @@ -17,7 +20,7 @@ export default class TinyMCE { } addLinkClicked() { var self = this; - if (self.linkModal === null) { + if (!self.linkModal) { var $el = $("
").insertAfter(self.$el); var linkTypes = ["internal", "upload", "external", "email", "anchor"]; if (!self.options.upload) { @@ -38,7 +41,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 +224,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); diff --git a/src/pat/tinymce/tinymce.test.js b/src/pat/tinymce/tinymce.test.js index ce4f418280..9793f67cfb 100644 --- a/src/pat/tinymce/tinymce.test.js +++ b/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( - $('').appendTo("body"), - options || {}, - ); + document.body.innerHTML = ` + + `; + 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(` +