diff --git a/docs/reference/deprecated.md b/docs/reference/deprecated.md index 575a2922309415..8a8fe78c84368d 100644 --- a/docs/reference/deprecated.md +++ b/docs/reference/deprecated.md @@ -3,14 +3,14 @@ Gutenberg's deprecation policy is intended to support backwards-compatibility fo ## 4.2.0 - Writing resolvers as async generators has been removed. Use the controls plugin instead. -- The block attribute source type `node` has been removed. Please use the `children` source type instead with a `multiline` property passing the right tag. See the core quote and list blocks for examples. -- `wp.blocks.node.matcher` has been removed. Please use `wp.blocks.children.matcher` with the `multilineTag` argument instead. +- The block attribute sources `children` and `node` have been removed. Please use the `rich-text-value` source instead. See the core blocks for examples. +- `wp.blocks.node.matcher` has been removed. Please use `wp.richTextValue.create` instead. - `wp.blocks.node.toHTML` has been removed. Please use `wp.richTextValue.toHTMLString` instead. -- `wp.blocks.node.fromDOM` has been removed. Please use `wp.richTextValue.createValue` instead. +- `wp.blocks.node.fromDOM` has been removed. Please use `wp.richTextValue.create` instead. - `wp.blocks.children.toHTML` has been removed. Please use `wp.richTextValue.toHTMLString` instead. -- `wp.blocks.children.fromDOM` has been removed. Please use `wp.richTextValue.createValue` instead. +- `wp.blocks.children.fromDOM` has been removed. Please use `wp.richTextValue.create` instead. - `wp.blocks.children.concat` has been removed. Please use `wp.richTextValue.concat` instead. -- `wp.blocks.children.getChildrenArray` has been removed. Please use `wp.richTextValue.createValue` instead. +- `wp.blocks.children.getChildrenArray` has been removed. Please use `wp.richTextValue.create` instead. ## 4.1.0 diff --git a/packages/block-library/src/paragraph/index.js b/packages/block-library/src/paragraph/index.js index eb2d53c0c8147c..ab2a2451594116 100644 --- a/packages/block-library/src/paragraph/index.js +++ b/packages/block-library/src/paragraph/index.js @@ -17,7 +17,7 @@ import { RichText, } from '@wordpress/editor'; import { getPhrasingContentSchema } from '@wordpress/blocks'; -import { createValue, concat } from '@wordpress/rich-text-value'; +import { create, concat } from '@wordpress/rich-text-value'; /** * Internal dependencies @@ -198,7 +198,7 @@ export const settings = { migrate( attributes ) { return { ...attributes, - content: createValue( attributes.content ), + content: create( { html: attributes.content } ), }; }, }, diff --git a/packages/block-library/src/preformatted/index.js b/packages/block-library/src/preformatted/index.js index c46507e12221bb..61f76fad98c35b 100644 --- a/packages/block-library/src/preformatted/index.js +++ b/packages/block-library/src/preformatted/index.js @@ -2,9 +2,9 @@ * WordPress */ import { __ } from '@wordpress/i18n'; -import { children, createBlock, getPhrasingContentSchema } from '@wordpress/blocks'; +import { createBlock, getPhrasingContentSchema } from '@wordpress/blocks'; import { RichText } from '@wordpress/editor'; -import { createValue } from '@wordpress/rich-text-value'; +import { create, concat } from '@wordpress/rich-text-value'; export const name = 'core/preformatted'; @@ -32,7 +32,7 @@ export const settings = { blocks: [ 'core/code', 'core/paragraph' ], transform: ( { content } ) => createBlock( 'core/preformatted', { - content: createValue( content ), + content: create( { text: content } ), } ), }, { @@ -88,7 +88,7 @@ export const settings = { merge( attributes, attributesToMerge ) { return { - content: children.concat( attributes.content, attributesToMerge.content ), + content: concat( attributes.content, attributesToMerge.content ), }; }, }; diff --git a/packages/block-library/src/table/state.js b/packages/block-library/src/table/state.js index 8ea7c2ed93bcf7..5c9cce75770900 100644 --- a/packages/block-library/src/table/state.js +++ b/packages/block-library/src/table/state.js @@ -6,7 +6,7 @@ import { times } from 'lodash'; /** * WordPress dependencies */ -import { createValue } from '@wordpress/rich-text-value'; +import { create } from '@wordpress/rich-text-value'; /** * Creates a table state. @@ -23,7 +23,7 @@ export function createTable( { return { body: times( rowCount, () => ( { cells: times( columnCount, () => ( { - content: createValue(), + content: create(), tag: 'td', } ) ), } ) ), @@ -89,7 +89,7 @@ export function insertRow( state, { ...state[ section ].slice( 0, rowIndex ), { cells: times( cellCount, () => ( { - content: createValue(), + content: create(), tag: 'td', } ) ), }, @@ -134,7 +134,7 @@ export function insertColumn( state, { cells: [ ...row.cells.slice( 0, columnIndex ), { - content: createValue(), + content: create(), tag: 'td', }, ...row.cells.slice( columnIndex ), diff --git a/packages/block-library/src/table/test/state.js b/packages/block-library/src/table/test/state.js index c9c63b3e79895c..dde42fa6f9e994 100644 --- a/packages/block-library/src/table/test/state.js +++ b/packages/block-library/src/table/test/state.js @@ -6,7 +6,7 @@ import deepFreeze from 'deep-freeze'; /** * WordPress dependencies */ -import { createValue } from '@wordpress/rich-text-value'; +import { create } from '@wordpress/rich-text-value'; /** * Internal dependencies @@ -25,11 +25,11 @@ const table = deepFreeze( { { cells: [ { - content: createValue(), + content: create(), tag: 'td', }, { - content: createValue(), + content: create(), tag: 'td', }, ], @@ -37,11 +37,11 @@ const table = deepFreeze( { { cells: [ { - content: createValue(), + content: create(), tag: 'td', }, { - content: createValue(), + content: create(), tag: 'td', }, ], @@ -54,11 +54,11 @@ const tableWithContent = deepFreeze( { { cells: [ { - content: createValue(), + content: create(), tag: 'td', }, { - content: createValue(), + content: create(), tag: 'td', }, ], @@ -66,11 +66,11 @@ const tableWithContent = deepFreeze( { { cells: [ { - content: createValue(), + content: create(), tag: 'td', }, { - content: createValue( 'test' ), + content: create( { text: 'test' } ), tag: 'td', }, ], @@ -92,7 +92,7 @@ describe( 'updateCellContent', () => { section: 'body', rowIndex: 1, columnIndex: 1, - content: createValue( 'test' ), + content: create( { text: 'test' } ), } ); expect( state ).toEqual( tableWithContent ); @@ -111,11 +111,11 @@ describe( 'insertRow', () => { { cells: [ { - content: createValue(), + content: create(), tag: 'td', }, { - content: createValue(), + content: create(), tag: 'td', }, ], @@ -123,11 +123,11 @@ describe( 'insertRow', () => { { cells: [ { - content: createValue(), + content: create(), tag: 'td', }, { - content: createValue( 'test' ), + content: create( { text: 'test' } ), tag: 'td', }, ], @@ -135,11 +135,11 @@ describe( 'insertRow', () => { { cells: [ { - content: createValue(), + content: create(), tag: 'td', }, { - content: createValue(), + content: create(), tag: 'td', }, ], @@ -163,15 +163,15 @@ describe( 'insertColumn', () => { { cells: [ { - content: createValue(), + content: create(), tag: 'td', }, { - content: createValue(), + content: create(), tag: 'td', }, { - content: createValue(), + content: create(), tag: 'td', }, ], @@ -179,15 +179,15 @@ describe( 'insertColumn', () => { { cells: [ { - content: createValue(), + content: create(), tag: 'td', }, { - content: createValue( 'test' ), + content: create( { text: 'test' } ), tag: 'td', }, { - content: createValue(), + content: create(), tag: 'td', }, ], @@ -211,11 +211,11 @@ describe( 'deleteRow', () => { { cells: [ { - content: createValue(), + content: create(), tag: 'td', }, { - content: createValue( 'test' ), + content: create( { text: 'test' } ), tag: 'td', }, ], @@ -239,7 +239,7 @@ describe( 'deleteColumn', () => { { cells: [ { - content: createValue(), + content: create(), tag: 'td', }, ], @@ -247,7 +247,7 @@ describe( 'deleteColumn', () => { { cells: [ { - content: createValue( 'test' ), + content: create( { text: 'test' } ), tag: 'td', }, ], @@ -264,7 +264,7 @@ describe( 'deleteColumn', () => { { cells: [ { - content: createValue(), + content: create(), tag: 'td', }, ], @@ -272,7 +272,7 @@ describe( 'deleteColumn', () => { { cells: [ { - content: createValue( 'test' ), + content: create( { text: 'test' } ), tag: 'td', }, ], diff --git a/packages/block-library/src/text-columns/index.js b/packages/block-library/src/text-columns/index.js index bb9b2fa732e075..5688b57cf37b2a 100644 --- a/packages/block-library/src/text-columns/index.js +++ b/packages/block-library/src/text-columns/index.js @@ -17,7 +17,7 @@ import { RichText, } from '@wordpress/editor'; import deprecated from '@wordpress/deprecated'; -import { createValue } from '@wordpress/rich-text-value'; +import { create } from '@wordpress/rich-text-value'; export const name = 'core/text-columns'; @@ -48,10 +48,10 @@ export const settings = { }, default: [ { - children: createValue(), + children: create(), }, { - children: createValue(), + children: create(), }, ], }, diff --git a/packages/blocks/src/api/factory.js b/packages/blocks/src/api/factory.js index 59ecb3e3521cf3..86b86b204416e7 100644 --- a/packages/blocks/src/api/factory.js +++ b/packages/blocks/src/api/factory.js @@ -20,7 +20,7 @@ import { * WordPress dependencies */ import { createHooks, applyFilters } from '@wordpress/hooks'; -import { createValue } from '@wordpress/rich-text-value'; +import { create } from '@wordpress/rich-text-value'; /** * Internal dependencies @@ -49,7 +49,7 @@ export function createBlock( name, blockAttributes = {}, innerBlocks = [] ) { } else if ( schema.hasOwnProperty( 'default' ) ) { result[ key ] = schema.default; } else if ( schema.source === 'rich-text-value' ) { - result[ key ] = createValue( null, schema.multiline ); + result[ key ] = create(); } return result; diff --git a/packages/blocks/src/api/matchers.js b/packages/blocks/src/api/matchers.js index 8a437aef3db2e2..097dc3208bf716 100644 --- a/packages/blocks/src/api/matchers.js +++ b/packages/blocks/src/api/matchers.js @@ -6,7 +6,7 @@ export { attr, prop, html, text, query } from 'hpq'; /** * WordPress dependencies */ -import { createValue } from '@wordpress/rich-text-value'; +import { create } from '@wordpress/rich-text-value'; /** * Internal dependencies @@ -22,6 +22,9 @@ export function richTextValue( selector, multilineTag ) { match = domNode.querySelector( selector ); } - return createValue( match, multilineTag ); + return create( { + element: match, + multilineTag, + } ); }; } diff --git a/packages/editor/src/components/block-list/test/block-html.js b/packages/editor/src/components/block-list/test/block-html.js index 03153781294b55..f8e9c3588b7c37 100644 --- a/packages/editor/src/components/block-list/test/block-html.js +++ b/packages/editor/src/components/block-list/test/block-html.js @@ -8,7 +8,7 @@ import { shallow } from 'enzyme'; */ import { createBlock } from '@wordpress/blocks'; import { registerCoreBlocks } from '@wordpress/block-library'; -import { createValue } from '@wordpress/rich-text-value'; +import { create } from '@wordpress/rich-text-value'; /** * Internal dependencies @@ -35,7 +35,7 @@ describe( 'BlockHTML', () => { it( 'use block content for a valid block', () => { const block = createBlock( 'core/paragraph', { - content: createValue( 'test-block' ), + content: create( { text: 'test-block' } ), isValid: true, } ); diff --git a/packages/editor/src/components/document-outline/test/index.js b/packages/editor/src/components/document-outline/test/index.js index 9423c05f0bac8e..b0642ab6055127 100644 --- a/packages/editor/src/components/document-outline/test/index.js +++ b/packages/editor/src/components/document-outline/test/index.js @@ -7,7 +7,7 @@ import { mount, shallow } from 'enzyme'; * WordPress dependencies */ import { createBlock, registerBlockType, unregisterBlockType } from '@wordpress/blocks'; -import { createValue } from '@wordpress/rich-text-value'; +import { create } from '@wordpress/rich-text-value'; /** * Internal dependencies @@ -51,15 +51,15 @@ describe( 'DocumentOutline', () => { paragraph = createBlock( 'core/paragraph' ); headingH1 = createBlock( 'core/heading', { - content: createValue( 'Heading 1' ), + content: create( { text: 'Heading 1' } ), level: 1, } ); headingParent = createBlock( 'core/heading', { - content: createValue( 'Heading parent' ), + content: create( { text: 'Heading parent' } ), level: 2, } ); headingChild = createBlock( 'core/heading', { - content: createValue( 'Heading child' ), + content: create( { text: 'Heading child' } ), level: 3, } ); diff --git a/packages/editor/src/components/rich-text/index.js b/packages/editor/src/components/rich-text/index.js index d6d5a9d837ee05..fe798d18056e45 100644 --- a/packages/editor/src/components/rich-text/index.js +++ b/packages/editor/src/components/rich-text/index.js @@ -34,7 +34,6 @@ import { applyFormat, split, toHTMLString, - createValue, getTextContent, insert, isEmptyLine, @@ -70,13 +69,6 @@ const { Node, getSelection } = window; */ const TINYMCE_ZWSP = '\uFEFF'; -const richTextStructureSettings = { - removeNodeMatch: ( node ) => node.getAttribute( 'data-mce-bogus' ) === 'all', - unwrapNodeMatch: ( node ) => !! node.getAttribute( 'data-mce-bogus' ), - removeAttributeMatch: ( attribute ) => attribute.indexOf( 'data-mce-' ) === 0, - filterString: ( string ) => string.replace( TINYMCE_ZWSP, '' ), -}; - export class RichText extends Component { constructor( { value, onReplace, multiline } ) { super( ...arguments ); @@ -237,7 +229,15 @@ export class RichText extends Component { const { multiline } = this.props; const range = window.getSelection().getRangeAt( 0 ); - return create( this.editableRef, range, multiline, richTextStructureSettings ); + return create( { + element: this.editableRef, + range, + multilineTag: multiline, + removeNode: ( node ) => node.getAttribute( 'data-mce-bogus' ) === 'all', + unwrapNode: ( node ) => !! node.getAttribute( 'data-mce-bogus' ), + removeAttribute: ( attribute ) => attribute.indexOf( 'data-mce-' ) === 0, + filterString: ( string ) => string.replace( TINYMCE_ZWSP, '' ), + } ); } applyRecord( record ) { @@ -782,11 +782,17 @@ export class RichText extends Component { // Handle deprecated `children` and `node` sources. if ( Array.isArray( value ) ) { - return createValue( children.toHTML( value ), multiline ); + return create( { + html: children.toHTML( value ), + multilineTag: multiline, + } ); } if ( format === 'string' ) { - return createValue( value, multiline ); + return create( { + html: value, + multilineTag: multiline, + } ); } return value; diff --git a/packages/editor/src/components/rich-text/test/index.js b/packages/editor/src/components/rich-text/test/index.js index 8a1b5c0f8303aa..fc1c639922be2e 100644 --- a/packages/editor/src/components/rich-text/test/index.js +++ b/packages/editor/src/components/rich-text/test/index.js @@ -6,7 +6,7 @@ import { shallow } from 'enzyme'; /** * WordPress dependencies */ -import { createValue } from '@wordpress/rich-text-value'; +import { create } from '@wordpress/rich-text-value'; /** * Internal dependencies @@ -17,7 +17,7 @@ import { diffAriaProps, pickAriaProps } from '../aria'; describe( 'RichText', () => { describe( 'Component', () => { describe( '.getSettings', () => { - const value = createValue(); + const value = create(); const settings = { setting: 'hi', }; diff --git a/packages/rich-text-value/src/create.js b/packages/rich-text-value/src/create.js index ac3fc1e00a42c0..aa3d61294a25f1 100644 --- a/packages/rich-text-value/src/create.js +++ b/packages/rich-text-value/src/create.js @@ -32,53 +32,74 @@ function createEmptyValue() { /** * Create a RichText value from an `Element` tree (DOM), an HTML string or a * plain text string, with optionally a `Range` object to set the selection. If - * called without a given `input`, an empty value will be created. If + * called without any input, an empty value will be created. If * `multilineTag` is provided, any content of direct children whose type matches - * `multilineTag` will be separated by two newlines. The `settings` object can + * `multilineTag` will be separated by two newlines. The optional functions can * be used to filter out content. * - * @param {Element} element Element to create value from. - * @param {Range} range Range to create value from. - * @param {string} multilineTag Multiline tag if the structure is multiline. - * @param {Object} settings Settings passed to `createFromElement`. + * @param {?Object} $1 Optional named argements. + * @param {?Element} $1.element Element to create value from. + * @param {?string} $1.text Text to create value from. + * @param {?string} $1.html HTML to create value from. + * @param {?Range} $1.range Range to create value from. + * @param {?string} $1.multilineTag Multiline tag if the structure is + * multiline. + * @param {?Function} $1.removeNode Function to declare whether the given + * node should be removed. + * @param {?Function} $1.unwrapNode Function to declare whether the given + * node should be unwrapped. + * @param {?Function} $1.filterString Function to filter the given string. + * @param {?Function} $1.removeAttribute Wether to remove an attribute based on + * the name. * * @return {Object} A rich text value. */ -export function create( element, range, multilineTag, settings ) { - if ( ! element ) { - return createEmptyValue(); +export function create( { + element, + text, + html, + range, + multilineTag, + removeNode, + unwrapNode, + filterString, + removeAttribute, +} = {} ) { + if ( typeof text === 'string' && text.length > 0 ) { + return { + formats: Array( text.length ), + text: text, + }; } - if ( typeof element === 'string' ) { - if ( element.indexOf( '<' ) !== -1 || /[^\s]+;/.test( element ) ) { - // May be HTML. - element = createElement( element ); - } else { - return { - formats: Array( element.length ), - text: element, - }; - } + if ( typeof html === 'string' && html.length > 0 ) { + element = createElement( html ); } - if ( ! multilineTag ) { - return createFromElement( element, range, settings ); + if ( typeof element !== 'object' ) { + return createEmptyValue(); } - return createFromMultilineElement( element, range, multilineTag, settings ); -} + if ( ! multilineTag ) { + return createFromElement( { + element, + range, + removeNode, + unwrapNode, + filterString, + removeAttribute, + } ); + } -/** - * Creates a rich text value from a DOM element. - * - * @param {Element} element Element to create value object from. - * @param {string} multilineTag Multiline tag. - * @param {Object} settings Settings passed to `createFromElement`. - * - * @return {Object} A rich text value. - */ -export function createValue( element, multilineTag, settings ) { - return create( element, null, multilineTag, settings ); + return createFromMultilineElement( { + element, + range, + multilineTag, + removeNode, + unwrapNode, + filterString, + removeAttribute, + } ); } /** @@ -159,39 +180,52 @@ function filterRange( node, range, filter ) { /** * Creates a Rich Text value from a DOM element and range. * - * @param {Element} element ELement to create value with. - * @param {Range} range Range to create value with. - * @param {Object} settings Settings object. - * @param {Function} settings.removeNodeMatch Function to declare whether the - * given node should be removed. - * @param {Function} settings.unwrapNodeMatch Function to declare whether the - * given node should be unwrapped. - * @param {Function} settings.filterString Function to filter the given - * string. - * @param {Function} settings.removeAttribute Match Wether to remove an - * attribute based on the name. + * @param {Object} $1 Named argements. + * @param {?Element} $1.element Element to create value from. + * @param {?Range} $1.range Range to create value from. + * @param {?Function} $1.removeNode Function to declare whether the given + * node should be removed. + * @param {?Function} $1.unwrapNode Function to declare whether the given + * node should be unwrapped. + * @param {?Function} $1.filterString Function to filter the given string. + * @param {?Function} $1.removeAttribute Wether to remove an attribute based on + * the name. * * @return {Object} A rich text value. */ -function createFromElement( element, range, settings = {} ) { +function createFromElement( { + element, + range, + removeNode, + unwrapNode, + filterString, + removeAttribute, +} ) { const accumulator = createEmptyValue(); - if ( ! element || ! element.hasChildNodes() ) { + if ( ! element ) { + return accumulator; + } + + if ( ! element.hasChildNodes() ) { accumulateSelection( accumulator, element, range, createEmptyValue() ); return accumulator; } - const { - removeNodeMatch = () => false, - unwrapNodeMatch = () => false, - filterString = ( string ) => string, - removeAttributeMatch, - } = settings; + const length = element.childNodes.length; + // Remove any line breaks in text nodes. They are not content, but used to // format the HTML. Line breaks in HTML are stored as BR elements. // See https://www.w3.org/TR/html5/syntax.html#newlines. - const filterStringComplete = ( string ) => filterString( string.replace( /[\r\n]/g, '' ) ); - const length = element.childNodes.length; + const filterStringComplete = ( string ) => { + string = string.replace( /[\r\n]/g, '' ); + + if ( filterString ) { + string = filterString( string ); + } + + return string; + }; // Optimise for speed. for ( let index = 0; index < length; index++ ) { @@ -213,8 +247,8 @@ function createFromElement( element, range, settings = {} ) { } if ( - removeNodeMatch( node ) || - ( unwrapNodeMatch( node ) && ! node.hasChildNodes() ) + ( removeNode && removeNode( node ) ) || + ( unwrapNode && unwrapNode( node ) && ! node.hasChildNodes() ) ) { accumulateSelection( accumulator, node, range, createEmptyValue() ); continue; @@ -229,13 +263,25 @@ function createFromElement( element, range, settings = {} ) { let format; - if ( ! unwrapNodeMatch( node ) ) { + if ( ! unwrapNode || ! unwrapNode( node ) ) { const type = node.nodeName.toLowerCase(); - const attributes = getAttributes( node, { removeAttributeMatch } ); + const attributes = getAttributes( { + element: node, + removeAttribute, + } ); + format = attributes ? { type, attributes } : { type }; } - const value = createFromElement( node, range, settings ); + const value = createFromElement( { + element: node, + range, + removeNode, + unwrapNode, + filterString, + removeAttribute, + } ); + const text = value.text; const start = accumulator.text.length; @@ -293,14 +339,30 @@ function createFromElement( element, range, settings = {} ) { * Creates a rich text value from a DOM element and range that should be * multiline. * - * @param {Element} element Element to create value from. - * @param {Range} range Range to create value from. - * @param {string} multilineTag Multiline tag if the structure is multiline. - * @param {Object} settings Settings passed to `createFromElement`. + * @param {Object} $1 Named argements. + * @param {?Element} $1.element Element to create value from. + * @param {?Range} $1.range Range to create value from. + * @param {?string} $1.multilineTag Multiline tag if the structure is + * multiline. + * @param {?Function} $1.removeNode Function to declare whether the given + * node should be removed. + * @param {?Function} $1.unwrapNode Function to declare whether the given + * node should be unwrapped. + * @param {?Function} $1.filterString Function to filter the given string. + * @param {?Function} $1.removeAttribute Wether to remove an attribute based on + * the name. * * @return {Object} A rich text value. */ -function createFromMultilineElement( element, range, multilineTag, settings ) { +function createFromMultilineElement( { + element, + range, + multilineTag, + removeNode, + unwrapNode, + filterString, + removeAttribute, +} ) { const accumulator = createEmptyValue(); if ( ! element || ! element.hasChildNodes() ) { @@ -317,7 +379,15 @@ function createFromMultilineElement( element, range, multilineTag, settings ) { continue; } - const value = createFromElement( node, range, settings ); + const value = createFromElement( { + element: node, + range, + multilineTag, + removeNode, + unwrapNode, + filterString, + removeAttribute, + } ); // Multiline value text should be separated by a double line break. if ( index !== 0 ) { @@ -337,18 +407,17 @@ function createFromMultilineElement( element, range, multilineTag, settings ) { /** * Gets the attributes of an element in object shape. * - * @param {Element} element Element to get attributes - * from. - * @param {Function} settings.removeAttributeMatch Function whose return value - * determines whether or not to - * remove an attribute based on - * name. + * @param {Object} $1 Named argements. + * @param {Element} $1.element Element to get attributes from. + * @param {?Function} $1.removeAttribute Wether to remove an attribute based on + * the name. * * @return {?Object} Attribute object or `undefined` if the element has no * attributes. */ -function getAttributes( element, { - removeAttributeMatch = () => false, +function getAttributes( { + element, + removeAttribute, } ) { if ( ! element.hasAttributes() ) { return; @@ -361,7 +430,7 @@ function getAttributes( element, { for ( let i = 0; i < length; i++ ) { const { name, value } = element.attributes[ i ]; - if ( removeAttributeMatch( name ) ) { + if ( removeAttribute && removeAttribute( name ) ) { continue; } diff --git a/packages/rich-text-value/src/index.js b/packages/rich-text-value/src/index.js index c5155eb313e29c..61f149cc047677 100644 --- a/packages/rich-text-value/src/index.js +++ b/packages/rich-text-value/src/index.js @@ -1,6 +1,6 @@ export { applyFormat } from './apply-format'; export { concat } from './concat'; -export { create, createValue } from './create'; +export { create } from './create'; export { getActiveFormat } from './get-active-format'; export { getTextContent } from './get-text-content'; export { isCollapsed } from './is-collapsed'; diff --git a/packages/rich-text-value/src/insert.js b/packages/rich-text-value/src/insert.js index f36facdb5378f2..7d41ec2fff192a 100644 --- a/packages/rich-text-value/src/insert.js +++ b/packages/rich-text-value/src/insert.js @@ -24,7 +24,7 @@ export function insert( endIndex = end ) { if ( typeof valueToInsert === 'string' ) { - valueToInsert = create( valueToInsert ); + valueToInsert = create( { text: valueToInsert } ); } const index = startIndex + valueToInsert.text.length; diff --git a/packages/rich-text-value/src/join.js b/packages/rich-text-value/src/join.js index b7f11b08eb62b4..16f52bb18b9ee8 100644 --- a/packages/rich-text-value/src/join.js +++ b/packages/rich-text-value/src/join.js @@ -16,7 +16,7 @@ import { create } from './create'; */ export function join( values, separator = '' ) { if ( typeof separator === 'string' ) { - separator = create( separator ); + separator = create( { text: separator } ); } return values.reduce( ( accumlator, { formats, text } ) => { diff --git a/packages/rich-text-value/src/test/create.js b/packages/rich-text-value/src/test/create.js index c3372c149a4307..394a4783ef2a46 100644 --- a/packages/rich-text-value/src/test/create.js +++ b/packages/rich-text-value/src/test/create.js @@ -8,7 +8,7 @@ import { JSDOM } from 'jsdom'; * Internal dependencies */ -import { create, createValue } from '../create'; +import { create } from '../create'; import { getSparseArrayLength } from './helpers'; const { window } = new JSDOM(); @@ -304,7 +304,7 @@ describe( 'create', () => { }, { description: 'should handle multiline value', - multiline: 'p', + multilineTag: 'p', html: '

one

two

', createRange: ( element ) => ( { startOffset: 1, @@ -321,7 +321,7 @@ describe( 'create', () => { }, { description: 'should handle multiline list value', - multiline: 'li', + multilineTag: 'li', html: '
  • one
  • three
    • ', createRange: ( element ) => ( { startOffset: 0, @@ -338,7 +338,7 @@ describe( 'create', () => { }, { description: 'should handle multiline value with empty', - multiline: 'p', + multilineTag: 'p', html: '

    one

    ', createRange: ( element ) => ( { startOffset: 0, @@ -356,7 +356,7 @@ describe( 'create', () => { { description: 'should remove with settings', settings: { - unwrapNodeMatch: ( node ) => !! node.getAttribute( 'data-mce-bogus' ), + unwrapNode: ( node ) => !! node.getAttribute( 'data-mce-bogus' ), }, html: '', createRange: ( element ) => ( { @@ -375,7 +375,7 @@ describe( 'create', () => { { description: 'should remove br with settings', settings: { - unwrapNodeMatch: ( node ) => !! node.getAttribute( 'data-mce-bogus' ), + unwrapNode: ( node ) => !! node.getAttribute( 'data-mce-bogus' ), }, html: '
    ', createRange: ( element ) => ( { @@ -394,7 +394,7 @@ describe( 'create', () => { { description: 'should unwrap with settings', settings: { - unwrapNodeMatch: ( node ) => !! node.getAttribute( 'data-mce-bogus' ), + unwrapNode: ( node ) => !! node.getAttribute( 'data-mce-bogus' ), }, html: 'test', createRange: ( element ) => ( { @@ -413,7 +413,7 @@ describe( 'create', () => { { description: 'should remove with children with settings', settings: { - removeNodeMatch: ( node ) => node.getAttribute( 'data-mce-bogus' ) === 'all', + removeNode: ( node ) => node.getAttribute( 'data-mce-bogus' ) === 'all', }, html: 'onetwo', createRange: ( element ) => ( { @@ -432,7 +432,7 @@ describe( 'create', () => { { description: 'should filter format attributes with settings', settings: { - removeAttributeMatch: ( attribute ) => attribute.indexOf( 'data-mce-' ) === 0, + removeAttribute: ( attribute ) => attribute.indexOf( 'data-mce-' ) === 0, }, html: 'test', createRange: ( element ) => ( { @@ -526,23 +526,21 @@ describe( 'create', () => { }, ]; - spec.forEach( ( { description, multiline, settings, html, createRange, record } ) => { + spec.forEach( ( { description, multilineTag, settings, html, createRange, record } ) => { it( description, () => { const element = createElement( html ); const range = createRange( element ); - const createdRecord = create( element, range, multiline, settings ); - expect( createdRecord ).toEqual( record ); + const createdRecord = create( { element, range, multilineTag, ...settings } ); + const formatsLength = getSparseArrayLength( record.formats ); + const createdFormatsLength = getSparseArrayLength( createdRecord.formats ); - if ( ! multiline ) { - const formatsLength = getSparseArrayLength( record.formats ); - const createdFormatsLength = getSparseArrayLength( createdRecord.formats ); - expect( createdFormatsLength ).toEqual( formatsLength ); - } + expect( createdRecord ).toEqual( record ); + expect( createdFormatsLength ).toEqual( formatsLength ); } ); } ); it( 'should reference formats', () => { - const value = createValue( 'test' ); + const value = create( { html: 'test' } ); expect( value ).toEqual( { formats: [ [ em ], [ em ], [ em, strong ], [ em, strong ] ], diff --git a/packages/rich-text-value/src/test/to-dom.js b/packages/rich-text-value/src/test/to-dom.js index c4d127813f1e39..b641085831980f 100644 --- a/packages/rich-text-value/src/test/to-dom.js +++ b/packages/rich-text-value/src/test/to-dom.js @@ -29,16 +29,16 @@ function createElement( html ) { describe( 'recordToDom', () => { it( 'should extract recreate HTML 1', () => { const HTML = 'one two ๐Ÿ’ three'; - const node = createNode( `

    ${ HTML }

    ` ); + const element = createNode( `

    ${ HTML }

    ` ); const range = { startOffset: 1, - startContainer: node.querySelector( 'em' ).firstChild, + startContainer: element.querySelector( 'em' ).firstChild, endOffset: 1, - endContainer: node.querySelector( 'strong' ).firstChild, + endContainer: element.querySelector( 'strong' ).firstChild, }; - const { body, selection } = toDom( create( node, range ) ); + const { body, selection } = toDom( create( { element, range } ) ); - expect( body.innerHTML ).toEqual( node.innerHTML ); + expect( body.innerHTML ).toEqual( element.innerHTML ); expect( selection ).toEqual( { startPath: [ 1, 0, 1 ], endPath: [ 3, 1, 0, 1 ], @@ -47,16 +47,16 @@ describe( 'recordToDom', () => { it( 'should extract recreate HTML 2', () => { const HTML = 'one two ๐Ÿ’ test three'; - const node = createNode( `

    ${ HTML }

    ` ); + const element = createNode( `

    ${ HTML }

    ` ); const range = { startOffset: 1, - startContainer: node.querySelector( 'em' ).firstChild, + startContainer: element.querySelector( 'em' ).firstChild, endOffset: 0, - endContainer: node.querySelector( 'strong' ).firstChild, + endContainer: element.querySelector( 'strong' ).firstChild, }; - const { body, selection } = toDom( create( node, range ) ); + const { body, selection } = toDom( create( { element, range } ) ); - expect( body.innerHTML ).toEqual( node.innerHTML ); + expect( body.innerHTML ).toEqual( element.innerHTML ); expect( selection ).toEqual( { startPath: [ 1, 0, 1 ], endPath: [ 3, 2, 0 ], @@ -65,16 +65,16 @@ describe( 'recordToDom', () => { it( 'should extract recreate HTML 3', () => { const HTML = ''; - const node = createNode( `

    ${ HTML }

    ` ); + const element = createNode( `

    ${ HTML }

    ` ); const range = { startOffset: 0, - startContainer: node, + startContainer: element, endOffset: 1, - endContainer: node, + endContainer: element, }; - const { body, selection } = toDom( create( node, range ) ); + const { body, selection } = toDom( create( { element, range } ) ); - expect( body.innerHTML ).toEqual( node.innerHTML ); + expect( body.innerHTML ).toEqual( element.innerHTML ); expect( selection ).toEqual( { startPath: [], endPath: [], @@ -83,16 +83,16 @@ describe( 'recordToDom', () => { it( 'should extract recreate HTML 4', () => { const HTML = 'two ๐Ÿ’'; - const node = createNode( `

    ${ HTML }

    ` ); + const element = createNode( `

    ${ HTML }

    ` ); const range = { startOffset: 1, - startContainer: node.querySelector( 'em' ).firstChild, + startContainer: element.querySelector( 'em' ).firstChild, endOffset: 2, - endContainer: node.querySelector( 'em' ).firstChild, + endContainer: element.querySelector( 'em' ).firstChild, }; - const { body, selection } = toDom( create( node, range ) ); + const { body, selection } = toDom( create( { element, range } ) ); - expect( body.innerHTML ).toEqual( node.innerHTML ); + expect( body.innerHTML ).toEqual( element.innerHTML ); expect( selection ).toEqual( { startPath: [ 0, 0, 1 ], endPath: [ 0, 0, 2 ], @@ -101,16 +101,16 @@ describe( 'recordToDom', () => { it( 'should extract recreate HTML 5', () => { const HTML = 'If you want to learn more about how to build additional blocks, or if you are interested in helping with the project, head over to the GitHub repository.'; - const node = createNode( `

    ${ HTML }

    ` ); + const element = createNode( `

    ${ HTML }

    ` ); const range = { startOffset: 1, - startContainer: node.querySelector( 'em' ).firstChild, + startContainer: element.querySelector( 'em' ).firstChild, endOffset: 0, - endContainer: node.querySelector( 'a' ).firstChild, + endContainer: element.querySelector( 'a' ).firstChild, }; - const { body, selection } = toDom( create( node, range ) ); + const { body, selection } = toDom( create( { element, range } ) ); - expect( body.innerHTML ).toEqual( node.innerHTML ); + expect( body.innerHTML ).toEqual( element.innerHTML ); expect( selection ).toEqual( { startPath: [ 0, 0, 1 ], endPath: [ 0, 0, 135 ], @@ -119,16 +119,16 @@ describe( 'recordToDom', () => { it( 'should create correct selection path ', () => { const HTML = 'test italic'; - const node = createNode( `

    ${ HTML }

    ` ); + const element = createNode( `

    ${ HTML }

    ` ); const range = { startOffset: 1, - startContainer: node, + startContainer: element, endOffset: 2, - endContainer: node, + endContainer: element, }; - const { body, selection } = toDom( create( node, range ) ); + const { body, selection } = toDom( create( { element, range } ) ); - expect( body.innerHTML ).toEqual( node.innerHTML ); + expect( body.innerHTML ).toEqual( element.innerHTML ); expect( selection ).toEqual( { startPath: [ 0, 5 ], endPath: [ 1, 0, 6 ], @@ -137,16 +137,17 @@ describe( 'recordToDom', () => { it( 'should extract recreate HTML 6', () => { const HTML = '
  • one
  • three
    • '; - const node = createNode( `` ); + const element = createNode( `` ); const range = { startOffset: 1, - startContainer: node.querySelector( 'li' ).firstChild, + startContainer: element.querySelector( 'li' ).firstChild, endOffset: 2, - endContainer: node.querySelector( 'li' ).firstChild, + endContainer: element.querySelector( 'li' ).firstChild, }; - const { body, selection } = toDom( create( node, range, 'li' ), 'li' ); + const multilineTag = 'li'; + const { body, selection } = toDom( create( { element, range, multilineTag } ), 'li' ); - expect( body.innerHTML ).toEqual( node.innerHTML ); + expect( body.innerHTML ).toEqual( element.innerHTML ); expect( selection ).toEqual( { startPath: [ 0, 0, 1 ], endPath: [ 0, 0, 2 ], diff --git a/packages/rich-text-value/src/test/to-html-string.js b/packages/rich-text-value/src/test/to-html-string.js index 19c4250f3d9f1b..25b106530d6046 100644 --- a/packages/rich-text-value/src/test/to-html-string.js +++ b/packages/rich-text-value/src/test/to-html-string.js @@ -8,7 +8,7 @@ import { JSDOM } from 'jsdom'; * Internal dependencies */ -import { createValue } from '../create'; +import { create } from '../create'; import { toHTMLString } from '../to-html-string'; const { window } = new JSDOM(); @@ -23,37 +23,44 @@ function createNode( HTML ) { describe( 'toHTMLString', () => { it( 'should extract recreate HTML 1', () => { const HTML = 'one two ๐Ÿ’ three'; + const element = createNode( `

    ${ HTML }

    ` ); - expect( toHTMLString( createValue( createNode( `

    ${ HTML }

    ` ) ) ) ).toEqual( HTML ); + expect( toHTMLString( create( { element } ) ) ).toEqual( HTML ); } ); it( 'should extract recreate HTML 2', () => { const HTML = 'one two ๐Ÿ’ test three'; + const element = createNode( `

    ${ HTML }

    ` ); - expect( toHTMLString( createValue( createNode( `

    ${ HTML }

    ` ) ) ) ).toEqual( HTML ); + expect( toHTMLString( create( { element } ) ) ).toEqual( HTML ); } ); it( 'should extract recreate HTML 3', () => { const HTML = ''; + const element = createNode( `

    ${ HTML }

    ` ); - expect( toHTMLString( createValue( createNode( `

    ${ HTML }

    ` ) ) ) ).toEqual( HTML ); + expect( toHTMLString( create( { element } ) ) ).toEqual( HTML ); } ); it( 'should extract recreate HTML 4', () => { const HTML = 'two ๐Ÿ’'; + const element = createNode( `

    ${ HTML }

    ` ); - expect( toHTMLString( createValue( createNode( `

    ${ HTML }

    ` ) ) ) ).toEqual( HTML ); + expect( toHTMLString( create( { element } ) ) ).toEqual( HTML ); } ); it( 'should extract recreate HTML 5', () => { const HTML = 'If you want to learn more about how to build additional blocks, or if you are interested in helping with the project, head over to the GitHub repository.'; + const element = createNode( `

    ${ HTML }

    ` ); - expect( toHTMLString( createValue( createNode( `

    ${ HTML }

    ` ) ) ) ).toEqual( HTML ); + expect( toHTMLString( create( { element } ) ) ).toEqual( HTML ); } ); it( 'should extract recreate HTML 6', () => { const HTML = '
  • one
  • three
    • '; + const element = createNode( `` ); + const multilineTag = 'li'; - expect( toHTMLString( createValue( createNode( `` ), 'li' ), 'li' ) ).toEqual( HTML ); + expect( toHTMLString( create( { element, multilineTag } ), 'li' ) ).toEqual( HTML ); } ); } ); diff --git a/test/e2e/test-plugins/block-icons/index.js b/test/e2e/test-plugins/block-icons/index.js index 6f676330714de6..3e83d0b098484b 100644 --- a/test/e2e/test-plugins/block-icons/index.js +++ b/test/e2e/test-plugins/block-icons/index.js @@ -1,6 +1,6 @@ ( function() { var registerBlockType = wp.blocks.registerBlockType; - var createValue = wp.richTextValue.createValue; + var create = wp.richTextValue.create; var el = wp.element.createElement; var InnerBlocks = wp.editor.InnerBlocks; var circle = el( 'circle', { cx: 10, cy: 10, r: 10, fill: 'red', stroke: 'blue', strokeWidth: '10' } ); @@ -19,7 +19,7 @@ allowedBlocks: [ 'core/paragraph', 'core/image' ], template: [ [ 'core/paragraph', { - content: createValue( 'TestSimpleSvgIcon' ), + content: create( { text: 'TestSimpleSvgIcon' } ), } ], ], } @@ -47,7 +47,7 @@ allowedBlocks: [ 'core/paragraph', 'core/image' ], template: [ [ 'core/paragraph', { - content: createValue( 'TestDashIcon' ), + content: create( { text: 'TestDashIcon' } ), } ], ], } @@ -77,7 +77,7 @@ allowedBlocks: [ 'core/paragraph', 'core/image' ], template: [ [ 'core/paragraph', { - content: createValue( 'TestFunctionIcon' ), + content: create( { text: 'TestFunctionIcon' } ), } ], ], } @@ -109,7 +109,7 @@ allowedBlocks: [ 'core/paragraph', 'core/image' ], template: [ [ 'core/paragraph', { - content: createValue( 'TestIconColors' ), + content: create( { text: 'TestIconColors' } ), } ], ], } @@ -140,7 +140,7 @@ allowedBlocks: [ 'core/paragraph', 'core/image' ], template: [ [ 'core/paragraph', { - content: createValue( 'TestIconColors' ), + content: create( { text: 'TestIconColors' } ), } ], ], } diff --git a/test/e2e/test-plugins/inner-blocks-templates/index.js b/test/e2e/test-plugins/inner-blocks-templates/index.js index 61755bd9976413..b1f5cb87353b4a 100644 --- a/test/e2e/test-plugins/inner-blocks-templates/index.js +++ b/test/e2e/test-plugins/inner-blocks-templates/index.js @@ -2,12 +2,12 @@ var registerBlockType = wp.blocks.registerBlockType; var el = wp.element.createElement; var InnerBlocks = wp.editor.InnerBlocks; - var createValue = wp.richTextValue.createValue; + var create = wp.richTextValue.create; var __ = wp.i18n.__; var TEMPLATE = [ [ 'core/paragraph', { fontSize: 'large', - content: createValue( 'Contentโ€ฆ' ), + content: create( { text: 'Contentโ€ฆ' } ), } ], ];