← All changes | src/state/theme.ts +75 -129 1.28.0 → 1.13.0 View file →

		@@ -1,137 +1,83 @@
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';
6		-import type { Attributes } from '../types';
	2	+import create from 'zustand';
	3	+import { devtools, persist } from 'zustand/middleware';
	4	+import { Attributes } from '../types';
7	5
8	6	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		- 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		- updateThemeHistory: (settings: Partial<Attributes>) => void;
	7	+ previousTheme: string;
	8	+ previousLineHeight: string;
	9	+ previousFontFamily?: string;
	10	+ previousFontSize: string;
	11	+ previousHeaderType: string;
	12	+ previousFooterType?: string;
	13	+ previousClampFonts?: boolean;
	14	+ previousDisablePadding?: boolean;
	15	+ previousLineNumbers?: boolean;
	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		- const allSettings = await apiFetch({ path });
38		- // @ts-expect-error-next-line
39		- return allSettings?.[name];
	20	+ const allSettings = await apiFetch({ path });
	21	+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
	22	+ // @ts-ignore-next-line
	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		- previousCopyButtonUseTextarea: true,
57		- previousTabSize: 2,
58		- previousUseTabs: false,
59		- // TODO: maybe impliment these with an extra UI to make them optional
60		- // previousEnableMaxHeight: undefined,
61		- // previousSeeMoreAfterLine: undefined,
62		- previousSeeMoreType: '',
63		- previousSeeMoreString: '',
64		- previousSeeMoreTransition: false,
65		- previousSeeMoreCollapse: false,
66		- previousSeeMoreCollapseString: '',
67		-};
68		-const storage = {
69		- getItem: async (name: string) => {
70		- const settings = await getSettings(name);
71		- return JSON.stringify({
72		- version: settings?.version ?? 0,
73		- state: settings || defaultSettings,
74		- });
75		- },
76		- setItem: async (name: string, value: string) => {
77		- const { state, version } = JSON.parse(value);
78		- const data = {
79		- [name]: Object.assign(
80		- (await getSettings(name)) || defaultSettings,
81		- state,
82		- version,
83		- ),
84		- };
85		- await apiFetch({ path, method: 'POST', data });
86		- },
87		- removeItem: async (name: string) => {
88		- const data = { [name]: null };
89		- await apiFetch({ path, method: 'POST', data });
90		- return undefined;
91		- },
92		-};
93		-
94	25	export const useThemeStore = create<ThemeType>()(
95		- persist(
96		- devtools(
97		- (set) => ({
98		- ...defaultSettings,
99		- updateThemeHistory(attributes: Partial<Attributes>) {
100		- set((state) => {
101		- return Object.keys(attributes).reduce<Partial<ThemeType>>(
102		- (acc, attr) => {
103		- const att = attr as keyof Attributes;
104		- const fmted = `previous${
105		- attr.charAt(0).toUpperCase() + attr.slice(1)
106		- }` as keyof ThemeType;
107		- const keyExists = Object.keys(state).includes(fmted);
108		- return keyExists ? { ...acc, [fmted]: attributes[att] } : acc;
109		- },
110		- { ...state },
111		- );
112		- });
113		- },
114		- }),
115		- { name: 'Code Block Pro Theme Settings' },
116		- ),
117		- {
118		- name: 'code_block_pro_settings',
119		- storage: createJSONStorage(() => storage),
120		- },
121		- ),
	26	+ persist(
	27	+ devtools(
	28	+ (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	+ }));
	51	+ },
	52	+ }),
	53	+ { name: 'Code Block Pro Theme Settings' },
	54	+ ),
	55	+ {
	56	+ 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 ?? 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	+ }),
	81	+ },
	82	+ ),
122	83	);
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		-};