MDL-76277 tiny_media: Limit image alignment to vertical align

Atto mixed vertical and horizontal alignment into a single selection,
which does not make any sense. It also used CSS classes in such a way
that those styles will break if/when Atto is removed.

This commit:
* removes the horizontal alignment from the dropdown - these are easily
  achieved using the existing Tiny UI
* addresses a bug where existing styles (like horizontal alignment) were
  not preserved when editing the image
* fixes a bug where the CSS selector was used instead of a CSS class
  name
* recognises legacy TinyMCE class names and replaces these
* switches from using random class names to using Bootstrap class
  utility classes for vertical alignment.

lib/editor/tiny/plugins/media/amd/build/selectors.min.js

@@ -1,3 +1,3 @@
-define("tiny_media/selectors",["exports"],(function(_exports){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0;return _exports.default={IMAGE:{actions:{submit:".tiny_image_urlentrysubmit",imageBrowser:".openimagebrowser"},elements:{form:"form.tiny_image_form",alignment:".tiny_image_alignment",alignSettings:".tiny_image_button",alt:".tiny_image_altentry",altWarning:".tiny_image_altwarning",height:".tiny_image_heightentry",width:".tiny_image_widthentry",url:".tiny_image_urlentry",urlWarning:".tiny_image_urlwarning",size:".tiny_image_size",presentation:".tiny_image_presentation",constrain:".tiny_image_constrain",customStyle:".tiny_image_customstyle",preview:".tiny_image_preview",previewBox:".tiny_image_preview_box"},styles:{responsive:"img-fluid"},alignments:[{name:"verticalAlign",value:"text-top",margin:"0 0.5em"},{name:"verticalAlign",value:"middle",margin:"0 0.5em"},{name:"verticalAlign",value:"text-bottom",margin:"0 0.5em",isDefault:!0},{name:"float",value:"left",margin:"0 0.5em 0 0"},{name:"float",value:"right",margin:"0 0 0 0.5em"}]},EMBED:{actions:{submit:".tiny_media_submit",mediaBrowser:".openmediabrowser"},elements:{form:"form.tiny_media_form",source:".tiny_media_source",track:".tiny_media_track",mediaSource:".tiny_media_media_source",linkSource:".tiny_media_link_source",linkSize:".tiny_media_link_size",posterSource:".tiny_media_poster_source",posterSize:".tiny_media_poster_size",displayOptions:".tiny_media_display_options",name:".tiny_media_name_entry",title:".tiny_media_title_entry",url:".tiny_media_url_entry",width:".tiny_media_width_entry",height:".tiny_media_height_entry",trackSource:".tiny_media_track_source",trackKind:".tiny_media_track_kind_entry",trackLabel:".tiny_media_track_label_entry",trackLang:".tiny_media_track_lang_entry",trackDefault:".tiny_media_track_default",mediaControl:".tiny_media_controls",mediaAutoplay:".tiny_media_autoplay",mediaMute:".tiny_media_mute",mediaLoop:".tiny_media_loop",advancedSettings:".tiny_media_advancedsettings",linkTab:'li[data-medium-type="link"]',videoTab:'li[data-medium-type="video"]',audioTab:'li[data-medium-type="audio"]',linkPane:'.tab-pane[data-medium-type="link"]',videoPane:'.tab-pane[data-medium-type="video"]',audioPane:'.tab-pane[data-medium-type="audio"]',trackSubtitlesTab:'li[data-track-kind="subtitles"]',trackCaptionsTab:'li[data-track-kind="captions"]',trackDescriptionsTab:'li[data-track-kind="descriptions"]',trackChaptersTab:'li[data-track-kind="chapters"]',trackMetadataTab:'li[data-track-kind="metadata"]',trackSubtitlesPane:'.tab-pane[data-track-kind="subtitles"]',trackCaptionsPane:'.tab-pane[data-track-kind="captions"]',trackDescriptionsPane:'.tab-pane[data-track-kind="descriptions"]',trackChaptersPane:'.tab-pane[data-track-kind="chapters"]',trackMetadataPane:'.tab-pane[data-track-kind="metadata"]'},mediaTypes:{link:"LINK",video:"VIDEO",audio:"AUDIO"},trackKinds:{subtitles:"SUBTITLES",captions:"CAPTIONS",descriptions:"DESCRIPTIONS",chapters:"CHAPTERS",metadata:"METADATA"}}},_exports.default}));
+define("tiny_media/selectors",["exports"],(function(_exports){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0;return _exports.default={IMAGE:{actions:{submit:".tiny_image_urlentrysubmit",imageBrowser:".openimagebrowser"},elements:{form:"form.tiny_image_form",alignment:".tiny_image_alignment",alignSettings:".tiny_image_button",alt:".tiny_image_altentry",altWarning:".tiny_image_altwarning",height:".tiny_image_heightentry",width:".tiny_image_widthentry",url:".tiny_image_urlentry",urlWarning:".tiny_image_urlwarning",size:".tiny_image_size",presentation:".tiny_image_presentation",constrain:".tiny_image_constrain",customStyle:".tiny_image_customstyle",preview:".tiny_image_preview",previewBox:".tiny_image_preview_box"},styles:{responsive:"img-fluid"},alignments:[{name:"verticalAlign",value:"align-top",margin:"0 0.5em",legacyValues:["atto_image_button_text-top"]},{name:"verticalAlign",value:"align-middle",margin:"0 0.5em",legacyValues:["atto_image_button_middle"]},{name:"verticalAlign",value:"align-bottom",margin:"0 0.5em",isDefault:!0,legacyValues:["atto_image_button_text-bottom"]}]},EMBED:{actions:{submit:".tiny_media_submit",mediaBrowser:".openmediabrowser"},elements:{form:"form.tiny_media_form",source:".tiny_media_source",track:".tiny_media_track",mediaSource:".tiny_media_media_source",linkSource:".tiny_media_link_source",linkSize:".tiny_media_link_size",posterSource:".tiny_media_poster_source",posterSize:".tiny_media_poster_size",displayOptions:".tiny_media_display_options",name:".tiny_media_name_entry",title:".tiny_media_title_entry",url:".tiny_media_url_entry",width:".tiny_media_width_entry",height:".tiny_media_height_entry",trackSource:".tiny_media_track_source",trackKind:".tiny_media_track_kind_entry",trackLabel:".tiny_media_track_label_entry",trackLang:".tiny_media_track_lang_entry",trackDefault:".tiny_media_track_default",mediaControl:".tiny_media_controls",mediaAutoplay:".tiny_media_autoplay",mediaMute:".tiny_media_mute",mediaLoop:".tiny_media_loop",advancedSettings:".tiny_media_advancedsettings",linkTab:'li[data-medium-type="link"]',videoTab:'li[data-medium-type="video"]',audioTab:'li[data-medium-type="audio"]',linkPane:'.tab-pane[data-medium-type="link"]',videoPane:'.tab-pane[data-medium-type="video"]',audioPane:'.tab-pane[data-medium-type="audio"]',trackSubtitlesTab:'li[data-track-kind="subtitles"]',trackCaptionsTab:'li[data-track-kind="captions"]',trackDescriptionsTab:'li[data-track-kind="descriptions"]',trackChaptersTab:'li[data-track-kind="chapters"]',trackMetadataTab:'li[data-track-kind="metadata"]',trackSubtitlesPane:'.tab-pane[data-track-kind="subtitles"]',trackCaptionsPane:'.tab-pane[data-track-kind="captions"]',trackDescriptionsPane:'.tab-pane[data-track-kind="descriptions"]',trackChaptersPane:'.tab-pane[data-track-kind="chapters"]',trackMetadataPane:'.tab-pane[data-track-kind="metadata"]'},mediaTypes:{link:"LINK",video:"VIDEO",audio:"AUDIO"},trackKinds:{subtitles:"SUBTITLES",captions:"CAPTIONS",descriptions:"DESCRIPTIONS",chapters:"CHAPTERS",metadata:"METADATA"}}},_exports.default}));
 
 //# sourceMappingURL=selectors.min.js.map

lib/editor/tiny/plugins/media/amd/src/image.js

@@ -75,20 +75,16 @@ export const MediaImage = class {
 
     async getAlignmentTitles() {
         if (!this.alignmentTitles) {
-            const [top, middle, bottom, left, right] = await getStrings([
+            const [top, middle, bottom] = await getStrings([
                 'alignment_top',
                 'alignment_middle',
                 'alignment_bottom',
-                'alignment_left',
-                'alignment_right',
             ].map((key) => ({key, component})));
 
             this.alignmentTitles = {
                 top,
                 middle,
                 bottom,
-                left,
-                right,
             };
         }
 
@@ -100,23 +96,15 @@ export const MediaImage = class {
         const alignments = [
             {
                 text: titles.top,
-                value: 'text-top'
+                value: 'align-top',
             },
             {
                 text: titles.middle,
-                value: 'middle'
+                value: 'align-middle',
             },
             {
                 text: titles.bottom,
-                value: 'text-bottom'
+                value: 'align-bottom',
-            },
-            {
-                text: titles.left,
-                value: 'left'
-            },
-            {
-                text: titles.right,
-                value: 'right'
             },
         ];
 
@@ -132,11 +120,12 @@ export const MediaImage = class {
     }
 
     async getTemplateContext(data) {
-        return Object.assign({}, {
+        return {
             elementid: this.editor.id,
             showfilepicker: this.canShowFilePicker,
             alignoptions: await this.getImageAlignment(),
-        }, data);
+            ...data,
+        };
     }
 
     async getCurrentImageData() {
@@ -145,7 +134,7 @@ export const MediaImage = class {
             return {};
         }
 
-        const properties = Object.assign({}, selectedImageProperties);
+        const properties = {...selectedImageProperties};
         if (properties.align) {
             properties.alignoptions = await this.getImageAlignment(properties.align);
         }
@@ -277,7 +266,7 @@ export const MediaImage = class {
     }
 
     getAlignmentClass(alignment) {
-        return `${Selectors.IMAGE.elements.alignSettings}_${alignment}`;
+        return alignment;
     }
 
     updateWarning() {
@@ -492,7 +481,7 @@ export const MediaImage = class {
         this.removeLegacyAlignment(image);
         this.selectedImage = image;
 
-        properties.customstyle = image.style;
+        properties.customStyle = image.style.cssText;
 
         const width = getImageWidth(image);
         if (width !== 0) {
@@ -546,7 +535,15 @@ export const MediaImage = class {
 
     getAlignmentProperties(image) {
         const currentAlignment = Selectors.IMAGE.alignments.find((alignment) => {
-            return image.classList.contains(this.getAlignmentClass(alignment.value));
+            if (image.classList.contains(this.getAlignmentClass(alignment.value))) {
+                return true;
+            }
+
+            if (alignment.legacyValues) {
+                return alignment.legacyValues.some((legacyValue) => image.classList.contains(legacyValue));
+            }
+
+            return false;
         });
         if (currentAlignment) {
             return currentAlignment;

lib/editor/tiny/plugins/media/amd/src/selectors.js

@@ -51,33 +51,30 @@ export default {
             // Vertical alignment.
             {
                 name: 'verticalAlign',
-                value: 'text-top',
+                value: 'align-top',
-                margin: '0 0.5em'
-            },
-            {
-                name: 'verticalAlign',
-                value: 'middle',
-                margin: '0 0.5em'
-            },
-            {
-                name: 'verticalAlign',
-                value: 'text-bottom',
                 margin: '0 0.5em',
-                isDefault: true
+                legacyValues: [
-            },
+                    'atto_image_button_text-top',
-
+                ],
-            // Floats.
-            {
-                name: 'float',
-                value: 'left',
-                margin: '0 0.5em 0 0'
             },
             {
-                name: 'float',
+                name: 'verticalAlign',
-                value: 'right',
+                value: 'align-middle',
-                margin: '0 0 0 0.5em'
+                margin: '0 0.5em',
-            }
+                legacyValues: [
-        ]
+                    'atto_image_button_middle',
+                ],
+            },
+            {
+                name: 'verticalAlign',
+                value: 'align-bottom',
+                margin: '0 0.5em',
+                isDefault: true,
+                legacyValues: [
+                    'atto_image_button_text-bottom',
+                ],
+            },
+        ],
     },
     EMBED: {
         actions: {

lib/editor/tiny/plugins/media/templates/image.mustache

@@ -28,7 +28,7 @@
     }}{{#width}} width="{{.}}"{{/width}}{{!
     }}{{#height}} height="{{.}}"{{/height}}{{!
     }}{{#presentation}} role="presentation"{{/presentation}}{{!
-    }}{{#customstyle}} style="{{.}}"{{/customstyle}}{{!
+    }}{{#customStyle}} style="{{.}}"{{/customStyle}}{{!
     }}{{#classlist}} class="{{.}}"{{/classlist}}{{!
     }}{{#id}} id="{{.}}"{{/id}}{{!
 }}/>

lib/editor/tiny/plugins/media/templates/insert_image_modal.mustache

@@ -93,7 +93,7 @@
                     {{/alignoptions}}
                 </select>
             </div>
-            <input type="hidden" class="tiny_image_customstyle" value="{{customstyle}}"/>
+            <input type="hidden" class="tiny_image_customstyle" value="{{customStyle}}"/>
             <br/>
             <div class="mdl-align">
                 <div class="tiny_image_preview_box">