Merge pull request #8342 from Automattic/add/editor-video-view

Editor: Support VideoPress post-editor preview (via Shortcode component)

client/components/tinymce/plugins/wpcom-view/plugin.js

@@ -15,6 +15,7 @@ var tinymce = require( 'tinymce/tinymce' ),
 	ReactDom = require( 'react-dom' ),
 	React = require( 'react'),
 	i18n = require( 'i18n-calypso' );
+import { Provider as ReduxProvider } from 'react-redux';
 
 /**
  * Internal dependencies
@@ -90,11 +91,13 @@ function wpview( editor ) {
 			type = $view.attr( 'data-wpview-type' );
 
 			ReactDom.render(
-				React.createElement( views.components[ type ], {
-					content: getText( view ),
-					siteId: sites.getSelectedSite() ? sites.getSelectedSite().ID : null,
-					onResize: debounce( triggerNodeChanged, 500 )
-				} ),
+				React.createElement( ReduxProvider, { store: editor.getParam( 'redux_store' ) },
+					React.createElement( views.components[ type ], {
+						content: getText( view ),
+						siteId: sites.getSelectedSite() ? sites.getSelectedSite().ID : null,
+						onResize: debounce( triggerNodeChanged, 500 )
+					} )
+				),
 				$view.find( '.wpview-body' )[0]
 			);
 

client/components/tinymce/plugins/wpcom-view/resizable-view.jsx

@@ -0,0 +1,70 @@
+/**
+ * External dependencies
+ */
+import React, { PropTypes } from 'react';
+import PureComponent from 'react-pure-render/component';
+
+export default function( Component ) {
+	const componentName = Component.displayName || Component.name || '';
+
+	return class extends PureComponent {
+		static displayName = `ResizableView(${ componentName })`;
+
+		static propTypes = {
+			onResize: PropTypes.func
+		};
+
+		static defaultProps = {
+			onResize: () => {}
+		};
+
+		constructor() {
+			super( ...arguments );
+
+			this.boundSetWrapperState = this.setWrapperState.bind( this );
+			this.state = {
+				wrapper: null
+			};
+		}
+
+		setWrapperState( wrapper ) {
+			if ( ! wrapper ) {
+				return;
+			}
+
+			this.setState( { wrapper } );
+			this.disconnectObserver();
+			this.observer = new MutationObserver( this.props.onResize );
+			this.observer.observe( wrapper, {
+				attributes: true,
+				childList: true,
+				subtree: true
+			} );
+		}
+
+		componentWillUnmount() {
+			this.disconnectObserver();
+		}
+
+		disconnectObserver() {
+			if ( this.observer ) {
+				this.observer.disconnect();
+			}
+		}
+
+		render() {
+			let childProps;
+			if ( this.state.wrapper ) {
+				childProps = {
+					width: this.state.wrapper.clientWidth
+				};
+			}
+
+			return (
+				<div ref={ this.boundSetWrapperState }>
+					<Component { ...this.props } { ...childProps } />
+				</div>
+			);
+		}
+	};
+}

client/components/tinymce/plugins/wpcom-view/views.js

@@ -13,14 +13,16 @@ import values from 'lodash/values';
 import GalleryView from './gallery-view';
 import EmbedViewManager from './views/embed';
 import ContactFormView from './views/contact-form';
+import * as VideoView from './views/video';
 
 /**
  * Module variables
  */
 let views = {
 	gallery: GalleryView,
 	embed: new EmbedViewManager(),
-	contactForm: ContactFormView
+	contactForm: ContactFormView,
+	video: VideoView
 };
 
 const components = mapValues( views, ( view ) => {

client/components/tinymce/plugins/wpcom-view/views/video/index.js

@@ -0,0 +1,27 @@
+/**
+ * Internal dependencies
+ */
+import ShortcodeUtils from 'lib/shortcode';
+import VideoView from './view';
+
+export function match( content ) {
+	const nextMatch = ShortcodeUtils.next( 'wpvideo', content );
+
+	if ( nextMatch ) {
+		return {
+			index: nextMatch.index,
+			content: nextMatch.content,
+			options: {
+				shortcode: nextMatch.shortcode
+			}
+		};
+	}
+}
+
+export function serialize( content ) {
+	return encodeURIComponent( content );
+}
+
+export function getComponent() {
+	return VideoView;
+}

client/components/tinymce/plugins/wpcom-view/views/video/view.jsx

@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { merge } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import resizableView from '../../resizable-view';
+import { getSelectedSiteId } from 'state/ui/selectors';
+import { stringify, parse } from 'lib/shortcode';
+import Shortcode from 'components/shortcode';
+
+function VideoView( { siteId, content, width } ) {
+	if ( ! siteId || ! width ) {
+		return null;
+	}
+
+	const shortcode = stringify( merge( {
+		attrs: {
+			named: {
+				w: width
+			}
+		}
+	}, parse( content ) ) );
+
+	return (
+		<Shortcode { ...{ siteId, width } }>
+			{ shortcode }
+		</Shortcode>
+	);
+}
+
+VideoView.propTypes = {
+	siteId: PropTypes.number,
+	content: PropTypes.string,
+	width: PropTypes.number
+};
+
+export default connect( ( state ) => ( {
+	siteId: getSelectedSiteId( state )
+} ) )( resizableView( VideoView ) );

client/lib/shortcodes/actions.js

@@ -15,18 +15,16 @@ import { ActionTypes } from './constants';
  * action, followed by a `RECEIVE_SHORTCODE` action after the request has
  * completed.
  *
- * @param  {Number} siteId    Site ID for which to render the shortcode
- * @param  {String} shortcode Shortcode text to be rendered
+ * @param {Number} siteId    Site ID for which to render the shortcode
+ * @param {String} shortcode Shortcode text to be rendered
  */
 export function fetch( siteId, shortcode ) {
 	Dispatcher.handleViewAction( {
 		type: ActionTypes.FETCH_SHORTCODE,
 		payload: { siteId, shortcode }
 	} );
 
-	wpcom.undocumented().site( siteId ).shortcodes( {
-		shortcode: shortcode
-	}, ( error, data ) => {
+	wpcom.undocumented().site( siteId ).shortcodes( { shortcode }, ( error, data ) => {
 		Dispatcher.handleServerAction( {
 			type: ActionTypes.RECEIVE_SHORTCODE,
 			payload: { siteId, shortcode, data },