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

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

144 lines 5.0 KB

Raw Download Zip

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