WIP: Add "insert items" menu item to editor #5071
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import React from 'react'; | ||
|
|
||
| import Gridicon from 'components/gridicon'; | ||
| import SocialLogo from 'components/social-logo'; | ||
| import i18n from 'lib/mixins/i18n'; | ||
|
|
||
| const GridiconButton = ( { icon, label } ) => ( | ||
| <div> | ||
| <Gridicon className="wpcom-insert-menu__menu-icon" icon={ icon } /> | ||
| <span className="wpcom-insert-menu__menu-label">{ label }</span> | ||
| </div> | ||
| ); | ||
|
|
||
| const SocialLogoButton = ( { icon, label } ) => ( | ||
| <div> | ||
| <SocialLogo className="wpcom-insert-menu__menu-icon" icon={ icon } /> | ||
| <span className="wpcom-insert-menu__menu-label">{ label }</span> | ||
| </div> | ||
| ); | ||
|
|
||
| export default [ | ||
| { | ||
| name: 'insert_media_item', | ||
| item: <GridiconButton icon="image-multiple" label={ i18n.translate( 'Add Media' ) } />, | ||
| cmd: 'wpcomAddMedia' | ||
| }, | ||
| { | ||
| name: 'insert_contact_form', | ||
| item: <GridiconButton icon="mention" label={ i18n.translate( 'Add Contact Form' ) } />, | ||
| cmd: 'wpcomContactForm' | ||
| } | ||
| ]; | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import React from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| import tinymce from 'tinymce/tinymce'; | ||
| import { renderToString } from 'react-dom/server'; | ||
|
|
||
| import Gridicon from 'components/gridicon'; | ||
| import config from 'config'; | ||
| import i18n from 'lib/mixins/i18n'; | ||
|
|
||
| import menuItems from './menu-items'; | ||
|
|
||
| const initialize = editor => { | ||
| menuItems.forEach( item => | ||
|
There was a problem hiding this comment. I suppose these menu items and button is still being "added" (but not used) even when the feature flag is disabled? Worth a check to early return perhaps? (example) There was a problem hiding this comment. this was part of the call on how many places to scatter the config flag check. I felt that adding was light-weight enough to leave it in. if you want, I'll hide it behind the flag. There was a problem hiding this comment.
I think it's probably pretty safe, but would be easy to think in future iterations that the plugin code here doesn't run unless the feature flag is enabled, which is not true. Since you'll likely be the one to make said changes, it's not much of a concern. Personally, I'd add the condition and early return to feel safer, but I see your point and wouldn't be too bothered to leave it out. There was a problem hiding this comment. hidden behind the flag now |
||
| editor.addMenuItem( item.name, { | ||
| classes: 'wpcom-insert-menu__menu-item', | ||
| cmd: item.cmd, | ||
| onPostRender() { | ||
| this.innerHtml( renderToString( item.item ) ); | ||
| } | ||
| } ) | ||
| ); | ||
|
|
||
| editor.addButton( 'wpcom_insert_menu', { | ||
| type: 'splitbutton', | ||
| title: i18n.translate( 'Insert content' ), | ||
| classes: 'btn wpcom-insert-menu insert-menu', | ||
|
There was a problem hiding this comment. We could drop one or the other of these two There was a problem hiding this comment. @drw158 I would appreciate your direction here. When I cut out the There was a problem hiding this comment. That is quite strange, since there isn't any There was a problem hiding this comment. @drw158 it's the |
||
| cmd: menuItems[0].cmd, | ||
| menu: menuItems.map( ( { name } ) => editor.menuItems[ name ] ), | ||
| onPostRender() { | ||
| ReactDOM.render( | ||
| <Gridicon icon="add-image" />, | ||
| this.$el[0].children[0] | ||
| ); | ||
| } | ||
| } ); | ||
| }; | ||
|
|
||
| export default () => { | ||
| if ( ! config.isEnabled( 'post-editor/insert-menu' ) ) { | ||
|
|
||
| return; | ||
| } | ||
|
|
||
| tinymce.PluginManager.add( 'wpcom/insertmenu', initialize ); | ||
| }; | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| .post-editor, | ||
| .mce-inline-toolbar-grp { | ||
|
|
||
| .mce-toolbar .mce-btn-group .mce-btn.mce-insert-menu { | ||
| margin: 0; | ||
|
|
||
| &:hover .mce-open i.mce-caret, | ||
| &:focus .mce-open i.mce-caret { | ||
| color: lighten( $gray, 10% ); | ||
| } | ||
|
|
||
| &:hover .gridicons-add-image, | ||
| &:focus .gridicons-add-image { | ||
| fill: lighten( $gray, 10% ); | ||
| } | ||
|
|
||
| .mce-open:hover i.mce-caret, | ||
| .mce-open:focus i.mce-caret { | ||
| color: $gray-dark; | ||
| } | ||
|
|
||
| .gridicons-add-image:hover, | ||
| .gridicons-add-image:focus { | ||
| fill: $gray-dark; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .post-editor .mce-toolbar .mce-btn.mce-insert-menu .gridicon, | ||
| .wpcom-insert-menu__menu-icon.gridicon { | ||
| height: 24px; | ||
| width: 24px; | ||
| } | ||
|
|
||
| .mce-toolbar .mce-btn.mce-insert-menu button:first-child { | ||
| padding: 6px; | ||
| } | ||
|
|
||
| .mce-splitbtn.mce-insert-menu .mce-open.mce-active { | ||
| background-color: $white; | ||
| outline: 0; | ||
| } | ||
|
|
||
| .mce-btn.mce-insert-menu span { | ||
| padding-left: 0; | ||
| } | ||
|
|
||
| .mce-toolbar .mce-btn.mce-insert-menu .mce-open { | ||
| padding: 8px 12px; | ||
| } | ||
|
|
||
| .mce-container .wpcom-insert-menu__menu-label { | ||
| color: darken( $gray, 30% ); | ||
| display: inline-block; | ||
| font-family: $sans; | ||
| margin-left: 8px; | ||
| margin-top: 2px; | ||
| } | ||
|
|
||
| .wpcom-insert-menu__menu-icon { | ||
| fill: $gray; | ||
| } | ||
|
|
||
| .mce-container.mce-menu .mce-container-body .mce-wpcom-insert-menu__menu-item { | ||
| padding: 9px 16px; | ||
| margin: 0; | ||
| border: none; | ||
|
|
||
| &:hover, | ||
| &:focus { | ||
|
|
||
| .wpcom-insert-menu__menu-label { | ||
| color: $blue-medium; | ||
| } | ||
|
|
||
| .wpcom-insert-menu__menu-icon { | ||
| fill: $blue-medium; | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Unused? Or I guess anticipating future additions?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
was used, then wasn't used in this current PR - it was put in for the Instagram widget and I just didn't take it out.