Feature request: add more built-in rich text formats

This is a feature request question. When browse the draftail examples page, I could see many formats not included in wagtail 2.1 version (under “All built-in formats” section).

Code: Code
Underline: Underline
Strikethrough: Strikethrough
Mark: Mark
Quotation: Quotation
Small: Small
Sample: Sample
Insert: Insert
Delete: Delete
Keyboard: Keyboard
Superscript: Superscript
Subscript: Subscript
Blockquote

Is there a plan to integrate latest version for draftail into wagtail?

[gasman]

👍 for adding all the above to Wagtail but disabled by default. (We don’t want to encourage use of underline because that style should be reserved for links, and superscript/subscript are probably also ‘niche’ enough that it makes sense for them to be opt-in.)

[thibaudcolas]

Actually, looking at the code again I forgot that the “built-in Draftail formats” go beyond styles. They also come with pre-defined labels and descriptions in english, and some also have keyboard shortcuts.

Here are the ones that come with keyboard shortcuts:

https://github.com/springload/draftail/blob/1a582d2c1e9a803e31b99453500e3b5c6c9f0bf0/lib/api/constants.js#L237-L271

KEYBOARD_SHORTCUTS[BLOCK_TYPE.UNSTYLED] = '⌫';
KEYBOARD_SHORTCUTS[BLOCK_TYPE.HEADER_ONE] = '#';
KEYBOARD_SHORTCUTS[BLOCK_TYPE.HEADER_TWO] = '##';
KEYBOARD_SHORTCUTS[BLOCK_TYPE.HEADER_THREE] = '###';
KEYBOARD_SHORTCUTS[BLOCK_TYPE.HEADER_FOUR] = '####';
KEYBOARD_SHORTCUTS[BLOCK_TYPE.HEADER_FIVE] = '#####';
KEYBOARD_SHORTCUTS[BLOCK_TYPE.HEADER_SIX] = '######';
KEYBOARD_SHORTCUTS[BLOCK_TYPE.UNORDERED_LIST_ITEM] = '-';
KEYBOARD_SHORTCUTS[BLOCK_TYPE.ORDERED_LIST_ITEM] = '1.';
KEYBOARD_SHORTCUTS[BLOCK_TYPE.BLOCKQUOTE] = '>';
KEYBOARD_SHORTCUTS[BLOCK_TYPE.CODE] = '```';


KEYBOARD_SHORTCUTS[INLINE_STYLE.BOLD] = { other: 'Ctrl + B', macOS: '⌘ + B' };
KEYBOARD_SHORTCUTS[INLINE_STYLE.ITALIC] = { other: 'Ctrl + I', macOS: '⌘ + I' };
KEYBOARD_SHORTCUTS[INLINE_STYLE.UNDERLINE] = {
    other: 'Ctrl + U',
    macOS: '⌘ + U',
};
KEYBOARD_SHORTCUTS[INLINE_STYLE.STRIKETHROUGH] = {
    other: 'Ctrl + ⇧ + X',
    macOS: '⌘ + ⇧ + X',
};
KEYBOARD_SHORTCUTS[INLINE_STYLE.SUPERSCRIPT] = {
    other: 'Ctrl + .',
    macOS: '⌘ + .',
};
KEYBOARD_SHORTCUTS[INLINE_STYLE.SUBSCRIPT] = {
    other: 'Ctrl + ,',
    macOS: '⌘ + ,',
};


KEYBOARD_SHORTCUTS[ENTITY_TYPE.LINK] = { other: 'Ctrl + K', macOS: '⌘ + K' };


KEYBOARD_SHORTCUTS[BR_TYPE] = '⇧ + ↵';
KEYBOARD_SHORTCUTS[ENTITY_TYPE.HORIZONTAL_RULE] = '- - -';

This is not customisable in any way, you have to use the exact identifier (e.g. SUBSCRIPT string, uppercase, or code-block string, lowercase) to get this, so I think it’s a good argument to have those built-in – so people using these benefit from the keyboard shortcut, and there is less risk of defining a feature that does what these do without using the ““right”” identifier.

– and if anyone wonders why these get special treatment, it’s because they are available in traditional word processors (Word, Google Docs) or in Markdown and use those shortcuts there.

---

Here is the full list of what I think should be supported, with the feature name first then the Draft.js type, then the HTML tag.

Inline styles

• code, CODE, <code>
• superscript, SUPERSCRIPT, <sup>
• subscript, SUBSCRIPT, <sub>
• strikethrough, STRIKETHROUGH, <s>
• underline, UNDERLINE, <u>

Blocks

• blockquote, blockquote, <blockquote>
• code-block, code-block, <pre> or <pre><code>