← All changes | src/index.tsx +99 -142 1.9.1 → 1.28.0 View file →

		@@ -1,155 +1,112 @@
1		-import { useBlockProps as blockProps } from '@wordpress/block-editor';
2		-import { createBlock, registerBlockType } from '@wordpress/blocks';
	1	+import { registerBlockType } from '@wordpress/blocks';
3	2	import { addFilter } from '@wordpress/hooks';
4	3	import { __ } from '@wordpress/i18n';
5		-import classnames from 'classnames';
6		-import { Lang } from 'shiki';
7	4	import blockConfig from './block.json';
8		-import { Edit } from './editor/Edit';
	5	+import { Editor } from './Editor';
9	6	import { BlockFilter } from './editor/components/BlockFilter';
10		-import { FooterType } from './editor/components/FooterSelect';
11		-import { HeaderType } from './editor/components/HeaderSelect';
12		-import { SidebarControls } from './editor/controls/Sidebar';
13		-import { ToolbarControls } from './editor/controls/Toolbar';
14	7	import './editor/editor.css';
	8	+import { transformFromCBP, transformToCBP } from './editor/transforms';
15	9	import { BlockOutput } from './front/BlockOutput';
16		-import { CopyButton } from './front/CopyButton';
17	10	import { blockIcon } from './icons';
18		-import { Attributes } from './types';
19		-import { fontFamilyLong, maybeClamp } from './util/fonts';
20		-import { getMainAlias } from './util/languages';
	11	+import type { Attributes } from './types';
	12	+import { handleValidationErrors } from './util/errors';
21	13
	14	+handleValidationErrors();
	15	+
22	16	registerBlockType<Attributes>(blockConfig.name, {
23		- ...blockConfig,
24		- icon: blockIcon,
25		- // Types seem to be mismatched if importing these from block.json
26		- attributes: {
27		- code: { type: 'string' },
28		- codeHTML: { type: 'string' },
29		- language: { type: 'string' },
30		- theme: { type: 'string' },
31		- align: { type: 'string' },
32		- bgColor: { type: 'string', default: '#282a37' },
33		- textColor: { type: 'string', default: '#f8f8f2' },
34		- fontSize: { type: 'string' },
35		- fontFamily: { type: 'string' },
36		- lineHeight: { type: 'string' },
37		- clampFonts: { type: 'boolean' },
38		- lineNumbers: { type: 'boolean' },
39		- headerType: { type: 'string' },
40		- headerString: { type: 'string' },
41		- disablePadding: { type: 'boolean' },
42		- footerType: { type: 'string' },
43		- footerString: { type: 'string' },
44		- footerLink: { type: 'string' },
45		- footerLinkTarget: { type: 'boolean' },
46		- startingLineNumber: { type: 'string' },
47		- lineNumbersWidth: { type: 'number' },
48		- enableHighlighting: { type: 'boolean' },
49		- lineHighlights: { type: 'string' },
50		- lineHighlightColor: { type: 'string' },
51		- enableBlurring: { type: 'boolean' },
52		- lineBlurs: { type: 'string' },
53		- removeBlurOnHover: { type: 'boolean' },
54		- frame: { type: 'boolean' },
55		- renderType: { type: 'string', default: 'code' },
56		- label: { type: 'string', default: '' },
57		- copyButton: { type: 'boolean' },
58		- },
59		- // Need to add these here to avoid TS type errors
60		- supports: {
61		- html: false,
62		- align: ['wide', 'full'],
63		- },
64		- title: __('Code Pro', 'code-block-pro'),
65		- edit: ({ attributes, setAttributes }) => (
66		- <>
67		- <SidebarControls
68		- attributes={attributes}
69		- setAttributes={setAttributes}
70		- />
71		- <ToolbarControls
72		- attributes={attributes}
73		- setAttributes={setAttributes}
74		- />
75		- <div
76		- {...blockProps({
77		- className: classnames('code-block-pro-editor', {
78		- 'padding-disabled': attributes.disablePadding,
79		- 'padding-bottom-disabled':
80		- attributes?.footerType &&
81		- attributes?.footerType !== 'none',
82		- 'cbp-has-line-numbers': attributes.lineNumbers,
83		- 'cbp-blur-enabled': attributes.enableBlurring,
84		- 'cbp-unblur-on-hover': attributes.removeBlurOnHover,
85		- }),
86		- style: {
87		- fontSize: maybeClamp(
88		- attributes.fontSize,
89		- attributes.clampFonts,
90		- ),
91		- '--cbp-line-number-color': attributes?.lineNumbers
92		- ? attributes.textColor
93		- : undefined,
94		- '--cbp-line-number-start':
95		- Number(attributes?.startingLineNumber) > 1
96		- ? attributes.startingLineNumber
97		- : undefined,
98		- '--cbp-line-number-width': attributes.lineNumbersWidth
99		- ? `${attributes.lineNumbersWidth}px`
100		- : undefined,
101		- '--cbp-line-highlight-color':
102		- attributes?.enableHighlighting
103		- ? attributes.lineHighlightColor
104		- : undefined,
105		- '--cbp-line-height': attributes.lineHeight,
106		- fontFamily: fontFamilyLong(attributes.fontFamily),
107		- lineHeight: maybeClamp(
108		- attributes.lineHeight,
109		- attributes.clampFonts,
110		- ),
111		- },
112		- })}>
113		- <HeaderType {...attributes} />
114		- {attributes.copyButton && (
115		- <CopyButton attributes={attributes} />
116		- )}
117		- <Edit attributes={attributes} setAttributes={setAttributes} />
118		- <FooterType {...attributes} />
119		- </div>
120		- </>
121		- ),
122		- save: ({ attributes }) => <BlockOutput attributes={attributes} />,
123		- transforms: {
124		- from: [
125		- {
126		- type: 'block',
127		- blocks: ['core/code', 'syntaxhighlighter/code'],
128		- transform: (attrs) => {
129		- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
130		- // @ts-ignore-next-line - Why is this reading the block generic?
131		- const { content, language } = attrs;
132		- const decode = (value: string) => {
133		- const txt = document.createElement('textarea');
134		- txt.innerHTML = value;
135		- return txt.value;
136		- };
137		- return createBlock(blockConfig.name, {
138		- code: content ? decode(content) : undefined,
139		- language: getMainAlias(language) as Lang,
140		- });
141		- },
142		- },
143		- ],
144		- },
	17	+ ...blockConfig,
	18	+ icon: blockIcon,
	19	+ // Types seem to be mismatched if importing these from block.json
	20	+ attributes: {
	21	+ code: { type: 'string' },
	22	+ codeHTML: { type: 'string' },
	23	+ language: { type: 'string' },
	24	+ theme: { type: 'string' },
	25	+ align: { type: 'string' },
	26	+ bgColor: { type: 'string', default: '#282a37' },
	27	+ textColor: { type: 'string', default: '#f8f8f2' },
	28	+ fontSize: { type: 'string' },
	29	+ fontFamily: { type: 'string' },
	30	+ lineHeight: { type: 'string' },
	31	+ clampFonts: { type: 'boolean' },
	32	+ editorHeight: { type: 'string' },
	33	+ lineNumbers: { type: 'boolean' },
	34	+ headerType: { type: 'string' },
	35	+ headerString: { type: 'string' },
	36	+ disablePadding: { type: 'boolean' },
	37	+ footerType: { type: 'string' },
	38	+ footerString: { type: 'string' },
	39	+ footerLink: { type: 'string' },
	40	+ footerLinkTarget: { type: 'boolean' },
	41	+ enableMaxHeight: { type: 'boolean' },
	42	+ seeMoreType: { type: 'string' },
	43	+ seeMoreString: { type: 'string' },
	44	+ seeMoreAfterLine: { type: 'string' },
	45	+ seeMoreTransition: { type: 'boolean' },
	46	+ seeMoreCollapse: { type: 'boolean' },
	47	+ seeMoreCollapseString: { type: 'string' },
	48	+ startingLineNumber: { type: 'string' },
	49	+ lineNumbersWidth: { type: 'number' },
	50	+ highestLineNumber: { type: 'number' },
	51	+ enableHighlighting: { type: 'boolean' },
	52	+ highlightingHover: { type: 'boolean' },
	53	+ lineHighlights: { type: 'string' },
	54	+ lineHighlightColor: { type: 'string' },
	55	+ enableBlurring: { type: 'boolean' },
	56	+ lineBlurs: { type: 'string' },
	57	+ removeBlurOnHover: { type: 'boolean' },
	58	+ frame: { type: 'boolean' },
	59	+ renderType: { type: 'string', default: 'code' },
	60	+ label: { type: 'string', default: '' },
	61	+ 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	+ },
	77	+ // Need to add these here to avoid TS type errors
	78	+ supports: {
	79	+ html: false,
	80	+ align: ['wide', 'full'],
	81	+ },
	82	+ title: __('Code Pro', 'code-block-pro'),
	83	+ edit: ({ attributes, setAttributes }) => (
	84	+ <Editor attributes={attributes} setAttributes={setAttributes} />
	85	+ ),
	86	+ save: ({ attributes }) => <BlockOutput attributes={attributes} />,
	87	+ transforms: {
	88	+ from: [
	89	+ {
	90	+ type: 'block',
	91	+ blocks: ['core/code', 'syntaxhighlighter/code'],
	92	+ transform: transformToCBP,
	93	+ },
	94	+ ],
	95	+ to: [
	96	+ {
	97	+ type: 'block',
	98	+ blocks: ['core/code'],
	99	+ transform: transformFromCBP,
	100	+ },
	101	+ ],
	102	+ },
145	103	});
146	104
147	105	addFilter(
148		- 'editor.BlockEdit',
149		- blockConfig.name,
150		- (CurrentMenuItems) =>
151		- // Not sure how to type these incoming props
152		- // eslint-disable-next-line
153		- (props: any) =>
154		- BlockFilter(CurrentMenuItems, props),
	106	+ 'editor.BlockEdit',
	107	+ blockConfig.name,
	108	+ (CurrentMenuItems) =>
	109	+ // Not sure how to type these incoming props
	110	+ (props: any) =>
	111	+ BlockFilter(CurrentMenuItems, props),
155	112	);