a tool for shared writing and social publishing
set highlight attribute in rendered block to html
+14
-8
+14
-8
components/TextBlock/RenderYJSFragment.tsx
+14
-8
components/TextBlock/RenderYJSFragment.tsx
···
86
86
};
87
87
88
88
function attributesToStyle(d: Delta) {
89
-
let props = { style: {} as CSSProperties, className: "" };
89
+
let props = {
90
+
style: {},
91
+
className: "",
92
+
} as { style: CSSProperties; className: string } & {
93
+
[s: `data-${string}`]: any;
94
+
};
90
95
if (d.attributes?.strong) props.style.fontWeight = "700";
91
96
if (d.attributes?.em) props.style.fontStyle = "italic";
92
97
if (d.attributes?.underline) props.style.textDecoration = "underline";
···
95
100
(props.style.textDecorationColor = theme.colors.tertiary);
96
101
}
97
102
if (d.attributes?.highlight) {
98
-
(props.className = "highlight"),
99
-
(props.style.backgroundColor =
100
-
d.attributes?.highlight.color === "1"
101
-
? theme.colors["highlight-1"]
102
-
: d.attributes.highlight.color === "2"
103
-
? theme.colors["highlight-2"]
104
-
: theme.colors["highlight-3"]);
103
+
props.className = "highlight";
104
+
props["data-color"] = d.attributes.highlight.color;
105
+
props.style.backgroundColor =
106
+
d.attributes?.highlight.color === "1"
107
+
? theme.colors["highlight-1"]
108
+
: d.attributes.highlight.color === "2"
109
+
? theme.colors["highlight-2"]
110
+
: theme.colors["highlight-3"];
105
111
}
106
112
107
113
return props;