← All changes | src/index.tsx +85 -34 1.27.6 → 1.13.0 View file →

		@@ -1,19 +1,25 @@
1		-import { registerBlockType } from '@wordpress/blocks';
	1	+import { useBlockProps as blockProps } from '@wordpress/block-editor';
	2	+import { createBlock, registerBlockType } from '@wordpress/blocks';
2	3	import { addFilter } from '@wordpress/hooks';
3	4	import { __ } from '@wordpress/i18n';
4		-import { Editor } from './Editor';
	5	+import classnames from 'classnames';
5	6	import blockConfig from './block.json';
	7	+import { Edit } from './editor/Edit';
6	8	import { BlockFilter } from './editor/components/BlockFilter';
	9	+import { FooterType } from './editor/components/FooterSelect';
	10	+import { HeaderType } from './editor/components/HeaderSelect';
	11	+import { SeeMoreType } from './editor/components/SeeMoreSelect';
	12	+import { SidebarControls } from './editor/controls/Sidebar';
	13	+import { ToolbarControls } from './editor/controls/Toolbar';
7	14	import './editor/editor.css';
8		-import { transformToCBP, transformFromCBP } from './editor/transforms';
9	15	import { BlockOutput } from './front/BlockOutput';
	16	+import { CopyButton } from './front/CopyButton';
10	17	import { blockIcon } from './icons';
11		-import { Attributes } from './types';
12		-import { handleValidationErrors } from './util/errors';
	18	+import { Attributes, Lang } from './types';
	19	+import { fontFamilyLong, maybeClamp } from './util/fonts';
	20	+import { getMainAlias } from './util/languages';
13	21
14		-handleValidationErrors();
15		-
16	22	registerBlockType<Attributes>(blockConfig.name, {
17	23	...blockConfig,
18	24	icon: blockIcon,
19	25	// Types seem to be mismatched if importing these from block.json
		@@ -42,15 +48,11 @@
42	48	seeMoreType: { type: 'string' },
43	49	seeMoreString: { type: 'string' },
44	50	seeMoreAfterLine: { type: 'string' },
45	51	seeMoreTransition: { type: 'boolean' },
46		- seeMoreCollapse: { type: 'boolean' },
47		- seeMoreCollapseString: { type: 'string' },
48	52	startingLineNumber: { type: 'string' },
49	53	lineNumbersWidth: { type: 'number' },
50		- highestLineNumber: { type: 'number' },
51	54	enableHighlighting: { type: 'boolean' },
52		- highlightingHover: { type: 'boolean' },
53	55	lineHighlights: { type: 'string' },
54	56	lineHighlightColor: { type: 'string' },
55	57	enableBlurring: { type: 'boolean' },
56	58	lineBlurs: { type: 'string' },
		@@ -58,22 +60,8 @@
58	60	frame: { type: 'boolean' },
59	61	renderType: { type: 'string', default: 'code' },
60	62	label: { type: 'string', default: '' },
61	63	copyButton: { type: 'boolean' },
62		- copyButtonType: { type: 'string' },
63		- copyButtonString: {
64		- type: 'string',
65		- default: __('Copy', 'code-block-pro'),
66		- },
67		- copyButtonStringCopied: {
68		- type: 'string',
69		- default: __('Copied!', 'code-block-pro'),
70		- },
71		- copyButtonUseTextarea: { type: 'boolean', default: false },
72		- useDecodeURI: { type: 'boolean', default: false },
73		- useEscapeShortCodes: { type: 'boolean', default: true },
74		- tabSize: { type: 'number', default: 2 },
75		- useTabs: { type: 'boolean' },
76	64	},
77	65	// Need to add these here to avoid TS type errors
78	66	supports: {
79	67	html: false,
		@@ -80,9 +68,66 @@
80	68	align: ['wide', 'full'],
81	69	},
82	70	title: __('Code Pro', 'code-block-pro'),
83	71	edit: ({ attributes, setAttributes }) => (
84		- <Editor attributes={attributes} setAttributes={setAttributes} />
	72	+ <>
	73	+ <SidebarControls
	74	+ attributes={attributes}
	75	+ setAttributes={setAttributes}
	76	+ />
	77	+ <ToolbarControls
	78	+ attributes={attributes}
	79	+ setAttributes={setAttributes}
	80	+ />
	81	+ <div
	82	+ {...blockProps({
	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	+ }),
	92	+ style: {
	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	+ ),
	119	+ },
	120	+ })}>
	121	+ <HeaderType {...attributes} />
	122	+ {attributes.copyButton && (
	123	+ <CopyButton attributes={attributes} />
	124	+ )}
	125	+ <Edit attributes={attributes} setAttributes={setAttributes} />
	126	+ <FooterType {...attributes} />
	127	+ <SeeMoreType {...attributes} />
	128	+ </div>
	129	+ </>
85	130	),
86	131	save: ({ attributes }) => <BlockOutput attributes={attributes} />,
87	132	transforms: {
88	133	from: [
		@@ -88,16 +133,22 @@
88	133	from: [
89	134	{
90	135	type: 'block',
91	136	blocks: ['core/code', 'syntaxhighlighter/code'],
92		- transform: transformToCBP,
93		- },
94		- ],
95		- to: [
96		- {
97		- type: 'block',
98		- blocks: ['core/code'],
99		- transform: transformFromCBP,
	137	+ transform: (attrs) => {
	138	+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
	139	+ // @ts-ignore-next-line - Why is this reading the block generic?
	140	+ const { content, language } = attrs;
	141	+ const decode = (value: string) => {
	142	+ const txt = document.createElement('textarea');
	143	+ txt.innerHTML = value;
	144	+ return txt.value;
	145	+ };
	146	+ return createBlock(blockConfig.name, {
	147	+ code: content ? decode(content) : undefined,
	148	+ language: getMainAlias(language) as Lang,
	149	+ });
	150	+ },
100	151	},
101	152	],
102	153	},
103	154	});