fix(WYSIWYG): Align all images, iframes to center

contentStyle.css

@@ -50,5 +50,8 @@ figure {
 
 figure img {
   margin: 6px;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
 }
 

src/RichEditor.js

@@ -33,7 +33,6 @@ import createEmojiPlugin from 'draft-js-emoji-plugin';
 
 // Images (and block tools)
 import createImagePlugin from 'draft-js-image-plugin';
-import createAlignmentPlugin from 'draft-js-alignment-plugin';
 import createFocusPlugin from 'draft-js-focus-plugin';
 import createResizeablePlugin from 'draft-js-resizeable-plugin';
 import createBlockDndPlugin from 'draft-js-drag-n-drop-plugin';
@@ -68,24 +67,19 @@ const emojiPlugin = createEmojiPlugin();
 const {EmojiSuggestions, EmojiSelect} = emojiPlugin;
 
 // Decorators plugins
-const alignmentPlugin = createAlignmentPlugin();
-const {AlignmentTool} = alignmentPlugin;
 const focusPlugin = createFocusPlugin();
 const resizeablePlugin = createResizeablePlugin();
 const blockDndPlugin = createBlockDndPlugin();
 
 const imgDecorator = composeDecorators(
     resizeablePlugin.decorator,
-    alignmentPlugin.decorator,
     focusPlugin.decorator,
     blockDndPlugin.decorator
 );
 const imagePlugin = createImagePlugin({decorator: imgDecorator, imageComponent: SizedImage});
 
 // Embedded Plugin
 const embedDecorator = composeDecorators(
-    //resizeablePlugin.decorator,
-    alignmentPlugin.decorator,
     focusPlugin.decorator,
     blockDndPlugin.decorator
 );
@@ -131,7 +125,6 @@ class MMFBlogEditor extends Component {
         ];
         if (this.props.enablePhotos) plugins.push(
             focusPlugin,
-            alignmentPlugin,
             resizeablePlugin,
             imagePlugin,
             blockDndPlugin
@@ -158,7 +151,6 @@ class MMFBlogEditor extends Component {
         return (
             <ComponentContext.Provider value={createContextValue(this.props, propsKeyToSaveInContext)}>
                 <div className="rich-editor">
-                    <AlignmentTool/>
                     <div className="editor-interface">
                         <div className={editorClasses}>
                             <Editor

src/export/html.options.js

@@ -7,25 +7,14 @@ export default {
         const entityType = entity.get('type').toLowerCase();
 
         if (entityType === 'mmf-embedded') {
-            const {profile, src, alignment = 'default'} = entity.getData();
+            const {profile, src, alignment = 'center'} = entity.getData();
             const {style: profileStyle, ...profileAttribute} = getIframeProperties(profile, true);
             const attributes = {src, "data-alignment": alignment, ...profileAttribute};
-            const style = {...profileStyle};
-            switch (alignment) {
-                case "center":
-                    style['display'] = 'block';
-                    style['margin-left'] = 'auto';
-                    style['margin-right'] = 'auto';
-                    break;
-                case "left":
-                    style['float'] = 'left';
-                    break;
-                case "right":
-                    style['float'] = 'right';
-                    break;
-                default:
-                    style['margin'] = 'initial';
-            }
+            const style = {
+                display: 'block',
+                marginLeft: 'auto',
+                marginRight: 'auto',
+                ...profileStyle};
             return {
                 element: 'iframe',
                 style,
@@ -34,25 +23,13 @@ export default {
         }
 
         if (entityType === 'image') {
-            const {src, width = 40, alignment = 'default'} = entity.getData();
+            const {src, width = 40, alignment = 'center'} = entity.getData();
             const style = {
-                width: width + '%'
+                width: width + '%',
+                display: 'block',
+                marginLeft: 'auto',
+                marginRight: 'auto'
             };
-            switch(alignment) {
-                case "center":
-                    style['display'] = 'block';
-                    style['margin-left'] = 'auto';
-                    style['margin-right'] = 'auto';
-                    break;
-                case "left":
-                    style['float'] = 'left';
-                    break;
-                case "right":
-                    style['float'] = 'right';
-                    break;
-                default:
-                    style['margin'] = 'initial';
-            }
             const attributes = {src, "data-alignment": alignment};
             return {
                 element: 'img',

src/lib/embedded-plugin/src/plugin.css

@@ -1,7 +1,8 @@
 .mmf-blog-iframe-wrapper {
     position: relative;
-    margin: 0px 4px;
     width: min-content;
+    display: block;
+    margin: auto;
 }