← All changes | src/front/BlockOutput.tsx +110 -53 1.9.3 → 1.26.7 View file →

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