Ckeditor5: Indent on Tab Key Press

[brunoinds]

📝 Provide a description of the new feature

Apply indentation on Tab Key press

If you'd like to see this feature implemented, add a 👍 reaction to this post.

[jodator]

@brunoinds do you have a block indentation in mind? The Tab does work in list.

[zadam]

Having Tab (resp. Shift-Tab) trigger block indent would be great.

Is it maybe possible to just bind the keyboard shortcut in configuration or perhaps simple custom plugin?

[jodator]

A custom plugin could be like this:

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ ArticlePluginSet, IndentBlock, function( editor ) {
            editor.keystrokes.set( 'Tab', ( data, cancel ) => {
                const command = editor.commands.get( 'indentBlock' );

                if ( command.isEnabled ) {
                    command.execute();
                    cancel();
                }
            } );

            editor.keystrokes.set( 'Shift+Tab', ( data, cancel ) => {
                const command = editor.commands.get( 'outdentBlock' );

                if ( command.isEnabled ) {
                    command.execute();
                    cancel();
                }
            } );
        } ]
    } );

[zadam]

@jodator awesome, thanks! 

It would still be pretty good to have this built-in (as a configuration option probably) one day, but in the meantime this will suffice :-)

[mlewand]

This should be an opt-in feature, as focus change on tab is important for accessibility.

[jswiderski]

@Reinmar @jodator there is also a request from one of our clients to indent whole list when selection is inside the first list item.

While the idea is very interesting it might be challenging due to accessibity issues as @mlewand  mentioned. Perhaps if someone uses only keyboard there could be some shortcut to either put Tab key in navigation or indent mode?