← All changes | src/state/theme.ts +14 -127 1.27.1 → 1.2.4 View file →

		@@ -1,141 +1,28 @@
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';
	1	+import { Theme } from 'shiki';
	2	+import create from 'zustand';
	3	+import { devtools, persist } from 'zustand/middleware';
7	4
8	5	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;
	6	+ previousTheme: Theme;
	7	+ setPreviousTheme: (theme: Theme) => void;
33	8	};
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	9	export const useThemeStore = create<ThemeType>()(
94	10	persist(
95	11	devtools(
96	12	(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		- });
	13	+ previousTheme: 'nord',
	14	+ setPreviousTheme(theme: Theme) {
	15	+ set({ previousTheme: theme });
117	16	},
118	17	}),
119		- { name: 'Code Block Pro Theme Settings' },
	18	+ { name: 'Code Block Pro Theme' },
120	19	),
121	20	{
122		- name: 'code_block_pro_settings',
123		- storage: createJSONStorage(() => storage),
	21	+ name: 'code-block-pro-last-theme',
	22	+ getStorage: () => localStorage,
	23	+ partialize: (state) => ({
	24	+ previousTheme: state?.previousTheme ?? null,
	25	+ }),
124	26	},
125	27	),
126	28	);
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		-};