discourse-custom-wizard/assets/javascripts/discourse/mixins/notice-message.js.es6

import Mixin from "@ember/object/mixin";
import { bind, scheduleOnce } from "@ember/runloop";
import { cookAsync } from "discourse/lib/text";
import { createPopper } from "@popperjs/core";

export default Mixin.create({
  showCookedMessage: false,

  didReceiveAttrs() {
    const message = this.notice.message;
    cookAsync(message).then((cooked) => {
      this.set("cookedMessage", cooked);
    });
  },

  createMessageModal() {
    let container = this.element.querySelector(".notice-message");
    let modal = this.element.querySelector(".cooked-notice-message");

    this._popper = createPopper(container, modal, {
      strategy: "absolute",
      placement: "bottom-start",
      modifiers: [
        {
          name: "preventOverflow",
        },
        {
          name: "offset",
          options: {
            offset: [0, 5],
          },
        },
      ],
    });
  },

  didInsertElement() {
    $(document).on("click", bind(this, this.documentClick));
  },

  willDestroyElement() {
    $(document).off("click", bind(this, this.documentClick));
  },

  documentClick(event) {
    if (this._state === "destroying") {
      return;
    }

    if (
      !event.target.closest(
        `[data-notice-id="${this.notice.id}"] .notice-message`
      )
    ) {
      this.set("showCookedMessage", false);
    }
  },

  actions: {
    toggleCookedMessage() {
      this.toggleProperty("showCookedMessage");

      if (this.showCookedMessage) {
        scheduleOnce("afterRender", this, this.createMessageModal);
      }
    },
  },
});