Why are we doing this?
As we begin to build out the editing interface on iOS we would like to create a way for users to easily (visually) insert Wikitext syntax into articles (eg. without having to have the syntax memorized)
User story
As an editor on the iOS app, I would like to be able to easily insert Wikitext syntax
Mocks
| Toolbar with keyboard scrolled away | Toolbar with keyboard | Toolbar with keyboard, second set of tools | Contextual highlight toolbar |
|---|---|---|---|
 |  |  |  |
| Zeplin: https://zpl.io/bz1KPEG | Zeplin: https://zpl.io/VQ9l6jm | Zeplin: https://zpl.io/2jPAg6W | Zeplin: https://zpl.io/beLl6Rz |
Design details
- When the user has dismissed the keyboard the toolbar still shows
- The toolbar has a blue toggle button which enables users to see a second set of actions that they can take
- When the user highlights text, a contextual version of the toolbar is shown, which places a focus on actions that can be taken on highlighted text
Toolbar elements
| Tool | Icon | Action taken when tapped | Toolbar view |
|---|---|---|---|
| Text formatting | Bold, italic, underlined A | Opens the text formatting sub menu | Main |
| Header formatting | 'H2' with two lines below it | Opens the header sub menu | Main |
| Add citation | Page with bookmark | Insert basic citation syntax | Main |
| Add link | Link icon | Insert basic link syntax | Main |
| View more tools (R) | Blue circle with right facing chevron | transitions from main toolbar to secondary toolbar view | Main |
| View more tools (L) | Blue circle with left facing chevron | transitions from secondary toolbar to main toolbar view | Secondary |
| Decrease indent | four lines and a left facing chevron | Decreases indentation level (colon based) | Secondary |
| Increase indent | four lines and a right facing chevron | Increases indentation level (colon based) | Secondary |
| Cursor up | ^ | moves cursor up a line | Secondary |
| Cursor down | V | moves cursor down a line | Secondary |
| Cursor left | < | moves cursor left | Secondary |
| Cursor right | > | moves cursor right | Secondary |
| Bold | Bold B | bolds highlighted text | Highlight toolbar |
| Italic | Italic I | italicizes highlighted text | Highlight toolbar |
| Remove formatting | 'No' circle | removes formatting (Wikisyntax) from highlighted text (and only in range) | Highlight toolbar |
| Add citation | Page with bookmark | Insert basic citation syntax | Highlight toolbar |
| Add link | Link icon | Insert basic link syntax | Highlight toolbar |
| More formatting | Blue circle with a plus | Opens up the text formatting sub menu | Highlight toolbar |
| List item | list icon | Makes whole line a part of a list | Main |
| Numbered list | numbered list icon | Makes whole line a part of a numbered list | Main |
Icon assets
To do:
- Update icons to iOS style
- Theme the toolbar
- iPad