Table resize leaves cell uneditable and leaves cursor in <-> resize mode

[epchristi]

Type of report

Bug

Provide detailed reproduction steps (if any)

Merge cells from a html table-- and then have it lock the resulting cell as contenteditable=false unselectable=on.

If I remove the tableresize plugin, I can edit the cell, but the cursor still remains in resize mode.

NOTE: I was able to reproduce this by using "cell -> merge down" several times on an 18 row table. See uploaded screenshot

Expected result

Should be able to edit content in the cell after cell merge

Actual result

A purple-ish hover-over prevents from editing the cell.. and the screen has a resize arrow for a cursor.

Other details

• Browser: … firefox or chrome
• OS: … macos/linux
• CKEditor version: … 4.13.1
• Installed CKEditor plugins: … table tools/table selection

[epchristi]

plugins are:
plugins : {
'a11yfirsthelp' : 1,
'a11yheading' : 1,
'a11yhelp' : 1,
'a11ystylescombo' : 1,
'about' : 1,
'autocomplete' : 1,
'autogrow' : 1,
'basicstyles' : 1,
'bidi' : 1,
'blockquote' : 1,
'ckeditorfa' : 1,
'clipboard' : 1,
'codemirror' : 1,
'codesnippetgeshi' : 1,
'colorbutton' : 1,
'colordialog' : 1,
'contextmenu' : 1,
'copyformatting' : 1,
'dialogadvtab' : 1,
'div' : 1,
'docprops' : 1,
'dropdownmenumanager' : 1,
'elementspath' : 1,
'enterkey' : 1,
'entities' : 1,
'filebrowser' : 1,
'find' : 1,
'floatingspace' : 1,
'font' : 1,
'format' : 1,
'forms' : 1,
'horizontalrule' : 1,
'htmlwriter' : 1,
'iframe' : 1,
'image' : 1,
'imagebase' : 1,
'indentblock' : 1,
'indentlist' : 1,
'justify' : 1,
'language' : 1,
'lineheight' : 1,
'link' : 1,
'list' : 1,
'liststyle' : 1,
'magicline' : 1,
'maximize' : 1,
'pastefromexcel' : 1,
'pastefromgdocs' : 1,
'pastefromword' : 1,
'pastetext' : 1,
'pastetools' : 1,
'placeholder' : 1,
'preview' : 1,
'removeformat' : 1,
'resize' : 1,
'selectall' : 1,
'showblocks' : 1,
'showborders' : 1,
'simplebutton' : 1,
'smiley' : 1,
'sourcearea' : 1,
'sourcedialog' : 1,
'specialchar' : 1,
'stylescombo' : 1,
'symbol' : 1,
'tab' : 1,
'table' : 1,
'tableresize' : 1,
'tableselection' : 1,
'tabletools' : 1,
'templates' : 1,
'textselection' : 1,
'toolbar' : 1,
'uicolor' : 1,
'undo' : 1,
'uploadwidget' : 1,
'wysiwygarea' : 1
},

[epchristi]

It looks like it might be related to the fact the cell spans multiple rows. colspan=1, rowspan=18
As all the other cells are properly editable. The purple overlay as explained only shows on the large row-span cell.

I confirmed this by creating a new table and using right-click -> cell -> merge down a few times until it happened.

[epchristi]

This might be related to #2739 ??

[epchristi]

I was able to reproduce this with CKEditor sources only, with "Full" download + table resize + Source Dialog + UI Color Picker + Placeholder + Code Snippet.
I continue to try to pinpoint which is the issue. The "Standard" download doesn't reproduce the issue, but I think it's very related to the table resize plugin. (Because in the full, if I just don't add table resize --- which has become a must for our solution --- I don't have the purple selection box issue. -- I also tried this with 4.14.0

[epchristi]

var CKBUILDER_CONFIG = {
skin: 'moonocolor',
preset: 'full',
ignore: [
'.DS_Store',
'.bender',
'.editorconfig',
'.gitattributes',
'.gitignore',
'.idea',
'.jscsrc',
'.jshintignore',
'.jshintrc',
'.mailmap',
'.npm',
'.travis.yml',
'bender-err.log',
'bender-out.log',
'bender.ci.js',
'bender.js',
'dev',
'gruntfile.js',
'less',
'node_modules',
'package.json',
'tests'
],
plugins : {
'a11yhelp' : 1,
'about' : 1,
'basicstyles' : 1,
'bidi' : 1,
'blockquote' : 1,
'clipboard' : 1,
'colorbutton' : 1,
'colordialog' : 1,
'contextmenu' : 1,
'copyformatting' : 1,
'dialogadvtab' : 1,
'div' : 1,
'elementspath' : 1,
'enterkey' : 1,
'entities' : 1,
'filebrowser' : 1,
'find' : 1,
'flash' : 1,
'floatingspace' : 1,
'font' : 1,
'format' : 1,
'forms' : 1,
'horizontalrule' : 1,
'htmlwriter' : 1,
'iframe' : 1,
'image' : 1,
'indentblock' : 1,
'indentlist' : 1,
'justify' : 1,
'language' : 1,
'link' : 1,
'list' : 1,
'liststyle' : 1,
'magicline' : 1,
'maximize' : 1,
'newpage' : 1,
'pagebreak' : 1,
'pastefromgdocs' : 1,
'pastefromword' : 1,
'pastetext' : 1,
'pastetools' : 1,
'preview' : 1,
'print' : 1,
'removeformat' : 1,
'resize' : 1,
'save' : 1,
'scayt' : 1,
'selectall' : 1,
'showblocks' : 1,
'showborders' : 1,
'smiley' : 1,
'sourcearea' : 1,
'specialchar' : 1,
'stylescombo' : 1,
'tab' : 1,
'table' : 1,
'tableresize' : 1,
'tableselection' : 1,
'tabletools' : 1,
'templates' : 1,
'toolbar' : 1,
'undo' : 1,
'uploadimage' : 1,
'wsc' : 1,
'wysiwygarea' : 1
},
languages : {
'en' : 1
}
};

[Comandeer]

It seems like the algorithm for calculating resize pillars size does not consider spanned cells:

ckeditor4/plugins/tableresize/plugin.js

Line 64 in 258c8ec

nextTd = $tr.cells[ i + 1 ] && new CKEDITOR.dom.element( $tr.cells[ i + 1 ] ),

[epchristi]

Is there an ETA/version for a fix on this?

[sbrand83]

I have run into this issue as well. In my experience it only happens when moving the cursor into part of the merged cell that is not aligned with the first row of that cell.

This code sandbox includes a small example of that behavior https://codesandbox.io/s/ckeditor-table-resize-bug-nx0po?file=/index.html
It is using the 4.14.1 standard-all bundle + table resize plugin.

[Comandeer]

Merged in afc5607 to master, will be released in 4.15.1.