HTML in site settings field for a plugin

dev
1

I’m trying to figure out how to have some custom HTML added to a plugin setting and then display that HTML safely in a widget.

My widget code is the following:

import { createWidget } from 'discourse/widgets/widget';
import { h } from 'virtual-dom';

createWidget('sidebar-custom-content', {
  tagName: 'div.sidebar-custom-content',

  html(attrs) {
    return h('div', Discourse.SiteSettings.sidebar_custom_content);
  },
});

and the plugin settings.yml has this:

  sidebar_custom_content:
    type: text
    default: ''
    client: true

As it is, if I enter HTML in the setting field, it gets output as regular text.

2

Found the solution to my own question. Replace this line:
return h('div', Discourse.SiteSettings.sidebar_custom_content);
with
return h('div', {innerHTML: Discourse.SiteSettings.sidebar_custom_content});

4 Likes
3

I’m surprised this works! From what I saw in the virtual dom library that might break things. The way we do it is like this:

html(attrs) {
  return new RawHtml({ html: `<div>${this.siteSettings.sidebar_custom_content}</div>` });
}

Of course you have to import RawHtml from 'discourse/widgets/raw-html'; too.

2 Likes