Make WordPress Core

Opened 7 years ago

Closed 7 years ago

Last modified 7 years ago

#40558 closed defect (bug) (fixed)

TinyMCE Editor Anchor Link Dialog

Reported by: atomiccherry's profile atomiccherry Owned by: azaozz's profile azaozz
Milestone: 4.8 Priority: normal
Severity: normal Version: 4.7.4
Component: TinyMCE Keywords: reporter-feedback
Focuses: Cc:

Description

Environment:
All plugins deactivated. Using default theme. Latest Chrome browser OSX

Issue steps:
1) Highlight text in editor
2) Select anchor link icon from toolbar
3) Select Link Options icon to open dialog
4) Highlighted anchor link is removed (text remains)
5) Save and close dialog, no link created.

Error console:
Uncaught TypeError: Failed to execute 'setStart' on 'Range': parameter 1 is not of type 'Node'.

at c.select (wp-tinymce.php?c=1&ver=4506-20170408:7)
at Object.mceUpdate (load-scripts.php?c=1&load[]=hoverIntent,common,admin-bar,heartbeat,autosave,wp-ajax-response,jquery…:744)
at Object.update (load-scripts.php?c=1&load[]=hoverIntent,common,admin-bar,heartbeat,autosave,wp-ajax-response,jquery…:744)
at HTMLInputElement.<anonymous> (load-scripts.php?c=1&load[]=hoverIntent,common,admin-bar,heartbeat,autosave,wp-ajax-response,jquery…:744)
at HTMLInputElement.dispatch (load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,plupload&ver=4.7.4:3)
at HTMLInputElement.r.handle (load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,plupload&ver=4.7.4:3)


Change History (14)

#1 @azaozz
7 years ago

  • Keywords reporter-feedback added

Testing in Chrome Version 58.0.3029.81 (64-bit) (updated today) on both Win10 and Mac and cannot reproduce.

Looking at the error, we updated TinyMCE to 4.5.6 to prevent similar error when clicking on an image. Could you add define('SCRIPT_DEBUG', true); to wp-config.php and test again please (after clearing browser cache).

#2 @atomiccherry
7 years ago

Upgraded to latest Chrome OSX (Yosemite), disabled all extensions, cleared cache, enabled SCRIPT_DEBUG. Still getting same issue/error.

Tested in latest Firefox, works fine. Scratching my head on this one.

Error was not produced in v4.7.3

#3 @azaozz
7 years ago

Scratching my head on this one.

Yeah, me too... But we will get to the bottom of this! :)

Could you paste the error(s) from the browser console with SCRIPT_DEBUG enabled. May give a bit more info on where to look.

#4 @atomiccherry
7 years ago

Still testing locally but so far nada.

tinymce.min.js?ver=4506-20170408:6 Uncaught TypeError: Failed to execute 'setStart' on 'Range': parameter 1 is not of type 'Node'.
    at c.select (tinymce.min.js?ver=4506-20170408:6)
    at Object.mceUpdate (wplink.js?ver=4.7.4:436)
    at Object.update (wplink.js?ver=4.7.4:323)
    at HTMLInputElement.<anonymous> (wplink.js?ver=4.7.4:53)
    at HTMLInputElement.dispatch (jquery.js:3)
    at HTMLInputElement.r.handle (jquery.js:3)
select	@	tinymce.min.js?ver=4506-20170408:6
mceUpdate	@	wplink.js?ver=4.7.4:436
update	@	wplink.js?ver=4.7.4:323
(anonymous)	@	wplink.js?ver=4.7.4:53
dispatch	@	jquery.js:3
r.handle	@	jquery.js:3

#5 @snyggapa
7 years ago

also described here affecting chrome and firefox users:

https://wordpress.org/support/topic/insertedit-link-feature-in-editor-not-working-properly-in-chrome/#post-9085452

Affects a colleague but not me, using the same wordpress sites so it's something specific about the wordpress 4.7.4 and local setup. Never had a problem before 4.7.4 but upon upgrade it broke on all sites for the colleague. All sites work for for me.

Colleague, sadly, is non-technical (almost anti-technical) and the other side of the country so I can't do any useful debugging, but the problem does appear to be widespread

Let me know if I can do anything to help

-Steve

#6 @figureone
7 years ago

We've been tracing this one internally as well! Here's what we found: the behavior is restricted to devices with touchscreens (iPads, MS Surface tablets, etc.).

You can reproduce in Chrome by using the device simulator (Developer Tools > Device toolbar > iPad). Make sure to refresh the edit page to load the relevant touch event js libraries.

We've been seeing the adoption rate of touchscreen devices go way up, mostly due to Surface. It took us forever to diagnose this one because most people don't think of them as "tablets" and can't figure out why it works on one laptop and not the other.

#7 @figureone
7 years ago

Pretty sure the root cause is this change in plugin.js:
https://core.trac.wordpress.org/changeset/40482

Looks like the addition of the blur event makes the link selection disappear when the "Insert/edit link" dialog (the secondary dialog that appears after clicking the Gear icon) comes into focus.

Reverting the plugin.js change fixes the problem that occurs on touchscreen devices.

#8 @azaozz
7 years ago

#40699 was marked as a duplicate.

#9 @azaozz
7 years ago

  • Owner set to azaozz
  • Resolution set to fixed
  • Status changed from new to closed

In 40644:

TinyMCE: prevent removing of the temp link element when opening the advanced link dialog to insert new link.

Part props figureone for finding the cause.
Fixes #40558.

#10 @azaozz
7 years ago

  • Milestone changed from Awaiting Review to 4.8

#11 follow-up: @figureone
7 years ago

Excellent, thanks everyone! I applied [40644] as a hotfix and it fixes the issue for me.

#12 @snyggapa
7 years ago

Excellent. Did you manually patch the file or use the full updated plugin.js - looks like there are more changes in the .js compared to stock 4.7.4 than just this.

(and did you have to mess with the accompanying .min.js file or did that stay as it was - I am not sure if the minified file is a reduced copy of the plugin.js , or a complementary one)

Thanks

Steve

Last edited 7 years ago by snyggapa (previous) (diff)

#13 in reply to: ↑ 11 @azaozz
7 years ago

Replying to figureone:

Thanks for the confirmation.

Replying to snyggapa:

Did you manually patch the file...

This is not that easy. Best is to use svn or git and make "working copy" to your computer, then apply the above change and re-build WordPress 4.7.4. Then replace the wp-includes/js/tinymce directory in your install on the server.

Alternatively can edit only the plugin.js file and enable define('SCRIPT_DEBUG', true); in wp-config.php, however that will slow the loading of all of wp-admin.

Last edited 7 years ago by azaozz (previous) (diff)

#14 @snyggapa
7 years ago

my colleague confirms that the released 4.8 fixes the issue for him. I installed it, he tested it as I never saw the problem but he was plagued by it...

Thanks

Note: See TracTickets for help on using tickets.