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

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

133 lines 4.5 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	// previousEnableMaxHeight?: boolean;
23	// previousSeeMoreAfterLine?: string;
24	previousSeeMoreType?: string;
25	previousSeeMoreString?: string;
26	previousSeeMoreTransition?: boolean;
27	updateThemeHistory: (settings: Partial<Attributes>) => void;
28	};
29	const path = '/code-block-pro/v1/settings';
30	const getSettings = async (name: string) => {
31	const allSettings = await apiFetch({ path });
32	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
33	// @ts-ignore-next-line
34	return allSettings?.[name];
35	};
36	const defaultSettings = {
37	previousTheme: 'nord',
38	previousLineHeight: '1.25rem',
39	previousFontFamily: 'Code-Pro-JetBrains-Mono',
40	previousFontSize: '.875rem',
41	previousHeaderType: 'headlights',
42	previousFooterType: 'none',
43	previousClampFonts: false,
44	previousDisablePadding: false,
45	previousLineNumbers: false,
46	previousHighlightingHover: false,
47	previousCopyButton: true,
48	previousCopyButtonType: 'heroicons',
49	previousTabSize: 2,
50	previousUseTabs: false,
51	// TODO: maybe impliment these with an extra UI to make them optional
52	// previousEnableMaxHeight: undefined,
53	// previousSeeMoreAfterLine: undefined,
54	previousSeeMoreType: '',
55	previousSeeMoreString: '',
56	previousSeeMoreTransition: false,
57	};
58	const storage = {
59	getItem: async (name: string) => {
60	const settings = await getSettings(name);
61	return JSON.stringify({
62	version: settings?.version ?? 0,
63	state: settings \|\| defaultSettings,
64	});
65	},
66	setItem: async (name: string, value: string) => {
67	const { state, version } = JSON.parse(value);
68	const data = {
69	[name]: Object.assign(
70	(await getSettings(name)) \|\| defaultSettings,
71	state,
72	version,
73	),
74	};
75	await apiFetch({ path, method: 'POST', data });
76	},
77	removeItem: async (name: string) => {
78	const data = { [name]: null };
79	await apiFetch({ path, method: 'POST', data });
80	return undefined;
81	},
82	};
83
84	export const useThemeStore = create<ThemeType>()(
85	persist(
86	devtools(
87	(set) => ({
88	...defaultSettings,
89	updateThemeHistory(attributes: Partial<Attributes>) {
90	set((state) => {
91	return Object.keys(attributes).reduce<
92	Partial<ThemeType>
93	>(
94	(acc, attr) => {
95	const att = attr as keyof Attributes;
96	const fmted = `previous${
97	attr.charAt(0).toUpperCase() + attr.slice(1)
98	}` as keyof ThemeType;
99	const keyExists =
100	Object.keys(state).includes(fmted);
101	return keyExists
102	? { ...acc, [fmted]: attributes[att] }
103	: acc;
104	},
105	{ ...state },
106	);
107	});
108	},
109	}),
110	{ name: 'Code Block Pro Theme Settings' },
111	),
112	{
113	name: 'code_block_pro_settings',
114	storage: createJSONStorage(() => storage),
115	},
116	),
117	);
118
119	// const useThemeStoreReady =
120	/* Hook useful for when you need to wait on the async state to hydrate */
121	export const useThemeStoreReady = () => {
122	const [hydrated, setHydrated] = useState(useThemeStore.persist.hasHydrated);
123	useEffect(() => {
124	const unsubFinishHydration = useThemeStore.persist.onFinishHydration(
125	() => setHydrated(true),
126	);
127	return () => {
128	unsubFinishHydration();
129	};
130	}, []);
131	return hydrated;
132	};
133