@wordpress/editor 14.48.0 → 14.48.2-next.v.202606191442.0

package/src/components/post-revisions-timeline/index.js

@@ -0,0 +1,186 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { DataViewsPicker, filterSortAndPaginate } from '@wordpress/dataviews';
+import { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date';
+import { useCallback, useEffect, useMemo, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { authorField } from '@wordpress/fields';
+import { Text } from '@wordpress/ui';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import { PostContentInformationUI } from '../post-content-information';
+
+const PAGE_SIZE = 10;
+const EMPTY_ARRAY = [];
+const defaultLayouts = { pickerActivity: true };
+const baseView = {
+	type: 'pickerActivity',
+	titleField: 'date',
+	descriptionField: 'details',
+	fields: [ 'author' ],
+	layout: { density: 'compact' },
+	page: 1,
+	perPage: PAGE_SIZE,
+};
+
+const DAY_IN_MILLISECONDS = 86400000;
+
+function getDisplayDate( value ) {
+	const dateNowInMs = getDate( null ).getTime();
+	const date = getDate( value ?? null );
+	return dateNowInMs - date.getTime() > DAY_IN_MILLISECONDS
+		? dateI18n( getSettings().formats.datetimeAbbreviated, date )
+		: humanTimeDiff( date );
+}
+
+export default function PostRevisionsTimeline() {
+	const { setCurrentRevisionId } = unlock( useDispatch( editorStore ) );
+	const [ view, setView ] = useState( baseView );
+
+	const { revisions, revisionKey, currentRevisionId, currentRevision } =
+		useSelect( ( select ) => {
+			const { getCurrentPostType } = select( editorStore );
+			const {
+				getCurrentRevisionId: _getCurrentRevisionId,
+				getCurrentRevision,
+				getRevisionPage,
+				getPageRevisions,
+			} = unlock( select( editorStore ) );
+			const { getEntityConfig } = select( coreStore );
+
+			const _postType = getCurrentPostType();
+			const entityConfig = getEntityConfig( 'postType', _postType );
+			const _revisionKey = entityConfig?.revisionKey || 'id';
+			const _currentRevisionId = _getCurrentRevisionId();
+
+			return {
+				// Same desc-ordered window the header slider renders (warm cache).
+				revisions: getPageRevisions( getRevisionPage() ),
+				revisionKey: _revisionKey,
+				currentRevisionId: _currentRevisionId,
+				currentRevision: _currentRevisionId
+					? getCurrentRevision()
+					: undefined,
+			};
+		}, [] );
+
+	const postContent = currentRevision?.content?.raw;
+
+	const isLoading = ! revisions;
+
+	const fields = useMemo(
+		() => [
+			{
+				id: 'date',
+				label: __( 'Date' ),
+				// Return the humanized label the row renders so the picker
+				// option's accessible name announces e.g. "5 minutes ago"
+				// instead of the raw ISO timestamp.
+				getValue: ( { item } ) => getDisplayDate( item.date ),
+				render: ( { item } ) => (
+					<Text
+						variant="heading-sm"
+						render={ <time dateTime={ item.date } /> }
+					>
+						{ getDisplayDate( item.date ) }
+					</Text>
+				),
+				enableSorting: false,
+				enableHiding: false,
+			},
+			authorField,
+			{
+				id: 'details',
+				label: __( 'Details' ),
+				render: ( { item } ) => {
+					if (
+						String( item[ revisionKey ] ) !==
+						String( currentRevisionId )
+					) {
+						return null;
+					}
+					return (
+						<PostContentInformationUI postContent={ postContent } />
+					);
+				},
+				enableSorting: false,
+				enableHiding: false,
+			},
+		],
+		[ revisionKey, currentRevisionId, postContent ]
+	);
+
+	const { data: shownRevisions, paginationInfo } = useMemo(
+		() => filterSortAndPaginate( revisions || EMPTY_ARRAY, view, fields ),
+		[ revisions, view, fields ]
+	);
+
+	// Keep the selected revision visible: when it changes (e.g. the slider
+	// scrubs), jump to the client-side page that contains it. Keyed on the
+	// selection/data, not view.page, so manual paging stays free browsing.
+	useEffect( () => {
+		if ( ! currentRevisionId || ! revisions ) {
+			return;
+		}
+		const index = revisions.findIndex(
+			( r ) => String( r[ revisionKey ] ) === String( currentRevisionId )
+		);
+		if ( index < 0 ) {
+			return;
+		}
+		const page = Math.floor( index / view.perPage ) + 1;
+		setView( ( v ) => ( v.page === page ? v : { ...v, page } ) );
+	}, [ currentRevisionId, revisions, revisionKey, view.perPage ] );
+
+	const selection = useMemo(
+		() =>
+			currentRevisionId ? [ String( currentRevisionId ) ] : EMPTY_ARRAY,
+		[ currentRevisionId ]
+	);
+
+	const onChangeSelection = useCallback(
+		( newSelection ) => {
+			// Revisions mode always keeps one revision selected. Clicking the
+			// active revision yields an empty selection, which we ignore so the
+			// timeline never ends up with nothing selected.
+			if ( newSelection.length === 0 ) {
+				return;
+			}
+			const selectedId = newSelection[ newSelection.length - 1 ];
+			setCurrentRevisionId( Number( selectedId ) );
+		},
+		[ setCurrentRevisionId ]
+	);
+
+	const getItemId = useCallback(
+		( item ) => String( item[ revisionKey ] ),
+		[ revisionKey ]
+	);
+
+	return (
+		<div className="editor-post-revisions-timeline">
+			<DataViewsPicker
+				view={ view }
+				onChangeView={ setView }
+				fields={ fields }
+				data={ shownRevisions }
+				isLoading={ isLoading }
+				paginationInfo={ paginationInfo }
+				defaultLayouts={ defaultLayouts }
+				getItemId={ getItemId }
+				selection={ selection }
+				onChangeSelection={ onChangeSelection }
+			>
+				<DataViewsPicker.Layout />
+				<DataViewsPicker.Footer />
+			</DataViewsPicker>
+		</div>
+	);
+}

package/src/components/post-revisions-timeline/style.scss

@@ -0,0 +1,43 @@
+// Give the revisions inspector a bounded height so the timeline scrolls
+// internally and the picker's pagination stays pinned to the bottom.
+//
+// The timeline only renders in revisions mode, so its ancestors are scoped
+// with `:has()` — keeping this layout out of the generic editor sidebar.
+.interface-complementary-area:has(.editor-post-revisions-timeline) {
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+
+	// The tabs header keeps its natural height.
+	.editor-sidebar__panel-tabs {
+		flex-shrink: 0;
+	}
+}
+
+.editor-sidebar__panel:has(.editor-post-revisions-timeline) {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0;
+
+	// The document tab panel hands its bounded height down to the timeline.
+	[role="tabpanel"]:has(.editor-post-revisions-timeline) {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		min-height: 0;
+	}
+
+	// Cap only the post-meta diff content so a large
+	// diff (e.g. footnotes) can't dominate the column.
+	.editor-revision-meta-diff__content {
+		max-height: 80px;
+		overflow-y: auto;
+	}
+
+	// timeline grows to fill the leftover space and scrolls internally.
+	.editor-post-revisions-timeline {
+		flex: 1;
+		min-height: 0;
+	}
+}

package/src/components/post-saved-state/index.js

@@ -46,6 +46,7 @@ export default function PostSavedState( { forceIsDirty } ) {
 		isSaveable,
 		isSaving,
 		isSavingLocked,
+		isSavingNonPostEntityChanges,
 		isScheduled,
 		hasPublishAction,
 		showIconLabels,
@@ -54,35 +55,25 @@ export default function PostSavedState( { forceIsDirty } ) {
 		postType,
 	} = useSelect(
 		( select ) => {
-			const {
-				isEditedPostNew,
-				isCurrentPostPublished,
-				isCurrentPostScheduled,
-				isEditedPostDirty,
-				isSavingPost,
-				isEditedPostSaveable,
-				isPostSavingLocked,
-				getCurrentPost,
-				isAutosavingPost,
-				getEditedPostAttribute,
-				getPostEdits,
-			} = select( editorStore );
+			const store = select( editorStore );
 			const { get } = select( preferencesStore );
 			return {
-				isAutosaving: isAutosavingPost(),
-				isDirty: forceIsDirty || isEditedPostDirty(),
-				isNew: isEditedPostNew(),
-				isPublished: isCurrentPostPublished(),
-				isSaving: isSavingPost(),
-				isSaveable: isEditedPostSaveable(),
-				isSavingLocked: isPostSavingLocked(),
-				isScheduled: isCurrentPostScheduled(),
+				isAutosaving: store.isAutosavingPost(),
+				isDirty: forceIsDirty || store.isEditedPostDirty(),
+				isNew: store.isEditedPostNew(),
+				isPublished: store.isCurrentPostPublished(),
+				isSaving: store.isSavingPost(),
+				isSaveable: store.isEditedPostSaveable(),
+				isSavingLocked: store.isPostSavingLocked(),
+				isSavingNonPostEntityChanges:
+					store.isSavingNonPostEntityChanges(),
+				isScheduled: store.isCurrentPostScheduled(),
 				hasPublishAction:
-					getCurrentPost()?._links?.[ 'wp:action-publish' ] ?? false,
+					!! store.getCurrentPost()?._links?.[ 'wp:action-publish' ],
 				showIconLabels: get( 'core', 'showIconLabels' ),
-				postStatus: getEditedPostAttribute( 'status' ),
-				postStatusHasChanged: !! getPostEdits()?.status,
-				postType: select( editorStore ).getCurrentPostType(),
+				postStatus: store.getEditedPostAttribute( 'status' ),
+				postStatusHasChanged: !! store.getPostEdits()?.status,
+				postType: store.getCurrentPostType(),
 			};
 		},
 		[ forceIsDirty ]
@@ -143,7 +134,13 @@ export default function PostSavedState( { forceIsDirty } ) {
 
 	const isSaved = forceSavedMessage || ( ! isNew && ! isDirty );
 	const isSavedState = isSaving || isSaved;
-	const isDisabled = isSaving || isSaved || ! isSaveable || isSavingLocked;
+	const isDisabled =
+		isSaving ||
+		isSaved ||
+		! isSaveable ||
+		isSavingLocked ||
+		// Disable while a non-post entity (e.g. a newly created term) is mid-save.
+		isSavingNonPostEntityChanges;
 	let text;
 
 	if ( isSaving ) {

package/src/components/post-saved-state/test/index.js

@@ -71,6 +71,24 @@ describe( 'PostSavedState', () => {
 		expect( screen.getByRole( 'button' ) ).toMatchSnapshot();
 	} );
 
+	it( 'returns a disabled button while a non-post entity is being saved', () => {
+		useSelect.mockImplementation( () => ( {
+			isDirty: true,
+			isNew: false,
+			isSaveable: true,
+			isSaving: false,
+			isSavingNonPostEntityChanges: true,
+			postStatus: 'draft',
+		} ) );
+
+		render( <PostSavedState /> );
+
+		expect( screen.getByRole( 'button' ) ).toHaveAttribute(
+			'aria-disabled',
+			'true'
+		);
+	} );
+
 	it( 'should return Saved text if not new and not dirty', () => {
 		useSelect.mockImplementation( () => ( {
 			isDirty: false,

package/src/components/post-taxonomies/flat-term-selector.js

@@ -3,11 +3,8 @@
  */
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { useEffect, useMemo, useState } from '@wordpress/element';
-import {
-	FormTokenField,
-	withFilters,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
+import { FormTokenField, withFilters } from '@wordpress/components';
+import { Stack } from '@wordpress/ui';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { useDebounce } from '@wordpress/compose';
@@ -280,7 +277,7 @@ export function FlatTermSelector( { slug } ) {
 	);
 
 	return (
-		<VStack spacing={ 4 }>
+		<Stack direction="column" gap="lg">
 			<FormTokenField
 				__next40pxDefaultSize
 				value={ values }
@@ -296,7 +293,7 @@ export function FlatTermSelector( { slug } ) {
 				} }
 			/>
 			<MostUsedTerms taxonomy={ taxonomy } onSelect={ appendTerm } />
-		</VStack>
+		</Stack>
 	);
 }
 

package/src/components/post-text-editor/index.js

@@ -6,6 +6,7 @@ import Textarea from 'react-autosize-textarea';
 /**
  * WordPress dependencies
  */
+import { useLayoutEffect, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 import { useDispatch, useSelect } from '@wordpress/data';
@@ -16,6 +17,7 @@ import { VisuallyHidden } from '@wordpress/ui';
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import { adjustPosition, getDiff } from './utils';
 
 /**
  * Displays the Post Text Editor along with content in Visual and Text mode.
@@ -24,6 +26,9 @@ import { store as editorStore } from '../../store';
  */
 export default function PostTextEditor() {
 	const instanceId = useInstanceId( PostTextEditor );
+	const textareaRef = useRef();
+	const previousValueRef = useRef();
+	const selectionRef = useRef();
 	const { value, type, id } = useSelect( ( select ) => {
 		const { getCurrentPostType, getCurrentPostId, getEditedPostContent } =
 			select( editorStore );
@@ -35,6 +40,58 @@ export default function PostTextEditor() {
 	}, [] );
 	const { editEntityRecord } = useDispatch( coreStore );
 
+	useLayoutEffect( () => {
+		const textarea = textareaRef.current;
+		const previousValue = previousValueRef.current;
+		previousValueRef.current = value;
+
+		if (
+			! textarea ||
+			previousValue === undefined ||
+			previousValue === value ||
+			! selectionRef.current
+		) {
+			return;
+		}
+
+		const { selectionStart, selectionEnd, selectionDirection } =
+			selectionRef.current;
+		const changes = getDiff( previousValue, value );
+		const adjustedSelectionStart = adjustPosition(
+			selectionStart,
+			changes,
+			previousValue,
+			value
+		);
+		const adjustedSelectionEnd = adjustPosition(
+			selectionEnd,
+			changes,
+			previousValue,
+			value
+		);
+
+		textarea.setSelectionRange(
+			adjustedSelectionStart,
+			adjustedSelectionEnd,
+			selectionDirection
+		);
+		selectionRef.current = {
+			selectionStart: adjustedSelectionStart,
+			selectionEnd: adjustedSelectionEnd,
+			selectionDirection,
+		};
+	}, [ value ] );
+
+	const updateSelection = ( event ) => {
+		const { selectionStart, selectionEnd, selectionDirection } =
+			event.target;
+		selectionRef.current = {
+			selectionStart,
+			selectionEnd,
+			selectionDirection,
+		};
+	};
+
 	return (
 		<>
 			<VisuallyHidden
@@ -46,14 +103,22 @@ export default function PostTextEditor() {
 			<Textarea
 				autoComplete="off"
 				dir="auto"
+				ref={ textareaRef }
 				value={ value }
 				onChange={ ( event ) => {
+					updateSelection( event );
+					previousValueRef.current = event.target.value;
 					editEntityRecord( 'postType', type, id, {
 						content: event.target.value,
 						blocks: undefined,
 						selection: undefined,
 					} );
 				} }
+				onFocus={ updateSelection }
+				// A click or arrow-key caret move does not fire `select` (only
+				// range selections do), so track those moves via mouseup/keyup.
+				onMouseUp={ updateSelection }
+				onKeyUp={ updateSelection }
 				className="editor-post-text-editor"
 				id={ `post-content-${ instanceId }` }
 				placeholder={ __( 'Start writing with text or HTML' ) }

package/src/components/post-text-editor/test/utils.js

@@ -0,0 +1,210 @@
+/**
+ * Internal dependencies
+ */
+import { getAdjustedCursorPosition } from '../utils';
+
+describe( 'PostTextEditor', () => {
+	describe( 'getAdjustedCursorPosition', () => {
+		it( 'keeps the cursor in place when text is inserted after it', () => {
+			expect(
+				getAdjustedCursorPosition( 3, 'foo bar', 'foo bar baz' )
+			).toBe( 3 );
+		} );
+
+		it( 'moves the cursor when text is inserted before it', () => {
+			expect( getAdjustedCursorPosition( 4, 'abcd', 'abXYcd' ) ).toBe(
+				6
+			);
+		} );
+
+		it( 'moves the cursor when text is deleted before it', () => {
+			expect( getAdjustedCursorPosition( 6, 'abcdef', 'abef' ) ).toBe(
+				4
+			);
+		} );
+
+		it( 'moves the cursor to the end of a replacement around it', () => {
+			expect( getAdjustedCursorPosition( 3, 'abcdef', 'abXYef' ) ).toBe(
+				4
+			);
+		} );
+
+		it( 'handles multiple separated changes in one update', () => {
+			expect(
+				getAdjustedCursorPosition( 7, 'abcdefghij', 'abXXcdefYYghij' )
+			).toBe( 11 );
+		} );
+
+		it( 'keeps the cursor in place when large text is inserted after it', () => {
+			const oldValue = `cursor\n${ 'a\n'.repeat( 6000 ) }`;
+			const newValue = `${ oldValue }remote\n`;
+
+			expect(
+				getAdjustedCursorPosition( 'cursor'.length, oldValue, newValue )
+			).toBe( 'cursor'.length );
+		} );
+
+		it( 'moves the cursor when large text is inserted before it', () => {
+			const oldValue = `cursor\n${ 'a\n'.repeat( 6000 ) }`;
+			const newValue = `remote\n${ oldValue }`;
+
+			expect(
+				getAdjustedCursorPosition( 'cursor'.length, oldValue, newValue )
+			).toBe( 'remote\n'.length + 'cursor'.length );
+		} );
+
+		it( 'moves the cursor when large text is deleted before it', () => {
+			const deletedPrefix = 'remote\n';
+			const newValue = `cursor\n${ 'a\n'.repeat( 6000 ) }`;
+			const oldValue = `${ deletedPrefix }${ newValue }`;
+			const position = deletedPrefix.length + 'cursor'.length;
+
+			expect(
+				getAdjustedCursorPosition( position, oldValue, newValue )
+			).toBe( 'cursor'.length );
+		} );
+
+		it( 'moves the cursor when large single-line HTML is inserted before it', () => {
+			const opening = '<!-- wp:paragraph -->\n<p>';
+			const closing = '</p>\n<!-- /wp:paragraph -->';
+			const content = 'a'.repeat( 120000 );
+			const insertedText = 'remote';
+			const tailText = 'tail';
+			const oldValue = `${ opening }${ content }${ closing }`;
+			const newValue = `${ opening }${ insertedText }${ content.slice(
+				0,
+				100000
+			) }${ tailText }${ content.slice( 100000 ) }${ closing }`;
+			const position = opening.length + 60000;
+
+			expect(
+				getAdjustedCursorPosition( position, oldValue, newValue )
+			).toBe( position + insertedText.length );
+		} );
+
+		it( 'moves the cursor when large single-line HTML is deleted before it', () => {
+			const opening = '<!-- wp:paragraph -->\n<p>';
+			const closing = '</p>\n<!-- /wp:paragraph -->';
+			const deletedText = 'remote'.repeat( 1000 );
+			const deletedTailText = 'tail';
+			const content = 'a'.repeat( 120000 );
+			const newValue = `${ opening }${ content }${ closing }`;
+			const oldValue = `${ opening }${ deletedText }${ content.slice(
+				0,
+				100000
+			) }${ deletedTailText }${ content.slice( 100000 ) }${ closing }`;
+			const position = opening.length + deletedText.length + 60000;
+
+			expect(
+				getAdjustedCursorPosition( position, oldValue, newValue )
+			).toBe( position - deletedText.length );
+		} );
+
+		it( 'keeps the cursor in an unchanged same-line prefix before a large replacement', () => {
+			const prefix = `${ 'a'.repeat( 300 ) }\n${ 'b'.repeat( 199 ) }`;
+			const suffix = 'tail';
+			const oldValue = `${ prefix }old${ 'x'.repeat(
+				11000
+			) }${ suffix }`;
+			const newValue = `${ prefix }new${ 'y'.repeat(
+				11000
+			) }${ suffix }`;
+			const position = 450;
+
+			expect(
+				getAdjustedCursorPosition( position, oldValue, newValue )
+			).toBe( position );
+		} );
+
+		it( 'moves the cursor when large same-line text is inserted before it and replaced after it', () => {
+			const opening = '<!-- wp:paragraph -->\n<p>';
+			const closing = '</p>\n<!-- /wp:paragraph -->';
+			const content = 'a'.repeat( 120000 );
+			const insertedText = 'remote';
+			const oldValue = `${ opening }${ content }${ closing }`;
+			const newValue = `${ opening }${ content.slice(
+				0,
+				50000
+			) }${ insertedText }${ content.slice(
+				50000,
+				100000
+			) }b${ content.slice( 100001 ) }${ closing }`;
+			const position = opening.length + 60000;
+
+			expect(
+				getAdjustedCursorPosition( position, oldValue, newValue )
+			).toBe( position + insertedText.length );
+		} );
+
+		it( 'moves the cursor when large same-line text is deleted before it and inserted after it', () => {
+			const opening = '<!-- wp:paragraph -->\n<p>';
+			const closing = '</p>\n<!-- /wp:paragraph -->';
+			const content = 'a'.repeat( 120000 );
+			const deletedText = 'remote'.repeat( 1000 );
+			const insertedTailText = 'tail';
+			const commonTextBeforeCursor = 500;
+			const oldValue = `${ opening }${ content.slice(
+				0,
+				50000
+			) }${ deletedText }${ content.slice( 50000 ) }${ closing }`;
+			const newValue = `${ opening }${ content.slice(
+				0,
+				100000
+			) }${ insertedTailText }${ content.slice( 100000 ) }${ closing }`;
+			const position =
+				opening.length +
+				50000 +
+				deletedText.length +
+				commonTextBeforeCursor;
+
+			expect(
+				getAdjustedCursorPosition( position, oldValue, newValue )
+			).toBe( position - deletedText.length );
+		} );
+
+		it( 'maps the cursor through a pure insertion in a large single line', () => {
+			// "HEAD"/"TAIL" wrap the unchanged content, so the new value contains
+			// the old changed window and it routes through the line-diff fallback.
+			const opening = '<!-- wp:paragraph -->\n<p>';
+			const closing = '</p>\n<!-- /wp:paragraph -->';
+			const content = 'a'.repeat( 120000 );
+			const oldValue = `${ opening }${ content }${ closing }`;
+			const newValue = `${ opening }HEAD${ content }TAIL${ closing }`;
+			const position = opening.length + 60000;
+
+			expect(
+				getAdjustedCursorPosition( position, oldValue, newValue )
+			).toBe( position + 'HEAD'.length );
+		} );
+
+		it( 'maps the cursor through a pure deletion in a large single line', () => {
+			const opening = '<!-- wp:paragraph -->\n<p>';
+			const closing = '</p>\n<!-- /wp:paragraph -->';
+			const content = 'a'.repeat( 120000 );
+			const oldValue = `${ opening }HEAD${ content }TAIL${ closing }`;
+			const newValue = `${ opening }${ content }${ closing }`;
+			const position = opening.length + 'HEAD'.length + 60000;
+
+			expect(
+				getAdjustedCursorPosition( position, oldValue, newValue )
+			).toBe( position - 'HEAD'.length );
+		} );
+
+		it( 'handles a large fully-divergent replacement without blocking', () => {
+			// Neither side contains the other and the changed window exceeds the
+			// diffChars threshold, so this routes to the line-diff fallback. A
+			// character diff here would be O(n^2) and freeze the main thread for
+			// seconds; completing within the test timeout guards that path.
+			const oldValue = 'a'.repeat( 8000 );
+			const newValue = 'b'.repeat( 8000 );
+			const result = getAdjustedCursorPosition(
+				4000,
+				oldValue,
+				newValue
+			);
+
+			expect( result ).toBeGreaterThanOrEqual( 0 );
+			expect( result ).toBeLessThanOrEqual( newValue.length );
+		} );
+	} );
+} );