# Dialog modal HTML support

**URL:** https://meta.discourse.org/t/dialog-modal-html-support/248361
**Category:** UX
**Created:** [December 9, 2022, 8:36am UTC](https://meta.discourse.org/t/dialog-modal-html-support/248361 "2022-12-09T08:36:50Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [December 9, 2022, 8:36am UTC](https://meta.discourse.org/t/dialog-modal-html-support/248361/1 "2022-12-09T08:36:50Z")

</div>

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.  
 ![Screenshot 2022-12-09 at 9.09.29](https://global.discourse-cdn.com/meta/original/4X/f/f/c/ffcab883e69336067232f07f7e8c9f474f30b91e.png)

The HTML works fine on the banner

 ![Screenshot 2022-12-09 at 9.15.43](https://global.discourse-cdn.com/meta/original/4X/a/d/a/adafe3bc9ef620ea2d007e862edeba34ed9c0e7d.png)

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

 ![Screenshot 2022-12-09 at 9.17.25](https://global.discourse-cdn.com/meta/original/4X/b/7/7/b77987623aa03ad5fe55c65eeb0c7d6eff25c60b.png)

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

Thank you 🙂

---

<div class="post-metadata">

### Author: ![TimJensen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/timjensen/32/543315_2.png) [@TimJensen](https://meta.discourse.org/u/TimJensen)
#### Post date: [December 15, 2022, 3:25pm UTC](https://meta.discourse.org/t/dialog-modal-html-support/248361/4 "2022-12-15T15:25:02Z")

</div>

@pmusaraj provided a solution that supports HTML content [here](https://meta.discourse.org/t/bootbox-is-now-deprecated/244902/7).

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [December 15, 2022, 4:18pm UTC](https://meta.discourse.org/t/dialog-modal-html-support/248361/5 "2022-12-15T16:18:16Z")

</div>

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.

```javascript
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();
            }
          },
        },
      });
    });
  },
};

```

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [January 24, 2023, 8:45am UTC](https://meta.discourse.org/t/dialog-modal-html-support/248361/6 "2023-01-24T08:45:30Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [January 24, 2023, 9:25am UTC](https://meta.discourse.org/t/dialog-modal-html-support/248361/7 "2023-01-24T09:25:43Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [January 24, 2023, 10:10am UTC](https://meta.discourse.org/t/dialog-modal-html-support/248361/8 "2023-01-24T10:10:48Z")

</div>

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!

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [January 24, 2023, 10:21am UTC](https://meta.discourse.org/t/dialog-modal-html-support/248361/9 "2023-01-24T10:21:31Z")

</div>

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

```plaintext
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.

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [January 24, 2023, 10:53am UTC](https://meta.discourse.org/t/dialog-modal-html-support/248361/10 "2023-01-24T10:53:52Z")

</div>

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 🔽

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

```

* * *

This should work in `Header` to support HTML in dialog. 🙂

```javascript
<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>

```

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [January 24, 2023, 11:05am UTC](https://meta.discourse.org/t/dialog-modal-html-support/248361/11 "2023-01-24T11:05:43Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [January 24, 2023, 11:29am UTC](https://meta.discourse.org/t/dialog-modal-html-support/248361/12 "2023-01-24T11:29:06Z")

</div>

> [@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](https://meta.discourse.org/t/dialog-modal-html-support/248361/10) 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.

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [January 24, 2023, 12:43pm UTC](https://meta.discourse.org/t/dialog-modal-html-support/248361/13 "2023-01-24T12:43:18Z")

</div>

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 :facepalm:

ie

To participate “markdown”  
To participate “hmtl”

Thank you very kindly for helping to enlighten me

Dan

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [February 17, 2023, 4:24pm UTC](https://meta.discourse.org/t/dialog-modal-html-support/248361/14 "2023-02-17T16:24:07Z")

</div>

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](https://github.com/discourse/discourse/pull/20349)

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [February 20, 2023, 1:00pm UTC](https://meta.discourse.org/t/dialog-modal-html-support/248361/15 "2023-02-20T13:00:26Z")

</div>

This topic was automatically closed after 2 days. New replies are no longer allowed.
