No longer able to catch click event of dashicons edit/delete

[programmin]

In WP4 RC it's no longer possible to catch the dashicons edit button click through the tinyMCE onclick event.

For example:

tinymce.activeEditor.on('click', function() {alert('clicked')} )

Never alerts. Is there a reason something's doing preventdefault or preventBubble? 3.9 was not affected by this. Are all shortcodes now required to do wp.mce.views.register(shortcodename, object) and include edit: function in the object?

Related: (#28169)

[nacin]

Moving to 4.0 for review/feedback, though if I had to guess, there is likely a better way for you to catch these actions.

[azaozz]

Can't reproduce this. All mouse events are contained inside wpView in both 3.9 and 4.0. This is necessary to prevent the rest of TinyMCE from manipulating the views and hasn't changed. Testing with

tinymce.activeEditor.on( 'click', function() { console.log('mce clicked') } );

nothing is logged when clicking anywhere in a view in 3.9 and 4.0RC.

For images (with or without a caption), the click is not contained. The above code logs all clicks, including on the Edit/Delete buttons.

Tested in FF, Chrome, IE11.

[programmin]

Looks like it was working fine for MCE inline mode, but not in the iframe-based TinyMCE editor on WP page editor.

[programmin]

Here's the code affecting it, in wpviews plugin:

editor.on( 'mousedown mouseup click touchend', function( event ) {
			var view = getView( event.target );

			firstFocus = false;

			// Contain clicks inside the view wrapper
			if ( view ) {
				event.stopImmediatePropagation();
				event.preventDefault();

				if ( ( event.type === 'touchend' || event.type === 'mousedown' ) && ! event.metaKey && ! event.ctrlKey ) {
					if ( editor.dom.hasClass( event.target, 'edit' ) ) {
						wp.mce.views.edit( view );
						editor.focus();
						return false;
					} else if ( editor.dom.hasClass( event.target, 'remove' ) ) {
						removeView( view );
						return false;
					}
				}

				if ( event.type === 'touchend' && scrolled ) {
					scrolled = false;
				} else {
					select( view );
				}

				// Returning false stops the ugly bars from appearing in IE11 and stops the view being selected as a range in FF.
				// Unfortunately, it also inhibits the dragging of views to a new location.
				return false;
			} else {
				if ( event.type === 'touchend' || event.type === 'mousedown' ) {
					deselect();
				}
			}

			if ( event.type === 'touchend' && scrolled ) {
				scrolled = false;
			}
		}, true );

Looks like removeView and getView are private here, and there's no obvious way to add handler to cancel deletion of certain wp-views or images, for example.

This seems somewhat related to #28169

[programmin]

Looking through the latest Wordpress mce plugin it looks like the way to catch popup of the toolbar is

editor.on( 'wptoolbar', function( event ) { ... }

in place of the old edit and delete buttons that would show up to the left of the wp-view.

Is there official documentation on this yet?

[iseulde]

Is there official documentation on this yet?

This is all still marked as experimental.

Ideally we should use commands for these, which can then be hooked into through the TinyMCE API.

[programmin]

Thanks - I have to wonder though, for how many releases will this be marked as experimental, requiring reworking every release or two? I'm curious if there's a roadmap as to when this will be semi-finalized?

[programmin]

It's worth noting that this affects common shortcodes like the latest Nextgen Gallery's shortcode for example. Because there is no obvious way to set a edit/delete action, the Nextgen gallery shortcode has the edit, delete buttons in a different location than every other wp-view in builtin Wordpress.

This makes it really inconsistent for the user.