Media: Populate advanced editing with parsed media

client/components/tinymce/plugins/media/advanced/index.jsx

@@ -2,22 +2,45 @@
  * External dependencies
  */
 import React from 'react';
+import ReactDom from 'react-dom';
 import ReactDomServer from 'react-dom/server';
+import { Provider as ReduxProvider } from 'react-redux';
 
 /**
  * Internal dependencies
  */
 import i18n from 'lib/mixins/i18n';
+import * as MediaSerialization from 'lib/media-serialization';
 import config from 'config';
-import { toggleEditorMediaAdvanced } from 'state/ui/editor/media/actions';
+import { setEditorMediaEditItem } from 'state/ui/editor/media/actions';
 import Gridicon from 'components/gridicon';
+import EditorMediaAdvanced from 'post-editor/editor-media-advanced';
 
 export default function( editor ) {
 	const store = editor.getParam( 'redux_store' );
 	if ( ! config.isEnabled( 'post-editor/media-advanced' ) || ! store ) {
 		return;
 	}
 
+	let container;
+	function render() {
+		container = editor.getContainer().appendChild( document.createElement( 'div' ) );
+		ReactDom.render(
+			<ReduxProvider store={ store }>
+				<EditorMediaAdvanced insertMedia={ insertMedia } />
+			</ReduxProvider>,
+			container
+		);
+	}
+
+	function unmount() {
+		ReactDom.unmountComponentAtNode( container );
+	}
+
+	function insertMedia( markup ) {
+		editor.execCommand( 'mceInsertContent', false, markup );
+	}
+
 	editor.addButton( 'wp_img_advanced', {
 		tooltip: i18n.translate( 'Edit', { context: 'verb' } ),
 
@@ -32,7 +55,13 @@ export default function( editor ) {
 		},
 
 		onClick() {
-			store.dispatch( toggleEditorMediaAdvanced() );
+			const node = editor.selection.getStart();
+			const item = MediaSerialization.deserialize( node );
+
+			store.dispatch( setEditorMediaEditItem( item ) );
 		}
 	} );
+
+	editor.on( 'init', render );
+	editor.on( 'remove', unmount );
 }

client/post-editor/editor-media-advanced/index.jsx

@@ -2,42 +2,62 @@
  * External depencencies
  */
 import React, { PropTypes } from 'react';
-import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
 /**
  * Internal dependencies
  */
-import { toggleEditorMediaAdvanced } from 'state/ui/editor/media/actions';
+import { setEditorMediaEditItem } from 'state/ui/editor/media/actions';
 import Dialog from 'components/dialog';
 
-function EditorMediaAdvanced( { visible, toggleVisible } ) {
-	return (
-		<Dialog isVisible={ visible } onClose={ toggleVisible }>
-			WIP
-		</Dialog>
-	);
-}
+const EditorMediaAdvanced = React.createClass( {
+	propTypes: {
+		item: PropTypes.object,
+		resetEditItem: PropTypes.func,
+		insertMedia: PropTypes.func
+	},
+
+	getDefaultProps() {
+		return {
+			resetEditItem: () => {},
+			insertMedia: () => {}
+		};
+	},
 
-EditorMediaAdvanced.propTypes = {
-	visible: PropTypes.bool,
-	toggleVisible: PropTypes.func
-};
+	getButtonSettings() {
+		return [
+			{
+				action: 'confirm',
+				label: this.translate( 'Save' ),
+				isPrimary: true,
+				onClick: () => this.props.insertMedia( 'Updated' )
+			}
+		];
+	},
+
+	render() {
+		const { item, resetEditItem } = this.props;
 
-EditorMediaAdvanced.defaultProps = {
-	visible: false,
-	toggleVisible: () => {}
-};
+		return (
+			<Dialog
+				isVisible={ !! item }
+				buttons={ this.getButtonSettings() }
+				onClose={ resetEditItem }>
+				ID { item && item.media.ID }
+			</Dialog>
+		);
+	}
+} );
 
 export default connect(
 	( state ) => {
 		return {
-			visible: state.ui.editor.media.advanced
+			item: state.ui.editor.media.editItem
 		};
 	},
 	( dispatch ) => {
-		return bindActionCreators( {
-			toggleVisible: toggleEditorMediaAdvanced
-		}, dispatch );
+		return {
+			resetEditItem: () => dispatch( setEditorMediaEditItem( null ) )
+		};
 	}
 )( EditorMediaAdvanced );

client/post-editor/post-editor.jsx

@@ -21,7 +21,6 @@ var actions = require( 'lib/posts/actions' ),
 	EditorDrawer = require( 'post-editor/editor-drawer' ),
 	FeaturedImage = require( 'post-editor/editor-featured-image' ),
 	EditorGroundControl = require( 'post-editor/editor-ground-control' ),
-	EditorMediaAdvanced = require( 'post-editor/editor-media-advanced' ),
 	EditorTitleContainer = require( 'post-editor/editor-title/container' ),
 	EditorPageSlug = require( 'post-editor/editor-page-slug' ),
 	Button = require( 'components/button' ),
@@ -287,9 +286,6 @@ var PostEditor = React.createClass( {
 
 		return (
 			<div className="post-editor">
-				{ config.isEnabled( 'post-editor/media-advanced' ) && (
-					<EditorMediaAdvanced />
-				) }
 				<div className="post-editor__inner">
 					<div className="post-editor__content">
 						<EditorMobileNavigation site={ site } onClose={ this.onClose } />

client/state/action-types.js

@@ -17,7 +17,7 @@ export const EDITOR_CONTACT_FORM_ADD_DEFAULT_FIELD = 'EDITOR_CONTACT_FORM_ADD_DE
 export const EDITOR_CONTACT_FORM_CLEAR_FORM = 'EDITOR_CONTACT_FORM_CLEAR_FORM';
 export const EDITOR_CONTACT_FORM_LOAD_FORM = 'EDITOR_CONTACT_FORM_LOAD_FORM';
 export const EDITOR_CONTACT_FORM_REMOVE_FIELD = 'EDITOR_CONTACT_FORM_REMOVE_FIELD';
-export const EDITOR_MEDIA_ADVANCED_TOGGLE = 'EDITOR_MEDIA_ADVANCED_TOGGLE';
+export const EDITOR_MEDIA_EDIT_ITEM_SET = 'EDITOR_MEDIA_EDIT_ITEM_SET';
 export const FAIL_EXPORT = 'FAIL_EXPORT';
 export const FETCH_SITE_PLANS = 'FETCH_SITE_PLANS';
 export const FETCH_SITE_PLANS_COMPLETED = 'FETCH_SITE_PLANS_COMPLETED';

client/state/ui/editor/media/actions.js

@@ -1,10 +1,11 @@
 /**
  * Internal dependencies
  */
-import { EDITOR_MEDIA_ADVANCED_TOGGLE } from 'state/action-types';
+import { EDITOR_MEDIA_EDIT_ITEM_SET } from 'state/action-types';
 
-export function toggleEditorMediaAdvanced() {
+export function setEditorMediaEditItem( item ) {
 	return {
-		type: EDITOR_MEDIA_ADVANCED_TOGGLE
+		type: EDITOR_MEDIA_EDIT_ITEM_SET,
+		item
 	};
 }

client/state/ui/editor/media/reducer.js

@@ -7,24 +7,24 @@ import { combineReducers } from 'redux';
  * Internal dependencies
  */
 import {
-	EDITOR_MEDIA_ADVANCED_TOGGLE,
+	EDITOR_MEDIA_EDIT_ITEM_SET,
 	SERIALIZE,
 	DESERIALIZE
 } from 'state/action-types';
 
-function advanced( state = false, action ) {
+export function editItem( state = null, action ) {
 	switch ( action.type ) {
-		case EDITOR_MEDIA_ADVANCED_TOGGLE:
-			return ! state;
+		case EDITOR_MEDIA_EDIT_ITEM_SET:
+			return action.item || null;
 		case SERIALIZE:
-			return false;
+			return null;
 		case DESERIALIZE:
-			return false;
+			return null;
 	}
 
 	return state;
 }
 
 export default combineReducers( {
-	advanced
+	editItem
 } );

client/state/ui/editor/media/test/reducer.js

@@ -10,15 +10,18 @@ import {
 	SERIALIZE,
 	DESERIALIZE
 } from 'state/action-types';
-import reducer from '../reducer';
+import { editItem } from '../reducer';
 
-describe( 'reducer ui media', () => {
-	it( 'never loads persisted state', () => {
-		const state = reducer( { advanced: true }, { type: DESERIALIZE } );
-		expect( state.advanced ).to.eql( false );
-	} );
-	it( 'never persists state', () => {
-		const state = reducer( { advanced: true }, { type: SERIALIZE } );
-		expect( state.advanced ).to.eql( false );
+describe( 'reducer', () => {
+	describe( '#editItem()', () => {
+		it( 'never loads persisted state', () => {
+			const state = editItem( {}, { type: DESERIALIZE } );
+			expect( state ).to.be.null;
+		} );
+
+		it( 'never persists state', () => {
+			const state = editItem( {}, { type: SERIALIZE } );
+			expect( state ).to.be.null;
+		} );
 	} );
 } );