Can't indent lists on iPad without hardware keyboard

[mark-bragg]

🐞 Is this a bug report or feature request? (choose one)

Bug report

💻 Version of CKEditor

CKEditor5 ClassicEditor

📋 Steps to reproduce

1. Basic Build download
2. Open an HTML doc within iPad app
3. Create a list in editor
4. Cannot indent list because there is no tab button on the software keyboard

✅ Expected result

Some ability to indent lists on iPad

❎ Actual result

Can't indent lists on iPad

[Reinmar]

cc @oleq @dkonopka

[oleq]

I see 3 approaches here. All start with:

Pre-requirements

We need 2 new buttons linked to

// Register commands for indenting.
editor.commands.add( 'indentList', new IndentCommand( editor, 'forward' ) );
editor.commands.add( 'outdentList', new IndentCommand( editor, 'backward' ) );

like we used to have in v4.

Approach 1: KISS

The developers could configure the buttons to appear in the toolbar (config.toolbar), wherever
and whenever they want.

Approach 2: Dropdown

We implement a list dropdown. A split button-based dropdown which, just like the highlight:

• remembers the last type of created list in the "action" button,
• allows removing the list when the "action" button has been clicked,
• provides a drop-down panel with a toolbar [ bulleted, numbered, |, outdent, indent ]

Approach 3: Floating

The tricky approach. Whenever the selection lands in a list item, a floating toolbar is displayed (like when the image widget is selected), with a toolbar [ outdent, indent ].

Pros:

• Easy to access on a touch device.

Cons:

• It could be quite annoying if the user worked with huge lists, always "polluting" the workspace
• It will collide with other floating stuff, like balloon editor's toolbar, link balloon, etc., just like in Race condition between the link UI and the contextual toolbar #852.

[Reinmar]

I have the same feeling about approach 3. It might be too annoying.

Approach 2. might be ok, but I'm not sure if we should merge two list types into one dropdown or keep them separate. Merging would mean that indent/outdent buttons wouldn't duplicate, but I'm afraid of the confusion which one button might bring. Plus, there would be a bit of collision once we'll implement a text indent plugin (although, it would still all work just fine).

Finally, the approach 1. is what most editors do, but if we'd went this way, we'd need to have indent/outdent buttons in all builds. And that's certainly a thing that we'd like to avoid.

So, a dropdown seems best.

[oleq]

On the second thought, the drop-down could have some issues. For example, in the future we probably expect different list types to be available like in GDocs

so the drop-down will be "reserved" for list types. We could put both numbered and bulleted lists there, that's some option, but where to put the indent/outdent buttons? Underneath the thumbnails?

Maybe instead of aggregating everything there, let's create a dropdown for indentation only? So the editor toolbar would be [ ... bulleted, numbered, indentDropdown... ] and the indentDropdown would be a split button with a panel containing 2 indent buttons (toolbar like in highlight)?

[oleq]

OTTH, keeping things in the dropdowns isn't the best UX for touch devices IMO. But with that observation, we're back to ckeditor/ckeditor5-design#149, which is a very general problem.

[vladikoff]

Adding something like

  // Support Tab indent
  editor.keystrokes.set('Tab', (data, cancel) => {
    // insert tab here
    const pos = editor.model.document.selection.getFirstPosition();
    editor.model.change( writer => writer.insertText( '\t', pos ) );
    cancel();
  });

doesn't work so well, it seems to insert a single "space", only mid-string, not at position0. Later on SHIFT+TAB doesn't work to unindent (and if I add support then I assume list unindent will break).

Using

writer.insertText( '    ', pos ) ); // 4 spaces

works better but it's not a tab :P

Ref: mozilla/notes#736

[Reinmar]

Hi @vladikoff. Representation of tabs is not related to this ticket. This ticket is about UI which would allow indenting lists on devices with on-screen keyboards. Rendering and accepting tabs is ckeditor5-engine's limitation now – intentional to simplify some DOM<->view conversion, but not permanent. Could you report a separate ticket in https://github.com/ckeditor/ckeditor5-engine for it?

[rreynier]

Are there any updates on the status of this request?

[Reinmar]

We implemented indent/outdent buttons (see http://github.com/ckeditor/ckeditor5-indent). Starting from the next week (when we release them) people will be able to add those buttons to their toolbars.

We're also considering adding them to all the builds by default, but there are some obstacles: #1844

[Reinmar]

We added indent/outdent buttons to all builds so I consider this issue closed.

[vladikoff]

Thank you!!!