TinyMCE Editor Anchor Link Dialog

[atomiccherry]

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)

[azaozz]

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).

[atomiccherry]

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

[azaozz]

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.

[atomiccherry]

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

[snyggapa]

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

[figureone]

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.

[figureone]

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.

[azaozz]

#40699 was marked as a duplicate.

[azaozz]

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.

[figureone]

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

[snyggapa]

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

[azaozz]

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 fire and enable define('SCRIPT_DEBUG', true); in wp-config.php, however that will slow the loading of all of wp-admin.

[snyggapa]

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