[wip] [mentions] feat: tag mentions

extensions/mentions/js/src/forum/addComposerAutocomplete.js

@@ -14,7 +14,9 @@ import Badge from 'flarum/common/components/Badge';
 import Group from 'flarum/common/models/Group';
 
 import AutocompleteDropdown from './fragments/AutocompleteDropdown';
-import getMentionText from './utils/getMentionText';
+import MentionTextGenerator from './utils/MentionTextGenerator';
+
+const tagsEnabled = !!app.initializers.has('flarum-tags');
 
 const throttledSearch = throttle(
   250, // 250ms timeout
@@ -63,6 +65,8 @@ export default function addComposerAutocomplete() {
     let typed;
     let matchTyped;
 
+    const mentionTextGenerator = new MentionTextGenerator();
+
     // We store users returned from an API here to preserve order in which they are returned
     // This prevents the user list jumping around while users are returned.
     // We also use a hashset for user IDs to provide O(1) lookup for the users already in the list.
@@ -76,6 +80,12 @@ export default function addComposerAutocomplete() {
       })
     );
 
+    let returnedTags;
+    if (tagsEnabled) {
+      // Store tags..
+      returnedTags = Array.from(app.store.all('tags'));
+    }
+
     const applySuggestion = (replacement) => {
       this.attrs.composer.editor.replaceBeforeCursor(absMentionStart - 1, replacement + ' ');
 
@@ -157,6 +167,29 @@ export default function addComposerAutocomplete() {
           );
         };
 
+        const makeTagSuggestion = function (tag, replacement, content, className = '') {
+          let tagName = tag.name().toLowerCase();
+
+          if (typed) {
+            tagName = highlight(tagName, typed);
+          }
+
+          return (
+            <button
+              className={'PostPreview ' + className}
+              onclick={() => applySuggestion(replacement)}
+              onmouseenter={function () {
+                dropdown.setIndex($(this).parent().index());
+              }}
+            >
+              <span className="PostPreview-content">
+                <Badge class={`Avatar Badge Badge--tag--${tag.id()} Badge-icon `} color={tag.color()} type="tag" icon={tag.icon()} />
+                <span className="username">{tagName}</span>
+              </span>
+            </button>
+          );
+        };
+
         const userMatches = function (user) {
           const names = [user.username(), user.displayName()];
 
@@ -169,6 +202,12 @@ export default function addComposerAutocomplete() {
           return names.some((name) => name.toLowerCase().substr(0, typed.length) === typed);
         };
 
+        const tagMatches = function (tag) {
+          const names = [tag.name()];
+
+          return names.some((name) => name.toLowerCase().substr(0, typed.length) === typed);
+        };
+
         const buildSuggestions = () => {
           const suggestions = [];
 
@@ -178,15 +217,24 @@ export default function addComposerAutocomplete() {
             returnedUsers.forEach((user) => {
               if (!userMatches(user)) return;
 
-              suggestions.push(makeSuggestion(user, getMentionText(user), '', 'MentionsDropdown-user'));
+              suggestions.push(makeSuggestion(user, mentionTextGenerator.forUser(user), '', 'MentionsDropdown-user'));
             });
 
             // ... or groups.
             if (app.session?.user?.canMentionGroups()) {
               returnedGroups.forEach((group) => {
                 if (!groupMatches(group)) return;
 
-                suggestions.push(makeGroupSuggestion(group, getMentionText(undefined, undefined, group), '', 'MentionsDropdown-group'));
+                suggestions.push(makeGroupSuggestion(group, mentionTextGenerator.forGroup(group), '', 'MentionsDropdown-group'));
+              });
+            }
+
+            // ... or tags.
+            if (tagsEnabled && app.session?.user?.canMentionTags?.()) {
+              returnedTags.forEach((tag) => {
+                if (!tagMatches(tag)) return;
+
+                suggestions.push(makeTagSuggestion(tag, mentionTextGenerator.forTag(tag), '', 'MentionsDropdown-tag'));
               });
             }
           }
@@ -220,7 +268,7 @@ export default function addComposerAutocomplete() {
                   suggestions.push(
                     makeSuggestion(
                       user,
-                      getMentionText(user, post.id()),
+                      mentionTextGenerator.forPostMention(user, post.id()),
                       [
                         app.translator.trans('flarum-mentions.forum.composer.reply_to_post_text', { number: post.number() }),
                         ' — ',
@@ -271,7 +319,7 @@ export default function addComposerAutocomplete() {
         dropdown.setIndex(0);
         dropdown.$().scrollTop(0);
 
-        // Don't send API calls searching for users until at least 2 characters have been typed.
+        // Don't send API calls searching for users or tags until at least 2 characters have been typed.
         // This focuses the mention results on users and posts in the discussion.
         if (typed.length > 1 && app.forum.attribute('canSearchUsers')) {
           throttledSearch(typed, searched, returnedUsers, returnedUserIds, dropdown, buildSuggestions);

extensions/mentions/js/src/forum/compat.js

@@ -6,6 +6,7 @@ import AutocompleteDropdown from './fragments/AutocompleteDropdown';
 import PostQuoteButton from './fragments/PostQuoteButton';
 import getCleanDisplayName from './utils/getCleanDisplayName';
 import getMentionText from './utils/getMentionText';
+import MentionTextGenerator from './utils/MentionTextGenerator';
 import * as reply from './utils/reply';
 import selectedText from './utils/selectedText';
 import * as textFormatter from './utils/textFormatter';
@@ -19,6 +20,7 @@ export default {
   'mentions/fragments/PostQuoteButton': PostQuoteButton,
   'mentions/utils/getCleanDisplayName': getCleanDisplayName,
   'mentions/utils/getMentionText': getMentionText,
+  'mentions/utils/MentionTextGenerator': MentionTextGenerator,
   'mentions/utils/reply': reply,
   'mentions/utils/selectedText': selectedText,
   'mentions/utils/textFormatter': textFormatter,

extensions/mentions/js/src/forum/utils/MentionTextGenerator.ts

@@ -0,0 +1,67 @@
+import getCleanDisplayName, { shouldUseOldFormat } from './getCleanDisplayName';
+import type User from 'flarum/common/models/User';
+import type Group from 'flarum/common/models/Group';
+
+/**
+ * Fetches the mention text for a specified model.
+ */
+export default class MentionTextGenerator {
+  /**
+   * Automatically determines which mention syntax to be used based on the option in the
+   * admin dashboard. Also performs display name clean-up automatically.
+   *
+   * @"Display name"#UserID or `@username`
+   *
+   * @example <caption>New display name syntax</caption>
+   * // '@"user"#1'
+   * forUser(User) // User is ID 1, display name is 'User'
+   *
+   * @example <caption>Using old syntax</caption>
+   * // '@username'
+   * forUser(user) // User's username is 'username'
+   *
+   * @param user
+   * @returns string
+   */
+  forUser(user: User): string {
+    if (shouldUseOldFormat()) {
+      const cleanText = getCleanDisplayName(user, false);
+      return `@${cleanText}`;
+    }
+    const cleanText = getCleanDisplayName(user);
+    return `@"${cleanText}"#${user.id()}`;
+  }
+
+  /**
+   * Generates the syntax for mentioning of a post. Also cleans up the display name.
+   *
+   * @example <caption>Post mention</caption>
+   * // '@"User"#p13'
+   * // @"Display name"#pPostID
+   * forPostMention(user, 13) // User display name is 'User', post ID is 13
+   *
+   * @param user
+   * @param postId
+   * @returns
+   */
+  forPostMention(user: User, postId: number): string {
+    const cleanText = getCleanDisplayName(user);
+    return `@"${cleanText}"#p${postId}`;
+  }
+
+  /**
+   * Generates the mention syntax for a group mention.
+   *
+   * @"Name Plural"#gGroupID
+   *
+   * @example <caption>Group mention</caption>
+   * // '@"Mods"#g4'
+   * forGroup(group) // Group display name is 'Mods', group ID is 4
+   *
+   * @param group
+   * @returns string
+   */
+  forGroup(group: Group): string {
+    return `@"${group.namePlural()}"#g${group.id()}`;
+  }
+}

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

@@ -1,44 +1,21 @@
-import getCleanDisplayName, { shouldUseOldFormat } from './getCleanDisplayName';
+import MentionTextGenerator from './MentionTextGenerator';
 
 /**
- * Fetches the mention text for a specified user (and optionally a post ID for replies, or group).
+ * Fetches the mention text for a specified user (and optionally a post ID for replies or group).
  *
  * 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'
- *
- * @example <caption>Group mention</caption>
- * // '@"Mods"#g4'
- * getMentionText(undefined, undefined, group) // Group display name is 'Mods', group ID is 4
+ * @deprecated Use `MentionTextGenerator` instead. Remove in 2.0.
  */
 export default function getMentionText(user, postId, group) {
+  const generator = new MentionTextGenerator();
   if (user !== undefined && postId === undefined) {
-    if (shouldUseOldFormat()) {
-      // Plain @username
-      const cleanText = getCleanDisplayName(user, false);
-      return `@${cleanText}`;
-    }
-    // @"Display name"#UserID
-    const cleanText = getCleanDisplayName(user);
-    return `@"${cleanText}"#${user.id()}`;
+    return generator.forUser(user);
   } else if (user !== undefined && postId !== undefined) {
-    // @"Display name"#pPostID
-    const cleanText = getCleanDisplayName(user);
-    return `@"${cleanText}"#p${postId}`;
+    return generator.forPostMention(user, postId);
   } else if (group !== undefined) {
-    // @"Name Plural"#gGroupID
-    return `@"${group.namePlural()}"#g${group.id()}`;
+    return generator.forGroup(group);
   } else {
     throw 'No parameters were passed';
   }

extensions/mentions/js/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  // Use Flarum's tsconfig as a starting point
+  "extends": "flarum-tsconfig",
+  // This will match all .ts, .tsx, .d.ts, .js, .jsx files in your `src` folder
+  // and also tells your Typescript server to read core's global typings for
+  // access to `dayjs` and `$` in the global namespace.
+  "include": [
+    "src/**/*",
+    "../../../framework/core/js/dist-typings/@types/**/*",
+    "@types/**/*"
+  ],
+  "compilerOptions": {
+    // This will output typings to `dist-typings`
+    "declarationDir": "./dist-typings",
+    "paths": {
+      "flarum/*": [
+        "../../../framework/core/js/dist-typings/*"
+      ],
+      // TODO: remove after export registry system implemented
+      // Without this, the old-style `@flarum/core` import is resolved to
+      // source code in flarum/core instead of the dist typings.
+      // This causes an inaccurate "duplicate export" error.
+      "@flarum/core/*": [
+        "../../../framework/core/js/dist-typings/*"
+      ],
+    }
+  }
+}

extensions/mentions/less/forum.less

@@ -1,4 +1,4 @@
-.PostMention, .UserMention, .GroupMention {
+.PostMention, .UserMention, .GroupMention, .TagMention {
   background: @control-bg;
   color: @control-color;
   border-radius: @border-radius;
@@ -14,7 +14,7 @@
     color: @link-color;
   }
 }
-.UserMention, .PostMention, .GroupMention {
+.UserMention, .PostMention, .GroupMention, .TagMention {
   &--deleted {
     opacity: 0.8;
     filter: grayscale(1);
@@ -97,7 +97,7 @@
   position: absolute;
   .Button--color(@tooltip-color, @tooltip-bg);
 }
-.GroupMention {
+.GroupMention, .TagMention {
   & when (@config-dark-mode = false) {
     &,
     &:hover,
@@ -117,22 +117,30 @@
     &,
     &:hover,
     &:active {
-      color: @text-on-light;
+      color: @text-on-dark;
     }
   }
 
   &--dark {
     &,
     &:hover,
     &:active {
-      color: @text-on-dark;
+      color: @text-on-light;
     }
   }
 
   .icon {
     margin-left: 5px;
   }
 }
+.TagMention {
+  padding-left: 8px;
+  padding-right: 8px;
+  .icon {
+    margin-left: 0;
+    margin-right: 5px;
+  }
+}
 .MentionsDropdown .Badge {
   box-shadow: none;
 }