FIX: Restore user-cards in composer preview (#27514)

The ability to display them was lost in 91456ad2cb

app/assets/javascripts/discourse/app/components/d-editor.js

@@ -354,15 +354,17 @@ export default Component.extend(TextareaTextManipulation, {
     if (event.target.tagName === "A") {
       if (event.target.classList.contains("mention")) {
         this.appEvents.trigger(
-          "click.discourse-preview-user-card-mention",
-          $(event.target)
+          "d-editor:preview-click-user-card",
+          event.target,
+          event
         );
       }
 
       if (event.target.classList.contains("mention-group")) {
         this.appEvents.trigger(
-          "click.discourse-preview-group-card-mention-group",
-          $(event.target)
+          "d-editor:preview-click-group-card",
+          event.target,
+          event
         );
       }
 

app/assets/javascripts/discourse/app/components/header/topic/participant.gjs

@@ -22,7 +22,8 @@ export default class Participant extends Component {
     this.appEvents.trigger(
       `topic-header:trigger-${this.args.type}-card`,
       this.args.username,
-      e.target
+      e.target,
+      e
     );
     e.preventDefault();
   }

app/assets/javascripts/discourse/app/mixins/card-contents-base.js

@@ -32,7 +32,6 @@ export default Mixin.create({
   siteSettings: service(),
 
   elementId: null, //click detection added for data-{elementId}
-  triggeringLinkClass: null, //the <a> classname where this card should appear
   _showCallback: null, //username - load up data for when show is called
 
   visible: false,
@@ -85,6 +84,7 @@ export default Mixin.create({
     });
 
     document.querySelector(".card-cloak")?.classList.remove("hidden");
+
     this.appEvents.trigger("user-card:show", { username });
     this._positionCard(target, event);
     this._showCallback(username).then((user) => {
@@ -102,9 +102,6 @@ export default Mixin.create({
   didInsertElement() {
     this._super(...arguments);
 
-    const previewClickEvent = `click.discourse-preview-${this.elementId}-${this.triggeringLinkClass}`;
-    this.setProperties({ previewClickEvent });
-
     document.addEventListener("mousedown", this._clickOutsideHandler);
     document.addEventListener("keyup", this._escListener);
 
@@ -114,7 +111,11 @@ export default Mixin.create({
         .addEventListener("click", this._cardClickHandler);
     });
 
-    this.appEvents.on(previewClickEvent, this, "_previewClick");
+    this.appEvents.on(
+      `d-editor:preview-click-${this.elementId}`,
+      this,
+      "_previewClick"
+    );
 
     this.appEvents.on(
       `topic-header:trigger-${this.elementId}`,
@@ -167,9 +168,9 @@ export default Mixin.create({
     return false;
   },
 
-  _topicHeaderTrigger(username, target) {
-    this.setProperties({ isDocked: true });
-    return this._show(username, target);
+  _topicHeaderTrigger(username, target, event) {
+    this.set("isDocked", true);
+    return this._show(username, target, event);
   },
 
   @bind
@@ -185,8 +186,8 @@ export default Mixin.create({
     window.removeEventListener(MOBILE_SCROLL_EVENT, this._onScroll);
   },
 
-  _previewClick(target) {
-    return this._show(target.innerText.replace(/^@/, ""), target);
+  _previewClick(target, event) {
+    return this._show(target.innerText.replace(/^@/, ""), target, event);
   },
 
   _positionCard(target, event) {
@@ -271,7 +272,11 @@ export default Mixin.create({
         .removeEventListener("click", this._cardClickHandler);
     });
 
-    this.appEvents.off(this.previewClickEvent, this, "_previewClick");
+    this.appEvents.off(
+      `d-editor:preview-click-${this.elementId}`,
+      this,
+      "_previewClick"
+    );
 
     this.appEvents.off(
       `topic-header:trigger-${this.elementId}`,

app/assets/javascripts/discourse/app/widgets/header-topic-info.js

@@ -51,7 +51,8 @@ createWidget("topic-header-participant", {
     this.appEvents.trigger(
       `topic-header:trigger-${this.attrs.type}-card`,
       this.attrs.username,
-      e.target
+      e.target,
+      e
     );
     e.preventDefault();
   },

spec/system/composer_spec.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+describe "Composer", type: :system do
+  fab!(:user) { Fabricate(:user, refresh_auto_groups: true) }
+  let(:composer) { PageObjects::Components::Composer.new }
+
+  before { sign_in(user) }
+
+  it "displays user cards in preview" do
+    page.visit "/new-topic"
+
+    expect(composer).to be_opened
+
+    composer.fill_content("@#{user.username}")
+    # binding.pry
+    composer.preview.find("a.mention").click
+
+    page.has_css?("#user-card")
+  end
+end