Dialog modal HTML support

[Don]

Hello,

On a category page when user can’t create topic I use a banner text with a link to the topic about trust levels.

The HTML works fine on the banner

But clicking the + New Topic the modal not handle the HTML.

Would be really good if the modal also could handle HTML just like the previously used bootbox modal.

Thank you

[TimJensen]

@pmusaraj provided a solution that supports HTML content here.

[Don]

Hello Tim,

Thanks for the tip I changed this with modifyClass but I think it would be a reasonable change to make this dialog htmlSafe in core since the category banner also handle HTML.

import { htmlSafe } from "@ember/template";

export default {
  name: "dialog-html-support",

  initialize() {
    withPluginApi("0.8.7", (api) => {
      api.modifyClass("component:d-navigation", {
        pluginId: "dialog-html-support",
        
        actions: {
          clickCreateTopicButton() {
            if (this.categoryReadOnlyBanner && !this.hasDraft) {
              this.dialog.alert({
                message: htmlSafe(this.categoryReadOnlyBanner),
              });
            } else {
              this.createTopic();
            }
          },
        },
      });
    });
  },
};

[Heliosurge (Dan DeMontmorency)]

Hi team!

The setting below I would like to request the option to be able to use a link. In my case a Category can be viewed by everyone; however you need to belong to a Group in order to Create and reply to topics.

"Banner text when a user cannot create a topic in this category: "

So I had tried using Text like:

To participate you need to “Apply link to group”.

Unfortunately this setting only supports plain text no links. Could the team consider changing this?

[JammyDodger]

I’ve slipped your post over to this topic to keep the requests for this change together.

[Heliosurge (Dan DeMontmorency)]

Thank you Jammydodger!

Sometimes it can be difficult to realize where best to post things. Discourse is massive and that is not necessarily a bad thing; however can make it at times intimidating for us whom are still relatively new.

However that is where your fantastic team & community more often than now is instrumental in assisting all!

[Heliosurge (Dan DeMontmorency)]

Hi Don & @TimJensen will this solution also fix markdown like in my example below? to use:

To participate in category you need to [Apply](/g/groupname/members).

The code also I presume need to make a theme-component. What section do I need to enter this in?

---

EDiT:
Hmmm… adding a js file atm might be a bit beyond my current skill level. I will require a bit of hand holding to accomplish this with success.

[Don]

Hi Dan,

The banner is support HTML. This topic is about the dialog which show up when you click the Create topic button.

@Heliosurge

will this solution also fix markdown

Nope, it support HTML. Your example would be something like this

To participate in category you need to <a href="/g/groupname/members">Apply</a>.

---

This should work in Header to support HTML in dialog.

<script type="text/discourse-plugin" version="0.8">
  const { htmlSafe } = require("@ember/template");

  api.modifyClass("component:d-navigation", {
    pluginId: "dialog-html-support",
        
    actions: {
      clickCreateTopicButton() {
        if (this.categoryReadOnlyBanner && !this.hasDraft) {
          this.dialog.alert({
            message: htmlSafe(this.categoryReadOnlyBanner),
          });
        } else {
          this.createTopic();
        }
      },
    },
  });
</script>

[Heliosurge (Dan DeMontmorency)]

cool so all I have to do is use html instead of markdown.

So the banner will work if someone tries to reply &/or create new topic within category? Where if I understand correctly your request is relate say to new topic button theme-component?

With your js would you just create a new theme-component & upload the *.js file? Is there any thing else needed in the css etc parts? or will it just work?

And if ibwant dialog prior to link button what eould I be required to do code wise. my apologises still learning

[Don]

@Heliosurge

With your js would you just create a new theme-component & upload the *.js file? Is there any thing else needed in the css etc parts? or will it just work?

Just create a new component in admin and paste the code above in the Common > Header section. It will allow to handle HTML in the modal when you click the New Topic button.

Demo

Without code
As you can see the banner is support HTML but when I click the New Topic button the modal (dialog) is not support it.

---

With code

---

I am not sure what you mean by

@Heliosurge

And if ibwant dialog prior to link button what eould I be required to do code wise.

[Heliosurge (Dan DeMontmorency)]

Thanks for explaining where to add the code for the hmtl fix.

@Don

I am not sure what you mean by

@Heliosurge

And if ibwant dialog prior to link button what eould I be required to do code wise.

Actually your 1st video answers my question perfectly and gives me clarity. The pre dialog text prior to the link button is the same as markdown procedure. ( The first video shows it when it fails without the code in place) I missed it as well in your code example

ie

To participate “markdown”
To participate “hmtl”

Thank you very kindly for helping to enlighten me

Dan

[pmusaraj (Penar Musaraj)]

Apologies for the delay here, folks, this should fix it: FIX: Allow HTML in category read-only dialog by pmusaraj · Pull Request #20349 · discourse/discourse · GitHub