Skip to content

Commit

Permalink
[RNMobile] Highlight text: Check if style attribute value is defined …
Browse files Browse the repository at this point in the history
…during filtering (#38670)

* Check if style value is defined before removing extra spaces

* Add test case for old text color format

* Update react-native-editor changelog
  • Loading branch information
fluiddot authored and mchowning committed Feb 9, 2022
1 parent c457157 commit 2a945f9
Show file tree
Hide file tree
Showing 4 changed files with 34 additions and 1 deletion.
2 changes: 1 addition & 1 deletion packages/format-library/src/text-color/index.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@ export const textColor = {
__unstableFilterAttributeValue( key, value ) {
if ( key !== 'style' ) return value;
// We need to remove the extra spaces within the styles on mobile
const newValue = value.replace( / /g, '' );
const newValue = value?.replace( / /g, '' );
// We should not add a background-color if it's already set
if ( newValue && newValue.includes( 'background-color' ) )
return newValue;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,3 +17,13 @@ exports[`Text color creates a paragraph block with the text color format 1`] = `
<p>Hello <mark style=\\"background-color:rgba(0,0,0,0);color:#cf2e2e\\" class=\\"has-inline-color has-vivid-red-color\\">this is a test</mark></p>
<!-- /wp:paragraph -->"
`;
exports[`Text color supports old text color format using "span" tag 1`] = `
"<!-- wp:paragraph -->
<p>this <span class=\\"has-inline-color has-green-color\\">is</span> <span class=\\"has-inline-color has-red-color\\">test</span></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><span style=\\"color:#08a5e9\\" class=\\"has-inline-color\\">this is a test</span></p>
<!-- /wp:paragraph -->"
`;
14 changes: 14 additions & 0 deletions packages/format-library/src/text-color/test/index.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -161,4 +161,18 @@ describe( 'Text color', () => {

expect( getEditorHtml() ).toMatchSnapshot();
} );

it( 'supports old text color format using "span" tag', async () => {
await initializeEditor( {
initialHtml: `<!-- wp:paragraph -->
<p>this <span class="has-inline-color has-green-color">is</span> <span class="has-inline-color has-red-color">test</span></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><span style="color:#08a5e9" class="has-inline-color">this is a test</span></p>
<!-- /wp:paragraph -->`,
} );

expect( getEditorHtml() ).toMatchSnapshot();
} );
} );
9 changes: 9 additions & 0 deletions packages/react-native-editor/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,15 @@ For each user feature we should also add a importance categorization label to i

## Unreleased

## 1.71.0

- [*] Image block: Replacing the media for an image set as featured prompts to update the featured image [#34666]
- [***] Font size and line-height support for text-based blocks used in block-based themes [#38205]

## 1.70.3

- [*] Highlight text: Check if style attribute value is defined during filtering [#38670]

## 1.70.2

- [**] Rich Text - Validate link colors [#38474]
Expand Down

0 comments on commit 2a945f9

Please sign in to comment.