Minor refactors in frontend JS (#69)

* Add Prettier

* Update dependencies; add typescript setup

* Add tsconfig

* Rewrite some mentions frontend into TS

* Fix use of username instead of display name

* Change back to JS

* Remove commented code

* Update function name to match filename

* Update getMentionText.js

* Simplify condition

* Bump packages to stable versions; use prettier package

* Make functions use camel case

* Update js/package.json

Co-authored-by: Sami Mazouz <sychocouldy@gmail.com>

* Don't access data directly

* Update js/src/forum/addComposerAutocomplete.js

Co-authored-by: Alexander Skvortsov <38059171+askvortsov1@users.noreply.github.com>

* Update tsconfig.json

Co-authored-by: Sami Mazouz <sychocouldy@gmail.com>
Co-authored-by: Alexander Skvortsov <38059171+askvortsov1@users.noreply.github.com>

extensions/mentions/js/src/forum/utils/getMentionText.js

@@ -0,0 +1,36 @@
+import getCleanDisplayName, { ShouldUseOldFormat } from './getCleanDisplayName';
+
+/**
+ * Fetches the mention text for a specified user (and optionally a post ID for replies).
+ *
+ * Automatically determines which mention syntax to be used based on the option in the
+ * admin dashboard. Also performs display name clean-up automatically.
+ *
+ * @example <caption>New display name syntax</caption>
+ * // '@"User"#1'
+ * getMentionText(User) // User is ID 1, display name is 'User'
+ *
+ * @example <caption>Replying</caption>
+ * // '@"User"#p13'
+ * getMentionText(User, 13) // User display name is 'User', post ID is 13
+ *
+ * @example <caption>Using old syntax</caption>
+ * // '@username'
+ * getMentionText(User) // User's username is 'username'
+ */
+export default function getMentionText(user, postId) {
+  if (postId === undefined) {
+    if (ShouldUseOldFormat()) {
+      // Plain @username
+      const cleanText = getCleanDisplayName(user, false);
+      return `@${cleanText}`;
+    }
+    // @"Display name"#UserID
+    const cleanText = getCleanDisplayName(user);
+    return `@"${cleanText}"${user.id()}`;
+  } else {
+    // @"Display name"#pPostID
+    const cleanText = getCleanDisplayName(user);
+    return `@"${cleanText}"#p${postId}`;
+  }
+}