medium-editor-tables
medium-editor-tables copied to clipboard
Tabbing behaviour under Gecko is faulty
Tabbing through cells under Gecko (tested in Ubuntu/Firefox 38) differs from WebKit (tested in ubuntu/Chromium). Chromium behaves as expected however Firefox's cursor position "gets stuck" when tabbed, i.e., after tabbing to the adjacent cell, it is not possible to type. The position of the cursor is at the top left corner of the cell. Only after clicking in the middle of the cell it becomes possible to type. Issue occurs in master and medium-editor-v5 branches.
This can be solved improving the Table.prototype. The _onKeyDown function needs something like this:
_onKeyDown: function (e) {
var el = getSelectionStart(this._doc),
table;
if (e.which === TAB_KEY_CODE && isInsideElementOfTag(el, 'table')) {
e.preventDefault();
e.stopPropagation();
table = this._getTableElements(el);
if (e.shiftKey) {
this._tabBackwards(el.previousSibling, table.row);
} else {
if (this._isLastCell(el, table.row, table.root)) {
this._insertRow(getParentOf(el, 'tbody'), table.row.cells.length);
}
if (el.nextSibling && el.nextSibling.tagName === 'TD') {
placeCaretAtNode(this._doc, el.nextSibling, true);
} else {
var nextRow = el.parentElement.nextSibling;
if (typeof nextRow != 'undefined' && nextRow != null && nextRow.tagName === 'TR' && nextRow.firstChild != null && nextRow.firstChild.tagName === 'TD') {
placeCaretAtNode(this._doc, nextRow.firstChild, true);
}
}
}
}
},
combined with a slightly modified placeCaretAtNode function:
function placeCaretAtNode(doc, node, before) {
if (doc.getSelection !== undefined && node) {
var range = doc.createRange(),
selection = doc.getSelection();
if (before) {
range.setStart(node, 0);
} else {
range.setStartAfter(node);
}
range.collapse(true);
selection.removeAllRanges();
selection.addRange(range);
}
}
The solution works in Chrome, Safari and Firefox.
Thanks for this extension.
Perhaps a PR will nudge this forward :)