← All changes | src/state/theme.ts +49 -109 1.27.4 → 1.13.0 View file →

		@@ -1,9 +1,7 @@
1	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';
	2	+import create from 'zustand';
	3	+import { devtools, persist } from 'zustand/middleware';
6	4	import { Attributes } from '../types';
7	5
8	6	type ThemeType = {
9	7	previousTheme: string;
		@@ -14,26 +12,11 @@
14	12	previousFooterType?: string;
15	13	previousClampFonts?: boolean;
16	14	previousDisablePadding?: boolean;
17	15	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	16	updateThemeHistory: (settings: Partial<Attributes>) => void;
34	17	};
35		-const path = '/code-block-pro/v1/settings';
	18	+const path = '/wp/v2/settings';
36	19	const getSettings = async (name: string) => {
37	20	const allSettings = await apiFetch({ path });
38	21	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
39	22	// @ts-ignore-next-line
		@@ -38,85 +21,34 @@
38	21	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
39	22	// @ts-ignore-next-line
40	23	return allSettings?.[name];
41	24	};
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	25	export const useThemeStore = create<ThemeType>()(
96	26	persist(
97	27	devtools(
98	28	(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		- });
	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	+ }));
119	51	},
120	52	}),
121	53	{ name: 'Code Block Pro Theme Settings' },
122	54	),
		@@ -121,23 +53,31 @@
121	53	{ name: 'Code Block Pro Theme Settings' },
122	54	),
123	55	{
124	56	name: 'code_block_pro_settings',
125		- storage: createJSONStorage(() => storage),
	57	+ getStorage: () => ({
	58	+ getItem: async (name: string) => {
	59	+ const settings = await getSettings(name);
	60	+ return JSON.stringify({
	61	+ version: settings?.version ?? 0,
	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	+ }),
126	81	},
127	82	),
128	83	);
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		-};