← All changes | src/front/BlockOutput.tsx +110 -55 1.9.1 → 1.28.0 View file →

		@@ -1,61 +1,116 @@
1		-import { RichText, useBlockProps as blockProps } from '@wordpress/block-editor';
	1	+import { useBlockProps as blockProps, RichText } from '@wordpress/block-editor';
	2	+import { applyFilters } from '@wordpress/hooks';
2	3	import classNames from 'classnames';
	4	+import defaultThemes from '../defaultThemes.json';
	5	+import { ButtonList } from '../editor/components/buttons/ButtonList';
3	6	import { FooterType } from '../editor/components/FooterSelect';
4	7	import { HeaderType } from '../editor/components/HeaderSelect';
5		-import { Attributes } from '../types';
	8	+import { SeeMoreType } from '../editor/components/SeeMoreSelect';
	9	+import type { 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
37		- : 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		-);
	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': footerType && footerType !== 'none',
	53	+ 'cbp-has-line-numbers': lineNumbers,
	54	+ 'cbp-blur-enabled': enableBlurring,
	55	+ 'cbp-unblur-on-hover': removeBlurOnHover,
	56	+ 'cbp-highlight-hover': highlightingHover,
	57	+ }),
	58	+ })}
	59	+ data-code-block-pro-font-family={fontFamily}
	60	+ style={
	61	+ {
	62	+ fontSize: maybeClamp(fontSize, clampFonts),
	63	+ // Tiny check to avoid block invalidation error
	64	+ fontFamily: fontFamilyLong(fontFamily),
	65	+ '--cbp-line-number-color': lineNumbers
	66	+ ? findLineNumberColor(attributes)
	67	+ : undefined,
	68	+ '--cbp-line-number-start':
	69	+ Number(startingLineNumber) > 1 ? startingLineNumber : undefined,
	70	+ '--cbp-line-number-width': highestLineNumber
	71	+ ? `calc(${
	72	+ String(highestLineNumber).length
	73	+ } * ${fontFamilyRatio(fontFamily)} * ${fontSize})`
	74	+ : lineNumbersWidth
	75	+ ? `${lineNumbersWidth}px`
	76	+ : undefined,
	77	+ '--cbp-line-highlight-color':
	78	+ enableHighlighting || highlightingHover
	79	+ ? lineHighlightColor
	80	+ : undefined,
	81	+ lineHeight: maybeClamp(lineHeight, clampFonts),
	82	+ '--cbp-tab-width':
	83	+ useTabs === undefined
	84	+ ? undefined // bw compatibility
	85	+ : String(tabSize),
	86	+ tabSize:
	87	+ useTabs === undefined
	88	+ ? undefined // bw compatibility
	89	+ : 'var(--cbp-tab-width, 2)',
	90	+ ...Object.entries(styles ?? {}).reduce(
	91	+ (acc, [key, value]) => ({
	92	+ ...acc,
	93	+ [`--shiki-${key}`]: value,
	94	+ }),
	95	+ {},
	96	+ ),
	97	+ ...(applyFilters(
	98	+ 'blocks.codeBlockPro.additionalOutputAttributes',
	99	+ {},
	100	+ attributes,
	101	+ ) as object),
	102	+ } as React.CSSProperties
	103	+ }
	104	+ >
	105	+ {code?.length > 0 ? (
	106	+ <>
	107	+ <HeaderType {...attributes} />
	108	+ <ButtonList {...attributes} />
	109	+ <RichText.Content value={codeHTML} />
	110	+ <FooterType {...attributes} />
	111	+ <SeeMoreType {...attributes} />
	112	+ </>
	113	+ ) : null}
	114	+ </div>
	115	+ );
	116	+};