← All changes | src/Editor.tsx +102 -91 trunk → 1.26.7 View file →

		@@ -1,107 +1,118 @@
1	1	import { useBlockProps as blockProps } from '@wordpress/block-editor';
2	2	import { applyFilters } from '@wordpress/hooks';
3	3	import classnames from 'classnames';
4	4	import defaultThemes from './defaultThemes.json';
5		-import { ButtonList } from './editor/components/buttons/ButtonList';
	5	+import { Edit } from './editor/Edit';
6	6	import { FooterType } from './editor/components/FooterSelect';
7	7	import { HeaderType } from './editor/components/HeaderSelect';
8	8	import { SeeMoreType } from './editor/components/SeeMoreSelect';
	9	+import { ButtonList } from './editor/components/buttons/ButtonList';
9	10	import { SidebarControls } from './editor/controls/Sidebar';
10	11	import { ToolbarControls } from './editor/controls/Toolbar';
11		-import { Edit } from './editor/Edit';
12		-import type { AttributesPropsAndSetter, ThemeOption } from './types';
	12	+import { AttributesPropsAndSetter } from './types';
	13	+import { ThemeOption } from './types';
13	14	import { findLineNumberColor } from './util/colors';
14	15	import { fontFamilyLong, maybeClamp } from './util/fonts';
15	16
16	17	export const Editor = ({
17		- attributes,
18		- setAttributes,
	18	+ attributes,
	19	+ setAttributes,
19	20	}: AttributesPropsAndSetter) => {
20		- const {
21		- clampFonts,
22		- disablePadding,
23		- enableBlurring,
24		- enableHighlighting,
25		- footerType,
26		- fontSize,
27		- fontFamily,
28		- highestLineNumber,
29		- highlightingHover,
30		- lineHeight,
31		- lineHighlightColor,
32		- lineNumbers,
33		- lineNumbersWidth,
34		- removeBlurOnHover,
35		- startingLineNumber,
36		- tabSize,
37		- theme,
38		- useTabs,
39		- } = attributes;
40		- // To add custom styles
41		- const themes = applyFilters(
42		- 'blocks.codeBlockPro.themes',
43		- defaultThemes,
44		- ) as ThemeOption;
45		- const styles = themes[theme]?.styles;
	21	+ const {
	22	+ clampFonts,
	23	+ disablePadding,
	24	+ enableBlurring,
	25	+ enableHighlighting,
	26	+ footerType,
	27	+ fontSize,
	28	+ fontFamily,
	29	+ highestLineNumber,
	30	+ highlightingHover,
	31	+ lineHeight,
	32	+ lineHighlightColor,
	33	+ lineNumbers,
	34	+ lineNumbersWidth,
	35	+ removeBlurOnHover,
	36	+ startingLineNumber,
	37	+ tabSize,
	38	+ theme,
	39	+ useTabs,
	40	+ } = attributes;
	41	+ // To add custom styles
	42	+ const themes = applyFilters(
	43	+ 'blocks.codeBlockPro.themes',
	44	+ defaultThemes,
	45	+ ) as ThemeOption;
	46	+ const styles = themes[theme]?.styles;
46	47
47		- return (
48		- <>
49		- <SidebarControls attributes={attributes} setAttributes={setAttributes} />
50		- <ToolbarControls attributes={attributes} setAttributes={setAttributes} />
51		- <div
52		- {...blockProps({
53		- className: classnames('code-block-pro-editor', {
54		- 'padding-disabled': disablePadding,
55		- 'padding-bottom-disabled': footerType && footerType !== 'none',
56		- 'cbp-has-line-numbers': lineNumbers,
57		- 'cbp-blur-enabled': enableBlurring,
58		- 'cbp-unblur-on-hover': removeBlurOnHover,
59		- 'cbp-highlight-hover': highlightingHover,
60		- }),
61		- style: {
62		- fontSize: maybeClamp(fontSize, clampFonts),
63		- '--cbp-line-number-color': lineNumbers
64		- ? findLineNumberColor(attributes)
65		- : undefined,
66		- '--cbp-line-number-start':
67		- Number(startingLineNumber) > 1 ? startingLineNumber : undefined,
68		- '--cbp-line-number-width': highestLineNumber
69		- ? `calc(${String(highestLineNumber).length} * ${fontSize})`
70		- : lineNumbersWidth // bw compatability
71		- ? `${lineNumbersWidth}px`
72		- : undefined,
73		- '--cbp-line-highlight-color':
74		- enableHighlighting || highlightingHover
75		- ? lineHighlightColor
76		- : undefined,
77		- '--cbp-line-height': lineHeight,
78		- tabSize:
79		- useTabs === undefined
80		- ? undefined // bw compatability
81		- : tabSize,
82		- fontFamily: fontFamilyLong(fontFamily),
83		- lineHeight: maybeClamp(lineHeight, clampFonts),
84		- ...Object.entries(styles ?? {}).reduce(
85		- (acc, [key, value]) => ({
86		- ...acc,
87		- [`--shiki-${key}`]: value,
88		- }),
89		- {},
90		- ),
91		- ...(applyFilters(
92		- 'blocks.codeBlockPro.additionalEditorAttributes',
93		- {},
94		- attributes,
95		- ) as object),
96		- },
97		- })}
98		- >
99		- <HeaderType {...attributes} />
100		- <ButtonList {...attributes} />
101		- <Edit attributes={attributes} setAttributes={setAttributes} />
102		- <FooterType {...attributes} />
103		- <SeeMoreType {...attributes} />
104		- </div>
105		- </>
106		- );
	48	+ return (
	49	+ <>
	50	+ <SidebarControls
	51	+ attributes={attributes}
	52	+ setAttributes={setAttributes}
	53	+ />
	54	+ <ToolbarControls
	55	+ attributes={attributes}
	56	+ setAttributes={setAttributes}
	57	+ />
	58	+ <div
	59	+ {...blockProps({
	60	+ className: classnames('code-block-pro-editor', {
	61	+ 'padding-disabled': disablePadding,
	62	+ 'padding-bottom-disabled':
	63	+ footerType && footerType !== 'none',
	64	+ 'cbp-has-line-numbers': lineNumbers,
	65	+ 'cbp-blur-enabled': enableBlurring,
	66	+ 'cbp-unblur-on-hover': removeBlurOnHover,
	67	+ 'cbp-highlight-hover': highlightingHover,
	68	+ }),
	69	+ style: {
	70	+ fontSize: maybeClamp(fontSize, clampFonts),
	71	+ '--cbp-line-number-color': lineNumbers
	72	+ ? findLineNumberColor(attributes)
	73	+ : undefined,
	74	+ '--cbp-line-number-start':
	75	+ Number(startingLineNumber) > 1
	76	+ ? startingLineNumber
	77	+ : undefined,
	78	+ '--cbp-line-number-width': highestLineNumber
	79	+ ? `calc(${
	80	+ String(highestLineNumber).length
	81	+ } * ${fontSize})`
	82	+ : lineNumbersWidth // bw compatability
	83	+ ? `${lineNumbersWidth}px`
	84	+ : undefined,
	85	+ '--cbp-line-highlight-color':
	86	+ enableHighlighting || highlightingHover
	87	+ ? lineHighlightColor
	88	+ : undefined,
	89	+ '--cbp-line-height': lineHeight,
	90	+ tabSize:
	91	+ useTabs === undefined
	92	+ ? undefined // bw compatability
	93	+ : tabSize,
	94	+ fontFamily: fontFamilyLong(fontFamily),
	95	+ lineHeight: maybeClamp(lineHeight, clampFonts),
	96	+ ...Object.entries(styles ?? {}).reduce(
	97	+ (acc, [key, value]) => ({
	98	+ ...acc,
	99	+ [`--shiki-${key}`]: value,
	100	+ }),
	101	+ {},
	102	+ ),
	103	+ ...(applyFilters(
	104	+ 'blocks.codeBlockPro.additionalEditorAttributes',
	105	+ {},
	106	+ attributes,
	107	+ ) as object),
	108	+ },
	109	+ })}>
	110	+ <HeaderType {...attributes} />
	111	+ <ButtonList {...attributes} />
	112	+ <Edit attributes={attributes} setAttributes={setAttributes} />
	113	+ <FooterType {...attributes} />
	114	+ <SeeMoreType {...attributes} />
	115	+ </div>
	116	+ </>
	117	+ );
107	118	};