tab/shift-tab to indent/outdent <li> elements

[Tuomas Salo]

I'd like Ckeditor to indent/outdent a list item with tab/shift-tab.

I wrote a small (quite untested) patch that aims to do this. Feel free to use this.

CKEDITOR.plugins.add('liTab', {
    init: function(editor) {
        editor.on('key', function(ev) {
            if( ev.data.keyCode == 9 || ev.data.keyCode == CKEDITOR.SHIFT + 9) {
                if ( editor.focusManager.hasFocus )
                {
                    var sel = editor.getSelection(),
                    ancestor = sel.getCommonAncestor();
                    li = ancestor.getAscendant({li:1, td:1, th:1}, true);
                    if(li && li.$.nodeName == 'LI') {
                        editor.execCommand(ev.data.keyCode == 9 ? 'indent' : 'outdent');
                        ev.cancel();
                    }
                    // else we've found a td/th first, so let's not break the
                    // existing tab functionality in table cells.
                }
                
            }
        }, null, null, 5); // high priority (before the tab plugin)
    }
});

Known problems:

• one can "over-indent" <li> elements. (If there are no upper sibling, maybe should do nothing?)

• one can "under-indent" <li> elements, turning them to <p> elements.

I consider both of these problems minor. They are also present when using the indent/outdent buttons in the toolbar, and should be fixed there, if at all.

[Anna Tomanek]

In CKEditor Tab and Shift+Tab are used for navigation purposes and are important for our accessibility support. However, we already broke this rule introducing Tab support in tables (#979), so this needs to be discussed internally. Using Tab to indent list items is a popular use case in desktop editors, so it is natural that a considerable number of people expect it to work in CKEditor, too.

Thanks for the patch!

[Jakub Ś]

#6123 has been marked as duplicate.

[Jakub Ś]

#8153 has been marked as duplicate.

[derstephan]

Replying to naapuri:

I wrote a small (quite untested) patch that aims to do this. Feel free to use this.

I tried to get this to work. But I can not get it to work. I created a file /plugins/liTab/plugin.js and pasted your patch in there. Afterwards, I added

config.extraPlugins = 'liTab';

to my config.js file. But no change in tab-behaviour. Did I do it wrong?

Stephan

[Frederico Caldeira Knabben]

We should move the list indentation logic out of the indent plugin into the list plugin and make it catch the TAB actions as well the override the indentation command execution when necessary. In this way we avoid the indentation plugin to be required.

[Nathan Haug]

This would be great to have the indentation separated from the buttons. We don't plan on including the indent/unindent buttons in the default Drupal 8 installation, but we'd still like to have tab/shift-tab provide indentation for LI items. The indentation of paragraphs was slightly controversial for us, but indentation of LI items is a no-brainer. Discussion: ​http://drupal.org/node/1907418#comment-7174346

[Bill DePhillips]

Thanks for working on this. We'd love to have this feature in our product.

[Olek Nowodziński]

Replying to wdephillips:

Thanks for working on this. We'd love to have this feature in our product.

It's a part of the next major release. But first, it requires #10027 to separate list and block indentation, which means... a totally new indentation system. Stay tuned ;)

[Olek Nowodziński]

This will be resolved in #10027.

[Olek Nowodziński]

This ticket has been resolved along with #10027.