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

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

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