The Greeting:
Hello to the World! (Suffixed)
Bolded After
+ + + +More Bolded (Still Bolded)
+ + + +The Prefix: Hello
+" +`; diff --git a/test/e2e/specs/writing-flow.test.js b/test/e2e/specs/writing-flow.test.js new file mode 100644 index 00000000000000..96b15abbd1541e --- /dev/null +++ b/test/e2e/specs/writing-flow.test.js @@ -0,0 +1,217 @@ +/** + * External dependencies + */ +import { times } from 'lodash'; + +/** + * Internal dependencies + */ +import '../support/bootstrap'; +import { + newPost, + newDesktopBrowserPage, + pressWithModifier, + getHTMLFromCodeEditor, +} from '../support/utils'; + +describe( 'adding blocks', () => { + beforeAll( async () => { + await newDesktopBrowserPage(); + await newPost(); + } ); + + /** + * Given an array of functions, each returning a promise, performs all + * promises in sequence (waterfall) order. + * + * @param {Function[]} sequence Array of promise creators. + * + * @return {Promise} Promise resolving once all in the sequence complete. + */ + async function promiseSequence( sequence ) { + return sequence.reduce( + ( current, next ) => current.then( next ), + Promise.resolve() + ); + } + + /** + * Asserts that the nth paragraph matches expected snapshot content. + * + * @param {number} nthChild 1-based index of paragraph to assert against. + */ + async function expectParagraphToMatchSnapshot( nthChild ) { + const content = await page.$eval( + `.editor-block-list__block:nth-child( ${ nthChild } ) .wp-block-paragraph`, + ( element ) => element.innerHTML + ); + + expect( content ).toMatchSnapshot(); + } + + /** + * Waits for TinyMCE to finish initializing within as the current active + * element at the nth paragraph block. + * + * TODO: Asynchronous code smell; if our tests are too fast for TinyMCE, + * there's a good chance a fast user could encounter this as well. + * + * @param {number} nthChild 1-based index of paragraph. + */ + async function waitUntilNthParagraphActive( nthChild ) { + await page.waitForFunction( ( _nthChild ) => { + const paragraph = `.editor-block-list__block:nth-child( ${ _nthChild } ) .wp-block-paragraph[id^="mce_"]`; + return document.activeElement = paragraph; + }, nthChild ); + } + + /** + * Presses the bold text key combination. TinyMCE initialization may not + * have occurred, so must wait for it to become ready. + * + * TODO: Asynchronous code smell; if our tests are too fast for TinyMCE, + * there's a good chance a fast user could encounter this as well. + */ + async function bold() { + await page.waitForFunction( () => { + return document.activeElement.id.startsWith( 'mce_' ); + } ); + await pressWithModifier( 'Mod', 'B' ); + } + + it( 'Should navigate with arrow keys', async () => { + // Add demo content + await page.click( '.editor-default-block-appender__content' ); + await page.keyboard.type( 'Hello World' ); + await page.keyboard.press( 'Enter' ); + await waitUntilNthParagraphActive( 2 ); + await page.keyboard.type( 'Hello World' ); + + // Traverse back to first paragraph. With identical content, assume + // caret will be at end of content. Append. + await page.keyboard.press( 'ArrowUp' ); + await waitUntilNthParagraphActive( 1 ); + await page.keyboard.type( '!' ); + await expectParagraphToMatchSnapshot( 1 ); + + // Likewise, pressing arrow down when subsequent paragraph is shorter + // should move caret to end of the paragraph. Remove second word. + await page.keyboard.press( 'ArrowDown' ); + await waitUntilNthParagraphActive( 2 ); + await promiseSequence( times( 6, () => () => page.keyboard.press( 'Backspace' ) ) ); + await expectParagraphToMatchSnapshot( 2 ); + + // Arrow up should preserve caret X position. Add content to middle. + await page.keyboard.press( 'ArrowUp' ); + await waitUntilNthParagraphActive( 1 ); + await page.keyboard.type( ' to the' ); + await expectParagraphToMatchSnapshot( 1 ); + + // Arrow up from uncollapsed selection behaves same as collapsed. + // Highlight first word of second paragraph and prepend to first. + await page.keyboard.press( 'ArrowDown' ); + await page.keyboard.down( 'Shift' ); + await promiseSequence( times( 5, () => () => page.keyboard.press( 'ArrowLeft' ) ) ); + await page.keyboard.up( 'Shift' ); + await page.keyboard.press( 'ArrowUp' ); + await waitUntilNthParagraphActive( 1 ); + await page.keyboard.type( 'Greeting: ' ); + await expectParagraphToMatchSnapshot( 1 ); + + // Arrow up from second line of paragraph should _not_ place caret out + // of the current block. + await pressWithModifier( 'Shift', 'Enter' ); + await page.keyboard.press( 'ArrowUp' ); + await page.keyboard.type( 'The ' ); + await expectParagraphToMatchSnapshot( 1 ); + + // Pressing down from last paragraph should move caret to end of the + // text of the last paragraph + await page.keyboard.press( 'ArrowDown' ); + await page.keyboard.press( 'ArrowDown' ); + await page.keyboard.press( 'ArrowDown' ); + await waitUntilNthParagraphActive( 2 ); + + // Regression test: Ensure selection can be progressively collapsed at + // beginning and end of text while shift is held. + await promiseSequence( times( 5, () => () => page.keyboard.press( 'ArrowLeft' ) ) ); + await page.keyboard.down( 'Shift' ); + await page.keyboard.press( 'ArrowRight' ); + await page.keyboard.press( 'ArrowLeft' ); + await page.keyboard.up( 'Shift' ); + await page.keyboard.type( 'Prefix: ' ); + await expectParagraphToMatchSnapshot( 2 ); + + // Likewise, ensure progressive collapse from previous block (previous + // to guard against multi-selection behavior). Asserts arrow left to + // traverse horizontally to previous. + await promiseSequence( times( 9, () => () => page.keyboard.press( 'ArrowLeft' ) ) ); + await waitUntilNthParagraphActive( 1 ); + await page.keyboard.down( 'Shift' ); + await page.keyboard.press( 'ArrowLeft' ); + await page.keyboard.press( 'ArrowRight' ); + await page.keyboard.up( 'Shift' ); + await page.keyboard.type( ' (Suffix)' ); + await expectParagraphToMatchSnapshot( 1 ); + + // Should arrow once to escape out of inline boundary (bold, etc), and + // escaping out should nullify any block traversal. + await page.keyboard.press( 'Enter' ); + await waitUntilNthParagraphActive( 2 ); + await bold(); + await page.keyboard.type( 'Bolded' ); + await expectParagraphToMatchSnapshot( 2 ); + + // But typing immediately after escaping should not be within. + await page.keyboard.press( 'ArrowRight' ); + // [BUGFIX]: This appears to be a bug within TinyMCE that, in Chromium, + // pressing space after escaping inline boundary on the right resumes + // inline node. Workaround is to navigate back in and out again. + await page.keyboard.press( 'ArrowLeft' ); + await page.keyboard.press( 'ArrowRight' ); + // [/ENDBUGFIX] + await page.keyboard.type( ' After' ); + await expectParagraphToMatchSnapshot( 2 ); + + // Navigate back to previous block. Change "(Suffix)" to "(Suffixed)" + // + // "Bolded After" = 12 characters + // + 2 inline boundaries + // + 1 horizontal block traversal + // + 1 into parenthesis + // = 16 + await promiseSequence( times( 16, () => () => page.keyboard.press( 'ArrowLeft' ) ) ); + await waitUntilNthParagraphActive( 1 ); + await page.keyboard.type( 'ed' ); + await expectParagraphToMatchSnapshot( 1 ); + + // Should require two arrow presses while at end of paragraph within + // inline boundary to horizontal navigate to next block + await page.keyboard.press( 'ArrowDown' ); + await page.keyboard.press( 'Enter' ); + await waitUntilNthParagraphActive( 3 ); + await bold(); + await page.keyboard.type( 'More Bolded' ); + await page.keyboard.press( 'ArrowRight' ); + await page.keyboard.press( 'ArrowRight' ); // Before "Prefix:" + await waitUntilNthParagraphActive( 4 ); + + // Should navigate across empty paragraph (where bogus `br` nodes from + // TinyMCE exist) in both directions + await page.keyboard.press( 'Enter' ); + await page.keyboard.press( 'ArrowLeft' ); // In empty new paragraph + await page.keyboard.press( 'ArrowLeft' ); // In "More Bolded" + await waitUntilNthParagraphActive( 3 ); + await page.keyboard.type( ' (Still Bolded)' ); + await expectParagraphToMatchSnapshot( 3 ); + await page.keyboard.press( 'ArrowRight' ); // After inline boundary + await page.keyboard.press( 'ArrowRight' ); // In empty paragraph + await page.keyboard.press( 'ArrowRight' ); // Before "Prefix:" + await waitUntilNthParagraphActive( 4 ); + await page.keyboard.press( 'Backspace' ); + await page.keyboard.type( 'The ' ); + await expectParagraphToMatchSnapshot( 4 ); + + expect( await getHTMLFromCodeEditor() ).toMatchSnapshot(); + } ); +} ); diff --git a/test/e2e/support/utils.js b/test/e2e/support/utils.js index 1f6f0950323aaa..0730f2f9654400 100644 --- a/test/e2e/support/utils.js +++ b/test/e2e/support/utils.js @@ -19,6 +19,13 @@ const { */ const MOD_KEY = process.platform === 'darwin' ? 'Meta' : 'Control'; +/** + * Regular expression matching zero-width space characters. + * + * @type {RegExp} + */ +const REGEXP_ZWSP = /[\u200B\u200C\u200D\uFEFF]/; + function getUrl( WPPath, query = '' ) { const url = new URL( WP_BASE_URL ); @@ -78,6 +85,12 @@ export async function getHTMLFromCodeEditor() { await switchToEditor( 'Code' ); const textEditorContent = await page.$eval( '.editor-post-text-editor', ( element ) => element.value ); await switchToEditor( 'Visual' ); + + // Globally guard against zero-width characters. + if ( REGEXP_ZWSP.test( textEditorContent ) ) { + throw new Error( 'Unexpected zero-width space character in editor content.' ); + } + return textEditorContent; } diff --git a/utils/dom.js b/utils/dom.js index f0dbeb5c5ae8f8..3de7af5af7f8da 100644 --- a/utils/dom.js +++ b/utils/dom.js @@ -1,25 +1,53 @@ /** * External dependencies */ -import { includes, first } from 'lodash'; -import tinymce from 'tinymce'; +import { includes } from 'lodash'; /** * Browser dependencies */ -const { getComputedStyle, DOMRect } = window; -const { TEXT_NODE, ELEMENT_NODE } = window.Node; +const { getComputedStyle } = window; +const { TEXT_NODE, DOCUMENT_POSITION_PRECEDING } = window.Node; /** - * Check whether the caret is horizontally at the edge of the container. + * Returns true if the given selection object is in the forward direction, or + * false otherwise. * - * @param {Element} container Focusable element. - * @param {boolean} isReverse Set to true to check left, false for right. - * @param {boolean} collapseRanges Whether or not to collapse the selection range before the check. + * @see https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition + * + * @param {Selection} selection Selection object to check. + * + * @return {boolean} Whether the selection is forward. + */ +function isSelectionForward( selection ) { + const { + anchorNode, + focusNode, + anchorOffset, + focusOffset, + } = selection; + + const position = anchorNode.compareDocumentPosition( focusNode ); + + return ( + // Compare whether anchor node precedes focus node. + position !== DOCUMENT_POSITION_PRECEDING && + + // `compareDocumentPosition` returns 0 when passed the same node, in + // which case compare offsets. + ! ( position === 0 && anchorOffset > focusOffset ) + ); +} + +/** + * Check whether the selection is horizontally at the edge of the container. + * + * @param {Element} container Focusable element. + * @param {boolean} isReverse Set to true to check left, false for right. * * @return {boolean} True if at the horizontal edge, false if not. */ -export function isHorizontalEdge( container, isReverse, collapseRanges = false ) { +export function isHorizontalEdge( container, isReverse ) { if ( includes( [ 'INPUT', 'TEXTAREA' ], container.tagName ) ) { if ( container.selectionStart !== container.selectionEnd ) { return false; @@ -36,61 +64,34 @@ export function isHorizontalEdge( container, isReverse, collapseRanges = false ) return true; } - // If the container is empty, the caret is always at the edge. - if ( tinymce.DOM.isEmpty( container ) ) { - return true; - } - const selection = window.getSelection(); - let range = selection.rangeCount ? selection.getRangeAt( 0 ) : null; - if ( collapseRanges ) { - range = range.cloneRange(); - range.collapse( isReverse ); - } - - if ( ! range || ! range.collapsed ) { - return false; - } - const position = isReverse ? 'start' : 'end'; - const order = isReverse ? 'first' : 'last'; - const offset = range[ `${ position }Offset` ]; + // Create copy of range for setting selection to find effective offset. + const range = selection.getRangeAt( 0 ).cloneRange(); - let node = range.startContainer; - - if ( isReverse && offset !== 0 ) { - return false; - } - - const maxOffset = node.nodeType === TEXT_NODE ? node.nodeValue.length : node.childNodes.length; - - if ( ! isReverse && offset !== maxOffset ) { - return false; + // Collapse in direction of selection. + if ( ! selection.isCollapsed ) { + range.collapse( ! isSelectionForward( selection ) ); } - while ( node !== container ) { - const parentNode = node.parentNode; - - if ( parentNode[ `${ order }Child` ] !== node ) { - return false; - } - - node = parentNode; - } + const { endContainer, endOffset } = range; + range.selectNodeContents( container ); + range.setEnd( endContainer, endOffset ); - return true; + // Edge reached if effective caret position is at expected extreme. + const caretOffset = range.toString().length; + return caretOffset === ( isReverse ? 0 : container.textContent.length ); } /** - * Check whether the caret is vertically at the edge of the container. + * Check whether the selection is vertically at the edge of the container. * - * @param {Element} container Focusable element. - * @param {boolean} isReverse Set to true to check top, false for bottom. - * @param {boolean} collapseRanges Whether or not to collapse the selection range before the check. + * @param {Element} container Focusable element. + * @param {boolean} isReverse Set to true to check top, false for bottom. * * @return {boolean} True if at the edge, false if not. */ -export function isVerticalEdge( container, isReverse, collapseRanges = false ) { +export function isVerticalEdge( container, isReverse ) { if ( includes( [ 'INPUT', 'TEXTAREA' ], container.tagName ) ) { return isHorizontalEdge( container, isReverse ); } @@ -100,16 +101,8 @@ export function isVerticalEdge( container, isReverse, collapseRanges = false ) { } const selection = window.getSelection(); - let range = selection.rangeCount ? selection.getRangeAt( 0 ) : null; - if ( collapseRanges && range && ! range.collapsed ) { - const newRange = document.createRange(); - // Get the end point of the selection (see focusNode vs. anchorNode) - newRange.setStart( selection.focusNode, selection.focusOffset ); - newRange.collapse( true ); - range = newRange; - } - - if ( ! range || ! range.collapsed ) { + const range = selection.rangeCount ? selection.getRangeAt( 0 ) : null; + if ( ! range ) { return false; } @@ -150,21 +143,19 @@ export function getRectangleFromRange( range ) { return range.getBoundingClientRect(); } - // If the collapsed range starts (and therefore ends) at an element node, - // `getClientRects` will return undefined. To fix this we can get the - // bounding rectangle of the element node to create a DOMRect based on that. - if ( range.startContainer.nodeType === ELEMENT_NODE ) { - const { x, y, height } = range.startContainer.getBoundingClientRect(); + let rect = range.getClientRects()[ 0 ]; - // Create a new DOMRect with zero width. - return new DOMRect( x, y, 0, height ); + // If the collapsed range starts (and therefore ends) at an element node, + // `getClientRects` can be empty in some browsers. This can be resolved + // by adding a temporary text node to the range. + if ( ! rect ) { + const padNode = document.createTextNode( '\u200b' ); + range.insertNode( padNode ); + rect = range.getClientRects()[ 0 ]; + padNode.parentNode.removeChild( padNode ); } - // For normal collapsed ranges (exception above), the bounding rectangle of - // the range may be inaccurate in some browsers. There will only be one - // rectangle since it is a collapsed range, so it is safe to pass this as - // the union of them. This works consistently in all browsers. - return first( range.getClientRects() ); + return rect; } /** @@ -182,7 +173,7 @@ export function computeCaretRect( container ) { const selection = window.getSelection(); const range = selection.rangeCount ? selection.getRangeAt( 0 ) : null; - if ( ! range || ! range.collapsed ) { + if ( ! range ) { return; } @@ -314,7 +305,7 @@ export function placeCaretAtVerticalEdge( container, isReverse, rect, mayUseScro // equivalent to a point at half the height of a line of text. const buffer = rect.height / 2; const editableRect = container.getBoundingClientRect(); - const x = rect.left + ( rect.width / 2 ); + const x = rect.left; const y = isReverse ? ( editableRect.bottom - buffer ) : ( editableRect.top + buffer ); const selection = window.getSelection();