← All changes | src/editor/components/headers/SimpleString.tsx +19 -12 1.9.3 → 1.26.7 View file →

		@@ -1,19 +1,26 @@
1	1	import { colord, AnyColor } from 'colord';
2		-import { Lang } from 'shiki';
3		-import { Attributes } from '../../../types';
	2	+import { Attributes, Lang } from '../../../types';
	3	+import { findBackgroundColor, findTextColor } from '../../../util/colors';
4	4	import { languages } from '../../../util/languages';
5	5
6		-export const SimpleString = ({
7		- language,
8		- bgColor,
9		- textColor,
10		- headerString,
11		-}: Partial<Attributes>) => {
	6	+export const SimpleString = (attributes: Attributes) => {
	7	+ const { language, bgColor, textColor, headerString } = attributes;
12	8	const bgC = colord(bgColor as AnyColor);
13		- const bg = bgC.isDark() ? bgC.lighten(0.05) : bgC.darken(0.05);
	9	+ let bg = bgC.isDark()
	10	+ ? bgC.lighten(0.05).toHex()
	11	+ : bgC.darken(0.05).toHex();
14	12	const textC = colord(textColor as AnyColor);
15		- const text = textC.isDark() ? textC.lighten(0.05) : textC.darken(0.05);
	13	+ let text = textC.isDark()
	14	+ ? textC.lighten(0.05).toHex()
	15	+ : textC.darken(0.05).toHex();
	16	+
	17	+ if (bgColor?.startsWith('var(')) {
	18	+ bg = findBackgroundColor(attributes) ?? bgColor;
	19	+ }
	20	+ if (textColor?.startsWith('var(')) {
	21	+ text = findTextColor(attributes) ?? textColor;
	22	+ }
16	23	return (
17	24	<span
18	25	style={{
19	26	display: 'flex',
		@@ -21,10 +28,10 @@
21	28	padding: '10px 0px 10px 16px',
22	29	marginBottom: '-2px',
23	30	width: '100%',
24	31	textAlign: 'left',
25		- backgroundColor: bg.toHex(),
26		- color: text.toHex(),
	32	+ backgroundColor: bg,
	33	+ color: text,
27	34	}}>
28	35	{headerString || languages[language as Lang]}
29	36	</span>
30	37	);