← All changes | src/index.tsx +68 -18 1.4.0 → 1.13.0 View file →

		@@ -1,19 +1,23 @@
1	1	import { useBlockProps as blockProps } from '@wordpress/block-editor';
2	2	import { createBlock, registerBlockType } from '@wordpress/blocks';
3	3	import { addFilter } from '@wordpress/hooks';
4	4	import { __ } from '@wordpress/i18n';
5		-import { Lang } from 'shiki';
	5	+import classnames from 'classnames';
6	6	import blockConfig from './block.json';
7	7	import { Edit } from './editor/Edit';
8	8	import { BlockFilter } from './editor/components/BlockFilter';
9		-import { HeaderType } from './editor/components/HeaderType';
	9	+import { FooterType } from './editor/components/FooterSelect';
	10	+import { HeaderType } from './editor/components/HeaderSelect';
	11	+import { SeeMoreType } from './editor/components/SeeMoreSelect';
10	12	import { SidebarControls } from './editor/controls/Sidebar';
11	13	import { ToolbarControls } from './editor/controls/Toolbar';
12	14	import './editor/editor.css';
13	15	import { BlockOutput } from './front/BlockOutput';
	16	+import { CopyButton } from './front/CopyButton';
14	17	import { blockIcon } from './icons';
15		-import { Attributes } from './types';
	18	+import { Attributes, Lang } from './types';
	19	+import { fontFamilyLong, maybeClamp } from './util/fonts';
16	20	import { getMainAlias } from './util/languages';
17	21
18	22	registerBlockType<Attributes>(blockConfig.name, {
19	23	...blockConfig,
		@@ -29,11 +33,31 @@
29	33	textColor: { type: 'string', default: '#f8f8f2' },
30	34	fontSize: { type: 'string' },
31	35	fontFamily: { type: 'string' },
32	36	lineHeight: { type: 'string' },
	37	+ clampFonts: { type: 'boolean' },
	38	+ editorHeight: { type: 'string' },
33	39	lineNumbers: { type: 'boolean' },
34	40	headerType: { type: 'string' },
35		- startingLineNumber: { type: 'number', default: 1 },
	41	+ headerString: { type: 'string' },
	42	+ disablePadding: { type: 'boolean' },
	43	+ footerType: { type: 'string' },
	44	+ footerString: { type: 'string' },
	45	+ footerLink: { type: 'string' },
	46	+ footerLinkTarget: { type: 'boolean' },
	47	+ enableMaxHeight: { type: 'boolean' },
	48	+ seeMoreType: { type: 'string' },
	49	+ seeMoreString: { type: 'string' },
	50	+ seeMoreAfterLine: { type: 'string' },
	51	+ seeMoreTransition: { type: 'boolean' },
	52	+ startingLineNumber: { type: 'string' },
	53	+ lineNumbersWidth: { type: 'number' },
	54	+ enableHighlighting: { type: 'boolean' },
	55	+ lineHighlights: { type: 'string' },
	56	+ lineHighlightColor: { type: 'string' },
	57	+ enableBlurring: { type: 'boolean' },
	58	+ lineBlurs: { type: 'string' },
	59	+ removeBlurOnHover: { type: 'boolean' },
36	60	frame: { type: 'boolean' },
37	61	renderType: { type: 'string', default: 'code' },
38	62	label: { type: 'string', default: '' },
39	63	copyButton: { type: 'boolean' },
		@@ -55,27 +79,53 @@
55	79	setAttributes={setAttributes}
56	80	/>
57	81	<div
58	82	{...blockProps({
59		- className: 'code-block-pro-editor',
	83	+ className: classnames('code-block-pro-editor', {
	84	+ 'padding-disabled': attributes.disablePadding,
	85	+ 'padding-bottom-disabled':
	86	+ attributes?.footerType &&
	87	+ attributes?.footerType !== 'none',
	88	+ 'cbp-has-line-numbers': attributes.lineNumbers,
	89	+ 'cbp-blur-enabled': attributes.enableBlurring,
	90	+ 'cbp-unblur-on-hover': attributes.removeBlurOnHover,
	91	+ }),
60	92	style: {
61		- fontSize: attributes.fontSize,
62		- fontFamily: [
63		- attributes.fontFamily,
64		- 'ui-monospace',
65		- 'SFMono-Regular',
66		- 'Menlo',
67		- 'Monaco',
68		- 'Consolas',
69		- 'monospace',
70		- ]
71		- .filter(Boolean)
72		- .join(','),
73		- lineHeight: attributes.lineHeight,
	93	+ fontSize: maybeClamp(
	94	+ attributes.fontSize,
	95	+ attributes.clampFonts,
	96	+ ),
	97	+ '--cbp-line-number-color': attributes?.lineNumbers
	98	+ ? attributes.textColor
	99	+ : undefined,
	100	+ '--cbp-line-number-start':
	101	+ Number(attributes?.startingLineNumber) > 1
	102	+ ? attributes.startingLineNumber
	103	+ : undefined,
	104	+ '--cbp-line-number-width': attributes.lineNumbersWidth
	105	+ ? `${attributes.lineNumbersWidth}px`
	106	+ : undefined,
	107	+ '--cbp-line-highlight-color':
	108	+ attributes?.enableHighlighting
	109	+ ? attributes.lineHighlightColor
	110	+ : undefined,
	111	+ '--cbp-line-height': attributes.lineHeight,
	112	+ // Disabled as ligatures will break the editor line widths
	113	+ // fontFamily: fontFamilyLong(attributes.fontFamily),
	114	+ fontFamily: fontFamilyLong(''),
	115	+ lineHeight: maybeClamp(
	116	+ attributes.lineHeight,
	117	+ attributes.clampFonts,
	118	+ ),
74	119	},
75	120	})}>
76	121	<HeaderType {...attributes} />
	122	+ {attributes.copyButton && (
	123	+ <CopyButton attributes={attributes} />
	124	+ )}
77	125	<Edit attributes={attributes} setAttributes={setAttributes} />
	126	+ <FooterType {...attributes} />
	127	+ <SeeMoreType {...attributes} />
78	128	</div>
79	129	</>
80	130	),
81	131	save: ({ attributes }) => <BlockOutput attributes={attributes} />,