Add example of a shortcut button for indentation / unindentation

[thibaudcolas]

Only available as a keyboard shortcut at the moment. Applies to blocks that have a notion of depth – list items only at the moment.

This could be built as an example / extension, using the controls API, instead of something that’s built-in. It would be nice to have this as a demo directly in the repo though.

Here is how it would work roughly:

• Add button(s) in the toolbar using the controls API.
• On click, retrieve the editor state with the getEditorState prop of the control
• Check where the selection is (editorState.getSelection())
• If it's in a block that's a list item, apply the right effect (indent / dedent) by incrementing/decrementing the block’s depth.

---

Initially reported at https://github.com/springload/wagtaildraftail/issues/49 by @tomdyson.

[thibaudcolas]

I think this needs to be done with the controls API / prop (https://www.draftail.org/docs/arbitrary-controls), using ToolbarButton to add a button to the toolbar.

Then, the fun bit of the task is to figure out how to dedent/indent content when the user clicks the button.

[mpkasp]

Draftail's docs mentions using the tab key to indent a paragraph "if enabled". This does not seem to work for me on my mac. I tried in the examples on Draftail's site, my wagtail site, on 2 different macs and on Safari and Chrome.

Are you referring to indenting a paragraph? e.g. what happens when you press "tab" in front of text in a word document, right?

[thibaudcolas]

If you’re referring to https://www.draftail.org/docs/keyboard-shortcuts, it says "Increase list indentation". This is only for list items, where the indentation in the editor denotes the list nesting in HTML.