MC-5025: Right/Left Margin Not Working For Content Types

- fix video with margins to fit inside parent
- skip tslint error due to strict rule we can ignore

Author: anthoula

app/code/Magento/PageBuilder/view/adminhtml/pagebuilder/content_type/video.xml

@@ -30,7 +30,7 @@
                         <css name="css_classes"/>
                     </element>
                     <element name="wrapper">
-                        <style name="max_width" source="max_width" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
+                        <style name="max_width" source="max_width" converter="Magento_PageBuilder/js/content-type/video/converter/style/max-width"/>
                         <style name="border" source="border_style" converter="Magento_PageBuilder/js/converter/style/border-style"/>
                         <style name="border_color" source="border_color"/>
                         <style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/remove-px"/>

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/video/converter/style/max-width.js

@@ -0,0 +1,45 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+import ConverterInterface from "../../../../converter/converter-interface";
+import {DataObject} from "../../../../data-store";
+
+/**
+ * Subtract margin from max-width to fit inside parent container
+ *
+ * @api
+ */
+export default class MaxWidth implements ConverterInterface {
+    /**
+     * Convert value to internal format
+     *
+     * @param value string
+     * @returns {string | object}
+     */
+    public fromDom(value: string): object | string {
+        if (value.indexOf("100%") !== -1) {
+            return "";
+        }
+        return value.replace("px", "");
+    }
+
+    /**
+     * Convert value to knockout format
+     *
+     * @param name string
+     * @param data Object
+     * @returns {string | object}
+     */
+    public toDom(name: string, data: DataObject): string {
+        if (data.max_width !== "") {
+            return data.max_width + "px";
+        }
+        const margins = data.margins_and_padding.margin || {};
+        const marginLeft = margins.left ? parseInt(margins.left as string, 10) : 0;
+        const marginRight = margins.right ? parseInt(margins.right as string, 10) : 0;
+
+        return "calc(100% - " + (marginLeft + marginRight) + "px)";
+    }
+}