-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Mobile - WIP Word selected color * WIP color selected * Mobile - Text color support * Mobile - Restore initial html * Mobile - Rich text - Highlight text colors from classes * Mobile - Text color - Fix getActiveColors import * Mobile - Text Color - Remove web filter * Mobile - Rich text - Regex fix for default editor colors * Mobile - Highlight word - Fixes for iOS and color indicator * Mobile - Text color - Share index with web * Mobile - Move text color formatting button to its own ToolbarGroup * Text color - Share setColors with Mobile * Mobile - Color settings - Reset button: Reduce hit slop and fix the width of the touchable space * Mobile - Button component - Allow for a custom background color for the isActive state * Mobile - Text color - Set the background color in the format button * Mobile - Text color format: Manually set the current format when there's no text selected. As well as resetting the active text color formatting if the text selection changes. * Mobile - Aztec Text format - Add mark support * Mobile - Update Aztec version * Mobile - Rich Text - Mark formatting support for iOS * Temp for testing - Use commit reference for Aztec * Mobile - Text Color - Fix applying format * Mobile - Button component - Adds new customContainerStyles prop * Mobile - Inline Text Color - Update styles for the color indicator * Mobile - Update changelog * Mobile - Text color - use transparentValue * Mobile - Update Aztec Android version * Mobile - Text color - Inline component, use native variant of parseCSS * Mobile - Update Aztec iOS version * Mobile - Rich Text - Update core naming to default
- Loading branch information
Gerardo Pacheco
authored
Dec 9, 2021
1 parent
fa37c89
commit c386fd0
Showing
17 changed files
with
506 additions
and
19 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -45,7 +45,7 @@ | |
| } | ||
|
|
||
| .clearButtonContainer { | ||
| align-items: flex-end; | ||
| align-self: flex-end; | ||
| } | ||
|
|
||
| .clearButton { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,191 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { isEmpty } from 'lodash'; | ||
| import { View } from 'react-native'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { useCallback, useMemo, useState } from '@wordpress/element'; | ||
| import { BlockControls, useSetting } from '@wordpress/block-editor'; | ||
| import { ToolbarGroup, ToolbarButton } from '@wordpress/components'; | ||
| import { Icon, textColor as textColorIcon } from '@wordpress/icons'; | ||
| import { removeFormat } from '@wordpress/rich-text'; | ||
| import { usePreferredColorSchemeStyle } from '@wordpress/compose'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { getActiveColors } from './inline.js'; | ||
| import { transparentValue } from './index.js'; | ||
| import { default as InlineColorUI } from './inline'; | ||
| import styles from './style.scss'; | ||
|
|
||
| const name = 'core/text-color'; | ||
| const title = __( 'Text color' ); | ||
|
|
||
| const EMPTY_ARRAY = []; | ||
|
|
||
| function getComputedStyleProperty( element, property ) { | ||
| const { | ||
| props: { style = {} }, | ||
| } = element; | ||
|
|
||
| if ( property === 'background-color' ) { | ||
| const { backgroundColor, baseColors } = style; | ||
|
|
||
| if ( backgroundColor !== 'transparent' ) { | ||
| return backgroundColor; | ||
| } else if ( baseColors && baseColors?.color?.background ) { | ||
| return baseColors?.color?.background; | ||
| } | ||
|
|
||
| return 'transparent'; | ||
| } | ||
| } | ||
|
|
||
| function fillComputedColors( element, { color, backgroundColor } ) { | ||
| if ( ! color && ! backgroundColor ) { | ||
| return; | ||
| } | ||
|
|
||
| return { | ||
| color: color || getComputedStyleProperty( element, 'color' ), | ||
| backgroundColor: getComputedStyleProperty( | ||
| element, | ||
| 'background-color' | ||
| ), | ||
| }; | ||
| } | ||
|
|
||
| function TextColorEdit( { | ||
| value, | ||
| onChange, | ||
| isActive, | ||
| activeAttributes, | ||
| contentRef, | ||
| } ) { | ||
| const allowCustomControl = useSetting( 'color.custom' ); | ||
| const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY; | ||
| const [ isAddingColor, setIsAddingColor ] = useState( false ); | ||
| const enableIsAddingColor = useCallback( () => setIsAddingColor( true ), [ | ||
| setIsAddingColor, | ||
| ] ); | ||
| const disableIsAddingColor = useCallback( () => setIsAddingColor( false ), [ | ||
| setIsAddingColor, | ||
| ] ); | ||
| const colorIndicatorStyle = useMemo( | ||
| () => | ||
| fillComputedColors( | ||
| contentRef, | ||
| getActiveColors( value, name, colors ) | ||
| ), | ||
| [ value, colors ] | ||
| ); | ||
|
|
||
| const hasColorsToChoose = ! isEmpty( colors ) || ! allowCustomControl; | ||
|
|
||
| const onPressButton = useCallback( () => { | ||
| if ( hasColorsToChoose ) { | ||
| enableIsAddingColor(); | ||
| } else { | ||
| onChange( removeFormat( value, name ) ); | ||
| } | ||
| }, [ hasColorsToChoose, value ] ); | ||
|
|
||
| const outlineStyle = usePreferredColorSchemeStyle( | ||
| styles[ 'components-inline-color__outline' ], | ||
| styles[ 'components-inline-color__outline--dark' ] | ||
| ); | ||
|
|
||
| if ( ! hasColorsToChoose && ! isActive ) { | ||
| return null; | ||
| } | ||
|
|
||
| const isActiveStyle = { | ||
| ...colorIndicatorStyle, | ||
| ...( ! colorIndicatorStyle?.backgroundColor | ||
| ? { backgroundColor: 'transparent' } | ||
| : {} ), | ||
| ...styles[ 'components-inline-color--is-active' ], | ||
| }; | ||
|
|
||
| const customContainerStyles = | ||
| styles[ 'components-inline-color__button-container' ]; | ||
|
|
||
| return ( | ||
| <> | ||
| <BlockControls> | ||
| <ToolbarGroup> | ||
| { isActive && ( | ||
| <View style={ outlineStyle } pointerEvents="none" /> | ||
| ) } | ||
|
|
||
| <ToolbarButton | ||
| name="text-color" | ||
| isActive={ isActive } | ||
| icon={ | ||
| <Icon | ||
| icon={ textColorIcon } | ||
| style={ | ||
| colorIndicatorStyle?.color && { | ||
| color: colorIndicatorStyle.color, | ||
| } | ||
| } | ||
| /> | ||
| } | ||
| title={ title } | ||
| extraProps={ { | ||
| isActiveStyle, | ||
| customContainerStyles, | ||
| } } | ||
| // If has no colors to choose but a color is active remove the color onClick | ||
| onClick={ onPressButton } | ||
| /> | ||
| </ToolbarGroup> | ||
| </BlockControls> | ||
| { isAddingColor && ( | ||
| <InlineColorUI | ||
| name={ name } | ||
| onClose={ disableIsAddingColor } | ||
| activeAttributes={ activeAttributes } | ||
| value={ value } | ||
| onChange={ onChange } | ||
| contentRef={ contentRef } | ||
| /> | ||
| ) } | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export const textColor = { | ||
| name, | ||
| title, | ||
| tagName: 'mark', | ||
| className: 'has-inline-color', | ||
| attributes: { | ||
| style: 'style', | ||
| class: 'class', | ||
| }, | ||
| /* | ||
| * Since this format relies on the <mark> tag, it's important to | ||
| * prevent the default yellow background color applied by most | ||
| * browsers. The solution is to detect when this format is used with a | ||
| * text color but no background color, and in such cases to override | ||
| * the default styling with a transparent background. | ||
| * | ||
| * @see https://github.com/WordPress/gutenberg/pull/35516 | ||
| */ | ||
| __unstableFilterAttributeValue( key, value ) { | ||
| if ( key !== 'style' ) return value; | ||
| // We should not add a background-color if it's already set | ||
| if ( value && value.includes( 'background-color' ) ) return value; | ||
| const addedCSS = [ 'background-color', transparentValue ].join( ':' ); | ||
| // Prepend `addedCSS` to avoid a double `;;` as any the existing CSS | ||
| // rules will already include a `;`. | ||
| return value ? [ addedCSS, value ].join( ';' ) : addedCSS; | ||
| }, | ||
| edit: TextColorEdit, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.