Allow clip-path, background, text-emphasis styles in structured…

… content (#556) * Allow `clip-path` and `background` styles in structured content * Allow `text-emphasis` style in structured content --------- Co-authored-by: stephenmk <stephenmk@users.noreply.github.com>
yomidevs · Jan 31, 2024 · 6807b05 · 6807b05
1 parent 8f48d40
commit 6807b05
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 4 deletions.
diff --git a/ext/data/schemas/dictionary-term-bank-v3-schema.json b/ext/data/schemas/dictionary-term-bank-v3-schema.json
@@ -278,6 +278,9 @@
                 "color": {
                     "type": "string"
                 },
+                "background": {
+                    "type": "string"
+                },
                 "backgroundColor": {
                     "type": "string"
                 },
@@ -318,6 +321,9 @@
                 "borderWidth": {
                     "type": "string"
                 },
+                "clipPath": {
+                    "type": "string"
+                },
                 "verticalAlign": {
                     "type": "string",
                     "enum": ["baseline", "sub", "super", "text-top", "text-bottom", "middle", "top", "bottom"],
@@ -328,6 +334,9 @@
                     "enum": ["start", "end", "left", "right", "center", "justify", "justify-all", "match-parent"],
                     "default": "start"
                 },
+                "textEmphasis": {
+                    "type": "string"
+                },
                 "textShadow": {
                     "type": "string"
                 },

diff --git a/ext/js/display/sandbox/structured-content-generator.js b/ext/js/display/sandbox/structured-content-generator.js
@@ -347,6 +347,7 @@ export class StructuredContentGenerator {
             fontWeight,
             fontSize,
             color,
+            background,
             backgroundColor,
             textDecorationLine,
             textDecorationStyle,
@@ -355,8 +356,10 @@ export class StructuredContentGenerator {
             borderStyle,
             borderRadius,
             borderWidth,
+            clipPath,
             verticalAlign,
             textAlign,
+            textEmphasis,
             textShadow,
             margin,
             marginTop,
@@ -377,9 +380,11 @@ export class StructuredContentGenerator {
         if (typeof fontWeight === 'string') { style.fontWeight = fontWeight; }
         if (typeof fontSize === 'string') { style.fontSize = fontSize; }
         if (typeof color === 'string') { style.color = color; }
+        if (typeof background === 'string') { style.background = background; }
         if (typeof backgroundColor === 'string') { style.backgroundColor = backgroundColor; }
         if (typeof verticalAlign === 'string') { style.verticalAlign = verticalAlign; }
         if (typeof textAlign === 'string') { style.textAlign = textAlign; }
+        if (typeof textEmphasis === 'string') { style.textEmphasis = textEmphasis; }
         if (typeof textShadow === 'string') { style.textShadow = textShadow; }
         if (typeof textDecorationLine === 'string') {
             style.textDecoration = textDecorationLine;
@@ -396,6 +401,7 @@ export class StructuredContentGenerator {
         if (typeof borderStyle === 'string') { style.borderStyle = borderStyle; }
         if (typeof borderRadius === 'string') { style.borderRadius = borderRadius; }
         if (typeof borderWidth === 'string') { style.borderWidth = borderWidth; }
+        if (typeof clipPath === 'string') { style.clipPath = clipPath; }
         if (typeof margin === 'string') { style.margin = margin; }
         if (typeof marginTop === 'number') { style.marginTop = `${marginTop}em`; }
         if (typeof marginTop === 'string') { style.marginTop = marginTop; }

diff --git a/test/data/dictionaries/valid-dictionary1/term_bank_2.json b/test/data/dictionaries/valid-dictionary1/term_bank_2.json
@@ -105,6 +105,7 @@
                                                                 "style": {
                                                                     "color": "#dd2121",
                                                                     "textShadow": "0.5px 0.5px 1px gray",
+                                                                    "textEmphasis": "circle crimson",
                                                                     "textDecorationLine": "underline",
                                                                     "textDecorationStyle": "wavy",
                                                                     "textDecorationColor": "red"
@@ -554,7 +555,7 @@
                                                             "padding": "0.15em 0.2em",
                                                             "borderRadius": "100%",
                                                             "cursor": "help",
-                                                            "backgroundColor": "purple",
+                                                            "background": "radial-gradient(purple 55%, black 100%)",
                                                             "color": "white"
                                                         },
                                                         "content": "稀"
@@ -609,11 +610,10 @@
                                                         "textAlign": "center"
                                                     },
                                                     "content": {
-                                                        "tag": "span",
+                                                        "tag": "div",
                                                         "title": "rarely used form",
                                                         "style": {
-                                                            "padding": "0.15em 0.2em",
-                                                            "borderRadius": "100%",
+                                                            "clipPath": "circle()",
                                                             "cursor": "help",
                                                             "backgroundColor": "purple",
                                                             "color": "white"

diff --git a/types/ext/structured-content.d.ts b/types/ext/structured-content.d.ts
@@ -55,6 +55,7 @@ export type StructuredContentStyle = {
     fontWeight?: FontWeight;
     fontSize?: string;
     color?: string;
+    background?: string;
     backgroundColor?: string;
     textDecorationLine?: TextDecorationLineOrNone | TextDecorationLine[];
     textDecorationStyle?: TextDecorationStyle;
@@ -63,8 +64,10 @@ export type StructuredContentStyle = {
     borderStyle?: string;
     borderRadius?: string;
     borderWidth?: string;
+    clipPath?: string;
     verticalAlign?: VerticalAlign;
     textAlign?: TextAlign;
+    textEmphasis?: string;
     textShadow?: string;
     margin?: string;
     marginTop?: number | string;