Skip to content

Commit 194efe6

Browse files
ajitbohraajitbohra
committed
chore: code refactor
1 parent 7ad04cd commit 194efe6

File tree

4 files changed

+139
-91
lines changed

4 files changed

+139
-91
lines changed

‎src/clear-formats/edit.js‎

Lines changed: 53 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,21 @@
11
/**
22
* WordPress dependencies
33
*/
4-
import { __ } from '@wordpress/i18n';
5-
import { useState, useMemo } from '@wordpress/element';
4+
import { __, sprintf } from '@wordpress/i18n';
5+
import { useState } from '@wordpress/element';
66
import { RichTextToolbarButton } from '@wordpress/block-editor';
7-
import { removeFormat, create, getActiveFormats } from '@wordpress/rich-text';
8-
import { Modal, Button } from '@wordpress/components';
9-
import { cancelCircleFilled } from '@wordpress/icons';
7+
import {
8+
Modal,
9+
Button,
10+
__experimentalText as Text,
11+
__experimentalHStack as HStack,
12+
} from '@wordpress/components';
13+
14+
/**
15+
* Internal dependencies
16+
*/
17+
import { clearFormatsIcon } from './icon';
18+
import { useClearFormats } from './hooks';
1019

1120
/**
1221
* Edit component for clearing all formats.
@@ -16,114 +25,70 @@ import { cancelCircleFilled } from '@wordpress/icons';
1625
* @param {Function} props.onChange - Function to update the rich text value.
1726
* @return {JSX.Element} - The rendered clear formats button.
1827
*/
19-
export function Edit({ value, onChange }) {
20-
const [isModalOpen, setIsModalOpen] = useState(false);
21-
22-
// Check if there's a text selection
23-
const hasSelection = useMemo(() => {
24-
return value.start !== value.end;
25-
}, [value.start, value.end]);
28+
export function Edit( { value, onChange } ) {
29+
const [ isModalOpen, setIsModalOpen ] = useState( false );
30+
const { hasSelection, clearFormats } = useClearFormats( {
31+
value,
32+
onChange,
33+
} );
2634

2735
const handleClearFormats = () => {
28-
let newValue = value;
29-
30-
if (hasSelection) {
31-
// Get all active formats at the selection
32-
const formats = getActiveFormats(value);
33-
34-
// Remove each format type from the selection
35-
formats.forEach((format) => {
36-
newValue = removeFormat(
37-
newValue,
38-
format.type,
39-
value.start,
40-
value.end
41-
);
42-
});
43-
44-
// Also remove any formats that might not be "active" but exist in the range
45-
// by getting all format types from the formats array in the value
46-
if (value.formats) {
47-
const formatTypes = new Set();
48-
for (let i = value.start; i < value.end; i++) {
49-
if (value.formats[i]) {
50-
value.formats[i].forEach((format) => {
51-
formatTypes.add(format.type);
52-
});
53-
}
54-
}
55-
56-
formatTypes.forEach((formatType) => {
57-
newValue = removeFormat(
58-
newValue,
59-
formatType,
60-
value.start,
61-
value.end
62-
);
63-
});
64-
}
65-
66-
onChange(newValue);
67-
} else {
68-
// Clear formats for the entire block by creating plain text
69-
const plainText = value.text;
70-
const newValue = create({ text: plainText });
71-
onChange(newValue);
72-
}
73-
74-
setIsModalOpen(false);
36+
clearFormats();
37+
setIsModalOpen( false );
7538
};
7639

7740
// Dynamic confirmation message based on selection
78-
const confirmationMessage = hasSelection
79-
? __(
80-
'Are you sure you want to remove all formatting from the selected text? This will remove bold, italic, links, and all other formats including BlaBlaBlocks formats.',
81-
'blablablocks-formats'
82-
)
83-
: __(
84-
'Are you sure you want to remove all formatting from the entire block? This will remove bold, italic, links, and all other formats including BlaBlaBlocks formats.',
85-
'blablablocks-formats'
86-
);
41+
const selectionType = hasSelection
42+
? __( 'text', 'blablablocks-formats' )
43+
: __( 'block', 'blablablocks-formats' );
44+
45+
const confirmationMessage = sprintf(
46+
/* translators: %s: selection type (text/block) */
47+
__(
48+
'Are you sure you want to remove all formatting (bold, italic, links, etc.) from the selected %s?',
49+
'blablablocks-formats'
50+
),
51+
selectionType
52+
);
8753

8854
return (
8955
<>
9056
<RichTextToolbarButton
91-
icon={cancelCircleFilled}
92-
title={__('Clear All Formats', 'blablablocks-formats')}
93-
onClick={() => setIsModalOpen(true)}
57+
icon={ clearFormatsIcon }
58+
title={ __( 'Clear formatting', 'blablablocks-formats' ) }
59+
onClick={ () => setIsModalOpen( true ) }
9460
/>
9561

96-
{isModalOpen && (
62+
{ isModalOpen && (
9763
<Modal
98-
title={__('Clear All Formats', 'blablablocks-formats')}
99-
onRequestClose={() => setIsModalOpen(false)}
64+
title={ __( 'Clear All Formats', 'blablablocks-formats' ) }
65+
onRequestClose={ () => setIsModalOpen( false ) }
10066
size="small"
10167
>
102-
<p>{confirmationMessage}</p>
103-
<div
104-
style={{
105-
display: 'flex',
106-
justifyContent: 'flex-end',
107-
gap: '8px',
108-
marginTop: '20px',
109-
}}
68+
<Text as="p" highlightWords={ [ 'text', 'block' ] }>
69+
{ confirmationMessage }
70+
</Text>
71+
<HStack
72+
spacing={ 2 }
73+
justify="flex-end"
74+
style={ { marginTop: '24px' } }
11075
>
11176
<Button
11277
variant="tertiary"
113-
onClick={() => setIsModalOpen(false)}
78+
onClick={ () => setIsModalOpen( false ) }
11479
>
115-
{__('Cancel', 'blablablocks-formats')}
80+
{ __( 'Cancel', 'blablablocks-formats' ) }
11681
</Button>
11782
<Button
11883
variant="primary"
119-
onClick={handleClearFormats}
84+
onClick={ handleClearFormats }
12085
isDestructive
12186
>
122-
{__('Clear Formats', 'blablablocks-formats')}
87+
{ __( 'Clear', 'blablablocks-formats' ) }
12388
</Button>
124-
</div>
89+
</HStack>
12590
</Modal>
126-
)}
91+
) }
12792
</>
12893
);
12994
}

‎src/clear-formats/hooks.js‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import { useCallback, useMemo } from '@wordpress/element';
5+
import { removeFormat, create, getActiveFormats } from '@wordpress/rich-text';
6+
7+
/**
8+
* Provides helpers for clearing formats from a rich text value.
9+
*
10+
* @param {Object} options - Hook options.
11+
* @param {Object} options.value - Current rich text value.
12+
* @param {Function} options.onChange - Callback to update the value.
13+
* @return {{hasSelection: boolean, clearFormats: Function}} Hook results.
14+
*/
15+
export const useClearFormats = ( { value, onChange } ) => {
16+
const hasSelection = useMemo(
17+
() => value.start !== value.end,
18+
[ value.start, value.end ]
19+
);
20+
21+
const clearFormats = useCallback( () => {
22+
let newValue = value;
23+
24+
if ( hasSelection ) {
25+
const formats = getActiveFormats( value );
26+
27+
formats.forEach( ( format ) => {
28+
newValue = removeFormat(
29+
newValue,
30+
format.type,
31+
value.start,
32+
value.end
33+
);
34+
} );
35+
36+
if ( value.formats ) {
37+
const formatTypes = new Set();
38+
39+
for ( let index = value.start; index < value.end; index++ ) {
40+
if ( value.formats[ index ] ) {
41+
value.formats[ index ].forEach( ( format ) => {
42+
formatTypes.add( format.type );
43+
} );
44+
}
45+
}
46+
47+
formatTypes.forEach( ( formatType ) => {
48+
newValue = removeFormat(
49+
newValue,
50+
formatType,
51+
value.start,
52+
value.end
53+
);
54+
} );
55+
}
56+
57+
onChange( newValue );
58+
return;
59+
}
60+
61+
newValue = create( { text: value.text } );
62+
onChange( newValue );
63+
}, [ hasSelection, onChange, value ] );
64+
65+
return { hasSelection, clearFormats };
66+
};

‎src/clear-formats/icon.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
export const clearFormatsIcon = (
2+
<svg
3+
width="24"
4+
height="24"
5+
viewBox="0 0 24 24"
6+
fill="none"
7+
xmlns="http://www.w3.org/2000/svg"
8+
>
9+
<path
10+
stroke="currentColor"
11+
strokeLinecap="round"
12+
strokeLinejoin="round"
13+
strokeWidth="2"
14+
d="M7 6.2V5h12v1.2M7 19h6m.2-14-1.677 6.523M9.6 19l1.029-4M5 5l6.523 6.523M19 19l-7.477-7.477"
15+
/>
16+
</svg>
17+
);

‎src/clear-formats/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ import { Edit } from './edit';
1313
* Registers the Clear All Formats button.
1414
* This is not a traditional format but a toolbar button to clear formats.
1515
*/
16-
registerFormatType('blablablocks/clear-formats', {
17-
title: __('Clear All Formats', 'blablablocks-formats'),
16+
registerFormatType( 'blablablocks/clear-formats', {
17+
title: __( 'Clear formatting', 'blablablocks-formats' ),
1818
tagName: 'mark', // Using 'mark' to avoid conflict with core formats that use 'span'
1919
className: null,
2020
edit: Edit,
21-
});
21+
} );

0 commit comments

Comments
 (0)