diff --git a/client/components/tinymce/index.jsx b/client/components/tinymce/index.jsx index 21c15f5626e7f5..64fbb32782c223 100644 --- a/client/components/tinymce/index.jsx +++ b/client/components/tinymce/index.jsx @@ -153,6 +153,10 @@ module.exports = React.createClass( { onTogglePin: React.PropTypes.func }, + contextTypes: { + store: React.PropTypes.object + }, + getDefaultProps: function() { return { mode: 'tinymce', @@ -256,6 +260,7 @@ module.exports = React.createClass( { entity_encoding: 'raw', keep_styles: false, wpeditimage_html5_captions: true, + redux_store: this.context.store, // Limit the preview styles in the menu/toolbar preview_styles: 'font-family font-size font-weight font-style text-decoration text-transform', diff --git a/client/components/tinymce/plugins/media/advanced/index.jsx b/client/components/tinymce/plugins/media/advanced/index.jsx new file mode 100644 index 00000000000000..3d798dc0f30a16 --- /dev/null +++ b/client/components/tinymce/plugins/media/advanced/index.jsx @@ -0,0 +1,38 @@ +/** + * External dependencies + */ +import React from 'react'; +import ReactDomServer from 'react-dom/server'; + +/** + * Internal dependencies + */ +import i18n from 'lib/mixins/i18n'; +import config from 'config'; +import { toggleEditorMediaAdvanced } from 'state/ui/editor/media/actions'; +import Gridicon from 'components/gridicon'; + +export default function( editor ) { + const store = editor.getParam( 'redux_store' ); + if ( ! config.isEnabled( 'post-editor/media-advanced' ) || ! store ) { + return; + } + + editor.addButton( 'wp_img_advanced', { + tooltip: i18n.translate( 'Edit', { context: 'verb' } ), + + classes: 'toolbar-segment-start', + + onPostRender() { + this.innerHtml( ReactDomServer.renderToStaticMarkup( + + ) ); + }, + + onClick() { + store.dispatch( toggleEditorMediaAdvanced() ); + } + } ); +} diff --git a/client/components/tinymce/plugins/media/plugin.jsx b/client/components/tinymce/plugins/media/plugin.jsx index 0458878d648b3c..90af2d65e582e3 100644 --- a/client/components/tinymce/plugins/media/plugin.jsx +++ b/client/components/tinymce/plugins/media/plugin.jsx @@ -32,6 +32,7 @@ var sites = require( 'lib/sites-list' )(), notices = require( 'notices' ), TinyMCEDropZone = require( './drop-zone' ), restrictSize = require( './restrict-size' ), + advanced = require( './advanced' ), Gridicon = require( 'components/gridicon' ), config = require( 'config' ); @@ -647,6 +648,7 @@ function mediaButton( editor ) { } ); restrictSize( editor ); + advanced( editor ); } module.exports = function() { diff --git a/client/components/tinymce/plugins/wpeditimage/plugin.js b/client/components/tinymce/plugins/wpeditimage/plugin.js index 20c042e543913d..1f2a11afedd265 100644 --- a/client/components/tinymce/plugins/wpeditimage/plugin.js +++ b/client/components/tinymce/plugins/wpeditimage/plugin.js @@ -71,6 +71,7 @@ function wpEditImage( editor ) { 'wpcom_img_size_decrease', 'wpcom_img_size_increase', 'wp_img_caption', // See plugins/media + 'wp_img_advanced', // See plugins/media/advanced 'wp_img_remove' ] ); } ); diff --git a/client/components/tinymce/style.scss b/client/components/tinymce/style.scss index f231703b3fe493..96ee5686e959c1 100644 --- a/client/components/tinymce/style.scss +++ b/client/components/tinymce/style.scss @@ -65,6 +65,10 @@ color: darken( $gray, 20% ); } + .mce-toolbar .mce-btn .gridicon { + fill: darken( $gray, 20% ); + } + .mce-colorbutton .mce-preview { background-color: $gray-dark; } @@ -94,6 +98,11 @@ .mce-toolbar .mce-btn-group .mce-btn:focus .mce-ico { color: $gray-dark; } + + .mce-toolbar .mce-btn-group .mce-btn:hover .gridicon, + .mce-toolbar .mce-btn-group .mce-btn:focus .gridicon { + fill: $gray-dark; + } } .mce-toolbar .mce-btn-group .mce-btn.mce-toolbar-segment-start:not( :first-child )::before, diff --git a/client/post-editor/editor-media-advanced/index.jsx b/client/post-editor/editor-media-advanced/index.jsx new file mode 100644 index 00000000000000..131432a3083113 --- /dev/null +++ b/client/post-editor/editor-media-advanced/index.jsx @@ -0,0 +1,43 @@ +/** + * 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 Dialog from 'components/dialog'; + +function EditorMediaAdvanced( { visible, toggleVisible } ) { + return ( + + ); +} + +EditorMediaAdvanced.propTypes = { + visible: PropTypes.bool, + toggleVisible: PropTypes.func +}; + +EditorMediaAdvanced.defaultProps = { + visible: false, + toggleVisible: () => {} +}; + +export default connect( + ( state ) => { + return { + visible: state.ui.editor.media.advanced + }; + }, + ( dispatch ) => { + return bindActionCreators( { + toggleVisible: toggleEditorMediaAdvanced + }, dispatch ); + } +)( EditorMediaAdvanced ); diff --git a/client/post-editor/post-editor.jsx b/client/post-editor/post-editor.jsx index d424f13f818653..f17424eb56414d 100644 --- a/client/post-editor/post-editor.jsx +++ b/client/post-editor/post-editor.jsx @@ -21,6 +21,7 @@ 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' ), @@ -286,6 +287,9 @@ var PostEditor = React.createClass( { return (