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.

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
Show file tree
Hide file tree
Changes from 4 commits
Commits
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
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
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
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
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
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
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

This file was deleted.

3 changes: 1 addition & 2 deletions packages/block-library/src/code/block.json
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
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
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
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