Plugin TableTools in combination with inline editor breaks out of editable element

[mei3r]

Steps to reproduce

1. Use inline editor with plugin Tabletools IN a table
2. Use the editor tools to insert a table with TH (both in rows and columns)
3. Use the context menue on the leftmost column to add another column on the left

Sample HTML structure after step 2:

<table>
  <tbody>
    <tr>
      <td>
        <div id="editor1" contenteditable="true">
          <table border="1" cellspacing="1" cellpadding="1" style="width: 500px;">
            <thead>
              <tr>
                <th scope="row"><br></th>
                <th scope="col"><br></th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row"><br></th>
                <td><br></td>
              </tr>
            </tbody>
          </table>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Expected result

There should be another column before the TH column (in the editable area).

Actual result

There is another column outside the editable area.

Other details (browser, OS, CKEditor version, installed plugins)

This problem applies to other settings also. For example the alignment of a TH cell is instead set on the first TD cell outside the editor.

Problematic Code

​https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/tabletools/plugin.js#L33

var nearestCell = startNode.getAscendant( 'td', true ) || startNode.getAscendant( 'th', true );

When startNode is a TH getAscendant() will only find the TD outside the Editor and not even execute the second part of the condition. You either have to check whether nearestCell ist an element in the editor or search for both (TD and TH) and use the nearest of both.

The same applies to ​https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/tabletools/plugin.js#L50

var parent = node.getAscendant( 'td', true ) || node.getAscendant( 'th', true );

[kkrzton]

Confirmed with CKEditor 4.6.2 on Chrome 55.