Javascript HTML - widget

Return a widget:

What you could do is return your own custom widget to api.decorateWidget, which will give you a lot more control in terms of applying attributes, state, actions, etc.

So you could do:

api.decorateWidget('menu-links:before', helper => {
   return helper.widget.attach("custom-menu-links");
});

Then inside javascripts/discourse/widgets/custom-menu-links.js, create a widget using the createWidget helper:

import { createWidget } from 'discourse/widgets/widget';

createWidget('custom-menu-links', {
...
});

Take a look at this topic to learn some of the features of Widgets:

I used widgets quite a bit in my dropdown header theme component, you might find some of the code helpful.

Adding target=“_blank”

You add it to the attributes object:

      return helper.h('a.google',
        {
          attributes: {
            href: "https://google.com",
            target: "_blank",
            title: "Google"
          },
        }
        ...
      );
2 Likes