From 0875d379d9cb6257ab6beb7403696515b7eaa21c Mon Sep 17 00:00:00 2001 From: Ella Date: Thu, 30 Nov 2023 13:57:10 +0100 Subject: [PATCH 1/2] RichText (native): remove HTML check in getFormatColors --- .../native/get-format-colors.native.js | 75 +++++++++---------- .../rich-text/native/index.native.js | 2 +- 2 files changed, 36 insertions(+), 41 deletions(-) diff --git a/packages/block-editor/src/components/rich-text/native/get-format-colors.native.js b/packages/block-editor/src/components/rich-text/native/get-format-colors.native.js index a54d3e10f78a0a..a4fdc6f1ffb619 100644 --- a/packages/block-editor/src/components/rich-text/native/get-format-colors.native.js +++ b/packages/block-editor/src/components/rich-text/native/get-format-colors.native.js @@ -5,50 +5,45 @@ import { getColorObjectByAttributeValues } from '../../../components/colors'; const FORMAT_TYPE = 'core/text-color'; const REGEX_TO_MATCH = /^has-(.*)-color$/; -const TAGS_TO_SEARCH = /\ { - format.forEach( ( currentFormat ) => { - if ( currentFormat?.type === FORMAT_TYPE ) { - const className = currentFormat?.attributes?.class; - currentFormat.attributes.style = - currentFormat.attributes.style.replace( / /g, '' ); + // We are looping through a sparse array where empty indices will be + // skipped. + newFormats.forEach( ( format ) => { + format.forEach( ( currentFormat ) => { + if ( currentFormat?.type === FORMAT_TYPE ) { + const className = currentFormat?.attributes?.class; + currentFormat.attributes.style = + currentFormat.attributes.style.replace( / /g, '' ); - className?.split( ' ' ).forEach( ( currentClass ) => { - const match = currentClass.match( REGEX_TO_MATCH ); - if ( match ) { - const [ , colorSlug ] = - currentClass.match( REGEX_TO_MATCH ); - const colorObject = getColorObjectByAttributeValues( - colors, - colorSlug - ); - const currentStyles = - currentFormat?.attributes?.style; - if ( - colorObject && - ( ! currentStyles || - currentStyles?.indexOf( - colorObject.color - ) === -1 ) - ) { - currentFormat.attributes.style = [ - `color: ${ colorObject.color }`, - currentStyles, - ].join( ';' ); - } + className?.split( ' ' ).forEach( ( currentClass ) => { + const match = currentClass.match( REGEX_TO_MATCH ); + if ( match ) { + const [ , colorSlug ] = + currentClass.match( REGEX_TO_MATCH ); + const colorObject = getColorObjectByAttributeValues( + colors, + colorSlug + ); + const currentStyles = currentFormat?.attributes?.style; + if ( + colorObject && + ( ! currentStyles || + currentStyles?.indexOf( colorObject.color ) === + -1 ) + ) { + currentFormat.attributes.style = [ + `color: ${ colorObject.color }`, + currentStyles, + ].join( ';' ); } - } ); - } - } ); + } + } ); + } } ); + } ); - return newFormats; - } - - return formats; + return newFormats; } diff --git a/packages/block-editor/src/components/rich-text/native/index.native.js b/packages/block-editor/src/components/rich-text/native/index.native.js index ab465b24411549..951d52ece6d694 100644 --- a/packages/block-editor/src/components/rich-text/native/index.native.js +++ b/packages/block-editor/src/components/rich-text/native/index.native.js @@ -196,7 +196,7 @@ export class RichText extends Component { const { formats, replacements, text } = currentValue; const { activeFormats } = this.state; - const newFormats = getFormatColors( value, formats, colorPalette ); + const newFormats = getFormatColors( formats, colorPalette ); return { formats: newFormats, From 64ac85e810ac42c013ba0efd285eb69e5ca2489f Mon Sep 17 00:00:00 2001 From: Ella Date: Thu, 30 Nov 2023 14:30:44 +0100 Subject: [PATCH 2/2] Remove space replacing --- .../src/components/rich-text/native/get-format-colors.native.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/block-editor/src/components/rich-text/native/get-format-colors.native.js b/packages/block-editor/src/components/rich-text/native/get-format-colors.native.js index a4fdc6f1ffb619..b68186246523f9 100644 --- a/packages/block-editor/src/components/rich-text/native/get-format-colors.native.js +++ b/packages/block-editor/src/components/rich-text/native/get-format-colors.native.js @@ -15,8 +15,6 @@ export function getFormatColors( formats, colors ) { format.forEach( ( currentFormat ) => { if ( currentFormat?.type === FORMAT_TYPE ) { const className = currentFormat?.attributes?.class; - currentFormat.attributes.style = - currentFormat.attributes.style.replace( / /g, '' ); className?.split( ' ' ).forEach( ( currentClass ) => { const match = currentClass.match( REGEX_TO_MATCH );