← All changes | src/hooks/useDefaults.ts +185 -94 1.9.1 → 1.28.0 View file →

		@@ -1,110 +1,201 @@
1	1	import { useEffect, useRef } from '@wordpress/element';
2		-import { Theme } from 'shiki';
3		-import { useGlobalStore } from '../state/global';
4		-import { useThemeStore } from '../state/theme';
5		-import { AttributesPropsAndSetter } from '../types';
	2	+import type { Theme } from 'shiki';
	3	+import { useThemeStore, useThemeStoreReady } from '../state/theme';
	4	+import type { AttributesPropsAndSetter } from '../types';
6	5
7	6	export const useDefaults = ({
8		- attributes,
9		- setAttributes,
	7	+ attributes,
	8	+ setAttributes,
10	9	}: AttributesPropsAndSetter) => {
11		- const {
12		- theme,
13		- fontSize,
14		- fontFamily,
15		- lineHeight,
16		- copyButton,
17		- headerType,
18		- footerType,
19		- clampFonts,
20		- disablePadding,
21		- lineNumbers,
22		- } = attributes;
23		- const { previousSettings } = useGlobalStore();
24		- const {
25		- previousTheme,
26		- previousFontSize,
27		- previousFontFamily,
28		- previousLineHeight,
29		- previousHeaderType,
30		- previousFooterType,
31		- previousClampFonts,
32		- previousDisablePadding,
33		- previousLineNumbers,
34		- } = useThemeStore();
35		- const once = useRef(false);
	10	+ const {
	11	+ theme,
	12	+ fontSize,
	13	+ fontFamily,
	14	+ lineHeight,
	15	+ copyButton,
	16	+ copyButtonType,
	17	+ copyButtonString,
	18	+ copyButtonStringCopied,
	19	+ headerType,
	20	+ footerType,
	21	+ clampFonts,
	22	+ disablePadding,
	23	+ lineNumbers,
	24	+ highlightingHover,
	25	+ tabSize,
	26	+ useTabs,
	27	+ seeMoreType,
	28	+ seeMoreString,
	29	+ seeMoreTransition,
	30	+ seeMoreCollapse,
	31	+ seeMoreCollapseString,
	32	+ } = attributes;
	33	+ const {
	34	+ previousTheme,
	35	+ previousFontSize,
	36	+ previousFontFamily,
	37	+ previousLineHeight,
	38	+ previousHeaderType,
	39	+ previousFooterType,
	40	+ previousClampFonts,
	41	+ previousDisablePadding,
	42	+ previousLineNumbers,
	43	+ previousHighlightingHover,
	44	+ previousCopyButton,
	45	+ previousCopyButtonType,
	46	+ previousCopyButtonString,
	47	+ previousCopyButtonStringCopied,
	48	+ previousCopyButtonUseTextarea,
	49	+ previousTabSize,
	50	+ previousUseTabs,
	51	+ previousSeeMoreType,
	52	+ previousSeeMoreString,
	53	+ previousSeeMoreTransition,
	54	+ previousSeeMoreCollapse,
	55	+ previousSeeMoreCollapseString,
	56	+ } = useThemeStore();
	57	+ const ready = useThemeStoreReady();
	58	+ const once = useRef(false);
36	59
37		- useEffect(() => {
38		- if (once.current) return;
39		- if (copyButton !== undefined || !previousSettings.copyButton) return;
40		- setAttributes({ copyButton: previousSettings.copyButton });
41		- }, [previousSettings, copyButton, setAttributes]);
	60	+ useEffect(() => {
	61	+ if (once.current) return;
	62	+ if (copyButton !== undefined || !previousCopyButton) return;
	63	+ setAttributes({ copyButton: previousCopyButton });
	64	+ }, [previousCopyButton, copyButton, setAttributes]);
42	65
43		- useEffect(() => {
44		- if (once.current) return;
45		- if (theme || !previousTheme) return;
46		- setAttributes({ theme: previousTheme as Theme });
47		- }, [previousTheme, theme, setAttributes]);
	66	+ useEffect(() => {
	67	+ if (once.current) return;
	68	+ if (copyButtonType) return;
	69	+ setAttributes({ copyButtonType: previousCopyButtonType });
	70	+ }, [previousCopyButtonType, copyButtonType, setAttributes]);
48	71
49		- useEffect(() => {
50		- if (once.current) return;
51		- if (fontSize || !previousFontSize) return;
52		- setAttributes({ fontSize: previousFontSize });
53		- }, [previousFontSize, fontSize, setAttributes]);
	72	+ useEffect(() => {
	73	+ if (once.current) return;
	74	+ // Checks undefined to avoid invalidating old blocks
	75	+ if (copyButtonString || copyButtonString === undefined) return;
	76	+ setAttributes({ copyButtonString: previousCopyButtonString });
	77	+ }, [previousCopyButtonString, copyButtonString, setAttributes]);
54	78
55		- useEffect(() => {
56		- if (once.current) return;
57		- if (fontFamily || fontFamily === '' || previousFontFamily === undefined)
58		- return;
59		- setAttributes({ fontFamily: previousFontFamily });
60		- }, [previousFontFamily, fontFamily, setAttributes]);
	79	+ useEffect(() => {
	80	+ if (once.current) return;
	81	+ // Checks undefined to avoid invalidating old blocks
	82	+ if (copyButtonStringCopied || copyButtonStringCopied === undefined) {
	83	+ return;
	84	+ }
	85	+ const cpyP = previousCopyButtonStringCopied;
	86	+ setAttributes({ copyButtonStringCopied: cpyP });
	87	+ }, [previousCopyButtonStringCopied, copyButtonStringCopied, setAttributes]);
61	88
62		- useEffect(() => {
63		- if (once.current) return;
64		- if (lineHeight || !previousLineHeight) return;
65		- setAttributes({ lineHeight: previousLineHeight });
66		- }, [previousLineHeight, lineHeight, setAttributes]);
	89	+ useEffect(() => {
	90	+ if (once.current) return;
	91	+ setAttributes({ copyButtonUseTextarea: previousCopyButtonUseTextarea });
	92	+ }, [previousCopyButtonUseTextarea, setAttributes]);
67	93
68		- useEffect(() => {
69		- if (once.current) return;
70		- if (headerType || !previousHeaderType) return;
71		- setAttributes({ headerType: previousHeaderType });
72		- }, [previousHeaderType, headerType, setAttributes]);
	94	+ useEffect(() => {
	95	+ if (once.current) return;
	96	+ if (theme) return;
	97	+ setAttributes({ theme: previousTheme as Theme });
	98	+ }, [previousTheme, theme, setAttributes]);
73	99
74		- useEffect(() => {
75		- if (once.current) return;
76		- if (footerType !== undefined || previousFooterType === undefined)
77		- return;
78		- setAttributes({ footerType: previousFooterType });
79		- }, [previousFooterType, footerType, setAttributes]);
	100	+ useEffect(() => {
	101	+ if (once.current) return;
	102	+ if (fontSize) return;
	103	+ setAttributes({ fontSize: previousFontSize });
	104	+ }, [previousFontSize, fontSize, setAttributes]);
80	105
81		- useEffect(() => {
82		- if (once.current) return;
83		- if (clampFonts !== undefined || previousClampFonts === undefined)
84		- return;
85		- setAttributes({ clampFonts: previousClampFonts });
86		- }, [previousClampFonts, clampFonts, setAttributes]);
	106	+ useEffect(() => {
	107	+ if (once.current) return;
	108	+ if (fontFamily || fontFamily === '') return;
	109	+ setAttributes({ fontFamily: previousFontFamily });
	110	+ }, [previousFontFamily, fontFamily, setAttributes]);
87	111
88		- useEffect(() => {
89		- if (once.current) return;
90		- if (
91		- disablePadding !== undefined ||
92		- previousDisablePadding === undefined
93		- )
94		- return;
95		- setAttributes({ disablePadding: previousDisablePadding });
96		- }, [previousDisablePadding, disablePadding, setAttributes]);
	112	+ useEffect(() => {
	113	+ if (once.current) return;
	114	+ if (lineHeight) return;
	115	+ setAttributes({ lineHeight: previousLineHeight });
	116	+ }, [previousLineHeight, lineHeight, setAttributes]);
97	117
98		- useEffect(() => {
99		- if (once.current) return;
100		- if (lineNumbers !== undefined || previousLineNumbers === undefined)
101		- return;
102		- setAttributes({ lineNumbers: previousLineNumbers });
103		- }, [previousLineNumbers, lineNumbers, setAttributes]);
	118	+ useEffect(() => {
	119	+ if (once.current) return;
	120	+ if (headerType) return;
	121	+ setAttributes({ headerType: previousHeaderType });
	122	+ }, [previousHeaderType, headerType, setAttributes]);
104	123
105		- useEffect(() => {
106		- requestAnimationFrame(() => {
107		- once.current = true;
108		- });
109		- }, []);
	124	+ useEffect(() => {
	125	+ if (once.current) return;
	126	+ if (footerType !== undefined) return;
	127	+ setAttributes({ footerType: previousFooterType });
	128	+ }, [previousFooterType, footerType, setAttributes]);
	129	+
	130	+ useEffect(() => {
	131	+ if (once.current) return;
	132	+ if (clampFonts !== undefined) return;
	133	+ setAttributes({ clampFonts: previousClampFonts });
	134	+ }, [previousClampFonts, clampFonts, setAttributes]);
	135	+
	136	+ useEffect(() => {
	137	+ if (once.current) return;
	138	+ if (disablePadding !== undefined) return;
	139	+ setAttributes({ disablePadding: previousDisablePadding });
	140	+ }, [previousDisablePadding, disablePadding, setAttributes]);
	141	+
	142	+ useEffect(() => {
	143	+ if (once.current) return;
	144	+ if (lineNumbers !== undefined) return;
	145	+ setAttributes({ lineNumbers: previousLineNumbers });
	146	+ }, [previousLineNumbers, lineNumbers, setAttributes]);
	147	+
	148	+ useEffect(() => {
	149	+ if (once.current) return;
	150	+ if (tabSize !== undefined) return;
	151	+ setAttributes({ tabSize: previousTabSize });
	152	+ }, [previousTabSize, tabSize, setAttributes]);
	153	+
	154	+ useEffect(() => {
	155	+ if (once.current) return;
	156	+ if (useTabs !== undefined) return;
	157	+ setAttributes({ useTabs: previousUseTabs });
	158	+ }, [previousUseTabs, useTabs, setAttributes]);
	159	+
	160	+ useEffect(() => {
	161	+ if (once.current) return;
	162	+ if (seeMoreType !== undefined) return;
	163	+ setAttributes({ seeMoreType: previousSeeMoreType });
	164	+ }, [previousSeeMoreType, seeMoreType, setAttributes]);
	165	+
	166	+ useEffect(() => {
	167	+ if (once.current) return;
	168	+ if (seeMoreString !== undefined) return;
	169	+ setAttributes({ seeMoreString: previousSeeMoreString });
	170	+ }, [previousSeeMoreString, seeMoreString, setAttributes]);
	171	+
	172	+ useEffect(() => {
	173	+ if (once.current) return;
	174	+ if (seeMoreTransition !== undefined) return;
	175	+ setAttributes({ seeMoreTransition: previousSeeMoreTransition });
	176	+ }, [previousSeeMoreTransition, seeMoreTransition, setAttributes]);
	177	+
	178	+ useEffect(() => {
	179	+ if (once.current) return;
	180	+ if (seeMoreCollapse !== undefined) return;
	181	+ setAttributes({ seeMoreCollapse: previousSeeMoreCollapse });
	182	+ }, [previousSeeMoreCollapse, seeMoreCollapse, setAttributes]);
	183	+
	184	+ useEffect(() => {
	185	+ if (once.current) return;
	186	+ if (seeMoreCollapseString !== undefined) return;
	187	+ setAttributes({ seeMoreCollapseString: previousSeeMoreCollapseString });
	188	+ }, [previousSeeMoreCollapseString, seeMoreCollapseString, setAttributes]);
	189	+
	190	+ useEffect(() => {
	191	+ if (once.current) return;
	192	+ if (highlightingHover !== undefined) return;
	193	+ setAttributes({ highlightingHover: previousHighlightingHover });
	194	+ }, [previousHighlightingHover, highlightingHover, setAttributes]);
	195	+
	196	+ useEffect(() => {
	197	+ requestAnimationFrame(() => {
	198	+ once.current = true;
	199	+ });
	200	+ }, [ready]);
110	201	};