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

RichText: replace deprecated multiline prop with simple multiple instances #54310

Merged
merged 6 commits into from
Sep 11, 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
87 changes: 46 additions & 41 deletions packages/block-editor/src/components/rich-text/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,9 @@ import { useInputEvents } from './use-input-events';
import { useInsertReplacementText } from './use-insert-replacement-text';
import { useFirefoxCompat } from './use-firefox-compat';
import FormatEdit from './format-edit';
import { getMultilineTag, getAllowedFormats } from './utils';
import { getAllowedFormats } from './utils';
import { Content } from './content';
import RichTextMultiline from './multiline';

export const keyboardShortcutContext = createContext();
export const inputEventContext = createContext();
Expand Down Expand Up @@ -81,12 +82,12 @@ function removeNativeProps( props ) {
return restProps;
}

function RichTextWrapper(
export function RichTextWrapper(
{
children,
tagName = 'div',
value: originalValue = '',
onChange: originalOnChange,
value: adjustedValue = '',
onChange: adjustedOnChange,
isSelected: originalIsSelected,
multiline,
inlineToolbar,
Expand All @@ -111,18 +112,6 @@ function RichTextWrapper(
},
forwardedRef
) {
if ( multiline ) {
deprecated( 'wp.blockEditor.RichText multiline prop', {
since: '6.1',
version: '6.3',
alternative: 'nested blocks (InnerBlocks)',
link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/nested-blocks-inner-blocks/',
} );
}

const instanceId = useInstanceId( RichTextWrapper );

identifier = identifier || instanceId;
props = removeNativeProps( props );

const anchorRef = useRef();
Expand Down Expand Up @@ -157,33 +146,12 @@ function RichTextWrapper(
const { getSelectionStart, getSelectionEnd, getBlockRootClientId } =
useSelect( blockEditorStore );
const { selectionChange } = useDispatch( blockEditorStore );
const multilineTag = getMultilineTag( multiline );
const adjustedAllowedFormats = getAllowedFormats( {
allowedFormats,
disableFormats,
} );
const hasFormats =
! adjustedAllowedFormats || adjustedAllowedFormats.length > 0;
let adjustedValue = originalValue;
let adjustedOnChange = originalOnChange;

// Handle deprecated format.
if ( Array.isArray( originalValue ) ) {
deprecated( 'wp.blockEditor.RichText value prop as children type', {
since: '6.1',
version: '6.3',
alternative: 'value prop as string',
link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/',
} );

adjustedValue = childrenSource.toHTML( originalValue );
adjustedOnChange = ( newValue ) =>
originalOnChange(
childrenSource.fromDOM(
__unstableCreateElement( document, newValue ).childNodes
)
);
}

const onSelectionChange = useCallback(
( start, end ) => {
Expand Down Expand Up @@ -292,7 +260,6 @@ function RichTextWrapper(
onSelectionChange,
placeholder,
__unstableIsSelected: isSelected,
__unstableMultilineTag: multilineTag,
__unstableDisableFormats: disableFormats,
preserveWhiteSpace,
__unstableDependencies: [ ...dependencies, tagName ],
Expand Down Expand Up @@ -380,7 +347,6 @@ function RichTextWrapper(
onReplace,
onSplit,
__unstableEmbedURLOnPaste,
multilineTag,
preserveWhiteSpace,
pastePlainText,
} ),
Expand All @@ -394,7 +360,6 @@ function RichTextWrapper(
value,
onReplace,
onSplit,
multilineTag,
onChange,
disableLineBreaks,
onSplitAtEnd,
Expand All @@ -421,7 +386,47 @@ function RichTextWrapper(
);
}

const ForwardedRichTextContainer = forwardRef( RichTextWrapper );
const ForwardedRichTextWrapper = forwardRef( RichTextWrapper );

function RichTextSwitcher( props, ref ) {
let value = props.value;
let onChange = props.onChange;

// Handle deprecated format.
if ( Array.isArray( value ) ) {
deprecated( 'wp.blockEditor.RichText value prop as children type', {
since: '6.1',
version: '6.3',
alternative: 'value prop as string',
link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/',
} );

value = childrenSource.toHTML( props.value );
onChange = ( newValue ) =>
props.onChange(
childrenSource.fromDOM(
__unstableCreateElement( document, newValue ).childNodes
)
);
}

const Component = props.multiline
? RichTextMultiline
: ForwardedRichTextWrapper;
const instanceId = useInstanceId( RichTextSwitcher );

return (
<Component
{ ...props }
identifier={ props.identifier || instanceId }
value={ value }
onChange={ onChange }
ref={ ref }
/>
);
}

const ForwardedRichTextContainer = forwardRef( RichTextSwitcher );

ForwardedRichTextContainer.Content = Content;
ForwardedRichTextContainer.isEmpty = ( value ) => {
Expand Down
56 changes: 14 additions & 42 deletions packages/block-editor/src/components/rich-text/index.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,9 @@ import {
__experimentalRichText as RichText,
__unstableCreateElement,
isEmpty,
__unstableIsEmptyLine as isEmptyLine,
insert,
__unstableInsertLineSeparator as insertLineSeparator,
create,
replace,
split,
__UNSTABLE_LINE_SEPARATOR as LINE_SEPARATOR,
toHTMLString,
slice,
} from '@wordpress/rich-text';
Expand Down Expand Up @@ -338,32 +334,20 @@ function RichTextWrapper(
onCustomEnter();
}

if ( multiline ) {
if ( shiftKey ) {
if ( ! disableLineBreaks ) {
onChange( insert( value, '\n' ) );
}
} else if ( canSplit && isEmptyLine( value ) ) {
splitValue( value );
} else {
onChange( insertLineSeparator( value ) );
}
} else {
const { text, start: splitStart, end: splitEnd } = value;
const canSplitAtEnd =
onSplitAtEnd &&
splitStart === splitEnd &&
splitEnd === text.length;

if ( shiftKey || ( ! canSplit && ! canSplitAtEnd ) ) {
if ( ! disableLineBreaks ) {
onChange( insert( value, '\n' ) );
}
} else if ( ! canSplit && canSplitAtEnd ) {
onSplitAtEnd();
} else if ( canSplit ) {
splitValue( value );
const { text, start: splitStart, end: splitEnd } = value;
const canSplitAtEnd =
onSplitAtEnd &&
splitStart === splitEnd &&
splitEnd === text.length;

if ( shiftKey || ( ! canSplit && ! canSplitAtEnd ) ) {
if ( ! disableLineBreaks ) {
onChange( insert( value, '\n' ) );
}
} else if ( ! canSplit && canSplitAtEnd ) {
onSplitAtEnd();
} else if ( canSplit ) {
splitValue( value );
}
},
// eslint-disable-next-line react-hooks/exhaustive-deps
Expand Down Expand Up @@ -471,20 +455,8 @@ function RichTextWrapper(
} );

if ( typeof content === 'string' ) {
let valueToInsert = create( { html: content } );

const valueToInsert = create( { html: content } );
addActiveFormats( valueToInsert, activeFormats );

// If the content should be multiline, we should process text
// separated by a line break as separate lines.
if ( multilineTag ) {
valueToInsert = replace(
valueToInsert,
/\n+/g,
LINE_SEPARATOR
);
}

onChange( insert( value, valueToInsert ) );
} else if ( content.length > 0 ) {
// When an URL is pasted in an empty paragraph then the EmbedHandlerPicker should showcase options allowing the transformation of that URL
Expand Down
121 changes: 121 additions & 0 deletions packages/block-editor/src/components/rich-text/multiline.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
/**
* WordPress dependencies
*/
import { forwardRef } from '@wordpress/element';
import deprecated from '@wordpress/deprecated';
import { useDispatch } from '@wordpress/data';

/**
* Internal dependencies
*/
import { RichTextWrapper } from './';
import { store as blockEditorStore } from '../../store';
import { useBlockEditContext } from '../block-edit';
import { getMultilineTag } from './utils';

function RichTextMultiline(
{
children,
identifier,
tagName: TagName = 'div',
value = '',
onChange,
multiline,
...props
},
forwardedRef
) {
deprecated( 'wp.blockEditor.RichText multiline prop', {
since: '6.1',
version: '6.3',
alternative: 'nested blocks (InnerBlocks)',
link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/nested-blocks-inner-blocks/',
} );

const { clientId } = useBlockEditContext();
const { selectionChange } = useDispatch( blockEditorStore );

const multilineTagName = getMultilineTag( multiline );
value = value || `<${ multilineTagName }></${ multilineTagName }>`;
const padded = `</${ multilineTagName }>${ value }<${ multilineTagName }>`;
const values = padded.split(
`</${ multilineTagName }><${ multilineTagName }>`
);

values.shift();
values.pop();

function _onChange( newValues ) {
onChange(
`<${ multilineTagName }>${ newValues.join(
`</${ multilineTagName }><${ multilineTagName }>`
) }</${ multilineTagName }>`
);
}

return (
<TagName ref={ forwardedRef }>
{ values.map( ( _value, index ) => {
return (
<RichTextWrapper
key={ index }
identifier={ `${ identifier }-${ index }` }
tagName={ multilineTagName }
value={ _value }
onChange={ ( newValue ) => {
const newValues = values.slice();
newValues[ index ] = newValue;
_onChange( newValues );
} }
isSelected={ undefined }
onSplit={ ( v ) => v }
onReplace={ ( array ) => {
const newValues = values.slice();
newValues.splice( index, 1, ...array );
_onChange( newValues );
selectionChange(
clientId,
`${ identifier }-${ index + 1 }`,
0,
0
);
} }
onMerge={ ( forward ) => {
const newValues = values.slice();
let offset = 0;
if ( forward ) {
if ( ! newValues[ index + 1 ] ) return;
newValues.splice(
index,
2,
newValues[ index ] + newValues[ index + 1 ]
);
offset = newValues[ index ].length;
} else {
if ( ! newValues[ index - 1 ] ) return;
newValues.splice(
index - 1,
2,
newValues[ index - 1 ] + newValues[ index ]
);
offset = newValues[ index - 1 ].length;
}
_onChange( newValues );
selectionChange(
clientId,
`${ identifier }-${
index - ( forward ? 0 : 1 )
}`,
offset,
offset
);
} }
{ ...props }
/>
);
} ) }
</TagName>
);
}

export default forwardRef( RichTextMultiline );
Loading
Loading