diff --git a/blocks/api/test/source.js b/blocks/api/test/source.js index 957c60df466879..e6e6b7fdbdf091 100644 --- a/blocks/api/test/source.js +++ b/blocks/api/test/source.js @@ -12,6 +12,7 @@ import { renderToString } from '@wordpress/element'; * Internal dependencies */ import * as sources from '../source'; +import { valueToElement } from '../../editable'; describe( 'sources', () => { it( 'should generate sources which apply internal flag', () => { @@ -30,10 +31,10 @@ describe( 'sources', () => { it( 'should return HTML equivalent WPElement of matched element', () => { // Assumption here is that we can cleanly convert back and forth // between a string and WPElement representation - const html = '

A delicious sundae dessert

'; + const html = '

A delicious sundae dessert.

I want it!

'; const match = parse( html, sources.children() ); - expect( renderToString( match ) ).toBe( html ); + expect( renderToString( valueToElement( match ) ) ).toBe( html ); } ); } ); @@ -47,10 +48,10 @@ describe( 'sources', () => { it( 'should return HTML equivalent WPElement of matched element', () => { // Assumption here is that we can cleanly convert back and forth // between a string and WPElement representation - const html = '

A delicious sundae dessert

'; + const html = '

A delicious sundae dessert.

'; const match = parse( html, sources.node() ); - expect( renderToString( match ) ).toBe( `${ html }` ); + expect( renderToString( valueToElement( [ match ] ) ) ).toBe( `${ html }` ); } ); } ); } ); diff --git a/blocks/editable/index.js b/blocks/editable/index.js index 9e20597691ff4e..2807caf550099d 100644 --- a/blocks/editable/index.js +++ b/blocks/editable/index.js @@ -58,6 +58,28 @@ function isLinkBoundary( fragment ) { fragment.childNodes[ 0 ].text[ 0 ] === '\uFEFF'; } +/** + * Transforms internal block's representation into an Element. + * + * @param {Array} value Value to transform + * @return {WPElement} Element. + */ +export function valueToElement( value ) { + if ( ! Array.isArray( value ) ) { + return value; + } + + return value.map( ( element, i ) => { + if ( typeof element === 'string' ) { + return element; + } + + const [ type, props, ...children ] = element; + + return createElement( type, { ...props, key: i }, ...valueToElement( children ) ); + } ); +} + export default class Editable extends Component { constructor( props ) { super( ...arguments ); @@ -508,7 +530,7 @@ export default class Editable extends Component { content = ''; } - content = renderToString( valueToReact( content ) ); + content = renderToString( valueToElement( content ) ); this.editor.setContent( content, { format: 'raw' } ); } @@ -647,7 +669,7 @@ export default class Editable extends Component { getSettings={ this.getSettings } onSetup={ this.onSetup } style={ style } - defaultValue={ valueToReact( value ) } + defaultValue={ valueToElement( value ) } isPlaceholderVisible={ isPlaceholderVisible } label={ placeholder } className={ className } @@ -670,20 +692,4 @@ Editable.contextTypes = { onUndo: noop, }; -Editable.Value = ( { value } ) => valueToReact( value ); - -function valueToReact( value ) { - if ( ! Array.isArray( value ) ) { - return value; - } - - return value.map( ( element, i ) => { - if ( typeof element === 'string' ) { - return element; - } - - const [ type, props, ...children ] = element; - - return createElement( type, { ...props, key: i }, ...valueToReact( children ) ); - } ); -} +Editable.Value = ( { value } ) => valueToElement( value ); diff --git a/blocks/editable/test/index.js b/blocks/editable/test/index.js index 8ff8c8e5026ecb..cdf2a286b99c79 100644 --- a/blocks/editable/test/index.js +++ b/blocks/editable/test/index.js @@ -67,7 +67,7 @@ describe( 'Editable', () => { it( 'should render value with deeply nested DOM nodes', () => { const value = [ 'This is a ', - [ 'strong', {}, 'paragraph', ], + [ 'strong', {}, 'paragraph' ], ' with a ', [ 'a', { href: 'https://w.org/' }, 'link with ', [ 'b',