[wip] [mentions] feat: tag mentions

extensions/mentions/composer.json

@@ -37,7 +37,10 @@
                 "name": "fas fa-at",
                 "backgroundColor": "#539EC1",
                 "color": "#fff"
-            }
+            },
+            "optional-dependencies": [
+                "flarum/tags"
+            ]
         },
         "flarum-cli": {
             "modules": {

extensions/mentions/extend.php

@@ -24,6 +24,8 @@
 use Flarum\Post\Event\Revised;
 use Flarum\Post\Filter\PostFilterer;
 use Flarum\Post\Post;
+use Flarum\Tags\Api\Serializer\TagSerializer;
+use Flarum\Tags\Tag;
 use Flarum\User\User;
 
 return [
@@ -39,6 +41,7 @@
         ->render(Formatter\FormatPostMentions::class)
         ->render(Formatter\FormatUserMentions::class)
         ->render(Formatter\FormatGroupMentions::class)
+        ->render(Formatter\FormatTagMentions::class)
         ->unparse(Formatter\UnparsePostMentions::class)
         ->unparse(Formatter\UnparseUserMentions::class)
         ->parse(Formatter\CheckPermissions::class),
@@ -47,7 +50,8 @@
         ->belongsToMany('mentionedBy', Post::class, 'post_mentions_post', 'mentions_post_id', 'post_id')
         ->belongsToMany('mentionsPosts', Post::class, 'post_mentions_post', 'post_id', 'mentions_post_id')
         ->belongsToMany('mentionsUsers', User::class, 'post_mentions_user', 'post_id', 'mentions_user_id')
-        ->belongsToMany('mentionsGroups', Group::class, 'post_mentions_group', 'post_id', 'mentions_group_id'),
+        ->belongsToMany('mentionsGroups', Group::class, 'post_mentions_group', 'post_id', 'mentions_group_id')
+        ->belongsToMany('mentionsTags', Tag::class, 'post_mentions_tag', 'post_id', 'mentions_tag_id'),
 
     new Extend\Locales(__DIR__.'/locale'),
 
@@ -63,20 +67,21 @@
         ->hasMany('mentionedBy', BasicPostSerializer::class)
         ->hasMany('mentionsPosts', BasicPostSerializer::class)
         ->hasMany('mentionsUsers', BasicUserSerializer::class)
-        ->hasMany('mentionsGroups', GroupSerializer::class),
+        ->hasMany('mentionsGroups', GroupSerializer::class)
+        ->hasMany('mentionsTags', TagSerializer::class),
 
     (new Extend\ApiController(Controller\ShowDiscussionController::class))
-        ->addInclude(['posts.mentionedBy', 'posts.mentionedBy.user', 'posts.mentionedBy.discussion'])
+        ->addInclude(['posts.mentionedBy', 'posts.mentionedBy.user', 'posts.mentionedBy.discussion', 'posts.mentionsTags'])
         ->load([
             'posts.mentionsUsers', 'posts.mentionsPosts', 'posts.mentionsPosts.user', 'posts.mentionedBy',
             'posts.mentionedBy.mentionsPosts', 'posts.mentionedBy.mentionsPosts.user', 'posts.mentionedBy.mentionsUsers',
-            'posts.mentionsGroups'
+            'posts.mentionsGroups', 'posts.mentionsTags',
         ]),
 
     (new Extend\ApiController(Controller\ListDiscussionsController::class))
         ->load([
-            'firstPost.mentionsUsers', 'firstPost.mentionsPosts', 'firstPost.mentionsPosts.user', 'firstPost.mentionsGroups',
-            'lastPost.mentionsUsers', 'lastPost.mentionsPosts', 'lastPost.mentionsPosts.user', 'lastPost.mentionsGroups'
+            'firstPost.mentionsUsers', 'firstPost.mentionsPosts', 'firstPost.mentionsPosts.user', 'firstPost.mentionsGroups', 'firstPost.mentionsTags',
+            'lastPost.mentionsUsers', 'lastPost.mentionsPosts', 'lastPost.mentionsPosts.user', 'lastPost.mentionsGroups', 'lastPost.mentionsTags',
         ]),
 
     (new Extend\ApiController(Controller\ShowPostController::class))
@@ -87,16 +92,16 @@
         ->load([
             'mentionsUsers', 'mentionsPosts', 'mentionsPosts.user', 'mentionedBy',
             'mentionedBy.mentionsPosts', 'mentionedBy.mentionsPosts.user', 'mentionedBy.mentionsUsers',
-            'mentionsGroups'
+            'mentionsGroups', 'mentionsTags',
         ]),
 
     (new Extend\ApiController(Controller\CreatePostController::class))
         ->addInclude(['mentionsPosts', 'mentionsPosts.mentionedBy'])
-        ->addOptionalInclude('mentionsGroups'),
+        ->addOptionalInclude(['mentionsGroups', 'mentionsTags']),
 
     (new Extend\ApiController(Controller\UpdatePostController::class))
         ->addInclude(['mentionsPosts', 'mentionsPosts.mentionedBy'])
-        ->addOptionalInclude('mentionsGroups'),
+        ->addOptionalInclude(['mentionsGroups', 'mentionsTags']),
 
     (new Extend\ApiController(Controller\AbstractSerializeController::class))
         ->prepareDataForSerialization(FilterVisiblePosts::class),
@@ -115,7 +120,5 @@
         ->addFilter(Filter\MentionedFilter::class),
 
     (new Extend\ApiSerializer(CurrentUserSerializer::class))
-        ->attribute('canMentionGroups', function (CurrentUserSerializer $serializer, User $user, array $attributes): bool {
-            return $user->can('mentionGroups');
-        })
+        ->attributes(AddCurrentUserAttributes::class),
 ];

extensions/mentions/js/src/admin/index.js

@@ -1,7 +1,7 @@
 import app from 'flarum/admin/app';
 
 app.initializers.add('flarum-mentions', function () {
-  app.extensionData
+  const extData = app.extensionData
     .for('flarum-mentions')
     .registerSetting({
       setting: 'flarum-mentions.allow_username_format',
@@ -17,4 +17,15 @@ app.initializers.add('flarum-mentions', function () {
       },
       'start'
     );
+
+  if (app.initializers.has('flarum-tags')) {
+    extData.registerPermission(
+      {
+        permission: 'mentionTags',
+        label: app.translator.trans('flarum-mentions.admin.permissions.mention_tags_label'),
+        icon: 'fas fa-at',
+      },
+      'start'
+    );
+  }
 });

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/index.js

@@ -20,6 +20,10 @@ import Model from 'flarum/common/Model';
 app.initializers.add('flarum-mentions', function () {
   User.prototype.canMentionGroups = Model.attribute('canMentionGroups');
 
+  if (app.initializers.has('flarum-tags')) {
+    User.prototype.canMentionTags = Model.attribute('canMentionTags');
+  }
+
   // For every mention of a post inside a post's content, set up a hover handler
   // that shows a preview of the mentioned post.
   addPostMentionPreviews();

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

@@ -0,0 +1,83 @@
+import getCleanDisplayName, { shouldUseOldFormat } from './getCleanDisplayName';
+import type User from 'flarum/common/models/User';
+import type Group from 'flarum/common/models/Group';
+import type Tag from 'flarum/tags/common/models/Tag';
+
+/**
+ * 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()}`;
+  }
+
+  /**
+   * Generates the mention syntax for a tag mention.
+   *
+   * @example <caption>Tag mention</caption>
+   * // '@"General"#t1'
+   * // @"Name"#tTagID
+   * forTag(tag) // Tag display name is 'General', tag ID is 1
+   *
+   * @param tag
+   * @returns
+   */
+  forTag(tag: Tag): string {
+    return `@"${tag.name()}"#t${tag.id()}`;
+  }
+}