Moved list logic into Editable

WordPress · May 16, 2017 · f60e11d · f60e11d
1 parent 4cc20bf
commit f60e11d
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 69 deletions.
diff --git a/blocks/editable/index.js b/blocks/editable/index.js
@@ -45,6 +45,31 @@ const ALIGNMENT_CONTROLS = [
 	},
 ];
 
+const LIST_CONTROLS = [
+	{
+		list: 'UL',
+		icon: 'editor-ul',
+		title: wp.i18n.__( 'Convert to unordered' ),
+		cmd: 'InsertUnorderedList',
+	},
+	{
+		list: 'OL',
+		icon: 'editor-ol',
+		title: wp.i18n.__( 'Convert to ordered' ),
+		cmd: 'InsertOrderedList',
+	},
+	{
+		icon: 'editor-outdent',
+		title: wp.i18n.__( 'Outdent list item' ),
+		cmd: 'Outdent',
+	},
+	{
+		icon: 'editor-indent',
+		title: wp.i18n.__( 'Indent list item' ),
+		cmd: 'Indent',
+	},
+];
+
 function createElement( type, props, ...children ) {
 	if ( props[ 'data-mce-bogus' ] === 'all' ) {
 		return null;
@@ -248,10 +273,12 @@ export default class Editable extends wp.element.Component {
 		activeFormats.forEach( ( activeFormat ) => formats[ activeFormat ] = true );
 		const alignments = this.editor.formatter.matchAll( [ 'alignleft', 'aligncenter', 'alignright' ] );
 		const alignment = alignments.length > 0 ? alignmentMap[ alignments[ 0 ] ] : null;
+		const aList = this.editor.dom.getParent( element, 'OL,UL' );
+		const list = aList ? { type: aList.nodeName, isInternal: aList !== this.editor.getBody() } : null;
 
 		const focusPosition = this.getRelativePosition( element );
 		const bookmark = this.editor.selection.getBookmark( 2, true );
-		this.setState( { alignment, bookmark, formats, focusPosition } );
+		this.setState( { alignment, bookmark, formats, focusPosition, list } );
 
 		if ( this.props.onNodeChange ) {
 			this.props.onNodeChange( { element, parents } );
@@ -368,6 +395,24 @@ export default class Editable extends wp.element.Component {
 		}
 	}
 
+	isListActive( listType ) {
+		return this.state.list && this.state.list.type === listType;
+	}
+
+	setListType( listType, listCommand ) {
+		this.editor.focus();
+
+		if ( this.state.list ) {
+			if ( this.state.list.isInternal ) {
+				if ( this.state.list.type !== listType ) {
+					this.editor.execCommand( listCommand );
+				}
+			} else if ( this.props.onListChange ) {
+				this.props.onListChange( listType );
+			}
+		}
+	}
+
 	render() {
 		const {
 			tagName,
@@ -401,6 +446,17 @@ export default class Editable extends wp.element.Component {
 			<div className={ classes }>
 				{ focus &&
 					<Fill name="Formatting.Toolbar">
+						{ this.state.list &&
+							<Toolbar
+								controls={ LIST_CONTROLS.map( ( control ) => ( {
+									...control,
+									isActive: control.list && this.isListActive( control.list ),
+									onClick: () => ( control.list ?
+									this.setListType( control.list, control.cmd ) :
+									this.editor.execCommand( control.cmd ) ),
+								} ) ) }
+								/>
+						}
 						{ showAlignments &&
 							<Toolbar
 								controls={ ALIGNMENT_CONTROLS.map( ( control ) => ( {

diff --git a/blocks/library/list/index.js b/blocks/library/list/index.js
@@ -12,40 +12,6 @@ import Editable from '../../editable';
 
 const { children, prop } = hpq;
 
-function execCommand( command ) {
-	return ( { editor } ) => {
-		if ( editor ) {
-			editor.execCommand( command );
-		}
-	};
-}
-
-function listIsActive( listType ) {
-	return ( { nodeName = 'OL', internalListType } ) => {
-		return listType === ( internalListType ? internalListType : nodeName );
-	};
-}
-
-function listSetType( listType, editorCommand ) {
-	return ( { internalListType, editor }, setAttributes ) => {
-		if ( internalListType ) {
-			// only change list types, don't toggle off internal lists
-			if ( internalListType !== listType )	{
-				if ( editor ) {
-					editor.execCommand( editorCommand );
-				}
-			}
-		} else {
-			setAttributes( { nodeName: listType } );
-		}
-	};
-}
-
-function findInternalListType( { parents } ) {
-	const list = parents.find( ( node ) => node.nodeName === 'UL' || node.nodeName === 'OL' );
-	return list ? list.nodeName : null;
-}
-
 registerBlock( 'core/list', {
 	title: wp.i18n.__( 'List' ),
 	icon: 'editor-ul',
@@ -56,31 +22,6 @@ registerBlock( 'core/list', {
 		values: children( 'ol,ul' ),
 	},
 
-	controls: [
-		{
-			icon: 'editor-ul',
-			title: wp.i18n.__( 'Convert to unordered' ),
-			isActive: listIsActive( 'UL' ),
-			onClick: listSetType( 'UL', 'InsertUnorderedList' ),
-		},
-		{
-			icon: 'editor-ol',
-			title: wp.i18n.__( 'Convert to ordered' ),
-			isActive: listIsActive( 'OL' ),
-			onClick: listSetType( 'OL', 'InsertOrderedList' ),
-		},
-		{
-			icon: 'editor-outdent',
-			title: wp.i18n.__( 'Outdent list item' ),
-			onClick: execCommand( 'Outdent' ),
-		},
-		{
-			icon: 'editor-indent',
-			title: wp.i18n.__( 'Indent list item' ),
-			onClick: execCommand( 'Indent' ),
-		},
-	],
-
 	transforms: {
 		from: [
 			{
@@ -112,15 +53,8 @@ registerBlock( 'core/list', {
 		return (
 			<Editable
 				tagName={ nodeName.toLowerCase() }
-				onSetup={ ( nextEditor ) => {
-					setAttributes( { editor: nextEditor } );
-				}	}
-				onChange={ ( nextValues ) => {
-					setAttributes( { values: nextValues } );
-				} }
-				onNodeChange={ ( nodeInfo ) => {
-					setAttributes( { internalListType: findInternalListType( nodeInfo ) } );
-				} }
+				onChange={ ( nextValues ) => setAttributes( { values: nextValues } ) }
+				onListChange={ ( listType ) => setAttributes( { nodeName: listType } ) }
 				value={ values }
 				focus={ focus }
 				onFocus={ setFocus }