Improve formatting features in the editor

[alexanderstephan]

Description:

This PR aims to improve, the usability of the editor formatting features.

• It fixes Add a keyboard shortcut for Insert link element-hq/element-web#19501 by adding a short cut for inserting links. I used CTRL + ALT + K to stay consistent with other tools that usually use CTRL + K (which unfortunately is already used by Element to search for rooms). I did not choose CTRL + SHIFT + K , as this is commonly used for developer tools by browsers. (This has been changed to CTRL + SHIFT + L for now, see comments below, the link formatting can now also be toggled).

• It adds CTRL + E as a shortcut for formatting code. I chose this shortcut, because for example GitHub also uses it and it seems to pretty common. I am not aware of any conflicts.

• Code formatting can now also be toggled, like it already did for inline formatting such as bold. It now works for inline and even multiline formatting. Right now, it would just put more an more backticks around the selection.

• For all formatting actions that have shortcuts: When no text is selected by the user and a format action is toggled via a shortcut, the word the caret is currently at gets automatically selected and formatted. Afterwards the caret will be adjusted to to match the previous position (relative to the current word). When the caret is at the position of the formatting string itself, it snaps to the word, the formatting belongs to (can be seen in the last gif). This behavior is similar to the GitHub editor.

• Fixes a bug where formatting white space would cause weird behavior as the trim of the selection did not work properly. Right now, it is not possible to format whitespace. This is also consistent how it works in Telegram for example.

Demo:

Formatting a link without previous selection with shortcut:

Toggling multi line code formatting:

How a typical work flow could look like:

Right punctuation is included (!), but is worth to discuss what's better here. For example when formatting a myObj.x only myObj would get selected when the caret e.g. is before y which might not to be expected.

Signed-off-by: Alexander Stephan alexander.stephan@tum.de

Fixes element-hq/element-web#19501

---

Here's what your changelog entry will look like:

✨ Features

• Improve formatting features in the editor (#7104). Fixes Add a keyboard shortcut for Insert link element-hq/element-web#19501. Contributed by @alexanderstephan.

Preview: https://pr7104--matrix-react-sdk.netlify.app
⚠️ Do you trust the author of this PR? Maybe this build will steal your keys or give you malware. Exercise caution. Use test accounts.

[t3chguy]

Annoyingly Cmd Shift L seems to conflict with Bitwarden :')

[t3chguy]

Looks sane to me otherwise

[alexanderstephan]

Sad, I also use Bitwarden. But is it really a problem? I can't see a use case where one would need auto-fill when having the messaging field in focus. Otherwise I don't notice any problems or conflicts as I also have the browser plugin installed.

[t3chguy]

No that's absolutely fine, just meant I didn't test the macos shortcut

[alexanderstephan]

@t3chguy Sorry, I don't want to annoy you again, but we are still waiting for the review of the designer, right? Some merge conflicts already arised and I wondered what could be done to get this merged soon, since it has been open for quite a while now.

[t3chguy]

@t3chguy Sorry, I don't want to annoy you again, but we are still waiting for the review of the designer, right?

Yes

[janogarcia]

Code formatting

Ctrl/⌘ + E is working great for inline and multiline code snippets! 👌

Formatting the previous word next to caret

That's a really nice addition too, and it's working smoothly. 👏

Link shortcut

It's a shame we can't use the more "standard" ⌘K shortcut, or ⌘⇧K as you originally suggested, but yeah ⌘⇧L (Mac) / Ctrl + Shift + L (Win) seems to be the second best option. 👍

Thanks for implementing all of these valuable improvements to the composer.

[janogarcia]

@alexanderstephan @t3chguy Just realized that the keyboard shortcut help dialog hasn't been updated to include the new ones. That would need to be done as a fast follow item.

[alexanderstephan]

@t3chguy @janogarcia Great catch, I did not know this overview existed. I will fix this as soon as possible. I will also do the remaining merge.

[alexanderstephan]

@janogarcia Just to be sure: I am not so familiar with the terminology, do you mean submitting a follow up PR or fixing it in this PR? As I have to merge anyways, I would like to do it in this PR.

[janogarcia]

@alexanderstephan You're very welcome to do it in this PR after merging!

What I meant was "I don't want to block this PR anymore for this reason. Let's (Michale or me) take care of updating the keyboard shortcut dialog after Alexander has had the chance to merge this PR". 😊

[t3chguy]

I'll add it to this PR

[t3chguy]

[janogarcia]

@t3chguy Awesome, thanks!

[alexanderstephan]

@t3chguy Thanks so much! 👍 I would like to add a german translation. Is this a good idea to do it here, or should it be done via Weblate later?

[t3chguy]

Must be done via Weblate later, otherwise it'll cause conflicts with Weblate's working copy of the i18n files

[alexanderstephan]

Ok, then I'll add it on Weblate, once it's possible. 👍

[Garfield96]

Thank you @alexanderstephan, this is a really useful addition.
I hope this feature will be included in the next release.

[andybalaam]

Really improves the code while adding useful new features, thank you!