New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature request: add more built-in rich text formats #4562

Open
favoyang opened this Issue May 24, 2018 · 6 comments

Comments

Projects
None yet
5 participants
@favoyang
Copy link

favoyang commented May 24, 2018

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?

@thibaudcolas thibaudcolas changed the title Update draftail formats? Add more built-in rich text formats May 24, 2018

@thibaudcolas

This comment has been minimized.

Copy link
Member

thibaudcolas commented May 24, 2018

Hey @favoyang, thanks for opening this. We initially only added the rich text formats Wagtail was using with its previous editor, but did discuss adding more built-in formats.

I think we would definitely welcome pull requests to add:

  • Code (<code></code>)
  • Blockquote (<blockquote></blockquote>)

For other formats, we haven't had a discussion about what should be built-in and what shouldn't. Perhaps these as well, as it seems obvious enough what they do:

  • Superscript (<sup></sup)
  • Subscript (<sub></sub>)
  • Strikethrough (<s></s>)

Coming back to your list, I should add that those things "from Draftail" are just the ones that have predefined styles https://github.com/springload/draftail/blob/df836a502cd4d833c106aa2df7f755254e06ee03/lib/api/constants.js#L53-L112 – it's nothing more than that, so shouldn't weigh in the balance that much when it comes to adding it to Wagtail or not.

Edit: I was wrong! See #4562 (comment).

I should add though that when I picked things to go on that list, I based it on HTML elements – all of those unambiguously map to an HTML tag. You can see the list of tags in the exporter: https://github.com/springload/draftjs_exporter/blob/220f2b93f2fd39329077058114616314fe495c81/draftjs_exporter/defaults.py#L36-L55.

Personally I think it makes sense to integrate all of these in Wagtail because of how unambiguous they are – even though many of those might not be used much, it's probably worth having them anyway so Wagtail users don't risk writing this boilerplate code the wrong way. It's not that much code anyway. Alternatively, those formats could be defined in a third-party extension.

@thibaudcolas thibaudcolas changed the title Add more built-in rich text formats Feature request: add more built-in rich text formats May 24, 2018

@thibaudcolas thibaudcolas changed the title Feature request: add more built-in rich text formats Add more built-in rich text formats May 24, 2018

@thibaudcolas thibaudcolas changed the title Add more built-in rich text formats Add more built-in rich text formats? May 24, 2018

@SalahAdDin

This comment has been minimized.

Copy link
Contributor

SalahAdDin commented May 24, 2018

@favoyang @thibaudcolas , i added six from that list using hooks, it's easy.

@thibaudcolas thibaudcolas changed the title Add more built-in rich text formats? Feature request: add more built-in rich text formats Jun 19, 2018

@thibaudcolas

This comment has been minimized.

Copy link
Member

thibaudcolas commented Jun 19, 2018

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>
@SalahAdDin

This comment has been minimized.

Copy link
Contributor

SalahAdDin commented Jun 19, 2018

@thibaudcolas That info is very interesting to put in the documentation.

@thibaudcolas

This comment has been minimized.

Copy link
Member

thibaudcolas commented Jun 19, 2018

@SalahAdDin if we can get those into Wagtail then it will be enough to document those "disabled by default but available" features somewhere around http://docs.wagtail.io/en/v2.1/advanced_topics/customisation/page_editing_interface.html#limiting-features-in-a-rich-text-field, and hopefully people looking for these will find them there 🙏

Then the keyboard shortcuts are available at the end of the editor's user guide https://github.com/springload/draftail/blob/master/docs/user-guide/README.md#keyboard-shortcuts. It's a bit buried but it's referenced in the Wagtail editor guide too.

@gasman

This comment has been minimized.

Copy link
Collaborator

gasman commented Jun 19, 2018

👍 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.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment