Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rich text: remove preserveWhiteSpace serialisation differences #55999

Merged
merged 7 commits into from
Nov 10, 2023
Merged

Rich text: remove preserveWhiteSpace serialisation differences #55999

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
18ec1dd
Rich text: auto preserve whitespace
ellatrix Nov 9, 2023
c576e36
Fix transforms
ellatrix Nov 9, 2023
0e50b6f
Polish tests
ellatrix Nov 9, 2023
e11bc4c
Add missing snap
ellatrix Nov 9, 2023
0c26493
Restore stripping white space when parsing HTML
ellatrix Nov 10, 2023
2ef1e3a
Only collapse white space when initialising rich text
ellatrix Nov 10, 2023
57a9fd7
Restore original regex
ellatrix Nov 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 1 addition & 8 deletions packages/block-editor/src/components/editable-text/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,7 @@ import { forwardRef } from '@wordpress/element';
import RichText from '../rich-text';

const EditableText = forwardRef( ( props, ref ) => {
return (
<RichText
ref={ ref }
{ ...props }
__unstableDisableFormats
preserveWhiteSpace
/>
);
return <RichText ref={ ref } { ...props } __unstableDisableFormats />;
} );

EditableText.Content = ( { value = '', tagName: Tag = 'div', ...props } ) => {
Expand Down
4 changes: 0 additions & 4 deletions packages/block-editor/src/components/rich-text/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,10 +69,6 @@ _Optional._ Whether to show the input is selected or not in order to show the fo

_Optional._ A list of autocompleters to use instead of the default.

### `preserveWhiteSpace: Boolean`

_Optional._ Whether or not to preserve white space characters in the `value`. Normally tab, newline and space characters are collapsed to a single space. If turned on, soft line breaks will be saved as newline characters, not as line break elements.

## RichText.Content

`RichText.Content` should be used in the `save` function of your block to correctly save rich text content.
Expand Down
3 changes: 0 additions & 3 deletions packages/block-editor/src/components/rich-text/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,6 @@ export function RichTextWrapper(
__unstableOnSplitAtEnd: onSplitAtEnd,
__unstableOnSplitAtDoubleLineEnd: onSplitAtDoubleLineEnd,
identifier,
preserveWhiteSpace,
__unstablePastePlainText: pastePlainText,
__unstableEmbedURLOnPaste,
__unstableDisableFormats: disableFormats,
Expand Down Expand Up @@ -262,7 +261,6 @@ export function RichTextWrapper(
placeholder,
__unstableIsSelected: isSelected,
__unstableDisableFormats: disableFormats,
preserveWhiteSpace,
__unstableDependencies: [ ...dependencies, tagName ],
__unstableAfterParse: addEditorOnlyFormats,
__unstableBeforeSerialize: removeEditorOnlyFormats,
Expand Down Expand Up @@ -348,7 +346,6 @@ export function RichTextWrapper(
onReplace,
onSplit,
__unstableEmbedURLOnPaste,
preserveWhiteSpace,
pastePlainText,
} ),
useDelete( {
Expand Down
7 changes: 1 addition & 6 deletions packages/block-editor/src/components/rich-text/use-paste-handler.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ export function usePasteHandler( props ) {
onReplace,
onSplit,
__unstableEmbedURLOnPaste,
preserveWhiteSpace,
pastePlainText,
} = propsRef.current;

Expand Down Expand Up @@ -63,10 +62,7 @@ export function usePasteHandler( props ) {
// without filtering the data. The filters are only meant for externally
// pasted content and remove inline styles.
if ( isInternal ) {
const pastedValue = create( {
html,
preserveWhiteSpace,
} );
const pastedValue = create( { html } );
addActiveFormats( pastedValue, value.activeFormats );
onChange( insert( value, pastedValue ) );
return;
Expand Down Expand Up @@ -136,7 +132,6 @@ export function usePasteHandler( props ) {
plainText,
mode,
tagName,
preserveWhiteSpace,
} );

if ( typeof content === 'string' ) {
Expand Down
83 changes: 11 additions & 72 deletions packages/block-editor/src/store/actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ import deprecated from '@wordpress/deprecated';
/**
* Internal dependencies
*/
import { mapRichTextSettings } from './utils';
import {
retrieveSelectedAttribute,
START_OF_SELECTED_AREA,
Expand Down Expand Up @@ -759,43 +758,23 @@ export const __unstableDeleteSelection =
const selectionB = selectionEnd;

const blockA = select.getBlock( selectionA.clientId );
const blockAType = getBlockType( blockA.name );

const blockB = select.getBlock( selectionB.clientId );
const blockBType = getBlockType( blockB.name );

const htmlA = blockA.attributes[ selectionA.attributeKey ];
const htmlB = blockB.attributes[ selectionB.attributeKey ];

const attributeDefinitionA =
blockAType.attributes[ selectionA.attributeKey ];
const attributeDefinitionB =
blockBType.attributes[ selectionB.attributeKey ];

let valueA = create( {
html: htmlA,
...mapRichTextSettings( attributeDefinitionA ),
} );
let valueB = create( {
html: htmlB,
...mapRichTextSettings( attributeDefinitionB ),
} );
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Like I said, a pain to work with.

let valueA = create( { html: htmlA } );
let valueB = create( { html: htmlB } );

valueA = remove( valueA, selectionA.offset, valueA.text.length );
valueB = insert( valueB, START_OF_SELECTED_AREA, 0, selectionB.offset );

// Clone the blocks so we don't manipulate the original.
const cloneA = cloneBlock( blockA, {
[ selectionA.attributeKey ]: toHTMLString( {
value: valueA,
...mapRichTextSettings( attributeDefinitionA ),
} ),
[ selectionA.attributeKey ]: toHTMLString( { value: valueA } ),
} );
const cloneB = cloneBlock( blockB, {
[ selectionB.attributeKey ]: toHTMLString( {
value: valueB,
...mapRichTextSettings( attributeDefinitionB ),
} ),
[ selectionB.attributeKey ]: toHTMLString( { value: valueB } ),
} );

const followingBlock = isForward ? cloneA : cloneB;
Expand Down Expand Up @@ -831,20 +810,10 @@ export const __unstableDeleteSelection =
const newAttributeKey = retrieveSelectedAttribute( updatedAttributes );

const convertedHtml = updatedAttributes[ newAttributeKey ];
const convertedValue = create( {
html: convertedHtml,
...mapRichTextSettings(
targetBlockType.attributes[ newAttributeKey ]
),
} );
const convertedValue = create( { html: convertedHtml } );
const newOffset = convertedValue.text.indexOf( START_OF_SELECTED_AREA );
const newValue = remove( convertedValue, newOffset, newOffset + 1 );
const newHtml = toHTMLString( {
value: newValue,
...mapRichTextSettings(
targetBlockType.attributes[ newAttributeKey ]
),
} );
const newHtml = toHTMLString( { value: newValue } );

updatedAttributes[ newAttributeKey ] = newHtml;

Expand Down Expand Up @@ -931,27 +900,13 @@ export const __unstableSplitSelection =
const selectionB = selectionEnd;

const blockA = select.getBlock( selectionA.clientId );
const blockAType = getBlockType( blockA.name );

const blockB = select.getBlock( selectionB.clientId );
const blockBType = getBlockType( blockB.name );

const htmlA = blockA.attributes[ selectionA.attributeKey ];
const htmlB = blockB.attributes[ selectionB.attributeKey ];

const attributeDefinitionA =
blockAType.attributes[ selectionA.attributeKey ];
const attributeDefinitionB =
blockBType.attributes[ selectionB.attributeKey ];

let valueA = create( {
html: htmlA,
...mapRichTextSettings( attributeDefinitionA ),
} );
let valueB = create( {
html: htmlB,
...mapRichTextSettings( attributeDefinitionB ),
} );
let valueA = create( { html: htmlA } );
let valueB = create( { html: htmlB } );

valueA = remove( valueA, selectionA.offset, valueA.text.length );
valueB = remove( valueB, 0, selectionB.offset );
Expand All @@ -964,7 +919,6 @@ export const __unstableSplitSelection =
...blockA.attributes,
[ selectionA.attributeKey ]: toHTMLString( {
value: valueA,
...mapRichTextSettings( attributeDefinitionA ),
} ),
},
},
Expand All @@ -975,7 +929,6 @@ export const __unstableSplitSelection =
...blockB.attributes,
[ selectionB.attributeKey ]: toHTMLString( {
value: valueB,
...mapRichTextSettings( attributeDefinitionB ),
} ),
},
},
Expand Down Expand Up @@ -1143,18 +1096,14 @@ export const mergeBlocks =
const selectedBlock = clientId === clientIdA ? cloneA : cloneB;
const html = selectedBlock.attributes[ attributeKey ];
const value = insert(
create( {
html,
...mapRichTextSettings( attributeDefinition ),
} ),
create( { html } ),
START_OF_SELECTED_AREA,
offset,
offset
);

selectedBlock.attributes[ attributeKey ] = toHTMLString( {
value,
...mapRichTextSettings( attributeDefinition ),
} );
}

Expand All @@ -1180,22 +1129,12 @@ export const mergeBlocks =
const newAttributeKey =
retrieveSelectedAttribute( updatedAttributes );
const convertedHtml = updatedAttributes[ newAttributeKey ];
const convertedValue = create( {
html: convertedHtml,
...mapRichTextSettings(
blockAType.attributes[ newAttributeKey ]
),
} );
const convertedValue = create( { html: convertedHtml } );
const newOffset = convertedValue.text.indexOf(
START_OF_SELECTED_AREA
);
const newValue = remove( convertedValue, newOffset, newOffset + 1 );
const newHtml = toHTMLString( {
value: newValue,
...mapRichTextSettings(
blockAType.attributes[ newAttributeKey ]
),
} );
const newHtml = toHTMLString( { value: newValue } );

updatedAttributes[ newAttributeKey ] = newHtml;

Expand Down
21 changes: 2 additions & 19 deletions packages/block-editor/src/store/selectors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ import { createRegistrySelector } from '@wordpress/data';
/**
* Internal dependencies
*/
import { mapRichTextSettings } from './utils';
import { orderBy } from '../utils/sorting';

/**
Expand Down Expand Up @@ -1114,27 +1113,13 @@ export const __unstableGetSelectedBlocksWithPartialSelection = ( state ) => {
: [ selectionAnchor, selectionFocus ];

const blockA = getBlock( state, selectionStart.clientId );
const blockAType = getBlockType( blockA.name );

const blockB = getBlock( state, selectionEnd.clientId );
const blockBType = getBlockType( blockB.name );

const htmlA = blockA.attributes[ selectionStart.attributeKey ];
const htmlB = blockB.attributes[ selectionEnd.attributeKey ];

const attributeDefinitionA =
blockAType.attributes[ selectionStart.attributeKey ];
const attributeDefinitionB =
blockBType.attributes[ selectionEnd.attributeKey ];

let valueA = create( {
html: htmlA,
...mapRichTextSettings( attributeDefinitionA ),
} );
let valueB = create( {
html: htmlB,
...mapRichTextSettings( attributeDefinitionB ),
} );
let valueA = create( { html: htmlA } );
let valueB = create( { html: htmlB } );

valueA = remove( valueA, 0, selectionStart.offset );
valueB = remove( valueB, selectionEnd.offset, valueB.text.length );
Expand All @@ -1146,7 +1131,6 @@ export const __unstableGetSelectedBlocksWithPartialSelection = ( state ) => {
...blockA.attributes,
[ selectionStart.attributeKey ]: toHTMLString( {
value: valueA,
...mapRichTextSettings( attributeDefinitionA ),
} ),
},
},
Expand All @@ -1156,7 +1140,6 @@ export const __unstableGetSelectedBlocksWithPartialSelection = ( state ) => {
...blockB.attributes,
[ selectionEnd.attributeKey ]: toHTMLString( {
value: valueB,
...mapRichTextSettings( attributeDefinitionB ),
} ),
},
},
Expand Down
12 changes: 0 additions & 12 deletions packages/block-editor/src/store/utils.js
View file
Open in desktop

This file was deleted.

3 changes: 1 addition & 2 deletions packages/block-library/src/code/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,7 @@
"content": {
"type": "string",
"source": "html",
"selector": "code",
"__unstablePreserveWhiteSpace": true
"selector": "code"
}
},
"supports": {
Expand Down
1 change: 0 additions & 1 deletion packages/block-library/src/code/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ export default function CodeEdit( {
onMerge={ mergeBlocks }
placeholder={ __( 'Write code…' ) }
aria-label={ __( 'Code' ) }
preserveWhiteSpace
__unstablePastePlainText
__unstableOnSplitAtDoubleLineEnd={ () =>
insertBlocksAfter( createBlock( getDefaultBlockName() ) )
Expand Down
22 changes: 14 additions & 8 deletions packages/block-library/src/code/transforms.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
* WordPress dependencies
*/
import { createBlock } from '@wordpress/blocks';
import { create, toHTMLString } from '@wordpress/rich-text';

const transforms = {
from: [
Expand All @@ -12,10 +13,18 @@ const transforms = {
},
{
type: 'block',
blocks: [ 'core/html', 'core/paragraph' ],
transform: ( { content } ) => {
blocks: [ 'core/paragraph' ],
transform: ( { content } ) =>
createBlock( 'core/code', { content } ),
},
{
type: 'block',
blocks: [ 'core/html' ],
transform: ( { content: text } ) => {
return createBlock( 'core/code', {
content,
// The HTML is plain text (with plain line breaks), so
// convert it to rich text.
content: toHTMLString( { value: create( { text } ) } ),
} );
},
},
Expand All @@ -42,11 +51,8 @@ const transforms = {
{
type: 'block',
blocks: [ 'core/paragraph' ],
transform: ( { content } ) => {
return createBlock( 'core/paragraph', {
content: content.replace( /\n/g, '<br>' ),
} );
},
transform: ( { content } ) =>
createBlock( 'core/paragraph', { content } ),
},
],
};
Expand Down
7 changes: 5 additions & 2 deletions packages/block-library/src/html/transforms.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,18 @@
* WordPress dependencies
*/
import { createBlock } from '@wordpress/blocks';
import { create } from '@wordpress/rich-text';

const transforms = {
from: [
{
type: 'block',
blocks: [ 'core/code' ],
transform: ( { content } ) => {
transform: ( { content: html } ) => {
return createBlock( 'core/html', {
content,
// The code block may output HTML formatting, so convert it
// to plain text.
content: create( { html } ).text,
} );
},
},
Expand Down
Loading
Loading