WordPress.org

Make WordPress Core

Opened 5 years ago

Last modified 5 months ago

#29458 new defect (bug)

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

Reported by: programmin Owned by:
Milestone: Priority: normal
Severity: normal Version: 3.9
Component: Media Keywords: reporter-feedback
Focuses: ui, javascript Cc:
PR Number:

Description

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)

Change History (9)

#1 @nacin
5 years ago

  • Milestone changed from Awaiting Review to 4.0

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.

#2 @azaozz
5 years ago

  • Keywords close added

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.

#3 @nacin
5 years ago

  • Keywords reporter-feedback added
  • Milestone changed from 4.0 to Awaiting Review

#4 @programmin
5 years ago

  • Version changed from trunk to 3.9

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

#5 @programmin
5 years ago

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

#6 @programmin
4 years ago

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?

#7 @iseulde
4 years ago

  • Keywords close removed

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.

#8 @programmin
4 years ago

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?

#9 @programmin
3 years ago

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.

Note: See TracTickets for help on using tickets.