Child
; @@ -78,12 +164,46 @@ describe( 'domToElement', () => { } ); } ); +describe( 'createBlockChildrenFromTinyMCEElement', () => { + it( 'returns recusrively cleaned tinymce element as block children', () => { + const element = document.createElement( 'div' ); + element.setAttribute( 'style', 'color: red' ); + const text = document.createTextNode( 'Aaaargh\uFEFF' ); + element.appendChild( text ); + const br = document.createElement( 'br' ); + br.setAttribute( 'data-mce-bogus', 'all' ); + element.appendChild( br ); + + const result = createBlockChildrenFromTinyMCEElement( element ); + + expect( result ).toEqual( { + type: 'div', + props: { + style: 'color: red', + children: [ 'Aaaargh' ], + }, + } ); + } ); +} ); + +describe( 'domToBlockChildren', () => { + test( 'should return an empty array', () => { + expect( domToBlockChildren( [] ) ).toEqual( [] ); + } ); + + test( 'should return the corresponding element ', () => { + const domElement = document.createElement( 'div' ); + domElement.innerHTML = 'content
';
+ expect( domToBlockChildren( domElement.childNodes ) ).toMatchSnapshot();
+ } );
+} );
+
describe( 'domToString', () => {
test( 'should return an empty string', () => {
expect( domToString( [] ) ).toEqual( '' );
} );
- test( 'should return the HTML ', () => {
+ test( 'should return the HTML', () => {
const domElement = document.createElement( 'div' );
const content = 'content
';
domElement.innerHTML = content;
diff --git a/editor/components/rich-text/test/index.js b/editor/components/rich-text/test/index.js
index f34c7b5fd9e8e..c7e7f7509cdfe 100644
--- a/editor/components/rich-text/test/index.js
+++ b/editor/components/rich-text/test/index.js
@@ -8,105 +8,10 @@ import { shallow } from 'enzyme';
*/
import {
RichText,
- isEmptyInlineBoundary,
- isEmptyNode,
- filterEmptyNodes,
getFormatProperties,
} from '../';
import { diffAriaProps, pickAriaProps } from '../aria';
-describe( 'isEmptyInlineBoundary', () => {
- describe( 'link', () => {
- const node = document.createElement( 'a' );
- node.innerText = '\uFEFF';
-
- test( 'should return true for a valid link boundary', () => {
- expect( isEmptyInlineBoundary( node ) ).toBe( true );
- } );
-
- test( 'should return false for an invalid link boundary', () => {
- const invalid = { ...node, childNodes: [] };
- expect( isEmptyInlineBoundary( invalid ) ).toBe( false );
- } );
- } );
-
- describe( 'code', () => {
- const node = document.createElement( 'code' );
- node.textContent = '\uFEFF';
-
- test( 'should return true for a valid link boundary', () => {
- expect( isEmptyInlineBoundary( node ) ).toBe( true );
- } );
-
- test( 'should return false for an invalid link boundary', () => {
- const invalid = { ...node, childNodes: [] };
- expect( isEmptyInlineBoundary( invalid ) ).toBe( false );
- } );
- } );
-} );
-
-describe( 'isEmptyNode', () => {
- it( 'returns true for empty text node', () => {
- const node = document.createTextNode( '' );
-
- expect( isEmptyNode( node ) ).toBe( true );
- } );
-
- it( 'returns false for non-empty text node', () => {
- const node = document.createTextNode( 'rabbit' );
-
- expect( isEmptyNode( node ) ).toBe( false );
- } );
-
- it( 'returns false for element node', () => {
- const node = document.createElement( 'br' );
-
- expect( isEmptyNode( node ) ).toBe( false );
- } );
-} );
-
-describe( 'filterEmptyNodes', () => {
- it( 'preserves newlines', () => {
- const node = document.createElement( 'div' );
- node.innerHTML = 'afoo'; - - expect( filterEmptyNodes( node.childNodes ) ).toEqual( [ - document.createTextNode( 'a' ), - document.createElement( 'br' ), - document.createTextNode( 'foo' ), - ] ); - } ); - - it( 'omits text node', () => { - const node = document.createElement( 'div' ); - node.appendChild( document.createTextNode( '' ) ); - - expect( filterEmptyNodes( node.childNodes ) ).toHaveLength( 0 ); - } ); - - it( 'omits prefixing text node', () => { - const node = document.createElement( 'div' ); - node.innerHTML = '
foo'; - node.insertBefore( document.createTextNode( '' ), node.firstChild ); - - expect( filterEmptyNodes( node.childNodes ) ).toEqual( [ - document.createElement( 'br' ), - document.createTextNode( 'foo' ), - ] ); - } ); - - it( 'omits trailing text node', () => { - const node = document.createElement( 'div' ); - node.innerHTML = '
foo'; - node.appendChild( document.createTextNode( '' ) ); - - expect( filterEmptyNodes( node.childNodes ) ).toEqual( [ - document.createElement( 'br' ), - document.createTextNode( 'foo' ), - ] ); - } ); -} ); - describe( 'getFormatProperties', () => { const formatName = 'link'; const node = { diff --git a/packages/blocks/src/api/children.js b/packages/blocks/src/api/children.js new file mode 100644 index 0000000000000..3fde2804fb4ed --- /dev/null +++ b/packages/blocks/src/api/children.js @@ -0,0 +1,132 @@ +/** + * External dependencies + */ +import { castArray } from 'lodash'; + +/** + * WordPress dependencies + */ +import { renderToString } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import * as node from './node'; + +/** + * A representation of a block's rich text value. + * + * @typedef {WPBlockChild[]} WPBlockChildren + */ + +/** + * Given a block node, returns a serialize-capable WordPress element. + * + * @param {WPBlockChildren} children Block node to convert. + * + * @return {WPElement} A serialize-capable element. + */ +export function getSerializeCapableElement( children ) { + // The fact that a block node is compatible with the element serializer is + // merely an implementation detail that currently serves to be true, but + // should not be mistaken as being a guarantee on the external API. The + // public API only offers guarantees to work with strings (toHTML) and DOM + // elements (fromDOM), and should provide utilities to manipulate the value + // rather than expect consumers to inspect or construct its shape (concat). + return children; +} + +/** + * Given two or more block nodes, returns a new block node representing a + * concatenation of its values. + * + * @param {...WPBlockChildren} blockNodes Block nodes to concatenate. + * + * @return {WPBlockChildren} Concatenated block node. + */ +export function concat( ...blockNodes ) { + const result = []; + for ( let i = 0; i < blockNodes.length; i++ ) { + const blockNode = castArray( blockNodes[ i ] ); + for ( let j = 0; j < blockNode.length; j++ ) { + const child = blockNode[ j ]; + const canConcatToPreviousString = ( + typeof child === 'string' && + typeof result[ result.length - 1 ] === 'string' + ); + + if ( canConcatToPreviousString ) { + result[ result.length - 1 ] += child; + } else { + result.push( child ); + } + } + } + + return result; +} + +/** + * Given an iterable set of DOM nodes, returns equivalent block children. + * Ignores any non-element/text nodes included in set. + * + * @param {Iterable.
+" +`; + +exports[`adding blocks should clean TinyMCE content 2`] = ` +" +
Inside
+" +`; + exports[`adding blocks should navigate around inline boundaries 1`] = ` "FirstAfter
diff --git a/test/e2e/specs/adding-inline-tokens.test.js b/test/e2e/specs/adding-inline-tokens.test.js index 8e611b300f71e..3d0457ef80d63 100644 --- a/test/e2e/specs/adding-inline-tokens.test.js +++ b/test/e2e/specs/adding-inline-tokens.test.js @@ -41,7 +41,7 @@ describe( 'adding inline tokens', () => { await page.click( '.media-modal button.media-button-select' ); // Check the content. - const regex = new RegExp( '\\s*a\\u00A0<\\/p>\\s*' );
+ const regex = new RegExp( '\\s*
a\\u00A0<\\/p>\\s*' );
expect( await getEditedPostContent() ).toMatch( regex );
} );
} );
diff --git a/test/e2e/specs/writing-flow.test.js b/test/e2e/specs/writing-flow.test.js
index 854a209c9dca5..6753e7aba078d 100644
--- a/test/e2e/specs/writing-flow.test.js
+++ b/test/e2e/specs/writing-flow.test.js
@@ -142,4 +142,22 @@ describe( 'adding blocks', () => {
expect( await getEditedPostContent() ).toMatchSnapshot();
} );
+
+ it( 'should clean TinyMCE content', async () => {
+ // Ensure no zero-width space character. Notably, this can occur when
+ // save occurs while at an inline boundary edge.
+ await page.click( '.editor-default-block-appender__content' );
+ await pressWithModifier( 'mod', 'b' );
+ expect( await getEditedPostContent() ).toMatchSnapshot();
+
+ // When returning to Visual mode, backspace in selected block should
+ // reset to the provisional block.
+ await page.keyboard.press( 'Backspace' );
+
+ // Ensure no data-mce-selected. Notably, this can occur when content
+ // is saved while typing within an inline boundary.
+ await pressWithModifier( 'mod', 'b' );
+ await page.keyboard.type( 'Inside' );
+ expect( await getEditedPostContent() ).toMatchSnapshot();
+ } );
} );