code-block-pro / src / state / theme.ts

theme.ts in Code Block Pro – Beautiful Syntax Highlighting 1.22.0, at src/state/theme.ts

120 lines 4.2 KB

Raw Download Zip

1	import apiFetch from '@wordpress/api-fetch';
2	import { useEffect, useState } from '@wordpress/element';
3	import { create } from 'zustand';
4	import { createJSONStorage, devtools, persist } from 'zustand/middleware';
5	import { Attributes } from '../types';
6
7	type ThemeType = {
8	previousTheme: string;
9	previousLineHeight: string;
10	previousFontFamily?: string;
11	previousFontSize: string;
12	previousHeaderType: string;
13	previousFooterType?: string;
14	previousClampFonts?: boolean;
15	previousDisablePadding?: boolean;
16	previousLineNumbers?: boolean;
17	previousHighlightingHover?: boolean;
18	previousCopyButton: boolean;
19	previousCopyButtonType: string;
20	previousTabSize: number;
21	previousUseTabs?: boolean;
22	updateThemeHistory: (settings: Partial<Attributes>) => void;
23	};
24	const path = '/code-block-pro/v1/settings';
25	const getSettings = async (name: string) => {
26	const allSettings = await apiFetch({ path });
27	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
28	// @ts-ignore-next-line
29	return allSettings?.[name];
30	};
31	const defaultSettings = {
32	previousTheme: 'nord',
33	previousLineHeight: '1.25rem',
34	previousFontFamily: 'Code-Pro-JetBrains-Mono',
35	previousFontSize: '.875rem',
36	previousHeaderType: 'headlights',
37	previousFooterType: undefined,
38	previousClampFonts: undefined,
39	previousDisablePadding: undefined,
40	previousLineNumbers: undefined,
41	previousHighlightingHover: undefined,
42	previousCopyButton: true,
43	previousCopyButtonType: 'heroicons',
44	previousTabSize: 2,
45	previousUseTabs: undefined,
46	};
47	const storage = {
48	getItem: async (name: string) => {
49	const settings = await getSettings(name);
50	return JSON.stringify({
51	version: settings?.version ?? 0,
52	state: settings \|\| defaultSettings,
53	});
54	},
55	setItem: async (name: string, value: string) => {
56	const { state, version } = JSON.parse(value);
57	const data = {
58	[name]: Object.assign(
59	(await getSettings(name)) \|\| defaultSettings,
60	state,
61	version,
62	),
63	};
64	await apiFetch({ path, method: 'POST', data });
65	},
66	removeItem: async (name: string) => {
67	const data = { [name]: null };
68	await apiFetch({ path, method: 'POST', data });
69	return undefined;
70	},
71	};
72	export const useThemeStore = create<ThemeType>()(
73	persist(
74	devtools(
75	(set) => ({
76	...defaultSettings,
77	updateThemeHistory(attributes) {
78	set((state) => ({
79	...state,
80	previousTheme: attributes.theme,
81	previousLineHeight: attributes.lineHeight,
82	previousFontFamily: attributes.fontFamily,
83	previousFontSize: attributes.fontSize,
84	previousHeaderType: attributes.headerType,
85	previousFooterType: attributes.footerType,
86	previousClampFonts: attributes.clampFonts,
87	previousDisablePadding: attributes.disablePadding,
88	previousLineNumbers: attributes.lineNumbers,
89	previousHighlightingHover: attributes.highlightingHover,
90	previousCopyButton: attributes.copyButton,
91	previousCopyButtonType: attributes.copyButtonType,
92	previousTabSize: attributes.tabSize,
93	previousUseTabs: attributes.useTabs,
94	}));
95	},
96	}),
97	{ name: 'Code Block Pro Theme Settings' },
98	),
99	{
100	name: 'code_block_pro_settings',
101	storage: createJSONStorage(() => storage),
102	},
103	),
104	);
105
106	// const useThemeStoreReady =
107	/* Hook useful for when you need to wait on the async state to hydrate */
108	export const useThemeStoreReady = () => {
109	const [hydrated, setHydrated] = useState(useThemeStore.persist.hasHydrated);
110	useEffect(() => {
111	const unsubFinishHydration = useThemeStore.persist.onFinishHydration(
112	() => setHydrated(true),
113	);
114	return () => {
115	unsubFinishHydration();
116	};
117	}, []);
118	return hydrated;
119	};
120