Editor: Add support for editing embeds inside a post

Fixes #1729

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

@@ -22,6 +22,8 @@ var tinymce = require( 'tinymce/tinymce' ),
 import views from './views';
 import { renderWithReduxStore } from 'lib/react-helpers';
 import { getSelectedSiteId } from 'state/ui/selectors';
+import EmbedDialog from 'components/tinymce/plugins/wpcom-view/views/embed/embed-dialog';
+import LinkDialog from 'components/tinymce/plugins/wplink/dialog';  //tmp
 
 /**
  * WordPress View plugin.
@@ -825,6 +827,49 @@ function wpview( editor ) {
 		}
 	});
 
+
+	function footemp(a) {
+		console.log('a',a);
+		// what is this supposed to be?
+		// it's not getting called, but it's required to be here
+	}
+
+	// shoujld maybe go elsewhere?
+	editor.addCommand( 'embedEditLink', content => {
+		function renderModal( visibility = 'show' ) {
+			let node = editor.selection.getNode();    // not sure if retrieved this correctly
+		    const store = editor.getParam( 'redux_store' );    // not sure if retrieved this correctly
+
+		    console.log('node',node);
+		    console.log( 'store',store);
+
+			renderWithReduxStore(
+				React.createElement( EmbedDialog, {
+					// this works, but it's hiding it by default
+					// also creating infinite number instead of creating 1 and reusing
+					isVisible: true,
+					embedUrl: content,
+					footemp, //remove this, but need to replace w/ something else? orjust random piece of data copy/pasted?
+					onInsert( productData ) {   // rename
+						console.log( 'productdata',productData ); // this isn't firing
+
+						editor.execCommand( 'mceInsertContent', false, serialize( productData ) );
+						renderModal( 'hide' );
+					},
+					onClose() {
+						editor.focus();
+						renderModal( 'hide' );
+					},
+				} ),
+				node,
+				store,
+			);
+		}
+
+		renderModal();
+		return 'test';
+	} );
+
 	editor.addButton( 'wp_view_edit', {
 		tooltip: i18n.translate( 'Edit', { context: 'verb' } ),
 		icon: 'dashicon dashicons-edit',

client/components/tinymce/plugins/wpcom-view/views/embed/embed-dialog/docs/example.jsx

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import React, { PureComponent } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import Button from 'components/button';
+import Card from 'components/card';
+import EmbedDialog from 'components/tinymce/plugins/wpcom-view/views/embed/embed-dialog/';
+
+class EmbedDialogExample extends PureComponent {
+	state = { showDialog: false };
+
+	openDialog  = () => this.setState( { showDialog: true  } );
+	handleClose = () => this.setState( { showDialog: false } );
+
+	render() {
+		return (
+			<Card>
+				<Button onClick={ this.openDialog }>Open Embed Dialog</Button>
+				<EmbedDialog
+					embedUrl={ 'https://youtube.com/watch/foo' }
+					isVisible={ this.state.showDialog }
+					onClose={ this.handleClose }
+				/>
+			</Card>
+		);
+	}
+}
+
+export default EmbedDialogExample;

client/components/tinymce/plugins/wpcom-view/views/embed/embed-dialog/index.jsx

@@ -0,0 +1,76 @@
+/**
+ * External dependencies
+ */
+import React, { Component, PropTypes } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import Dialog from 'components/dialog';
+import Button from 'components/button';
+import FormTextInput from 'components/forms/form-text-input';
+
+import EmbedView from 'components/tinymce/plugins/wpcom-view/views/embed/view';
+import ResizableIframe from 'components/resizable-iframe';
+
+class EmbedDialog extends Component {
+	static propTypes = {
+		isVisible: PropTypes.bool,
+		embedUrl: PropTypes.string,
+	};
+
+	static defaultProps = {
+		isVisible: false,
+		embedUrl: '',
+	};
+
+	state = {
+		embedUrl: this.props.embedUrl,
+	};
+
+	onUpdateEmbed = ( event ) => {
+		console.log('on update');
+		// set to state. this.embedUrl ?
+		// update tinymce content w/ state.embedUrl & re-render the embed inside the tinymce component
+		this.props.onClose();
+	};
+
+	onChangeEmbedUrl = ( event ) => {
+		this.setState( { embedUrl: event.target.value } );
+		// re-reder preview - should happen automatically
+		// need to debounce or something so not every single second
+	};
+
+	render() {
+		return (
+			<Dialog
+				isVisible={ this.props.isVisible }
+				onClose={ this.props.onClose }
+				buttons={ [
+					<Button onClick={ this.props.onClose }>
+						Cancel
+					</Button>,
+					<Button primary onClick={ this.onUpdateEmbed }>
+						Update
+					</Button>
+				] }
+			>
+				<h3>Embed URL</h3>
+
+				<FormTextInput
+					defaultValue={ this.state.embedUrl }
+					onChange={ this.onChangeEmbedUrl }
+				/>
+
+				<EmbedView src={ this.state.embedUrl } />
+				<ResizableIframe src={ this.state.embedUrl } frameBorder="0" seamless width="100%" />
+			</Dialog>
+		);
+		{/* security issue above with src="user input", need to use wpcom oembed provider whitelist.
+		ALSO WANT iframe sandbox params etc?
+		also need to transform to canonical embeddable URL. youtube will block main url via x-frame-options, have to use `/embed/{id}` url
+		*/}
+	}
+}
+
+export default EmbedDialog;

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

@@ -135,4 +135,9 @@ export default class EmbedViewManager extends EventEmitter {
 	getComponent() {
 		return EmbedView;
 	}
+
+	// creating this function automatically makes icon appear
+	edit( editor, content ) {
+		editor.execCommand( 'embedEditLink', content );
+	}
 }

client/devdocs/design/blocks.jsx

@@ -76,6 +76,7 @@ import ReaderEmailSettings from 'blocks/reader-email-settings/docs/example';
 import UploadImage from 'blocks/upload-image/docs/example';
 import ConversationCommentList from 'blocks/conversations/docs/example';
 import SimplePaymentsDialog from 'components/tinymce/plugins/simple-payments/dialog/docs/example';
+import EmbedDialog from 'components/tinymce/plugins/wpcom-view/views/embed/embed-dialog/docs/example';
 import ConversationCaterpillar from 'blocks/conversation-caterpillar/docs/example';
 
 export default React.createClass( {
@@ -165,6 +166,7 @@ export default React.createClass( {
 					<ReaderImportButton />
 					<SharingPreviewPane />
 					<SimplePaymentsDialog />
+					<EmbedDialog />
 					<ReaderShare />
 					<ReaderEmailSettings />
 					<UploadImage />