medium-editor-tables icon indicating copy to clipboard operation
medium-editor-tables copied to clipboard

Tabbing behaviour under Gecko is faulty

Open csarven opened this issue 9 years ago • 2 comments

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.

csarven avatar Jun 18 '15 09:06 csarven

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.

leotiger avatar May 09 '17 20:05 leotiger

Perhaps a PR will nudge this forward :)

csarven avatar Jul 25 '17 18:07 csarven