Triggering a function whenever the category is changed within the composer

Dev
1

I may be missing something obvious here so I apologize in advance if that’s the case.

My plugin has a custom setting for each category, which is used to show/hide a toggle switch in the composer. The toggle switch is set up in a glimmer component, which is called by an initializer to render in the composer-fields plugin outlet.

My goal is to have the composer show/hide the toggle switch whenever the category is changed within the composer, depending on the value of the custom setting tied to that category.

Is it possible to add an observer on the outletArgs of a plugin outlet? The composer model is set in the outletArgs, so my thinking was to set the observer on the categoryId through that. Then I would run a function to check the value of the custom setting in the category. But I’m having trouble with setting up the observer. It could be that I’m setting it up incorrectly, I’m somewhat new to EmberJS.

Or is there a different way to accomplish this?

For context, I am running on Discourse v3.4.7 currently.

Thanks in advance!

2

I think GitHub - discourse/discourse-custom-composer-placeholders may work as an example of how to do that.
It changes the placeholder in the composer based on the category and also works when you change it.

3

Thank you for the reply.

Tried this solution out but unfortunately it looks like the version I’m building on has an older list of initialized transformers, which happens to be missing the composer-editor-reply-placeholder.

For a bit more context, I’m refactoring plugin features into using Glimmer components after the deprecation of the registerConnectorClass API. The code below is what was set up originally.

export default {
  initialize(container) {
    withPluginApi("1.6.0", api => {
      api.registerConnectorClass("composer-fields", "handlebars-template-name", {
        setupComponent(attrs, component) {
          const model = attrs.model;
          const controller = api.container.lookup("controller:composer");
          if (controller) {
            controller.addObserver("model.categoryId", this, function () {

              // logic to set values for showToggle & isRestricted

              let props = {
                showField: showToggle && isRestricted,
              }
              component.setProperties(Object.assign(props));
            })
          }
        }
      }

Is there another way to get this same functionality from a glimmer component? Specifically observing changes on the model and/or categoryId.