-
Notifications
You must be signed in to change notification settings - Fork 2k
/
rich-text.js
78 lines (72 loc) · 2.17 KB
/
rich-text.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
/* global wpcomGutenberg */
import { RichTextToolbarButton } from '@wordpress/block-editor';
import { compose, ifCondition } from '@wordpress/compose';
import { withSelect, withDispatch, select, subscribe } from '@wordpress/data';
import { toggleFormat, registerFormatType, unregisterFormatType } from '@wordpress/rich-text';
import { get } from 'lodash';
const unsubscribe = subscribe( () => {
const underlineFormat = select( 'core/rich-text' ).getFormatType( 'core/underline' );
if ( ! underlineFormat ) {
return;
}
unsubscribe();
const settings = unregisterFormatType( 'core/underline' );
registerFormatType( 'wpcom/underline', {
...settings,
name: 'wpcom/underline',
edit( { isActive, value, onChange } ) {
const onToggle = () =>
onChange(
toggleFormat( value, {
type: 'wpcom/underline',
attributes: {
style: 'text-decoration: underline;',
},
} )
);
return (
<RichTextToolbarButton
icon="editor-underline"
title={ settings.title }
onClick={ onToggle }
isActive={ isActive }
/>
);
},
} );
} );
const RichTextJustifyButton = ( { blockId, isBlockJustified, updateBlockAttributes } ) => {
const onToggle = () =>
updateBlockAttributes( blockId, { align: isBlockJustified ? null : 'justify' } );
return (
<RichTextToolbarButton
icon="editor-justify"
title={ wpcomGutenberg.richTextToolbar.justify }
onClick={ onToggle }
isActive={ isBlockJustified }
/>
);
};
const ConnectedRichTextJustifyButton = compose(
withSelect( ( wpSelect ) => {
const selectedBlock = wpSelect( 'core/block-editor' ).getSelectedBlock();
if ( ! selectedBlock ) {
return {};
}
return {
blockId: selectedBlock.clientId,
blockName: selectedBlock.name,
isBlockJustified: 'justify' === get( selectedBlock, 'attributes.align' ),
};
} ),
withDispatch( ( dispatch ) => ( {
updateBlockAttributes: dispatch( 'core/editor' ).updateBlockAttributes,
} ) ),
ifCondition( ( props ) => 'core/paragraph' === props.blockName )
)( RichTextJustifyButton );
registerFormatType( 'wpcom/justify', {
title: wpcomGutenberg.richTextToolbar.justify,
tagName: 'p',
className: null,
edit: ConnectedRichTextJustifyButton,
} );