-
Notifications
You must be signed in to change notification settings - Fork 4.1k
/
index.js
132 lines (119 loc) · 2.92 KB
/
index.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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { useMemo, useState } from '@wordpress/element';
import { RichTextToolbarButton, useSettings } from '@wordpress/block-editor';
import {
Icon,
color as colorIcon,
textColor as textColorIcon,
} from '@wordpress/icons';
import { removeFormat } from '@wordpress/rich-text';
/**
* Internal dependencies
*/
import { default as InlineColorUI, getActiveColors } from './inline';
export const transparentValue = 'rgba(0, 0, 0, 0)';
const name = 'core/text-color';
const title = __( 'Highlight' );
const EMPTY_ARRAY = [];
function getComputedStyleProperty( element, property ) {
const { ownerDocument } = element;
const { defaultView } = ownerDocument;
const style = defaultView.getComputedStyle( element );
const value = style.getPropertyValue( property );
if (
property === 'background-color' &&
value === transparentValue &&
element.parentElement
) {
return getComputedStyleProperty( element.parentElement, property );
}
return value;
}
function fillComputedColors( element, { color, backgroundColor } ) {
if ( ! color && ! backgroundColor ) {
return;
}
return {
color: color || getComputedStyleProperty( element, 'color' ),
backgroundColor:
backgroundColor === transparentValue
? getComputedStyleProperty( element, 'background-color' )
: backgroundColor,
};
}
function TextColorEdit( {
value,
onChange,
isActive,
activeAttributes,
contentRef,
} ) {
const [ allowCustomControl, colors = EMPTY_ARRAY ] = useSettings(
'color.custom',
'color.palette'
);
const [ isAddingColor, setIsAddingColor ] = useState( false );
const colorIndicatorStyle = useMemo(
() =>
fillComputedColors(
contentRef.current,
getActiveColors( value, name, colors )
),
[ contentRef, value, colors ]
);
const hasColorsToChoose = colors.length || ! allowCustomControl;
if ( ! hasColorsToChoose && ! isActive ) {
return null;
}
return (
<>
<RichTextToolbarButton
className="format-library-text-color-button"
isActive={ isActive }
icon={
<Icon
icon={
Object.keys( activeAttributes ).length
? textColorIcon
: colorIcon
}
style={ colorIndicatorStyle }
/>
}
title={ title }
// If has no colors to choose but a color is active remove the color onClick.
onClick={
hasColorsToChoose
? () => setIsAddingColor( true )
: () => onChange( removeFormat( value, name ) )
}
role="menuitemcheckbox"
/>
{ isAddingColor && (
<InlineColorUI
name={ name }
onClose={ () => setIsAddingColor( false ) }
activeAttributes={ activeAttributes }
value={ value }
onChange={ onChange }
contentRef={ contentRef }
isActive={ isActive }
/>
) }
</>
);
}
export const textColor = {
name,
title,
tagName: 'mark',
className: 'has-inline-color',
attributes: {
style: 'style',
class: 'class',
},
edit: TextColorEdit,
};