Render Component in Widget

Development

AI-generated summary

On a Discourse forum, a user asked how to insert a custom component called TopicNotificationsButton into the post-body widget. Another user provided a code sample showing how to register a widget shim and render a Glimmer component inside an existing widget. The code uses the plugin API to decorate the post-body widget and attaches a custom widget that renders the TopicNotificationsButton component, passing in the original widget attributes. This allows custom components to be rendered inside existing widgets on the forum. /t/-/269771

1

Please, how would I go about inserting a Component in a particular widget. What I am interested in is placing the TopicNotificationsButton component in the “post-body” widget.

I would appreciate the assistance immensely.

2

We’ve got a shim that can do this… in a theme you’d want to add a file like this within the javascripts/discourse/api-initializers directory…

import { withPluginApi } from "discourse/lib/plugin-api";
import { registerWidgetShim } from "discourse/widgets/render-glimmer";
import { hbs } from "ember-cli-htmlbars";

export default {
  name: "unique-customization-name",

  initialize() {
    withPluginApi("0.1", (api) => {
      api.decorateWidget(`post-body:after`, (decorate) => {
        const attrs = decorate.attrs;
        return decorate.widget.attach("custom-widget-name", { attrs });
      });

      registerWidgetShim(
        "custom-widget-name",
        "div.custom-widget-name",
        hbs`<ComponentName @postAttrs={{@data.attrs}} />`
      );
    });
  },
};