← All changes | src/state/theme.ts +103 -49 1.9.3 → 1.26.7 View file →

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