← All changes | src/editor/controls/HighlightingControl.tsx +64 -70 1.28.0 → 1.13.0 View file →

		@@ -1,78 +1,72 @@
1	1	import {
2		- BaseControl,
3		- CheckboxControl,
4		- TextControl,
	2	+ BaseControl,
	3	+ CheckboxControl,
	4	+ TextControl,
5	5	} from '@wordpress/components';
6	6	import { useEffect, useRef } from '@wordpress/element';
7		-import { __, sprintf } from '@wordpress/i18n';
8		-import type { AttributesPropsAndSetter } from '../../types';
	7	+import { sprintf, __ } from '@wordpress/i18n';
	8	+import { AttributesPropsAndSetter } from '../../types';
9	9	import { parseStringArrayWithSingleNestedArray } from '../../util/arrayHelpers';
10	10
11	11	export const HighlightingControl = ({
12		- attributes,
13		- setAttributes,
	12	+ attributes,
	13	+ setAttributes,
14	14	}: AttributesPropsAndSetter) => {
15		- const inputRef = useRef<HTMLInputElement>(null);
16		- useEffect(() => {
17		- try {
18		- parseStringArrayWithSingleNestedArray(attributes.lineHighlights);
19		- inputRef.current
20		- ?.querySelector('input')
21		- ?.classList.remove('cbp-input-error');
22		- } catch (e) {
23		- console.error(e);
24		- inputRef.current
25		- ?.querySelector('input')
26		- ?.classList.add('cbp-input-error');
27		- }
28		- }, [attributes.lineHighlights]);
29		- return (
30		- <BaseControl id="code-block-pro-show-highlighting">
31		- <CheckboxControl
32		- data-cy="enable-highlighting"
33		- label={__('Line highlights', 'code-block-pro')}
34		- help={__(
35		- 'Highlight individual lines to bring attention to specific code.',
36		- 'code-block-pro',
37		- )}
38		- checked={attributes.enableHighlighting ?? false}
39		- onChange={(enableHighlighting) => {
40		- setAttributes({ enableHighlighting });
41		- }}
42		- />
43		- {attributes.enableHighlighting && (
44		- <BaseControl id="code-block-pro-show-highlighted-lines">
45		- <div ref={inputRef}>
46		- <TextControl
47		- id="code-block-pro-show-highlighted-lines"
48		- spellCheck={false}
49		- autoComplete="off"
50		- label={__('Highlight the following', 'code-block-pro')}
51		- help={sprintf(
52		- __('Try %1$s or %2$s for a range.', 'code-block-pro'),
53		- '1,5',
54		- '1,[3,5]',
55		- )}
56		- onChange={(lineHighlights) => {
57		- setAttributes({ lineHighlights });
58		- }}
59		- value={attributes?.lineHighlights ?? ''}
60		- />
61		- </div>
62		- </BaseControl>
63		- )}
64		- <CheckboxControl
65		- data-cy="enable-highlighting-hover"
66		- label={__('Line highlights on hover', 'code-block-pro')}
67		- help={__(
68		- 'Every line will be highlighted when hovered.',
69		- 'code-block-pro',
70		- )}
71		- checked={attributes.highlightingHover ?? false}
72		- onChange={(highlightingHover) => {
73		- setAttributes({ highlightingHover });
74		- }}
75		- />
76		- </BaseControl>
77		- );
	15	+ const inputRef = useRef<HTMLInputElement>(null);
	16	+ useEffect(() => {
	17	+ try {
	18	+ parseStringArrayWithSingleNestedArray(attributes.lineHighlights);
	19	+ inputRef.current
	20	+ ?.querySelector('input')
	21	+ ?.classList.remove('cbp-input-error');
	22	+ } catch (e) {
	23	+ console.error(e);
	24	+ inputRef.current
	25	+ ?.querySelector('input')
	26	+ ?.classList.add('cbp-input-error');
	27	+ }
	28	+ }, [attributes.lineHighlights]);
	29	+ return (
	30	+ <BaseControl id="code-block-pro-show-highlighting">
	31	+ <CheckboxControl
	32	+ data-cy="enable-highlighting"
	33	+ label={__('Enable line highlighting', 'code-block-pro')}
	34	+ help={__(
	35	+ 'Highlight individual lines to bring attention to specific code.',
	36	+ 'code-block-pro',
	37	+ )}
	38	+ checked={attributes.enableHighlighting ?? false}
	39	+ onChange={(enableHighlighting) => {
	40	+ setAttributes({ enableHighlighting });
	41	+ }}
	42	+ />
	43	+ {attributes.enableHighlighting && (
	44	+ <BaseControl id="code-block-pro-show-highlighted-lines">
	45	+ <div ref={inputRef}>
	46	+ <TextControl
	47	+ id="code-block-pro-show-highlighted-lines"
	48	+ spellCheck={false}
	49	+ autoComplete="off"
	50	+ label={__(
	51	+ 'Highlight the following',
	52	+ 'code-block-pro',
	53	+ )}
	54	+ help={sprintf(
	55	+ __(
	56	+ 'Try %1$s or %2$s for a range.',
	57	+ 'code-block-pro',
	58	+ ),
	59	+ '1,5',
	60	+ '1,[3,5]',
	61	+ )}
	62	+ onChange={(lineHighlights) => {
	63	+ setAttributes({ lineHighlights });
	64	+ }}
	65	+ value={attributes?.lineHighlights ?? ''}
	66	+ />
	67	+ </div>
	68	+ </BaseControl>
	69	+ )}
	70	+ </BaseControl>
	71	+ );
78	72	};