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

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

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