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

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

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