Skip to content

Commit

Permalink
Mobile: remove rich text multiline
Browse files Browse the repository at this point in the history
  • Loading branch information
ellatrix committed Nov 14, 2023
1 parent 4d7b66f commit 14c4a6d
Show file tree
Hide file tree
Showing 5 changed files with 70 additions and 119 deletions.
51 changes: 5 additions & 46 deletions packages/block-editor/src/components/rich-text/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,11 @@ import {
createContext,
} from '@wordpress/element';
import { useDispatch, useSelect } from '@wordpress/data';
import { children as childrenSource } from '@wordpress/blocks';
import { useInstanceId, useMergeRefs } from '@wordpress/compose';
import { useMergeRefs } from '@wordpress/compose';
import {
__unstableUseRichText as useRichText,
__unstableCreateElement,
removeFormat,
} from '@wordpress/rich-text';
import deprecated from '@wordpress/deprecated';
import { Popover } from '@wordpress/components';

/**
Expand All @@ -46,7 +43,7 @@ import { useFirefoxCompat } from './use-firefox-compat';
import FormatEdit from './format-edit';
import { getAllowedFormats } from './utils';
import { Content } from './content';
import RichTextMultiline from './multiline';
import { withDeprecations } from './with-deprecations';

export const keyboardShortcutContext = createContext();
export const inputEventContext = createContext();
Expand Down Expand Up @@ -387,47 +384,9 @@ export function 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 );
const ForwardedRichTextContainer = withDeprecations(
forwardRef( RichTextWrapper )
);

ForwardedRichTextContainer.Content = Content;
ForwardedRichTextContainer.isEmpty = ( value ) => {
Expand Down
33 changes: 8 additions & 25 deletions packages/block-editor/src/components/rich-text/index.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,17 +39,17 @@ import FormatToolbarContainer from './format-toolbar-container';
import { store as blockEditorStore } from '../../store';
import {
addActiveFormats,
getMultilineTag,
getAllowedFormats,
createLinkInParagraph,
} from './utils';
import EmbedHandlerPicker from './embed-handler-picker';
import { Content } from './content';
import RichText from './native';
import { withDeprecations } from './with-deprecations';

const classes = 'block-editor-rich-text__editable';

function RichTextWrapper(
export function RichTextWrapper(
{
children,
tagName,
Expand All @@ -58,7 +58,6 @@ function RichTextWrapper(
value: originalValue,
onChange: originalOnChange,
isSelected: originalIsSelected,
multiline,
inlineToolbar,
wrapperClassName,
autocompleters,
Expand All @@ -80,7 +79,6 @@ function RichTextWrapper(
disableLineBreaks,
unstableOnFocus,
__unstableAllowPrefixTransformations,
__unstableMultilineRootTag,
// Native props.
__unstableMobileNoFocusOnMount,
deleteEnter,
Expand Down Expand Up @@ -179,7 +177,6 @@ function RichTextWrapper(
selectionChange,
__unstableMarkAutomaticChange,
} = useDispatch( blockEditorStore );
const multilineTag = getMultilineTag( multiline );
const adjustedAllowedFormats = getAllowedFormats( {
allowedFormats,
disableFormats,
Expand Down Expand Up @@ -261,10 +258,7 @@ function RichTextWrapper(
if ( ! hasPastedBlocks || ! isEmpty( before ) ) {
blocks.push(
onSplit(
toHTMLString( {
value: before,
multilineTag,
} ),
toHTMLString( { value: before } ),
! isAfterOriginal
)
);
Expand All @@ -288,13 +282,7 @@ function RichTextWrapper(
: ! onSplitMiddle || ! isEmpty( after )
) {
blocks.push(
onSplit(
toHTMLString( {
value: after,
multilineTag,
} ),
isAfterOriginal
)
onSplit( toHTMLString( { value: after } ), isAfterOriginal )
);
}

Expand All @@ -308,7 +296,7 @@ function RichTextWrapper(

onReplace( blocks, indexToSelect, initialPosition );
},
[ onReplace, onSplit, multilineTag, onSplitMiddle ]
[ onReplace, onSplit, onSplitMiddle ]
);

const onEnter = useCallback(
Expand Down Expand Up @@ -370,7 +358,6 @@ function RichTextWrapper(
onReplace,
onSplit,
__unstableMarkAutomaticChange,
multiline,
splitValue,
onSplitAtEnd,
]
Expand All @@ -392,9 +379,6 @@ function RichTextWrapper(
if ( isInternal ) {
const pastedValue = create( {
html,
multilineTag,
multilineWrapperTags:
multilineTag === 'li' ? [ 'ul', 'ol' ] : undefined,
preserveWhiteSpace,
} );
addActiveFormats( pastedValue, activeFormats );
Expand Down Expand Up @@ -496,7 +480,6 @@ function RichTextWrapper(
onSplit,
splitValue,
__unstableEmbedURLOnPaste,
multilineTag,
preserveWhiteSpace,
pastePlainText,
]
Expand Down Expand Up @@ -568,7 +551,6 @@ function RichTextWrapper(
onPaste={ onPaste }
__unstableIsSelected={ isSelected }
__unstableInputRule={ inputRule }
__unstableMultilineTag={ multilineTag }
__unstableOnEnterFormattedText={ enterFormattedText }
__unstableOnExitFormattedText={ exitFormattedText }
__unstableOnCreateUndoLevel={ __unstableMarkLastChangeAsPersistent }
Expand All @@ -582,7 +564,6 @@ function RichTextWrapper(
__unstableAllowPrefixTransformations={
__unstableAllowPrefixTransformations
}
__unstableMultilineRootTag={ __unstableMultilineRootTag }
// Native props.
blockIsSelected={
originalIsSelected !== undefined
Expand Down Expand Up @@ -675,7 +656,9 @@ function RichTextWrapper(
);
}

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

ForwardedRichTextContainer.Content = Content;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -105,27 +105,11 @@ const DEFAULT_FONT_SIZE = 16;
const MIN_LINE_HEIGHT = 1;

export class RichText extends Component {
constructor( {
value,
selectionStart,
selectionEnd,
__unstableMultilineTag: multiline,
} ) {
constructor( { value, selectionStart, selectionEnd } ) {
super( ...arguments );

this.isMultiline = false;
if ( multiline === true || multiline === 'p' || multiline === 'li' ) {
this.multilineTag = multiline === true ? 'p' : multiline;
this.isMultiline = true;
}

if ( this.multilineTag === 'li' ) {
this.multilineWrapperTags = [ 'ul', 'ol' ];
}

this.isIOS = Platform.OS === 'ios';
this.createRecord = this.createRecord.bind( this );
this.restoreParagraphTags = this.restoreParagraphTags.bind( this );
this.onChangeFromAztec = this.onChangeFromAztec.bind( this );
this.onKeyDown = this.onKeyDown.bind( this );
this.handleEnter = this.handleEnter.bind( this );
Expand Down Expand Up @@ -223,8 +207,6 @@ export class RichText extends Component {
...create( {
html: this.value,
range: null,
multilineTag: this.multilineTag,
multilineWrapperTags: this.multilineWrapperTags,
preserveWhiteSpace,
} ),
};
Expand All @@ -235,12 +217,7 @@ export class RichText extends Component {

valueToFormat( value ) {
// Remove the outer root tags.
return this.removeRootTagsProducedByAztec(
toHTMLString( {
value,
multilineTag: this.multilineTag,
} )
);
return this.removeRootTagsProducedByAztec( toHTMLString( { value } ) );
}

getActiveFormatNames( record ) {
Expand Down Expand Up @@ -357,29 +334,15 @@ export class RichText extends Component {
const contentWithoutRootTag = this.removeRootTagsProducedByAztec(
unescapeSpaces( event.nativeEvent.text )
);
let formattedContent = contentWithoutRootTag;
if ( ! this.isIOS ) {
formattedContent = this.restoreParagraphTags(
contentWithoutRootTag,
this.multilineTag
);
}

this.debounceCreateUndoLevel();
const refresh = this.value !== formattedContent;
this.value = formattedContent;
const refresh = this.value !== contentWithoutRootTag;
this.value = contentWithoutRootTag;

// We don't want to refresh if our goal is just to create a record.
if ( refresh ) {
this.props.onChange( formattedContent );
}
}

restoreParagraphTags( value, tag ) {
if ( tag === 'p' && ( ! value || ! value.startsWith( '<p>' ) ) ) {
return '<p>' + value + '</p>';
this.props.onChange( contentWithoutRootTag );
}
return value;
}

/*
Expand Down Expand Up @@ -705,17 +668,13 @@ export class RichText extends Component {
if ( Array.isArray( value ) ) {
return create( {
html: childrenBlock.toHTML( value ),
multilineTag: this.multilineTag,
multilineWrapperTags: this.multilineWrapperTags,
preserveWhiteSpace,
} );
}

if ( this.props.format === 'string' ) {
return create( {
html: value,
multilineTag: this.multilineTag,
multilineWrapperTags: this.multilineWrapperTags,
preserveWhiteSpace,
} );
}
Expand Down Expand Up @@ -1280,7 +1239,7 @@ export class RichText extends Component {
fontWeight={ this.props.fontWeight }
fontStyle={ this.props.fontStyle }
disableEditingMenu={ disableEditingMenu }
isMultiline={ this.isMultiline }
isMultiline={ false }
textAlign={ this.props.textAlign }
{ ...( this.isIOS ? { maxWidth } : {} ) }
minWidth={ minWidth }
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
/**
* WordPress dependencies
*/
import { forwardRef } from '@wordpress/element';
import { children as childrenSource } from '@wordpress/blocks';
import { useInstanceId } from '@wordpress/compose';
import { __unstableCreateElement } from '@wordpress/rich-text';
import deprecated from '@wordpress/deprecated';

/**
* Internal dependencies
*/
import RichTextMultiline from './multiline';

export function withDeprecations( Component ) {
return forwardRef( ( 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 NewComponent = props.multiline ? RichTextMultiline : Component;
const instanceId = useInstanceId( NewComponent );

return (
<NewComponent
{ ...props }
identifier={ props.identifier || instanceId }
value={ value }
onChange={ onChange }
ref={ ref }
/>
);
} );
}
1 change: 0 additions & 1 deletion packages/editor/src/components/post-title/index.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,6 @@ class PostTitle extends Component {
tagsToEliminate={ [ 'strong' ] }
unstableOnFocus={ this.props.onSelect }
onBlur={ this.props.onBlur } // Always assign onBlur as a props.
multiline={ false }
style={ titleStyles }
styles={ styles }
fontSize={ 24 }
Expand Down

0 comments on commit 14c4a6d

Please sign in to comment.