aboutsummaryrefslogtreecommitdiff
path: root/ext
diff options
context:
space:
mode:
authorStephen Kraus <8003332+stephenmk@users.noreply.github.com>2023-12-26 23:54:41 -0600
committerGitHub <noreply@github.com>2023-12-27 05:54:41 +0000
commitadc17f4221a0e48da4450695c655632d37eee2a8 (patch)
treed8d56dc1dfae39e6d7ba47c872fabb7110375263 /ext
parent8e95d99e6a1891eaf9331f6384fa3b1a1065b871 (diff)
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>
Diffstat (limited to 'ext')
-rw-r--r--ext/data/schemas/dictionary-term-bank-v3-schema.json69
-rw-r--r--ext/js/display/sandbox/structured-content-generator.js45
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; }
}