Make trailing `:` into a setting (#6711)

* Make trailing `:` into a setting

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Make traling comma opt-out

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Write `insertTrailingComma` when reading for future opt-in setting

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Update src/editor/parts.ts

* Fix line length

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

Co-authored-by: Travis Ralston <travpc@gmail.com>

src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx

@@ -162,6 +162,7 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
         'MessageComposerInput.ctrlEnterToSend',
         'MessageComposerInput.surroundWith',
         'MessageComposerInput.showStickersButton',
+        'MessageComposerInput.insertTrailingComma',
     ];
 
     static TIME_SETTINGS = [

src/editor/parts.ts

@@ -30,6 +30,7 @@ import { unicodeToShortcode } from "../HtmlUtils";
 import * as Avatar from "../Avatar";
 import defaultDispatcher from "../dispatcher/dispatcher";
 import { Action } from "../dispatcher/actions";
+import SettingsStore from "../settings/SettingsStore";
 
 interface ISerializedPart {
     type: Type.Plain | Type.Newline | Type.Emoji | Type.Command | Type.PillCandidate;
@@ -650,7 +651,10 @@ export class PartCreator {
         userId: string,
     ): [UserPillPart, PlainPart] {
         const pill = this.userPill(displayName, userId);
-        const postfix = this.plain(insertTrailingCharacter ? ": " : " ");
+        const postfix = this.plain(
+            insertTrailingCharacter &&
+            (SettingsStore.getValue("MessageComposerInput.insertTrailingComma") ? ": " : " "),
+        );
         return [pill, postfix];
     }
 }

src/i18n/strings/en_EN.json

@@ -906,6 +906,7 @@
     "Use custom size": "Use custom size",
     "Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing",
     "Show stickers button": "Show stickers button",
+    "Insert a trailing colon after user mentions at the start of a message": "Insert a trailing colon after user mentions at the start of a message",
     "Use a more compact 'Modern' layout": "Use a more compact 'Modern' layout",
     "Show a placeholder for removed messages": "Show a placeholder for removed messages",
     "Show join/leave messages (invites/removes/bans unaffected)": "Show join/leave messages (invites/removes/bans unaffected)",

src/settings/Settings.tsx

@@ -429,6 +429,11 @@ export const SETTINGS: {[setting: string]: ISetting} = {
         default: true,
         controller: new UIFeatureController(UIFeature.Widgets, false),
     },
+    "MessageComposerInput.insertTrailingComma": {
+        supportedLevels: LEVELS_ACCOUNT_SETTINGS,
+        displayName: _td('Insert a trailing colon after user mentions at the start of a message'),
+        default: true,
+    },
     // TODO: Wire up appropriately to UI (FTUE notifications)
     "Notifications.alwaysShowBadgeCounts": {
         supportedLevels: LEVELS_ROOM_OR_ACCOUNT,

src/settings/handlers/AccountSettingsHandler.ts

@@ -121,6 +121,19 @@ export default class AccountSettingsHandler extends MatrixClientBackedSettingsHa
             return content[settingName];
         }
 
+        if (settingName === "MessageComposerInput.insertTrailingComma") {
+            const content = this.getSettings() || {};
+            const value = content[settingName];
+            if (value === null || value === undefined) {
+                // Write true as it is the default. This will give us the option
+                // of making this opt-in in the future, without affecting old
+                // users
+                this.setValue(settingName, roomId, true);
+                return true;
+            }
+            return value;
+        }
+
         const settings = this.getSettings() || {};
         let preferredValue = settings[settingName];