Core: CTRL+i is both indenting text and creating italic Markdown

[Yalfoosh]

Bug Report

Current Behavior
Currently, when you press ctrl + i, what happens is that aside from the text editor creating an italic template for Markdown, it also indents text (adds 4 spaces). My philosophy is that it should only create the italic template, and indents should probably moved to another shortcut, like TAB for example. This happens on vanilla Flarum as well.

Steps to Reproduce

1. Open up the text editor (ex. start writing a post)
2. Press ctrl + i
3. The editor will first create 4 spaces, and then open a __, i.e. the italic template for Markdown.

Expected Behavior
Only the italic template for Markdown appears, without being indented 4 spaces first.

Environment

• Flarum version: 0.1.0-beta12
• Webserver: nginx
• Hosting environment: both local and vps
• PHP version: 7.4.4
• Browser: Firefox 74, Chromium 80, possibly more

Output of "php flarum info", run this in terminal in your Flarum directory.

Flarum core 0.1.0-beta.12
PHP version: 7.4.4
Loaded extensions: Core, date, libxml, openssl, pcre, zlib, filter, hash, pcntl, Reflection, SPL, session, standard, sodium, mysqlnd, PDO, xml, calendar, ctype, curl, dom, mbstring, FFI, fileinfo, ftp, gd, gettext, iconv, json, exif, mysqli, pdo_mysql, Phar, posix, readline, shmop, SimpleXML, soap, sockets, sysvmsg, sysvsem, sysvshm, tokenizer, xmlreader, xmlrpc, xmlwriter, xsl, zip, Zend OPcache
+-----------------------+----------------+------------------------------------------+
| Flarum Extensions     |                |                                          |
+-----------------------+----------------+------------------------------------------+
| ID                    | Version        | Commit                                   |
+-----------------------+----------------+------------------------------------------+
| flarum-bbcode         | v0.1.0-beta.12 |                                          |
| flarum-emoji          | v0.1.0-beta.12 |                                          |
| flarum-lock           | v0.1.0-beta.12 |                                          |
| flarum-markdown       | v0.1.0-beta.12 |                                          |
| flarum-mentions       | v0.1.0-beta.12 |                                          |
| flarum-statistics     | v0.1.0-beta.12 |                                          |
| flarum-sticky         | v0.1.0-beta.12 |                                          |
| flarum-subscriptions  | v0.1.0-beta.12 |                                          |
| flarum-suspend        | v0.1.0-beta.12 |                                          |
| flarum-tags           | v0.1.0-beta.12 |                                          |
| flarum-lang-english   | v0.1.0-beta.12 |                                          |
| flarum-flags          | v0.1.0-beta.12 |                                          |
+-----------------------+----------------+------------------------------------------+
Base URL: http://localhost
Installation path: /var/www/html/flarum
Debug mode: ON

Possible Solution
It's likely that someone just forgot that ctrl+i is used for indent or italic, since both start with the same letter. It is, however, unclear to me why you'd use ctrl+i for indenting instead of TAB, which is common practice.

[davwheat]

Can be easily reproduced on giffgaff community. Didn't realise this was an upstream issue!

I also agree that indents should be changed to TAB, instead of CTRL + I

[matteocontrini]

However if you look at the code of the Markdown extension, which is very simple, there's nothing about indentation, or at least I couldn't find anything 🤔

[davwheat]

That's weird! It's definitely an issue, though, unless it's caused by
another extension.

On Tue, 28 Apr 2020, 19:24 Matteo Contrini, [e-mail]
wrote:

However if you look at the code of the Markdown extension, which is very
simple, there's nothing about indentation, or at least I couldn't find
anything 🤔

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/flarum/core/issues/2107#issuecomment-620777260, or
unsubscribe
https://github.com/notifications/unsubscribe-auth/ABYQJZVKCU67LVZGP6PT3YTRO4NOXANCNFSM4LXXOIIQ
.

[Yalfoosh]

@matteocontrini

It's in mdarea.js, line 116. Will try a fix tommorow. Unsure why flarum devs disabled tab, indenting and unindenting with tab is pretty essential.

[datitisev]

@Yalfoosh We disabled indenting with tab because we wanted to preserve the ability to tab to other page elements. If you notice, GitHub doesn't have indentation by tab either in their markdown editor.

[davwheat]

@datitisev I think it is worth enabling TAB indenting if text is selected. It's fine having it disabled when no text is selected, but could be very useful for highlighting and indenting a lot of text at once.

To be honest, I usually only using indents for code, and in my case it's already preformatted and I'll wrap it with 3 backticks.

````

console.log("Flarum is awesome!");

````

[Yalfoosh]

@Yalfoosh We disabled indenting with tab because we wanted to preserve the ability to tab to other page elements. If you notice, GitHub doesn't have indentation by tab either in their markdown editor.

The thing is, why would you ever tab to other page elements if you were writing in the Markdown editor? It's not like you have much to tab to (the editor is either a modal or at the bottom). If you're already focused on the text area, IMO it shouldn't be that easy to exit from it (ex. you probably don't want a mistype to result in having to use the mouse to reselect the text area).

I would argue that keeping the tab interactions is good while the text area is selected. It's useful for code and lists. The fact is that keeping ctrl+i as an indent shortcut is not viable unless we change the italic shortcut to something else - and that doesn't make a lot of sense.

[davwheat]

@Yalfoosh Think about accessibility! Tabbing out should always be possible.

CTRL + I should definitely be italics though, just like CTRL + K should be hyperlink (but it isn't)

[Yalfoosh]

@davwheat Well, we have a problem.

We know that we have to remove ctrl+i as the tab shortcut because it's interfering with the italic shortcut.

The most natural solution is to allow tabbing, since that is already implemented in mdarea, so we don't have to extend it.

So unless there is a new shortcut, we have to tackle the following issues

• if tab is used for indentation, what do we use to tab out
• do we want specific events to enable tabbing (ex. text pointer is in a code block or a list)
• do we want to provide user preferences so users can enable/disable tabbing or take it even further, provide general user preferences (extensible to include more settings)

I'm perhaps the most excited to answer the third question. Reason being that currently the editor feels very clunky when writing anything other than text. As time goes on we will not be able to cater to everyone needs. While it's true that users can just fork Markdown and adjust it to their needs, do we really need to make them do it?

[davwheat]

I like number 3. It is an interesting proposition, it's just a question of implementation. Would this be per user? Per site?

An interim solution could just be an indent/dedent button on the editor toolbar thing.

[Yalfoosh]

@davwheat I would probably go for a button in the editor that opens a modal where you can adjust stuff, so per user.

I'm not sure I like the button idea as a solution (because keyboard->mouse switches are slow and don't feel great), BUT I think indenting and outdenting buttons are something we need once we figure out how to deal with a large number of buttons, which is a separate issue. I had a fairly hard time making it accessible on mobile because we use Emoji picker and MathRen, we can't afford more buttons than we have right now.

My users have a fairly hard time adapting to Markdown and would mostly use buttons. I'm hosting a forum for what is currently primarily a somewhat tech savvy audience, a computing and electrical engineering uni. Yet people miss the WYSIWYG editor.

[harry-wg]

It seems to me there are two parts to this problem.

Part 1 is that control-I should not be causing an indent. I would argue that italics are much much more important in flarum than indents, so this part of the problem ought to be fixed at the earliest possible opportunity.

Part 2 is finding another way to indent. Others have summed up arguments for various methods and it may be that further discussion is needed. But that discussion should not need to delay fixing control-I ASAP so that it creates italics properly.

[askvortsov1]

I agree with (1), I've never seen ctrl+I used to tab before. A PR would definitely be appreciated :smile: (2) needs discussion though. Personally I'd be happy to see tab used for indent (it annoys me on the github editor too, and this is what most people are used to), but I'm open to alternatives.

[tankerkiller125]

@askvortsov1 The reason that tab can't be used as the tab character is because of accessibility reasons for users who navigate websites via keyboards. If we used the tab character they would never be able to escape the text field and would essentially be locked to the input.

[askvortsov1]

That's a good point, didn't think of that. https://wikispaces.psu.edu/display/training/The+Word+on+Indenting+Shortcuts CTRL+M perhaps? (also yay Penn State!)

[tankerkiller125]

Because it's a MS standard in word I'd be pretty happy with that honestly.... The other option I thought of is we can try to figure out how Google handles indents in Google docs (because I know for a fact you can use tabs there) but still provide accessibility.

[davwheat]

Google Docs works on the principal that if you need to access the menu bar, you press Alt, which is common in almost all software.