Absorb the matrix-react-sdk repository (#28192)

Co-authored-by: github-merge-queue <118344674+github-merge-queue@users.noreply.github.com>
Co-authored-by: github-merge-queue <github-merge-queue@users.noreply.github.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
Co-authored-by: Kim Brose <kim.brose@nordeck.net>
Co-authored-by: Florian Duros <florianduros@element.io>
Co-authored-by: R Midhun Suresh <hi@midhun.dev>
Co-authored-by: dbkr <986903+dbkr@users.noreply.github.com>
Co-authored-by: ElementRobot <releases@riot.im>
Co-authored-by: dbkr <dbkr@users.noreply.github.com>
Co-authored-by: David Baker <dbkr@users.noreply.github.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
Co-authored-by: David Langley <davidl@element.io>
Co-authored-by: Michael Weimann <michaelw@matrix.org>
Co-authored-by: Timshel <Timshel@users.noreply.github.com>
Co-authored-by: Sahil Silare <32628578+sahil9001@users.noreply.github.com>
Co-authored-by: Will Hunt <will@half-shot.uk>
Co-authored-by: Hubert Chathi <hubert@uhoreg.ca>
Co-authored-by: Andrew Ferrazzutti <andrewf@element.io>
Co-authored-by: Robin <robin@robin.town>
Co-authored-by: Tulir Asokan <tulir@maunium.net>

docs/features/README.md

@@ -0,0 +1,6 @@
+# Feature documention
+
+The idea of this folder is to document the features we support in different parts of the app.
+In case anyone needs to work on a given part, and isn't aware of all the features in the area,
+they will hopefully get an idea for all the supported functionality to know what to take into account
+when making changes.

docs/features/composer.md

@@ -0,0 +1,38 @@
+# Composer Features
+
+## Auto Complete
+
+-   Hitting tab tries to auto-complete the word before the caret as a room member
+    -   If no matching name is found, a visual bell is shown
+-   @ + a letter opens auto complete for members starting with the given letter
+    -   When inserting a user pill at the start in the composer, a colon and space is appended to the pill
+    -   When inserting a user pill anywhere else in composer, only a space is appended to the pill
+-   # + a letter opens auto complete for rooms starting with the given letter
+-   : open auto complete for emoji
+-   Pressing arrow-up/arrow-down while the autocomplete is open navigates between auto complete options
+-   Pressing tab while the autocomplete is open goes to the next autocomplete option,
+    wrapping around at the end after reverting to the typed text first.
+
+## Formatting
+
+-   When selecting text, a formatting bar appears above the selection.
+-   The formatting bar allows to format the selected test as:
+    bold, italic, strikethrough, a block quote, and a code block (inline if no linebreak is selected).
+-   Formatting is applied as markdown syntax.
+-   Hitting ctrl/cmd+B also marks the selected text as bold
+-   Hitting ctrl/cmd+I also marks the selected text as italic
+-   Hitting ctrl/cmd+> also marks the selected text as a blockquote
+
+## Misc
+
+-   When hitting the arrow-up button while having the caret at the start in the composer,
+    the last message sent by the syncing user is edited.
+-   Clicking a display name on an event in the timeline inserts a user pill into the composer
+-   Emoticons (like :-), >:-), :-/, ...) are replaced by emojis while typing if the relevant setting is enabled
+-   Typing in the composer sends typing notifications in the room
+-   Pressing ctrl/mod+z and ctrl/mod+y undoes/redoes modifications
+-   Pressing shift+enter inserts a line break
+-   Pressing enter sends the message.
+-   Choosing "Quote" in the context menu of an event inserts a quote of the event body in the composer.
+-   Choosing "Reply" in the context menu of an event shows a preview above the composer to reply to.
+-   Pressing alt+arrow up/arrow down navigates in previously sent messages, putting them in the composer.

docs/features/keyboardShortcuts.md

@@ -0,0 +1,59 @@
+# Keyboard shortcuts
+
+## Using the `KeyBindingManager`
+
+The `KeyBindingManager` (accessible using `getKeyBindingManager()`) is a class
+with several methods that allow you to get a `KeyBindingAction` based on a
+`KeyboardEvent | React.KeyboardEvent`.
+
+The event passed to the `KeyBindingManager` gets compared to the list of
+shortcuts that are retrieved from the `IKeyBindingsProvider`s. The
+`IKeyBindingsProvider` is in `KeyBindingDefaults`.
+
+### Examples
+
+Let's say we want to close a menu when the correct keys were pressed:
+
+```ts
+const onKeyDown = (ev: KeyboardEvent): void => {
+    let handled = true;
+    const action = getKeyBindingManager().getAccessibilityAction(ev);
+    switch (action) {
+        case KeyBindingAction.Escape:
+            closeMenu();
+            break;
+        default:
+            handled = false;
+            break;
+    }
+
+    if (handled) {
+        ev.preventDefault();
+        ev.stopPropagation();
+    }
+};
+```
+
+## Managing keyboard shortcuts
+
+There are a few things at play when it comes to keyboard shortcuts. The
+`KeyBindingManager` gets `IKeyBindingsProvider`s one of which is
+`defaultBindingsProvider` defined in `KeyBindingDefaults`. In
+`KeyBindingDefaults` a `getBindingsByCategory()` method is used to create
+`KeyBinding`s based on `KeyboardShortcutSetting`s defined in
+`KeyboardShortcuts`.
+
+### Adding keyboard shortcuts
+
+To add a keyboard shortcut there are two files we have to look at:
+`KeyboardShortcuts.ts` and `KeyBindingDefaults.ts`. In most cases we only need
+to edit `KeyboardShortcuts.ts`: add a `KeyBindingAction` and add the
+`KeyBindingAction` to the `KEYBOARD_SHORTCUTS` object.
+
+Though, to make matters worse, sometimes we want to add a shortcut that has
+multiple keybindings associated with. This keyboard shortcut won't be
+customizable as it would be rather difficult to manage both from the point of
+the settings and the UI. To do this, we have to add a `KeyBindingAction` and add
+the UI representation of that keyboard shortcut to the `getUIOnlyShortcuts()`
+method. Then, we also need to add the keybinding to the correct method in
+`KeyBindingDefaults`.