Opened 8 years ago

Closed 6 years ago

#8244 closed New Feature (fixed)

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

Reported by: Tuomas Salo Owned by: Olek Nowodziński
Priority: Normal Milestone: CKEditor 4.2
Component: Core : Keystrokes Version:
Keywords: IE HasPatch IBM Drupal Cc: monahant@…, vlq@…, satya_minnekanti@…, wim.leers@…, nate@…, billd@…

Description

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.

Change History (19)

comment:1 Changed 8 years ago by Anna Tomanek

Component: GeneralCore : Keystrokes
Keywords: HasPatch added
Status: newconfirmed

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!

comment:2 Changed 8 years ago by Jakub Ś

Cc: monahant@… added
Keywords: IE added

#6123 has been marked as duplicate.

comment:3 Changed 8 years ago by Jakub Ś

Cc: vlq@… added

#8153 has been marked as duplicate.

comment:4 in reply to:  description Changed 8 years ago by 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

comment:5 Changed 8 years ago by Satya Minnekanti

Cc: satya_minnekanti@… added
Keywords: IBM added

comment:6 Changed 7 years ago by Frederico Caldeira Knabben

Milestone: CKEditor 4.1

comment:7 Changed 7 years ago by 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.

comment:8 Changed 7 years ago by Piotrek Koszuliński

Cc: wim.leers@… added

comment:9 Changed 7 years ago by Wiktor Walc

Keywords: Drupal added

comment:10 Changed 7 years ago by Frederico Caldeira Knabben

Milestone: CKEditor 4.1CKEditor 4.2

comment:11 Changed 7 years ago by Nathan Haug

Cc: nate@… added

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

comment:12 Changed 6 years ago by Olek Nowodziński

Owner: set to Olek Nowodziński
Status: confirmedassigned

comment:13 Changed 6 years ago by Bill DePhillips

Cc: billd@… added

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

comment:14 in reply to:  13 Changed 6 years ago by 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 ;)

comment:15 Changed 6 years ago by Olek Nowodziński

This will be resolved in #10027.

comment:16 Changed 6 years ago by Olek Nowodziński

Status: assignedreview

comment:17 Changed 6 years ago by Frederico Caldeira Knabben

Status: reviewassigned

comment:18 Changed 6 years ago by Olek Nowodziński

Status: assignedreview

comment:19 Changed 6 years ago by Olek Nowodziński

Resolution: fixed
Status: reviewclosed

This ticket has been resolved along with #10027.

Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy