UX: Apply decorators to small action posts (#24397)

app/assets/javascripts/discourse/app/widgets/post-small-action.js

@@ -2,9 +2,10 @@ import { computed } from "@ember/object";
 import { htmlSafe } from "@ember/template";
 import { h } from "virtual-dom";
 import { autoUpdatingRelativeAge } from "discourse/lib/formatter";
-import { decorateHashtags } from "discourse/lib/hashtag-autocomplete";
 import { userPath } from "discourse/lib/url";
+import DecoratorHelper from "discourse/widgets/decorator-helper";
 import { avatarFor } from "discourse/widgets/post";
+import PostCooked from "discourse/widgets/post-cooked";
 import RawHtml from "discourse/widgets/raw-html";
 import { createWidget } from "discourse/widgets/widget";
 import { iconNode } from "discourse-common/lib/icon-library";
@@ -133,7 +134,6 @@ export default createWidget("post-small-action", {
   html(attrs) {
     const contents = [];
     const buttons = [];
-    const customMessage = [];
 
     contents.push(
       avatarFor.call(this, "small", {
@@ -189,17 +189,6 @@ export default createWidget("post-small-action", {
       );
     }
 
-    if (!attrs.actionDescriptionWidget && attrs.cooked) {
-      const fragment = document.createElement("div");
-      fragment.innerHTML = attrs.cooked;
-      decorateHashtags(fragment, this.site);
-      customMessage.push(
-        new RawHtml({
-          html: `<div class='small-action-custom-message'>${fragment.innerHTML}</div>`,
-        })
-      );
-    }
-
     return [
       h("span.tabLoc", {
         attributes: { "aria-hidden": true, tabindex: -1 },
@@ -208,7 +197,15 @@ export default createWidget("post-small-action", {
       h("div.small-action-desc", [
         h("div.small-action-contents", contents),
         h("div.small-action-buttons", buttons),
-        customMessage,
+        !attrs.actionDescriptionWidget && attrs.cooked
+          ? h("div.small-action-custom-message", [
+              new PostCooked(
+                attrs,
+                new DecoratorHelper(this),
+                this.currentUser
+              ),
+            ])
+          : null,
       ]),
     ];
   },

plugins/discourse-local-dates/spec/system/post_small_action_spec.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+describe "Post small actions", type: :system do
+  fab!(:current_user) { Fabricate(:user) }
+  fab!(:topic) { Fabricate(:topic) }
+  fab!(:post) { Fabricate(:post, topic: topic) }
+  let(:topic_page) { PageObjects::Pages::Topic.new }
+
+  before { sign_in(current_user) }
+
+  it "applies local date decorations" do
+    post =
+      Fabricate(
+        :small_action,
+        raw: "[date=2023-11-15 timezone=\"America/Los_Angeles\"] a date",
+        topic: topic,
+      )
+
+    topic_page.visit_topic(topic)
+    expect(topic_page).to have_post_number(post.post_number)
+
+    expect(page).to have_css(".small-action-custom-message .discourse-local-date.cooked-date")
+  end
+end

spec/system/post_small_action_spec.rb

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+
+describe "Post small actions", type: :system do
+  fab!(:admin) { Fabricate(:admin) }
+  fab!(:topic) { Fabricate(:topic) }
+  fab!(:first_post) do
+    Fabricate(:post, topic: topic, raw: "This is a special post with special stuff")
+  end
+  let(:topic_page) { PageObjects::Pages::Topic.new }
+  let(:composer) { PageObjects::Components::Composer.new }
+
+  before do
+    sign_in(admin)
+    Jobs.run_immediately!
+  end
+
+  it "applies search highlight decorations" do
+    post = Fabricate(:small_action, raw: "This small post is also special", topic: topic)
+
+    topic_page.visit_topic(topic)
+    expect(topic_page).to have_post_number(post.post_number)
+
+    find(".search-dropdown").click
+    find("#search-term").fill_in(with: "special")
+
+    find(".search-menu-assistant-item:nth-child(2)").click
+
+    # has highlighting for the regular post
+    expect(page).to have_css(".topic-post.regular .highlighted")
+
+    # has highlighting for the small action post
+    expect(page).to have_css(".small-action .highlighted")
+  end
+
+  it "applies lightbox decorations" do
+    post = Fabricate(:small_action, raw: "Enjoy this", topic: topic, action_code: "closed.enabled")
+
+    topic_page.visit_topic(topic)
+    expect(topic_page).to have_post_number(post.post_number)
+
+    find(".small-action-buttons .small-action-edit").click
+    attach_file file_from_fixtures("2000x2000.png").path do
+      composer.click_toolbar_button("upload")
+    end
+
+    expect(composer).to have_no_in_progress_uploads
+    composer.submit
+
+    expect(page).to have_css(".small-action .lightbox", wait: 5)
+  end
+
+  it "applies animated gif decorations" do
+    post =
+      Fabricate(:small_action, raw: "Enjoy this gif", topic: topic, action_code: "closed.enabled")
+
+    topic_page.visit_topic(topic)
+    expect(topic_page).to have_post_number(post.post_number)
+
+    find(".small-action-buttons .small-action-edit").click
+    attach_file file_from_fixtures("animated.gif").path do
+      composer.click_toolbar_button("upload")
+    end
+
+    expect(composer).to have_no_in_progress_uploads
+    composer.submit
+
+    expect(page).to have_css(".small-action .pausable-animated-image", wait: 5)
+  end
+end