Adding second link to a text in Visual editor doesn't work within a table

[Dumian]

The problem occurs when you follow these steps:

1. Create a new page.
2. Copy the code below and paste it into Text editor:

   <table>
   <tbody>
   <tr>
   <td><img src="some-image.jpg" alt="some-image" width="150" height="150" /></td>
   </tr>
   <tr>
   <td>Lorem ipsum</td>
   </tr>
   </tbody>
   </table>
   

3. Switch to Visual editor.
4. Click the image and Insert/Edit link, then choose any page and press Add Link button.
5. Select whole text below the image and Insert/Edit link, then choose any page and press Add Link button.

Second link wasn't added, in console log you can find TinyMCE related JavaScript error.

You can put any text instead of the image and the bug still occurs. If you will try to add a link again, then it will work.

I'm using the latest version of WordPress, all plugins are deactivated, I've tested the bug with all default themes on two different operating systems (Windows 7 and Ubuntu 12 with the latest Firefox and Chrome).

In case of any problems with reproducing this bug ​I've made also a video with all steps.

[azaozz]

Hi Dumian, thanks for the bug report.

I can reproduce it inconsistently and is somewhat browser dependent. Doesn't happen in IE. In Firefox and Chrome usually the first attempt fails, but the second attempt succeeds. Depends on what is selected when you try to select all text inside a <td>. If the <td> node is selected, you cannot wrap it in a link, if only text node(s) is/are selected, or <img>, <span>, etc. it works as expected.

Seems we will have to look at the current selection in https://core.trac.wordpress.org/browser/trunk/src/wp-includes/js/wplink.js#L265 in non-IE browsers.

Currently cannot reproduce this for any other tags, so perhaps a fix is needed only for <td>.

[valendesigns]

I've been testing this bug trying to figure out a way to fix text in a <td> node that is not wrapped in another node, but the major hurdle is that it has extremely inconsistent behavior. There are a bunch of ways to get it to work and break, which makes it very hard to fix and test.

For example, if you don't select all the text you have a better chance of making it work, unless you select the first word which will break on the first insert but work on a second and continue working on other text in the table. It's very strange that it works so intermittently and is usually only the first or second attempt that breaks depending on where your cursor begins and ends.

@azaozz Do you have any speculations on how this might be fixed?

[tyxla]

Completely agree with @azaozz for the browser dependancy of the issue. This one seems to fix the issue - when removing the range style we're making sure that the proper node is set for startContainer when dealing with a text node.

[SergeyBiryukov]

Any patches to TinyMCE core should be suggested upstream.

[tyxla]

Replying to SergeyBiryukov:

Any patches to TinyMCE core should be suggested upstream.

Makes complete sense. I'm just sending what worked for me.
We should definitely consider reporting this issue to the core TinyMCE developers.

[azaozz]

Replying to tyxla:

We should definitely consider reporting this issue to the core TinyMCE developers.

Right, passed this upstream. Confirmed the patch fixes it in Chrome and Firefox, good job!

[DrewAPicture]

@azaozz: Do you have a link to the relevant PR for TinyMCE? I see ​one closed PR that should be included with 4.1.8 (whenever that is released and merged into core).

Also worth noting that though adding the second link tosses an error, that second link is there once you've saved the post, just not immediately available.

[iseulde]

Fixed in [31700], see #31551.