Fixed paste bugs on headings and lists

blocks/api/raw-handling/index.js

@@ -34,9 +34,10 @@ import shortcodeConverter from './shortcode-converter';
  *                                            * 'AUTO': Decide based on the content passed.
  *                                            * 'INLINE': Always handle as inline content, and return string.
  *                                            * 'BLOCKS': Always handle as blocks, and return array of blocks.
+ * @param  {Array}         [options.tagName]  The tag into which content will be inserted.
  * @return {Array|String}                     A list of blocks or a string, depending on `handlerMode`.
  */
-export default function rawHandler( { HTML, plainText = '', mode = 'AUTO' } ) {
+export default function rawHandler( { HTML, plainText = '', mode = 'AUTO', tagName } ) {
 	// First of all, strip any meta tags.
 	HTML = HTML.replace( /<meta[^>]+>/, '' );
 
@@ -65,7 +66,7 @@ export default function rawHandler( { HTML, plainText = '', mode = 'AUTO' } ) {
 	const hasShortcodes = pieces.length > 1;
 
 	// True if mode is auto, no shortcode is included and HTML verifies the isInlineContent condition
-	const isAutoModeInline = mode === 'AUTO' && isInlineContent( HTML ) && ! hasShortcodes;
+	const isAutoModeInline = mode === 'AUTO' && isInlineContent( HTML, tagName ) && ! hasShortcodes;
 
 	// Return filtered HTML if condition is true
 	if ( mode === 'INLINE' || isAutoModeInline ) {
@@ -74,7 +75,7 @@ export default function rawHandler( { HTML, plainText = '', mode = 'AUTO' } ) {
 			formattingTransformer,
 			stripAttributes,
 			commentRemover,
-			createUnwrapper( ( node ) => ! isInline( node ) ),
+			createUnwrapper( ( node ) => ! isInline( node, tagName ) ),
 		] );
 
 		// Allows us to ask for this information when we get a report.

blocks/api/raw-handling/is-inline-content.js

@@ -3,19 +3,19 @@
  */
 import { isInline, isDoubleBR } from './utils';
 
-export default function( HTML ) {
+export default function( HTML, tagName ) {
 	const doc = document.implementation.createHTMLDocument( '' );
 
 	doc.body.innerHTML = HTML;
 
 	const nodes = Array.from( doc.body.children );
 
-	return ! nodes.some( isDoubleBR ) && deepCheck( nodes );
+	return ! nodes.some( isDoubleBR ) && deepCheck( nodes, tagName );
 }
 
-function deepCheck( nodes ) {
+function deepCheck( nodes, tagName ) {
 	return nodes.every( ( node ) => {
-		return ( 'SPAN' === node.nodeName || isInline( node ) ) &&
-			deepCheck( Array.from( node.children ) );
+		return ( 'SPAN' === node.nodeName || isInline( node, tagName ) ) &&
+			deepCheck( Array.from( node.children ), tagName );
 	} );
 }

blocks/api/raw-handling/test/is-inline-content.js

@@ -12,12 +12,16 @@ describe( 'stripWrappers', () => {
 	it( 'should be inline content', () => {
 		equal( isInlineContent( '<em>test</em>' ), true );
 		equal( isInlineContent( '<span>test</span>' ), true );
+		equal( isInlineContent( '<li>test</li>', 'ul' ), true );
 	} );
 
 	it( 'should not be inline content', () => {
 		equal( isInlineContent( '<div>test</div>' ), false );
 		equal( isInlineContent( '<em>test</em><div>test</div>' ), false );
 		equal( isInlineContent( 'test<br><br>test' ), false );
 		equal( isInlineContent( '<em><div>test</div></em>' ), false );
+		equal( isInlineContent( '<li>test</li>', 'p' ), false );
+		equal( isInlineContent( '<li>test</li>', 'h1' ), false );
+		equal( isInlineContent( '<h1>test</h1>', 'li' ), false );
 	} );
 } );

blocks/api/raw-handling/utils.js

@@ -1,8 +1,23 @@
+/**
+ * External dependencies
+ */
+import { includes } from 'lodash';
+
 /**
  * Browser dependencies
  */
 const { ELEMENT_NODE, TEXT_NODE } = window.Node;
 
+/**
+ * An array of tag groups used by isInlineForTag function.
+ * If tagName and nodeName are present in the same group, the node should be treated as inline.
+ * @type {Array}
+ */
+const inlineWhitelistTagGroups = [
+	[ 'ul', 'li', 'ol' ],
+	[ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ],
+];
+
 const inlineWhitelist = {
 	strong: {},
 	em: {},
@@ -63,8 +78,26 @@ export function isAttributeWhitelisted( tag, attribute ) {
 	);
 }
 
-export function isInline( node ) {
-	return !! inlineWhitelist[ node.nodeName.toLowerCase() ];
+/**
+ * Checks if nodeName should be treated as inline when being added to tagName.
+ * This happens if nodeName and tagName are in the same group defined in inlineWhitelistTagGroups.
+ *
+ * @param  {String}  nodeName Node name.
+ * @param  {String}  tagName  Tag name.
+ * @return {Boolean}          True if nodeName is inline in the context of tagName and false otherwise.
+ */
+function isInlineForTag( nodeName, tagName ) {
+	if ( ! tagName || ! nodeName ) {
+		return false;
+	}
+	return inlineWhitelistTagGroups.some( tagGroup =>
+		includes( tagGroup, nodeName ) && includes( tagGroup, tagName )
+	);
+}
+
+export function isInline( node, tagName ) {
+	const nodeName = node.nodeName.toLowerCase();
+	return !! inlineWhitelist[ nodeName ] || isInlineForTag( nodeName, tagName );
 }
 
 export function isInlineWrapper( node ) {

blocks/editable/index.js

@@ -352,6 +352,7 @@ export default class Editable extends Component {
 			HTML: this.pastedContent || HTML,
 			plainText: this.pastedPlainText,
 			mode,
+			tagName: this.props.tagName,
 		} );
 
 		if ( typeof content === 'string' ) {