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

- add width converter to column to subtract margins
- remove row margins and paddings converter for column
- skip ts lint error due to bad api

Author: anthoula

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

@@ -46,9 +46,9 @@
                         <style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
                         <style name="justify_content" source="justify_content" persistence_mode="read"/>
                         <style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
-                        <style name="width" source="width"/>
-                        <style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins" preview_converter="Magento_PageBuilder/js/content-type/row/converter/style/margins"/>
-                        <style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings" preview_converter="Magento_PageBuilder/js/content-type/row/converter/style/paddings"/>
+                        <style name="width" source="width" converter="Magento_PageBuilder/js/converter/style/width"/>
+                        <style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins"/>
+                        <style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings"/>
                         <static_style source="align_self" value="stretch"/>
                         <attribute name="name" source="data-role"/>
                         <attribute name="appearance" source="data-appearance"/>

app/code/Magento/PageBuilder/view/adminhtml/web/js/converter/style/width.js

@@ -0,0 +1,50 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+import {DataObject} from "../../data-store";
+import ConverterInterface from "../converter-interface";
+
+/**
+ * Subtract margin from width to ensure adjacent elements do not
+ * move or resize when positive or negative margins are present
+ *
+ * @api
+ */
+export default class Width implements ConverterInterface {
+    /**
+     * Convert value to internal format
+     *
+     * @param value string
+     * @returns {string | object}
+     */
+    public fromDom(value: string): object | string {
+        if (value.indexOf("calc") !== -1) {
+            return value.split("%")[0].split("(")[1] + "%";
+        }
+
+        return value;
+    }
+
+    /**
+     * Convert value to knockout format
+     *
+     * @param name string
+     * @param data Object
+     * @returns {string | object}
+     */
+    public toDom(name: string, data: DataObject): string {
+        if (data[name] !== "" && data.margins_and_padding && data.margins_and_padding !== undefined) {
+            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;
+
+            if (marginLeft === 0 && marginRight === 0) {
+                return data[name].toString();
+            }
+
+            return "calc(" + data[name].toString() + " - " + (marginLeft + marginRight) + "px)";
+        }
+    }
+}