feat(mentions,tags): tag mentions (#3769)

* feat: add tag search Signed-off-by: Sami Mazouz <sychocouldy@gmail.com> * feat(mentions): tag mentions backend Signed-off-by: Sami Mazouz <sychocouldy@gmail.com> * feat: tag mention design Signed-off-by: Sami Mazouz <sychocouldy@gmail.com> * refactor: revamp mentions autocomplete Signed-off-by: Sami Mazouz <sychocouldy@gmail.com> * fix: unauthorized mention of hidden groups Signed-off-by: Sami Mazouz <sychocouldy@gmail.com> * feat(mentions,tags): use hash format for tag mentions Signed-off-by: Sami Mazouz <sychocouldy@gmail.com> * refactor: frontend mention format API with mentionable models Signed-off-by: Sami Mazouz <sychocouldy@gmail.com> * feat: implement tag search on the frontend Signed-off-by: Sami Mazouz <sychocouldy@gmail.com> * fix: tag color contrast Signed-off-by: Sami Mazouz <sychocouldy@gmail.com> * fix: tag suggestions styling Signed-off-by: Sami Mazouz <sychocouldy@gmail.com> * test: works with disabled tags extension Signed-off-by: Sami Mazouz <sychocouldy@gmail.com> * chore: move `MentionFormats` to `formats` Signed-off-by: Sami Mazouz <sychocouldy@gmail.com> * fix: mentions preview bad styling Signed-off-by: Sami Mazouz <sychocouldy@gmail.com> * docs: further migration location clarification Signed-off-by: Sami Mazouz <sychocouldy@gmail.com> * Apply fixes from StyleCI * fix: bad test namespace Signed-off-by: Sami Mazouz <sychocouldy@gmail.com> * fix: phpstan Signed-off-by: Sami Mazouz <sychocouldy@gmail.com> * fix: conditionally add tag related extenders Signed-off-by: Sami Mazouz <sychocouldy@gmail.com> * Apply fixes from StyleCI * feat(phpstan): evaluate conditional extenders Signed-off-by: Sami Mazouz <sychocouldy@gmail.com> * feat: use mithril routing for tag mentions Signed-off-by: Sami Mazouz <sychocouldy@gmail.com> --------- Signed-off-by: Sami Mazouz <sychocouldy@gmail.com> Co-authored-by: StyleCI Bot <bot@styleci.io>
2025-08-07 17:07:19 +02:00 · 2023-04-19 12:58:11 +01:00
parent b868c3d763
commit 5e281136f6
46 changed files with 1788 additions and 366 deletions
--- a/extensions/mentions/js/src/@types/shims.d.ts
+++ b/extensions/mentions/js/src/@types/shims.d.ts
@@ -1,5 +1,18 @@
+import MentionFormats from '../forum/mentionables/formats/MentionFormats';
 import type BasePost from 'flarum/common/models/Post';

+declare module 'flarum/forum/ForumApplication' {
+  export default interface ForumApplication {
+    mentionFormats: MentionFormats;
+  }
+}
+
+declare module 'flarum/common/models/User' {
+  export default interface User {
+    canMentionGroups(): boolean;
+  }
+}
+
 declare module 'flarum/common/models/Post' {
  export default interface Post {
    mentionedBy(): BasePost[] | undefined | null;
--- a/extensions/mentions/js/src/forum/addComposerAutocomplete.js
+++ b/extensions/mentions/js/src/forum/addComposerAutocomplete.js
@@ -2,42 +2,15 @@ import app from 'flarum/forum/app';
 import { extend } from 'flarum/common/extend';
 import TextEditor from 'flarum/common/components/TextEditor';
 import TextEditorButton from 'flarum/common/components/TextEditorButton';
-import ReplyComposer from 'flarum/forum/components/ReplyComposer';
-import EditPostComposer from 'flarum/forum/components/EditPostComposer';
-import avatar from 'flarum/common/helpers/avatar';
-import usernameHelper from 'flarum/common/helpers/username';
-import highlight from 'flarum/common/helpers/highlight';
 import KeyboardNavigatable from 'flarum/common/utils/KeyboardNavigatable';
-import { truncate } from 'flarum/common/utils/string';
-import { throttle } from 'flarum/common/utils/throttleDebounce';
-import Badge from 'flarum/common/components/Badge';
-import Group from 'flarum/common/models/Group';

 import AutocompleteDropdown from './fragments/AutocompleteDropdown';
-import getMentionText from './utils/getMentionText';
-
-const throttledSearch = throttle(
-  250, // 250ms timeout
-  function (typed, searched, returnedUsers, returnedUserIds, dropdown, buildSuggestions) {
-    const typedLower = typed.toLowerCase();
-    if (!searched.includes(typedLower)) {
-      app.store.find('users', { filter: { q: typed }, page: { limit: 5 } }).then((results) => {
-        results.forEach((u) => {
-          if (!returnedUserIds.has(u.id())) {
-            returnedUserIds.add(u.id());
-            returnedUsers.push(u);
-          }
-        });
-
-        buildSuggestions();
-      });
-
-      searched.push(typedLower);
-    }
-  }
-);
+import MentionFormats from './mentionables/formats/MentionFormats';
+import MentionableModels from './mentionables/MentionableModels';

 export default function addComposerAutocomplete() {
+  app.mentionFormats = new MentionFormats();
+
  const $container = $('<div class="ComposerBody-mentionsDropdownContainer"></div>');
  const dropdown = new AutocompleteDropdown();

@@ -57,47 +30,42 @@ export default function addComposerAutocomplete() {
  });

  extend(TextEditor.prototype, 'buildEditorParams', function (params) {
-    const searched = [];
    let relMentionStart;
    let absMentionStart;
-    let typed;
    let matchTyped;

-    // 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.
-    const returnedUsers = Array.from(app.store.all('users'));
-    const returnedUserIds = new Set(returnedUsers.map((u) => u.id()));
+    let mentionables = new MentionableModels({
+      onmouseenter: function () {
+        dropdown.setIndex($(this).parent().index());
+      },
+      onclick: (replacement) => {
+        this.attrs.composer.editor.replaceBeforeCursor(absMentionStart - 1, replacement + ' ');

-    // Store groups, but exclude the two virtual groups - 'Guest' and 'Member'.
-    const returnedGroups = Array.from(
-      app.store.all('groups').filter((group) => {
-        return group.id() != Group.GUEST_ID && group.id() != Group.MEMBER_ID;
-      })
-    );
+        dropdown.hide();
+      },
+    });

-    const applySuggestion = (replacement) => {
-      this.attrs.composer.editor.replaceBeforeCursor(absMentionStart - 1, replacement + ' ');
-
-      dropdown.hide();
-    };
-
-    params.inputListeners.push(() => {
+    const suggestionsInputListener = () => {
      const selection = this.attrs.composer.editor.getSelectionRange();

      const cursor = selection[0];

      if (selection[1] - cursor > 0) return;

-      // Search backwards from the cursor for an '@' symbol. If we find one,
-      // we will want to show the autocomplete dropdown!
+      // Search backwards from the cursor for a mention triggering symbol. If we find one,
+      // we will want to show the correct autocomplete dropdown!
+      // Check classes implementing the IMentionableModel interface to see triggering symbols.
      const lastChunk = this.attrs.composer.editor.getLastNChars(30);
      absMentionStart = 0;
+      let activeFormat = null;
      for (let i = lastChunk.length - 1; i >= 0; i--) {
        const character = lastChunk.substr(i, 1);
-        if (character === '@' && (i == 0 || /\s/.test(lastChunk.substr(i - 1, 1)))) {
+        activeFormat = app.mentionFormats.get(character);
+
+        if (activeFormat && (i === 0 || /\s/.test(lastChunk.substr(i - 1, 1)))) {
          relMentionStart = i + 1;
          absMentionStart = cursor - lastChunk.length + i + 1;
+          mentionables.init(activeFormat.makeMentionables());
          break;
        }
      }
@@ -106,132 +74,14 @@ export default function addComposerAutocomplete() {
      dropdown.active = false;

      if (absMentionStart) {
-        typed = lastChunk.substring(relMentionStart).toLowerCase();
-        matchTyped = typed.match(/^["|“]((?:(?!"#).)+)$/);
-        typed = (matchTyped && matchTyped[1]) || typed;
-
-        const makeSuggestion = function (user, replacement, content, className = '') {
-          const username = usernameHelper(user);
-
-          if (typed) {
-            username.children = [highlight(username.text, typed)];
-            delete username.text;
-          }
-
-          return (
-            <button
-              className={'PostPreview ' + className}
-              onclick={() => applySuggestion(replacement)}
-              onmouseenter={function () {
-                dropdown.setIndex($(this).parent().index());
-              }}
-            >
-              <span className="PostPreview-content">
-                {avatar(user)}
-                {username} {content}
-              </span>
-            </button>
-          );
-        };
-
-        const makeGroupSuggestion = function (group, replacement, content, className = '') {
-          let groupName = group.namePlural().toLowerCase();
-
-          if (typed) {
-            groupName = highlight(groupName, 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--group--${group.id()} Badge-icon `} color={group.color()} type="group" icon={group.icon()} />
-                <span className="username">{groupName}</span>
-              </span>
-            </button>
-          );
-        };
-
-        const userMatches = function (user) {
-          const names = [user.username(), user.displayName()];
-
-          return names.some((name) => name.toLowerCase().substr(0, typed.length) === typed);
-        };
-
-        const groupMatches = function (group) {
-          const names = [group.nameSingular(), group.namePlural()];
-
-          return names.some((name) => name.toLowerCase().substr(0, typed.length) === typed);
-        };
+        const typed = lastChunk.substring(relMentionStart).toLowerCase();
+        matchTyped = activeFormat.queryFromTyped(typed);
+        mentionables.typed = matchTyped || typed;

        const buildSuggestions = () => {
-          const suggestions = [];
-
-          // If the user has started to type a username, then suggest users
-          // matching that username.
-          if (typed) {
-            returnedUsers.forEach((user) => {
-              if (!userMatches(user)) return;
-
-              suggestions.push(makeSuggestion(user, getMentionText(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'));
-              });
-            }
-          }
-
-          // If the user is replying to a discussion, or if they are editing a
-          // post, then we can suggest other posts in the discussion to mention.
-          // We will add the 5 most recent comments in the discussion which
-          // match any username characters that have been typed.
-          if (this.attrs.composer.bodyMatches(ReplyComposer) || this.attrs.composer.bodyMatches(EditPostComposer)) {
-            const composerAttrs = this.attrs.composer.body.attrs;
-            const composerPost = composerAttrs.post;
-            const discussion = (composerPost && composerPost.discussion()) || composerAttrs.discussion;
-
-            if (discussion) {
-              discussion
-                .posts()
-                // Filter to only comment posts, and replies before this message
-                .filter((post) => post && post.contentType() === 'comment' && (!composerPost || post.number() < composerPost.number()))
-                // Sort by new to old
-                .sort((a, b) => b.createdAt() - a.createdAt())
-                // Filter to where the user matches what is being typed
-                .filter((post) => {
-                  const user = post.user();
-                  return user && userMatches(user);
-                })
-                // Get the first 5
-                .splice(0, 5)
-                // Make the suggestions
-                .forEach((post) => {
-                  const user = post.user();
-                  suggestions.push(
-                    makeSuggestion(
-                      user,
-                      getMentionText(user, post.id()),
-                      [
-                        app.translator.trans('flarum-mentions.forum.composer.reply_to_post_text', { number: post.number() }),
-                        ' — ',
-                        truncate(post.contentPlain(), 200),
-                      ],
-                      'MentionsDropdown-post'
-                    )
-                  );
-                });
-            }
-          }
+          // If the user has started to type a mention,
+          // then suggest models matching.
+          const suggestions = mentionables.buildSuggestions();

          if (suggestions.length) {
            dropdown.items = suggestions;
@@ -271,13 +121,11 @@ 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.
-        // 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);
-        }
+        mentionables.search()?.then(buildSuggestions);
      }
-    });
+    };
+
+    params.inputListeners.push(suggestionsInputListener);
  });

  extend(TextEditor.prototype, 'toolbarItems', function (items) {
--- a/extensions/mentions/js/src/forum/addPostMentionPreviews.js
+++ b/extensions/mentions/js/src/forum/addPostMentionPreviews.js
@@ -14,10 +14,14 @@ export default function addPostMentionPreviews() {
    const parentPost = this.attrs.post;
    const $parentPost = this.$();

-    this.$().on('click', '.UserMention:not(.UserMention--deleted), .PostMention:not(.PostMention--deleted)', function (e) {
-      m.route.set(this.getAttribute('href'));
-      e.preventDefault();
-    });
+    this.$().on(
+      'click',
+      '.UserMention:not(.UserMention--deleted), .PostMention:not(.PostMention--deleted), .TagMention:not(.TagMention--deleted)',
+      function (e) {
+        m.route.set(this.getAttribute('href'));
+        e.preventDefault();
+      }
+    );

    this.$('.PostMention:not(.PostMention--deleted)').each(function () {
      const $this = $(this);
--- a/extensions/mentions/js/src/forum/compat.js
+++ b/extensions/mentions/js/src/forum/compat.js
@@ -9,6 +9,9 @@ import getMentionText from './utils/getMentionText';
 import * as reply from './utils/reply';
 import selectedText from './utils/selectedText';
 import * as textFormatter from './utils/textFormatter';
+import MentionableModel from './mentionables/MentionableModel';
+import MentionFormat from './mentionables/formats/MentionFormat';
+import Mentionables from './extenders/Mentionables';

 export default {
  'mentions/components/MentionsUserPage': MentionsUserPage,
@@ -22,4 +25,7 @@ export default {
  'mentions/utils/reply': reply,
  'mentions/utils/selectedText': selectedText,
  'mentions/utils/textFormatter': textFormatter,
+  'mentions/mentionables/MentionableModel': MentionableModel,
+  'mentions/mentionables/formats/MentionFormat': MentionFormat,
+  'mentions/extenders/Mentionables': Mentionables,
 };
--- a/extensions/mentions/js/src/forum/components/MentionsDropdownItem.tsx
+++ b/extensions/mentions/js/src/forum/components/MentionsDropdownItem.tsx
@@ -0,0 +1,25 @@
+import Component from 'flarum/common/Component';
+import type { ComponentAttrs } from 'flarum/common/Component';
+import classList from 'flarum/common/utils/classList';
+import type MentionableModel from '../mentionables/MentionableModel';
+import type Mithril from 'mithril';
+
+export interface IMentionsDropdownItemAttrs extends ComponentAttrs {
+  mentionable: MentionableModel;
+  onclick: () => void;
+  onmouseenter: () => void;
+}
+
+export default class MentionsDropdownItem<CustomAttrs extends IMentionsDropdownItemAttrs> extends Component<CustomAttrs> {
+  view(vnode: Mithril.Vnode<CustomAttrs>): Mithril.Children {
+    const { mentionable, ...attrs } = this.attrs;
+
+    const className = classList('MentionsDropdownItem', 'PostPreview', `MentionsDropdown-${mentionable.type()}`);
+
+    return (
+      <button className={className} {...attrs}>
+        <span className="PostPreview-content">{vnode.children}</span>
+      </button>
+    );
+  }
+}
--- a/extensions/mentions/js/src/forum/extenders/Mentionables.ts
+++ b/extensions/mentions/js/src/forum/extenders/Mentionables.ts
@@ -0,0 +1,54 @@
+import type ForumApplication from 'flarum/forum/ForumApplication';
+import type IExtender from 'flarum/common/extenders/IExtender';
+import type MentionableModel from '../mentionables/MentionableModel';
+import type MentionFormat from '../mentionables/formats/MentionFormat';
+
+export default class Mentionables implements IExtender<ForumApplication> {
+  protected formats: (new () => MentionFormat)[] = [];
+  protected mentionables: Record<string, (new () => MentionableModel)[]> = {};
+
+  /**
+   * Register a new mention format.
+   * Must extend MentionFormat and have a unique unused trigger symbol.
+   */
+  format(format: new () => MentionFormat): this {
+    this.formats.push(format);
+
+    return this;
+  }
+
+  /**
+   * Register a new mentionable model to a mention format.
+   * Only works if the format has already been registered,
+   *  and the format allows using multiple mentionables.
+   *
+   * @param symbol The trigger symbol of the format to extend (ex: @).
+   * @param mentionable The mentionable instance to register.
+   *                    Must extend MentionableModel.
+   */
+  mentionable(symbol: string, mentionable: new () => MentionableModel): this {
+    if (!this.mentionables[symbol]) {
+      this.mentionables[symbol] = [];
+    }
+
+    this.mentionables[symbol].push(mentionable);
+
+    return this;
+  }
+
+  extend(app: ForumApplication): void {
+    for (const format of this.formats) {
+      app.mentionFormats.extend(format);
+    }
+
+    for (const symbol in this.mentionables) {
+      const format = app.mentionFormats.get(symbol);
+
+      if (!format) continue;
+
+      for (const mentionable of this.mentionables[symbol]) {
+        format.extend(mentionable);
+      }
+    }
+  }
+}
--- a/extensions/mentions/js/src/forum/index.js
+++ b/extensions/mentions/js/src/forum/index.js
@@ -87,8 +87,8 @@ app.initializers.add('flarum-mentions', function () {

  // Apply color contrast fix on group mentions.
  extend(Post.prototype, 'oncreate', function () {
-    this.$('.GroupMention--colored').each(function () {
-      this.classList.add(textContrastClass(getComputedStyle(this).getPropertyValue('--group-color')));
+    this.$('.GroupMention--colored, .TagMention--colored').each(function () {
+      this.classList.add(textContrastClass(getComputedStyle(this).getPropertyValue('--color')));
    });
  });
 });
--- a/extensions/mentions/js/src/forum/mentionables/GroupMention.tsx
+++ b/extensions/mentions/js/src/forum/mentionables/GroupMention.tsx
@@ -0,0 +1,72 @@
+import app from 'flarum/forum/app';
+import Group from 'flarum/common/models/Group';
+import MentionableModel from './MentionableModel';
+import type Mithril from 'mithril';
+import Badge from 'flarum/common/components/Badge';
+import highlight from 'flarum/common/helpers/highlight';
+import type AtMentionFormat from './formats/AtMentionFormat';
+
+export default class GroupMention extends MentionableModel<Group, AtMentionFormat> {
+  type(): string {
+    return 'group';
+  }
+
+  initialResults(): Group[] {
+    return Array.from(
+      app.store.all<Group>('groups').filter((g: Group) => {
+        return g.id() !== Group.GUEST_ID && g.id() !== Group.MEMBER_ID;
+      })
+    );
+  }
+
+  /**
+   * 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
+   */
+  public replacement(group: Group): string {
+    return this.format.format(group.namePlural(), 'g', group.id());
+  }
+
+  suggestion(model: Group, typed: string): Mithril.Children {
+    let groupName: Mithril.Children = model.namePlural();
+
+    if (typed) {
+      groupName = highlight(groupName, typed);
+    }
+
+    return (
+      <>
+        <Badge className={`Avatar Badge Badge--group--${model.id()} Badge-icon`} color={model.color()} type="group" icon={model.icon()} />
+        <span className="username">{groupName}</span>
+      </>
+    );
+  }
+
+  matches(model: Group, typed: string): boolean {
+    if (!typed) return false;
+
+    const names = [model.namePlural().toLowerCase(), model.nameSingular().toLowerCase()];
+
+    return names.some((name) => name.toLowerCase().substr(0, typed.length) === typed);
+  }
+
+  maxStoreMatchedResults(): null {
+    return null;
+  }
+
+  /**
+   * All groups are already loaded, so we don't need to search for them.
+   */
+  search(typed: string): Promise<Group[]> {
+    return Promise.resolve([]);
+  }
+
+  enabled(): boolean {
+    return app.session?.user?.canMentionGroups() ?? false;
+  }
+}
--- a/extensions/mentions/js/src/forum/mentionables/MentionableModel.ts
+++ b/extensions/mentions/js/src/forum/mentionables/MentionableModel.ts
@@ -0,0 +1,20 @@
+import type Mithril from 'mithril';
+import type Model from 'flarum/common/Model';
+import type MentionFormat from './formats/MentionFormat';
+
+export default abstract class MentionableModel<M extends Model = Model, Format extends MentionFormat = MentionFormat> {
+  public format: Format;
+
+  public constructor(format: Format) {
+    this.format = format;
+  }
+
+  abstract type(): string;
+  abstract initialResults(): M[];
+  abstract search(typed: string): Promise<M[]>;
+  abstract replacement(model: M): string;
+  abstract suggestion(model: M, typed: string): Mithril.Children;
+  abstract matches(model: M, typed: string): boolean;
+  abstract maxStoreMatchedResults(): number | null;
+  abstract enabled(): boolean;
+}
--- a/extensions/mentions/js/src/forum/mentionables/MentionableModels.tsx
+++ b/extensions/mentions/js/src/forum/mentionables/MentionableModels.tsx
@@ -0,0 +1,93 @@
+import MentionFormats from './MentionFormats';
+import type MentionableModel from './MentionableModel';
+import type Model from 'flarum/common/Model';
+import type Mithril from 'mithril';
+import MentionsDropdownItem from '../components/MentionsDropdownItem';
+import { throttle } from 'flarum/common/utils/throttleDebounce';
+
+export default class MentionableModels {
+  protected mentionables?: MentionableModel[];
+  /**
+   * We store models returned from an API here to preserve order in which they are returned
+   * This prevents the list jumping around while models are returned.
+   * We also use a hashmap for model IDs to provide O(1) lookup for the users already in the list.
+   */
+  private results: Record<string, Map<string, Model>> = {};
+  public typed: string | null = null;
+  private searched: string[] = [];
+  private dropdownItemAttrs: Record<string, any> = {};
+
+  constructor(dropdownItemAttrs: Record<string, any>) {
+    this.dropdownItemAttrs = dropdownItemAttrs;
+  }
+
+  public init(mentionables: MentionableModel[]): void {
+    this.typed = null;
+    this.mentionables = mentionables;
+
+    for (const mentionable of this.mentionables) {
+      this.results[mentionable.type()] = new Map(mentionable.initialResults().map((result) => [result.id() as string, result]));
+    }
+  }
+
+  /**
+   * Don't send API calls searching for models until at least 2 characters have been typed.
+   * This focuses the mention results on models already loaded.
+   */
+  public readonly search = throttle(250, async (): Promise<void> => {
+    if (!this.typed || this.typed.length <= 1) return;
+
+    const typedLower = this.typed.toLowerCase();
+
+    if (this.searched.includes(typedLower)) return;
+
+    for (const mentionable of this.mentionables!) {
+      for (const model of await mentionable.search(typedLower)) {
+        if (!this.results[mentionable.type()].has(model.id() as string)) {
+          this.results[mentionable.type()].set(model.id() as string, model);
+        }
+      }
+    }
+
+    this.searched.push(typedLower);
+
+    return Promise.resolve();
+  });
+
+  public matches(mentionable: MentionableModel, model: Model): boolean {
+    return mentionable.matches(model, this.typed?.toLowerCase() || '');
+  }
+
+  public makeSuggestion(mentionable: MentionableModel, model: Model): Mithril.Children {
+    const content = mentionable.suggestion(model, this.typed!);
+    const replacement = mentionable.replacement(model);
+
+    const { onclick, ...attrs } = this.dropdownItemAttrs;
+
+    return (
+      <MentionsDropdownItem mentionable={mentionable} onclick={() => onclick(replacement)} {...attrs}>
+        {content}
+      </MentionsDropdownItem>
+    );
+  }
+
+  public buildSuggestions(): Mithril.Children {
+    const suggestions: Mithril.Children = [];
+
+    for (const mentionable of this.mentionables!) {
+      if (!mentionable.enabled()) continue;
+
+      let matches = Array.from(this.results[mentionable.type()].values()).filter((model) => this.matches(mentionable, model));
+
+      const max = mentionable.maxStoreMatchedResults();
+      if (max) matches = matches.splice(0, max);
+
+      for (const model of matches) {
+        const dropdownItem = this.makeSuggestion(mentionable, model);
+        suggestions.push(dropdownItem);
+      }
+    }
+
+    return suggestions;
+  }
+}
--- a/extensions/mentions/js/src/forum/mentionables/PostMention.tsx
+++ b/extensions/mentions/js/src/forum/mentionables/PostMention.tsx
@@ -0,0 +1,102 @@
+import app from 'flarum/forum/app';
+import MentionableModel from './MentionableModel';
+import type Post from 'flarum/common/models/Post';
+import type Mithril from 'mithril';
+import usernameHelper from 'flarum/common/helpers/username';
+import avatar from 'flarum/common/helpers/avatar';
+import highlight from 'flarum/common/helpers/highlight';
+import { truncate } from 'flarum/common/utils/string';
+import ReplyComposer from 'flarum/forum/components/ReplyComposer';
+import EditPostComposer from 'flarum/forum/components/EditPostComposer';
+import getCleanDisplayName from '../utils/getCleanDisplayName';
+import type AtMentionFormat from './formats/AtMentionFormat';
+
+export default class PostMention extends MentionableModel<Post, AtMentionFormat> {
+  type(): string {
+    return 'post';
+  }
+
+  /**
+   * If the user is replying to a discussion, or if they are editing a
+   * post, then we can suggest other posts in the discussion to mention.
+   * We will add the 5 most recent comments in the discussion which
+   * match any username characters that have been typed.
+   */
+  initialResults(): Post[] {
+    if (!app.composer.bodyMatches(ReplyComposer) && !app.composer.bodyMatches(EditPostComposer)) {
+      return [];
+    }
+
+    // @ts-ignore
+    const composerAttrs = app.composer.body.attrs;
+    const composerPost = composerAttrs.post;
+    const discussion = (composerPost && composerPost.discussion()) || composerAttrs.discussion;
+
+    return (
+      discussion
+        .posts()
+        // Filter to only comment posts, and replies before this message
+        .filter((post: Post) => post && post.contentType() === 'comment' && (!composerPost || post.number() < composerPost.number()))
+        // Sort by new to old
+        .sort((a: Post, b: Post) => b.createdAt().getTime() - a.createdAt().getTime())
+    );
+  }
+
+  /**
+   * 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
+   */
+  public replacement(post: Post): string {
+    const user = post.user();
+    const cleanText = getCleanDisplayName(user);
+    return this.format.format(cleanText, 'p', post.id());
+  }
+
+  suggestion(model: Post, typed: string): Mithril.Children {
+    const user = model.user() || null;
+    const username = usernameHelper(user);
+
+    if (typed) {
+      username.children = [highlight((username.text ?? '') as string, typed)];
+      delete username.text;
+    }
+
+    return (
+      <>
+        {avatar(user)}
+        {username}
+        {[
+          app.translator.trans('flarum-mentions.forum.composer.reply_to_post_text', { number: model.number() }),
+          ' — ',
+          truncate(model.contentPlain() ?? '', 200),
+        ]}
+      </>
+    );
+  }
+
+  matches(model: Post, typed: string): boolean {
+    const user = model.user();
+    const userMentionable = app.mentionFormats.mentionable('user')!;
+
+    return !typed || (user && userMentionable.matches(user, typed));
+  }
+
+  maxStoreMatchedResults(): number {
+    return 5;
+  }
+
+  /**
+   * Post mention suggestions are only offered from current discussion posts.
+   */
+  search(typed: string): Promise<Post[]> {
+    return Promise.resolve([]);
+  }
+
+  enabled(): boolean {
+    return true;
+  }
+}
--- a/extensions/mentions/js/src/forum/mentionables/TagMention.tsx
+++ b/extensions/mentions/js/src/forum/mentionables/TagMention.tsx
@@ -0,0 +1,65 @@
+import app from 'flarum/forum/app';
+import Badge from 'flarum/common/components/Badge';
+import highlight from 'flarum/common/helpers/highlight';
+import type Tag from 'flarum/tags/common/models/Tag';
+import type Mithril from 'mithril';
+import MentionableModel from './MentionableModel';
+import type HashMentionFormat from './formats/HashMentionFormat';
+
+export default class TagMention extends MentionableModel<Tag, HashMentionFormat> {
+  type(): string {
+    return 'tag';
+  }
+
+  initialResults(): Tag[] {
+    return Array.from(app.store.all<Tag>('tags'));
+  }
+
+  /**
+   * Generates the mention syntax for a tag mention.
+   *
+   * ~tagSlug
+   *
+   * @example <caption>Tag mention</caption>
+   * // ~general
+   * forTag(tag) // Tag display name is 'Tag', tag ID is 5
+   */
+  public replacement(tag: Tag): string {
+    return this.format.format(tag.slug());
+  }
+
+  matches(model: Tag, typed: string): boolean {
+    if (!typed) return false;
+
+    const names = [model.name().toLowerCase()];
+
+    return names.some((name) => name.toLowerCase().substr(0, typed.length) === typed);
+  }
+
+  maxStoreMatchedResults(): null {
+    return null;
+  }
+
+  async search(typed: string): Promise<Tag[]> {
+    return await app.store.find<Tag[]>('tags', { filter: { q: typed }, page: { limit: 5 } });
+  }
+
+  suggestion(model: Tag, typed: string): Mithril.Children {
+    let tagName: Mithril.Children = model.name();
+
+    if (typed) {
+      tagName = highlight(tagName, typed);
+    }
+
+    return (
+      <>
+        <Badge className="Avatar" icon={model.icon()} color={model.color()} type="tag" />
+        <span className="username">{tagName}</span>
+      </>
+    );
+  }
+
+  enabled(): boolean {
+    return 'flarum-tags' in flarum.extensions;
+  }
+}
--- a/extensions/mentions/js/src/forum/mentionables/UserMention.tsx
+++ b/extensions/mentions/js/src/forum/mentionables/UserMention.tsx
@@ -0,0 +1,79 @@
+import app from 'flarum/forum/app';
+import type Mithril from 'mithril';
+import type User from 'flarum/common/models/User';
+import usernameHelper from 'flarum/common/helpers/username';
+import avatar from 'flarum/common/helpers/avatar';
+import highlight from 'flarum/common/helpers/highlight';
+import MentionableModel from './MentionableModel';
+import getCleanDisplayName, { shouldUseOldFormat } from '../utils/getCleanDisplayName';
+import AtMentionFormat from './formats/AtMentionFormat';
+
+export default class UserMention extends MentionableModel<User, AtMentionFormat> {
+  type(): string {
+    return 'user';
+  }
+
+  initialResults(): User[] {
+    return Array.from(app.store.all<User>('users'));
+  }
+
+  /**
+   * 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'
+   */
+  public replacement(user: User): string {
+    if (shouldUseOldFormat()) {
+      const cleanText = getCleanDisplayName(user, false);
+      return this.format.format(cleanText);
+    }
+
+    const cleanText = getCleanDisplayName(user);
+    return this.format.format(cleanText, '', user.id());
+  }
+
+  suggestion(model: User, typed: string): Mithril.Children {
+    const username = usernameHelper(model);
+
+    if (typed) {
+      username.children = [highlight((username.text ?? '') as string, typed)];
+      delete username.text;
+    }
+
+    return (
+      <>
+        {avatar(model)}
+        {username}
+      </>
+    );
+  }
+
+  matches(model: User, typed: string): boolean {
+    if (!typed) return false;
+
+    const names = [model.username(), model.displayName()];
+
+    return names.some((name) => name.toLowerCase().substr(0, typed.length) === typed);
+  }
+
+  maxStoreMatchedResults(): null {
+    return null;
+  }
+
+  async search(typed: string): Promise<User[]> {
+    return await app.store.find<User[]>('users', { filter: { q: typed }, page: { limit: 5 } });
+  }
+
+  enabled(): boolean {
+    return true;
+  }
+}
--- a/extensions/mentions/js/src/forum/mentionables/formats/AtMentionFormat.ts
+++ b/extensions/mentions/js/src/forum/mentionables/formats/AtMentionFormat.ts
@@ -0,0 +1,27 @@
+import MentionFormat from './MentionFormat';
+import type MentionableModel from '../MentionableModel';
+import UserMention from '../UserMention';
+import PostMention from '../PostMention';
+import GroupMention from '../GroupMention';
+
+export default class AtMentionFormat extends MentionFormat {
+  public mentionables: (new (...args: any[]) => MentionableModel)[] = [UserMention, PostMention, GroupMention];
+  protected extendable: boolean = true;
+
+  public trigger(): string {
+    return '@';
+  }
+
+  public queryFromTyped(typed: string): string | null {
+    const matchTyped = typed.match(/^["“]((?:(?!"#).)+)$/);
+
+    return matchTyped ? matchTyped[1] : null;
+  }
+
+  public format(name: string, char: string | null = '', id: string | null = null): string {
+    return {
+      simple: `@${name}`,
+      safe: `@"${name}"#${char}${id}`,
+    }[id ? 'safe' : 'simple'];
+  }
+}
--- a/extensions/mentions/js/src/forum/mentionables/formats/HashMentionFormat.ts
+++ b/extensions/mentions/js/src/forum/mentionables/formats/HashMentionFormat.ts
@@ -0,0 +1,22 @@
+import MentionFormat from './MentionFormat';
+import MentionableModel from '../MentionableModel';
+import TagMention from '../TagMention';
+
+export default class HashMentionFormat extends MentionFormat {
+  public mentionables: (new (...args: any[]) => MentionableModel)[] = [TagMention];
+  protected extendable: boolean = false;
+
+  public trigger(): string {
+    return '#';
+  }
+
+  public queryFromTyped(typed: string): string | null {
+    const matchTyped = typed.match(/^[-_\p{L}\p{N}\p{M}]+$/giu);
+
+    return matchTyped ? matchTyped[1] : null;
+  }
+
+  public format(slug: string): string {
+    return `#${slug}`;
+  }
+}
--- a/extensions/mentions/js/src/forum/mentionables/formats/MentionFormat.ts
+++ b/extensions/mentions/js/src/forum/mentionables/formats/MentionFormat.ts
@@ -0,0 +1,26 @@
+import type MentionableModel from '../MentionableModel';
+import type Model from 'flarum/common/Model';
+
+export default abstract class MentionFormat {
+  protected instances?: MentionableModel[];
+
+  public makeMentionables(): MentionableModel[] {
+    return this.instances ?? (this.instances = this.mentionables.map((Mentionable) => new Mentionable(this)));
+  }
+
+  public getMentionable(type: string): MentionableModel | null {
+    return this.makeMentionables().find((mentionable) => mentionable.type() === type) ?? null;
+  }
+
+  public extend(mentionable: new (...args: any[]) => MentionableModel): void {
+    if (!this.extendable) throw new Error('This mention format does not allow extending.');
+
+    this.mentionables.push(mentionable);
+  }
+
+  abstract mentionables: (new (...args: any[]) => MentionableModel)[];
+  protected abstract extendable: boolean;
+  abstract trigger(): string;
+  abstract queryFromTyped(typed: string): string | null;
+  abstract format(...args: any): string;
+}
--- a/extensions/mentions/js/src/forum/mentionables/formats/MentionFormats.ts
+++ b/extensions/mentions/js/src/forum/mentionables/formats/MentionFormats.ts
@@ -0,0 +1,26 @@
+import AtMentionFormat from './AtMentionFormat';
+import HashMentionFormat from './HashMentionFormat';
+import type MentionFormat from './MentionFormat';
+import MentionableModel from '../MentionableModel';
+
+export default class MentionFormats {
+  protected formats: MentionFormat[] = [new AtMentionFormat(), new HashMentionFormat()];
+
+  public get(symbol: string): MentionFormat | null {
+    return this.formats.find((f) => f.trigger() === symbol) ?? null;
+  }
+
+  public mentionable(type: string): MentionableModel | null {
+    for (const format of this.formats) {
+      const mentionable = format.getMentionable(type);
+
+      if (mentionable) return mentionable;
+    }
+
+    return null;
+  }
+
+  public extend(format: new () => MentionFormat) {
+    this.formats.push(new format());
+  }
+}
--- a/extensions/mentions/js/src/forum/utils/getMentionText.js
+++ b/extensions/mentions/js/src/forum/utils/getMentionText.js
@@ -1,45 +1,21 @@
-import getCleanDisplayName, { shouldUseOldFormat } from './getCleanDisplayName';
+import app from 'flarum/forum/app';

 /**
- * 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 `app.mentionables.get('user').replacement(user)` instead. Will be removed in 2.0.
 */
 export default function getMentionText(user, postId, group) {
  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 app.mentionables.get('user').replacement(user);
  } else if (user !== undefined && postId !== undefined) {
-    // @"Display name"#pPostID
-    const cleanText = getCleanDisplayName(user);
-    return `@"${cleanText}"#p${postId}`;
+    return app.mentionables.get('post').replacement(app.store.getById('posts', postId));
  } else if (group !== undefined) {
-    // @"Name Plural"#gGroupID
-    return `@"${group.namePlural()}"#g${group.id()}`;
-  } else {
-    throw 'No parameters were passed';
+    return app.mentionables.get('group').replacement(group);
  }
+
+  throw 'No parameters were passed';
 }
--- a/extensions/mentions/js/src/forum/utils/reply.js
+++ b/extensions/mentions/js/src/forum/utils/reply.js
@@ -1,12 +1,10 @@
 import app from 'flarum/forum/app';
 import DiscussionControls from 'flarum/forum/utils/DiscussionControls';
 import EditPostComposer from 'flarum/forum/components/EditPostComposer';
-import getMentionText from './getMentionText';

 export function insertMention(post, composer, quote) {
  return new Promise((resolve) => {
-    const user = post.user();
-    const mention = getMentionText(user, post.id()) + ' ';
+    const mention = app.mentionFormats.mentionable('post').replacement(post) + ' ';

    // If the composer is empty, then assume we're starting a new reply.
    // In which case we don't want the user to have to confirm if they
--- a/extensions/mentions/js/src/forum/utils/textFormatter.js
+++ b/extensions/mentions/js/src/forum/utils/textFormatter.js
@@ -20,6 +20,10 @@ export function filterUserMentions(tag) {
  tag.invalidate();
 }

+export function postFilterUserMentions(tag) {
+  tag.setAttribute('deleted', false);
+}
+
 export function filterPostMentions(tag) {
  const post = app.store.getById('posts', tag.getAttribute('id'));

@@ -32,14 +36,16 @@ export function filterPostMentions(tag) {
  }
 }

+export function postFilterPostMentions(tag) {
+  tag.setAttribute('deleted', false);
+}
+
 export function filterGroupMentions(tag) {
  if (app.session?.user?.canMentionGroups()) {
    const group = app.store.getById('groups', tag.getAttribute('id'));

    if (group) {
      tag.setAttribute('groupname', extractText(group.namePlural()));
-      tag.setAttribute('icon', group.icon());
-      tag.setAttribute('color', group.color());

      return true;
    }
@@ -47,3 +53,38 @@ export function filterGroupMentions(tag) {

  tag.invalidate();
 }
+
+export function postFilterGroupMentions(tag) {
+  if (app.session?.user?.canMentionGroups()) {
+    const group = app.store.getById('groups', tag.getAttribute('id'));
+
+    tag.setAttribute('color', group.color());
+    tag.setAttribute('icon', group.icon());
+    tag.setAttribute('deleted', false);
+  }
+}
+
+export function filterTagMentions(tag) {
+  if ('flarum-tags' in flarum.extensions) {
+    const model = app.store.getBy('tags', 'slug', tag.getAttribute('slug'));
+
+    if (model) {
+      tag.setAttribute('id', model.id());
+      tag.setAttribute('tagname', model.name());
+
+      return true;
+    }
+  }
+
+  tag.invalidate();
+}
+
+export function postFilterTagMentions(tag) {
+  if ('flarum-tags' in flarum.extensions) {
+    const model = app.store.getBy('tags', 'slug', tag.getAttribute('slug'));
+
+    tag.setAttribute('icon', model.icon());
+    tag.setAttribute('color', model.color());
+    tag.setAttribute('deleted', false);
+  }
+}
--- a/extensions/mentions/js/tsconfig.json
+++ b/extensions/mentions/js/tsconfig.json
@@ -10,6 +10,7 @@
    "declarationDir": "./dist-typings",
    "paths": {
      "flarum/*": ["../../../framework/core/js/dist-typings/*"],
+      "flarum/tags/*": ["../../tags/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.