Add support for structured content margins (#1920)

3 files changed, 47 insertions, 1 deletions

diff --git a/ext/data/schemas/dictionary-term-bank-v3-schema.json b/ext/data/schemas/dictionary-term-bank-v3-schema.json
index af4494ff..abb4e58f 100644
--- a/ext/data/schemas/dictionary-term-bank-v3-schema.json
+++ b/ext/data/schemas/dictionary-term-bank-v3-schema.json
@@ -215,6 +215,22 @@
                     "type": "string",
                     "enum": ["baseline", "sub", "super", "text-top", "text-bottom", "middle", "top", "bottom"],
                     "default": "baseline"
+                },
+                "marginTop": {
+                    "type": "number",
+                    "default": 0
+                },
+                "marginLeft": {
+                    "type": "number",
+                    "default": 0
+                },
+                "marginRight": {
+                    "type": "number",
+                    "default": 0
+                },
+                "marginBottom": {
+                    "type": "number",
+                    "default": 0
                 }
             }
         }
diff --git a/ext/js/display/sandbox/structured-content-generator.js b/ext/js/display/sandbox/structured-content-generator.js
index f0e70c4d..82bf0421 100644
--- a/ext/js/display/sandbox/structured-content-generator.js
+++ b/ext/js/display/sandbox/structured-content-generator.js
@@ -216,7 +216,17 @@ class StructuredContentGenerator {
 
     _setStructuredContentElementStyle(node, contentStyle) {
         const {style} = node;
-        const {fontStyle, fontWeight, fontSize, textDecorationLine, verticalAlign} = contentStyle;
+        const {
+            fontStyle,
+            fontWeight,
+            fontSize,
+            textDecorationLine,
+            verticalAlign,
+            marginTop,
+            marginLeft,
+            marginRight,
+            marginBottom
+        } = contentStyle;
         if (typeof fontStyle === 'string') { style.fontStyle = fontStyle; }
         if (typeof fontWeight === 'string') { style.fontWeight = fontWeight; }
         if (typeof fontSize === 'string') { style.fontSize = fontSize; }
@@ -226,5 +236,9 @@ class StructuredContentGenerator {
         } else if (Array.isArray(textDecorationLine)) {
             style.textDecoration = textDecorationLine.join(' ');
         }
+        if (typeof marginTop === 'number') { style.marginTop = `${marginTop}em`; }
+        if (typeof marginLeft === 'number') { style.marginLeft = `${marginLeft}em`; }
+        if (typeof marginRight === 'number') { style.marginRight = `${marginRight}em`; }
+        if (typeof marginBottom === 'number') { style.marginBottom = `${marginBottom}em`; }
     }
 }
diff --git a/test/data/dictionaries/valid-dictionary1/term_bank_1.json b/test/data/dictionaries/valid-dictionary1/term_bank_1.json
index 8f2a4c42..58136d79 100644
--- a/test/data/dictionaries/valid-dictionary1/term_bank_1.json
+++ b/test/data/dictionaries/valid-dictionary1/term_bank_1.json
@@ -148,6 +148,22 @@
                         ]}
                     ]}
                 ]}
+            ]},
+            {"type": "structured-content", "content": [
+                "margin",
+                {
+                    "tag": "div",
+                    "style": {
+                        "marginTop": 1,
+                        "marginLeft": 1,
+                        "marginRight": 1,
+                        "marginBottom": 1
+                    },
+                    "content": [
+                        "inner"
+                    ]
+                },
+                "margin"
             ]}
         ],
         100, "P E1"