[WIP] Add footnotes support to Gutenberg

core-blocks/footnotes/editor.js

@@ -0,0 +1,107 @@
+/**
+ * External dependencies
+ */
+import { get, isEqual } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { withSelect } from '@wordpress/data';
+import { RichText } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+
+class FootnotesEditor extends Component {
+	constructor( props ) {
+		super( ...arguments );
+
+		this.setFootnotesInOrder( props.footnotesOrder );
+		this.state = {
+			editable: null,
+		};
+	}
+
+	setFootnotesInOrder( footnotesOrder ) {
+		const { attributes, setAttributes } = this.props;
+
+		const footnotes = footnotesOrder.map( ( { id } ) => {
+			return this.getFootnoteById( attributes.footnotes, id );
+		} );
+
+		setAttributes( { footnotes } );
+	}
+
+	getFootnoteById( footnotes, footnoteUid ) {
+		const filteredFootnotes = footnotes.filter(
+			( footnote ) => footnote.id === footnoteUid );
+
+		return get( filteredFootnotes, [ 0 ], { id: footnoteUid, text: '' } );
+	}
+
+	onChange( footnoteUid ) {
+		return ( nextValue ) => {
+			const { attributes, footnotesOrder, setAttributes } = this.props;
+
+			const nextFootnotes = footnotesOrder.map( ( { id } ) => {
+				if ( id === footnoteUid ) {
+					return {
+						id,
+						text: nextValue,
+					};
+				}
+
+				return this.getFootnoteById( attributes.footnotes, id );
+			} );
+
+			setAttributes( {
+				footnotes: nextFootnotes,
+			} );
+		};
+	}
+
+	onSetActiveEditable( id ) {
+		return () => {
+			this.setState( { editable: id } );
+		};
+	}
+
+	componentWillReceiveProps( nextProps ) {
+		const { footnotesOrder } = this.props;
+		const nextFootnotesOrder = nextProps.footnotesOrder;
+
+		if ( ! isEqual( footnotesOrder, nextFootnotesOrder ) ) {
+			this.setFootnotesInOrder( nextFootnotesOrder );
+		}
+	}
+
+	render() {
+		const { attributes, editable, isSelected } = this.props;
+		const { footnotes } = attributes;
+
+		return (
+			<ol className="blocks-footnotes__footnotes-list">
+				{ footnotes.map( ( footnote ) => (
+					<li key={ footnote.id }>
+						<RichText
+							tagName="span"
+							value={ footnote.text }
+							onChange={ this.onChange( footnote.id ) }
+							isSelected={ isSelected && editable === footnote.id }
+							placeholder={ __( 'Write footnote…' ) }
+							onFocus={ this.onSetActiveEditable( footnote.id ) }
+						/>
+					</li>
+				) ) }
+			</ol>
+		);
+	}
+}
+
+export default withSelect( ( select ) => ( {
+	footnotesOrder: select( 'core/editor' ).getFootnotes(),
+} ) )( FootnotesEditor );

core-blocks/footnotes/index.js

@@ -1,21 +1,13 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { withState } from '@wordpress/components';
-import { withSelect } from '@wordpress/data';
-import { RichText } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
+import FootnotesEditor from './editor.js';
 import './style.scss';
-import './editor.scss';
 
 export const name = 'core/footnotes';
 
@@ -44,53 +36,7 @@ export const settings = {
 		},
 	},
 
-	edit: withSelect( ( select ) => ( {
-		footnotesOrder: select( 'core/editor' ).getFootnotes(),
-	} ) )( withState( {
-		editable: null,
-	} )( ( { attributes, editable, footnotesOrder, isSelected, setAttributes, setState } ) => {
-		const { footnotes } = attributes;
-		const onSetActiveEditable = ( index ) => () => {
-			setState( { editable: index } );
-		};
-
-		return (
-			<ol className="blocks-footnotes__footnotes-list">
-				{ footnotesOrder.map( ( footnotesOrderItem, i ) => {
-					const filteredFootnotes = footnotes.filter(
-						( footnote ) => footnote.id === footnotesOrderItem.id );
-					const value = get( filteredFootnotes, [ 0, 'text' ] );
-
-					return (
-						<li key={ footnotesOrderItem.id }>
-							<RichText
-								tagName="span"
-								value={ value }
-								onChange={
-									( nextValue ) => {
-										const nextFootnotes = footnotes.filter(
-											( footnote ) => footnote.id !== footnotesOrderItem.id );
-
-										nextFootnotes.push( {
-											id: footnotesOrderItem.id,
-											text: nextValue,
-										} );
-
-										setAttributes( {
-											footnotes: nextFootnotes,
-										} );
-									}
-								}
-								isSelected={ isSelected && editable === i }
-								placeholder={ __( 'Write footnote…' ) }
-								onFocus={ onSetActiveEditable( i ) }
-							/>
-						</li>
-					);
-				} ) }
-			</ol>
-		);
-	} ) ),
+	edit: FootnotesEditor,
 
 	save( { attributes } ) {
 		const { footnotes } = attributes;