How to use the @wordpress/rich-text.toHTMLString function in @wordpress/rich-text

To help you get started, we’ve selected a few @wordpress/rich-text examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github WordPress / gutenberg / packages / block-editor / src / components / rich-text / index.js View on Github external
multilineTag,
			} ) ) );
		}

		if ( hasPastedBlocks ) {
			blocks.push( ...pastedBlocks );
		} else if ( onSplitMiddle ) {
			blocks.push( onSplitMiddle() );
		}

		// If there's pasted blocks, append a block with the content after the
		// caret. Otherwise, do append and empty block if there is no
		// `onSplitMiddle` prop, but if there is and the content is empty, the
		// middle block is enough to set focus in.
		if ( hasPastedBlocks || ! onSplitMiddle || ! isEmpty( after ) ) {
			blocks.push( onSplit( toHTMLString( {
				value: after,
				multilineTag,
			} ) ) );
		}

		// If there are pasted blocks, set the selection to the last one.
		// Otherwise, set the selection to the second block.
		const indexToSelect = hasPastedBlocks ? blocks.length - 1 : 1;

		onReplace( blocks, indexToSelect );
	}, [ onReplace, onSplit, multilineTag, onSplitMiddle ] );
github godaddy-wordpress / coblocks / src / blocks / click-to-tweet / transforms.js View on Github external
transform: ( { value, citation } ) => {
				const textContent = [ create( { html: value } ), create( { html: citation } ) ];
				// 280 character limit per tweet
				textContent[ 0 ].text = textContent[ 0 ].text.slice( 0, 280 - textContent[ 1 ].text.length );
				return [
					createBlock( metadata.name, {
						content: toHTMLString( { value: textContent[ 0 ] } ) + toHTMLString( { value: textContent[ 1 ] } ),
					} ),
				];
			},
		},
github WordPress / gutenberg / packages / block-editor / src / store / effects.js View on Github external
// Calling the merge to update the attributes and remove the block to be merged
		const updatedAttributes = blockAType.merge(
			cloneA.attributes,
			blocksWithTheSameType[ 0 ].attributes
		);

		if ( hasTextSelection ) {
			const newAttributeKey = findKey( updatedAttributes, ( v ) =>
				typeof v === 'string' && v.indexOf( START_OF_SELECTED_AREA ) !== -1
			);
			const convertedHtml = updatedAttributes[ newAttributeKey ];
			const multilineTag = blockAType.attributes[ newAttributeKey ].multiline;
			const convertedValue = create( { html: convertedHtml, multilineTag } );
			const newOffset = convertedValue.text.indexOf( START_OF_SELECTED_AREA );
			const newValue = remove( convertedValue, newOffset, newOffset + 1 );
			const newHtml = toHTMLString( { value: newValue, multilineTag } );

			updatedAttributes[ newAttributeKey ] = newHtml;

			dispatch( selectionChange(
				blockA.clientId,
				newAttributeKey,
				newOffset,
				newOffset
			) );
		}

		dispatch( replaceBlocks(
			[ blockA.clientId, blockB.clientId ],
			[
				{
					...blockA,
github godaddy-wordpress / coblocks / src / blocks / click-to-tweet / transforms.js View on Github external
transform: ( { content } ) => {
				const textContent = create( { html: content } );
				// 280 character limit per tweet
				textContent.text = textContent.text.slice( 0, 280 );
				return [
					createBlock( metadata.name, {
						content: toHTMLString( { value: textContent } ),
					} ),
				];
			},
github WordPress / gutenberg / packages / block-editor / src / store / effects.js View on Github external
// Clone the blocks so we don't insert the character in a "live" block.
		const cloneA = cloneBlock( blockA );
		const cloneB = cloneBlock( blockB );

		if ( hasTextSelection ) {
			const selectedBlock = clientId === clientIdA ? cloneA : cloneB;
			const html = selectedBlock.attributes[ attributeKey ];
			const selectedBlockType = clientId === clientIdA ? blockAType : blockBType;
			const multilineTag = selectedBlockType.attributes[ attributeKey ].multiline;
			const value = insert( create( {
				html,
				multilineTag,
			} ), START_OF_SELECTED_AREA, offset, offset );

			selectedBlock.attributes[ attributeKey ] = toHTMLString( {
				value,
				multilineTag,
			} );
		}

		// We can only merge blocks with similar types
		// thus, we transform the block to merge first
		const blocksWithTheSameType = blockA.name === blockB.name ?
			[ cloneB ] :
			switchToBlockType( cloneB, blockA.name );

		// If the block types can not match, do nothing
		if ( ! blocksWithTheSameType || ! blocksWithTheSameType.length ) {
			return;
		}
github WordPress / gutenberg / packages / block-library / src / quote / transforms.js View on Github external
transform: ( attributes ) => {
				return createBlock( 'core/quote', {
					value: toHTMLString( {
						value: join( attributes.map( ( { content } ) =>
							create( { html: content } )
						), '\u2028' ),
						multilineTag: 'p',
					} ),
				} );
			},
		},
github WordPress / gutenberg / packages / block-library / src / quote / transforms.js View on Github external
.map( ( piece ) =>
								createBlock( 'core/paragraph', {
									content: toHTMLString( { value: piece } ),
								} )
							)