Add support for more HTML attributes and style declarations in structured content (#450)

* Add support for more HTMl attributes and style declarations

* Update test term to use new `margin` property

* Allow string values for 'padding' and 'margin' properties

* Remove newly added default 'unset' values from term bank schema

---------

Co-authored-by: stephenmk <stephenmk@users.noreply.github.com>

2 files changed, 109 insertions, 5 deletions

diff --git a/ext/data/schemas/dictionary-term-bank-v3-schema.json b/ext/data/schemas/dictionary-term-bank-v3-schema.json
index 547bde49..f4b4faa5 100644
--- a/ext/data/schemas/dictionary-term-bank-v3-schema.json
+++ b/ext/data/schemas/dictionary-term-bank-v3-schema.json
@@ -115,6 +115,10 @@
                                 "style": {
                                     "$ref": "#/definitions/structuredContentStyle"
                                 },
+                                "title": {
+                                    "type": "string",
+                                    "description": "Hover text for the element."
+                                },
                                 "lang": {
                                     "type": "string",
                                     "description": "Defines the language of an element in the format defined by RFC 5646."
@@ -263,6 +267,12 @@
                     "type": "string",
                     "default": "medium"
                 },
+                "color": {
+                    "type": "string"
+                },
+                "backgroundColor": {
+                    "type": "string"
+                },
                 "textDecorationLine": {
                     "oneOf": [
                         {
@@ -280,6 +290,26 @@
                         }
                     ]
                 },
+                "textDecorationStyle": {
+                    "type": "string",
+                    "enum": ["solid", "double", "dotted", "dashed", "wavy"],
+                    "default": "solid"
+                },
+                "textDecorationColor": {
+                    "type": "string"
+                },
+                "borderColor": {
+                    "type": "string"
+                },
+                "borderStyle": {
+                    "type": "string"
+                },
+                "borderRadius": {
+                    "type": "string"
+                },
+                "borderWidth": {
+                    "type": "string"
+                },
                 "verticalAlign": {
                     "type": "string",
                     "enum": ["baseline", "sub", "super", "text-top", "text-bottom", "middle", "top", "bottom"],
@@ -290,22 +320,53 @@
                     "enum": ["start", "end", "left", "right", "center", "justify", "justify-all", "match-parent"],
                     "default": "start"
                 },
+                "margin": {
+                    "type": "string"
+                },
                 "marginTop": {
-                    "type": "number",
+                    "type": ["number", "string"],
                     "default": 0
                 },
                 "marginLeft": {
-                    "type": "number",
+                    "type": ["number", "string"],
                     "default": 0
                 },
                 "marginRight": {
-                    "type": "number",
+                    "type": ["number", "string"],
                     "default": 0
                 },
                 "marginBottom": {
-                    "type": "number",
+                    "type": ["number", "string"],
                     "default": 0
                 },
+                "padding": {
+                    "type": "string"
+                },
+                "paddingTop": {
+                    "type": "string"
+                },
+                "paddingLeft": {
+                    "type": "string"
+                },
+                "paddingRight": {
+                    "type": "string"
+                },
+                "paddingBottom": {
+                    "type": "string"
+                },
+                "wordBreak": {
+                    "type": "string",
+                    "enum": ["normal", "break-all", "keep-all"],
+                    "default": "normal"
+                },
+                "whiteSpace": {
+                    "type": "string",
+                    "default": "normal"
+                },
+                "cursor": {
+                    "type": "string",
+                    "default": "auto"
+                },
                 "listStyleType": {
                     "type": "string",
                     "default": "disc"
diff --git a/ext/js/display/sandbox/structured-content-generator.js b/ext/js/display/sandbox/structured-content-generator.js
index ad63667a..b74674fc 100644
--- a/ext/js/display/sandbox/structured-content-generator.js
+++ b/ext/js/display/sandbox/structured-content-generator.js
@@ -321,10 +321,11 @@ export class StructuredContentGenerator {
                 break;
         }
         if (hasStyle) {
-            const {style} = /** @type {import('structured-content').StyledElement} */ (content);
+            const {style, title} = /** @type {import('structured-content').StyledElement} */ (content);
             if (typeof style === 'object' && style !== null) {
                 this._setStructuredContentElementStyle(node, style);
             }
+            if (typeof title === 'string') { node.title = title; }
         }
         if (hasChildren) {
             this._appendStructuredContent(node, content.content, dictionary, language);
@@ -342,18 +343,37 @@ export class StructuredContentGenerator {
             fontStyle,
             fontWeight,
             fontSize,
+            color,
+            backgroundColor,
             textDecorationLine,
+            textDecorationStyle,
+            textDecorationColor,
+            borderColor,
+            borderStyle,
+            borderRadius,
+            borderWidth,
             verticalAlign,
             textAlign,
+            margin,
             marginTop,
             marginLeft,
             marginRight,
             marginBottom,
+            padding,
+            paddingTop,
+            paddingLeft,
+            paddingRight,
+            paddingBottom,
+            wordBreak,
+            whiteSpace,
+            cursor,
             listStyleType
         } = contentStyle;
         if (typeof fontStyle === 'string') { style.fontStyle = fontStyle; }
         if (typeof fontWeight === 'string') { style.fontWeight = fontWeight; }
         if (typeof fontSize === 'string') { style.fontSize = fontSize; }
+        if (typeof color === 'string') { style.color = color; }
+        if (typeof backgroundColor === 'string') { style.backgroundColor = backgroundColor; }
         if (typeof verticalAlign === 'string') { style.verticalAlign = verticalAlign; }
         if (typeof textAlign === 'string') { style.textAlign = textAlign; }
         if (typeof textDecorationLine === 'string') {
@@ -361,10 +381,33 @@ export class StructuredContentGenerator {
         } else if (Array.isArray(textDecorationLine)) {
             style.textDecoration = textDecorationLine.join(' ');
         }
+        if (typeof textDecorationStyle === 'string') {
+            style.textDecorationStyle = textDecorationStyle;
+        }
+        if (typeof textDecorationColor === 'string') {
+            style.textDecorationColor = textDecorationColor;
+        }
+        if (typeof borderColor === 'string') { style.borderColor = borderColor; }
+        if (typeof borderStyle === 'string') { style.borderStyle = borderStyle; }
+        if (typeof borderRadius === 'string') { style.borderRadius = borderRadius; }
+        if (typeof borderWidth === 'string') { style.borderWidth = borderWidth; }
+        if (typeof margin === 'string') { style.margin = margin; }
         if (typeof marginTop === 'number') { style.marginTop = `${marginTop}em`; }
+        if (typeof marginTop === 'string') { style.marginTop = marginTop; }
         if (typeof marginLeft === 'number') { style.marginLeft = `${marginLeft}em`; }
+        if (typeof marginLeft === 'string') { style.marginLeft = marginLeft; }
         if (typeof marginRight === 'number') { style.marginRight = `${marginRight}em`; }
+        if (typeof marginRight === 'string') { style.marginRight = marginRight; }
         if (typeof marginBottom === 'number') { style.marginBottom = `${marginBottom}em`; }
+        if (typeof marginBottom === 'string') { style.marginBottom = marginBottom; }
+        if (typeof padding === 'string') { style.padding = padding; }
+        if (typeof paddingTop === 'string') { style.paddingTop = paddingTop; }
+        if (typeof paddingLeft === 'string') { style.paddingLeft = paddingLeft; }
+        if (typeof paddingRight === 'string') { style.paddingRight = paddingRight; }
+        if (typeof paddingBottom === 'string') { style.paddingBottom = paddingBottom; }
+        if (typeof wordBreak === 'string') { style.wordBreak = wordBreak; }
+        if (typeof whiteSpace === 'string') { style.whiteSpace = whiteSpace; }
+        if (typeof cursor === 'string') { style.cursor = cursor; }
         if (typeof listStyleType === 'string') { style.listStyleType = listStyleType; }
     }