← All changes | src/state/theme.ts +49 -107 1.27.1 → 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,25 +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		- 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	16	updateThemeHistory: (settings: Partial<Attributes>) => void;
33	17	};
34		-const path = '/code-block-pro/v1/settings';
	18	+const path = '/wp/v2/settings';
35	19	const getSettings = async (name: string) => {
36	20	const allSettings = await apiFetch({ path });
37	21	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
38	22	// @ts-ignore-next-line
		@@ -37,84 +21,34 @@
37	21	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
38	22	// @ts-ignore-next-line
39	23	return allSettings?.[name];
40	24	};
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	25	export const useThemeStore = create<ThemeType>()(
94	26	persist(
95	27	devtools(
96	28	(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		- });
	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	+ }));
117	51	},
118	52	}),
119	53	{ name: 'Code Block Pro Theme Settings' },
120	54	),
		@@ -119,23 +53,31 @@
119	53	{ name: 'Code Block Pro Theme Settings' },
120	54	),
121	55	{
122	56	name: 'code_block_pro_settings',
123		- 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	+ }),
124	81	},
125	82	),
126	83	);
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		-};