Add border styling options for structured content images (#577)

* Add border styling options for structured content images

* Replace border style, width, and color properties with shorthand

---------

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

3 files changed, 22 insertions, 3 deletions

diff --git a/ext/data/schemas/dictionary-term-bank-v3-schema.json b/ext/data/schemas/dictionary-term-bank-v3-schema.json
index bcb1d5ed..f85f893b 100644
--- a/ext/data/schemas/dictionary-term-bank-v3-schema.json
+++ b/ext/data/schemas/dictionary-term-bank-v3-schema.json
@@ -152,7 +152,7 @@
                                 },
                                 "height": {
                                     "type": "number",
-                                    "description": "Preferred width of the image.",
+                                    "description": "Preferred height of the image.",
                                     "minimum": 0
                                 },
                                 "title": {
@@ -204,6 +204,14 @@
                                     "description": "The vertical alignment of the image.",
                                     "enum": ["baseline", "sub", "super", "text-top", "text-bottom", "middle", "top", "bottom"]
                                 },
+                                "border": {
+                                    "type": "string",
+                                    "description": "Shorthand for border width, style, and color."
+                                },
+                                "borderRadius": {
+                                    "type": "string",
+                                    "description": "Roundness of the corners of the image's outer border edge."
+                                },
                                 "sizeUnits": {
                                     "type": "string",
                                     "description": "The units for the width and height.",
@@ -485,7 +493,7 @@
                                         },
                                         "height": {
                                             "type": "integer",
-                                            "description": "Preferred width of the image.",
+                                            "description": "Preferred height of the image.",
                                             "minimum": 1
                                         },
                                         "title": {
diff --git a/ext/js/dictionary/dictionary-importer.js b/ext/js/dictionary/dictionary-importer.js
index c8f68d78..0feed8b2 100644
--- a/ext/js/dictionary/dictionary-importer.js
+++ b/ext/js/dictionary/dictionary-importer.js
@@ -486,9 +486,16 @@ export class DictionaryImporter {
      * @param {import('dictionary-database').DatabaseTermEntry} entry
      */
     async _resolveStructuredContentImage(context, target, source, entry) {
-        const {verticalAlign, sizeUnits} = source;
+        const {
+            verticalAlign,
+            border,
+            borderRadius,
+            sizeUnits
+        } = source;
         await this._createImageData(context, target, source, entry);
         if (typeof verticalAlign === 'string') { target.verticalAlign = verticalAlign; }
+        if (typeof border === 'string') { target.border = border; }
+        if (typeof borderRadius === 'string') { target.borderRadius = borderRadius; }
         if (typeof sizeUnits === 'string') { target.sizeUnits = sizeUnits; }
     }
 
diff --git a/ext/js/display/sandbox/structured-content-generator.js b/ext/js/display/sandbox/structured-content-generator.js
index f73d790a..ee86a7f4 100644
--- a/ext/js/display/sandbox/structured-content-generator.js
+++ b/ext/js/display/sandbox/structured-content-generator.js
@@ -73,6 +73,8 @@ export class StructuredContentGenerator {
             collapsed,
             collapsible,
             verticalAlign,
+            border,
+            borderRadius,
             sizeUnits
         } = data;
 
@@ -130,6 +132,8 @@ export class StructuredContentGenerator {
         }
 
         imageContainer.style.width = `${usedWidth}em`;
+        if (typeof border === 'string') { imageContainer.style.border = border; }
+        if (typeof borderRadius === 'string') { imageContainer.style.borderRadius = borderRadius; }
         if (typeof title === 'string') {
             imageContainer.title = title;
         }